@mgdis/mg-components 6.10.1 → 6.11.0

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

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-CATFkm3O.js');
-var index_es = require('./index.es-DaPqByCe.js');
-var index$1 = require('./index-CL_COdxv.js');
+var index_es = require('./index.es-C-3Gv8Eu.js');
+var index$1 = require('./index-B_WwxtkQ.js');
 var events_utils = require('./events.utils-D5SAtkpQ.js');
 var mgInput_conf = require('./mg-input.conf-WTsvDfpC.js');
 
@@ -76,7 +76,7 @@ const MgActionMore = class {
          ************/
         this.name = 'mg-action-more';
         this.classBase = 'mg-c-action-more';
-        this.mgPopoverIdentifier = index_es.Zt(this.name);
+        this.mgPopoverIdentifier = index_es.Dt(this.name);
         /**
          * Define button properties
          */
@@ -123,15 +123,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index_es.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: ${index_es.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: ${index_es.Yt(newValue)}.`);
         }
     }
     validateIcon(newValue) {
         if (newValue && !isMgActionMoreIcon(newValue)) {
-            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
             this.icon = { icon: 'ellipsis' };
@@ -139,7 +139,7 @@ const MgActionMore = class {
     }
     validateButton(newValue) {
         if (newValue && !isMgActionMoreButton(newValue)) {
-            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateDisplayChevron(newValue) {
@@ -216,21 +216,21 @@ const MgBadge = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-badge']);
+        this.classCollection = new index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateLabel(newValue) {
         if (!index_es.qe(newValue)) {
-            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -323,7 +323,7 @@ const MgButton = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-button']);
+        this.classCollection = new index_es.qt(['mg-c-button']);
         /**
          * Trigger actions onClick event
          * @param event - click event
@@ -381,7 +381,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -393,7 +393,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -466,7 +466,7 @@ const MgButton = class {
      * Add listners
      */
     componentDidLoad() {
-        index_es.Qt(() => {
+        index_es.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;
@@ -483,7 +483,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (index.h(index.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 }, index.h("div", { key: 'e4fc763ce10eb5958ebd9330f778380bb93100d6', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: '6796487254b12a33339ac6b3a5f6c67000d8fe04', icon: "loader", spin: true }), index.h("div", { key: '469136ef8519825ebff3e6ee2bfe8c55e64a807d', class: "mg-c-button__content" }, index.h("slot", { key: 'eda514d71eaab7f7cf5cd3a65b64ffb6c9ed2e02' })))));
+        return (index.h(index.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 }, index.h("div", { key: 'cf20f508a4ee0e9674fde4bc5307f2e16cf2894e', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: 'b378739392aa99ed04299c702aed4d87a2e81a72', icon: "loader", spin: true }), index.h("div", { key: '02dcdb164ca3963c0f1740fd3742d178c2b951b5', class: "mg-c-button__content" }, index.h("slot", { key: 'fb29ea2b9a9a9bf3d22b283227fe60b7a0ce697e' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -527,13 +527,13 @@ const MgCharacterLeft = class {
         this.characters = '';
     }
     watchIdentifier(newValue) {
-        if (newValue !== undefined && !index_es.Dt(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (newValue !== undefined && !index_es.Bt(newValue)) {
+            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     /*************
@@ -562,7 +562,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) {
@@ -600,6 +600,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 || !index_es.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();
@@ -611,7 +615,7 @@ const MgDetails = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("details", { key: 'e43aa4f4262d7006b9fdd0e75666649498081d55', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: '050d5c0a645a017aaa784a4034201122b27238f0' }, index.h("slot", { key: 'e0d7ed83952bdd74a23ecabe93c4d0c922cda286', name: "summary" }), index.h("span", { key: '27238089072f0f0ca8f3263ec39e41291ab89907', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: 'f1702911d70e2a95ecaac17a7a0c43a075ea8c18', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '6854f4ecd77d04e297b807060a0d064401d6537f', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: '85e57b346ff8327d31f92a1e86c42fd8f131f6dc', class: "mg-c-details__details" }, index.h("slot", { key: 'bd016ab29d695bb1ccd99b9fd402ed23bbdc19ea', name: "details" }))));
+        return (index.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) }, index.h("summary", { key: '4947a7a5d1971feb4f7b27c5bc161b0599b640c1' }, index.h("slot", { key: '6505ae282f5cc53ac3b5f924caee6347e958b03f', name: "summary" }), index.h("span", { key: 'fcf391abf5a99f3ff9f5a006698e9ef646ca159e', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: '5d02b782ce1f762612ae5881cd85d65680addaa9', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '0dbd12e051714756a633146a99303088cbab4fa7', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: '607ae907cce5efd3fa56d9ed62cf9f4091abf262', class: "mg-c-details__details" }, index.h("slot", { key: '0e1eda9ec27c618aee1929727676d9450e457b42', name: "details" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -671,7 +675,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 = index_es.Zt('mg-form');
+        this.identifier = index_es.Dt('mg-form');
         /**
          * Input name
          * If not set the value equals the identifier
@@ -692,7 +696,7 @@ const MgForm = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-form']);
+        this.classCollection = new index_es.qt(['mg-c-form']);
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -780,18 +784,18 @@ const MgForm = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!index_es.Dt(newValue)) {
-            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (!index_es.Bt(newValue)) {
+            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateRequiredMessage(newValue) {
         if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     handlelabelOnTop(newValue) {
@@ -925,7 +929,7 @@ const MgIcon = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-icon']);
+        this.classCollection = new index_es.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
@@ -956,7 +960,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -972,7 +976,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -984,7 +988,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: ${index_es.Xt(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
             else {
                 this.setDefaultVariantStyle();
                 if (oldValue !== undefined)
@@ -996,7 +1000,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: ${index_es.Xt(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
             else {
                 if (oldValue !== undefined)
                     this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
@@ -1066,11 +1070,11 @@ const MgIllustratedMessage = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-illustrated-message']);
+        this.classCollection = new index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -1081,7 +1085,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else if (newValue === 'horizontal') {
             this.classCollection.add('mg-c-illustrated-message--direction-horizontal');
@@ -1104,7 +1108,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 && !index_es.Bt(slottedTitle, headingTags)) {
+        else if (slottedTitle !== null && !index_es.Jt(slottedTitle, headingTags)) {
             throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
         else if (slottedIllustrations.length !== 1) {
@@ -1190,10 +1194,10 @@ const MgInput = class {
     }
     watchIdentifier(newValue) {
         if (!index_es.qe(newValue)) {
-            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index_es.Yt(newValue)}.`);
         }
-        else if (!index_es.Dt(newValue)) {
-            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        else if (!index_es.Bt(newValue)) {
+            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             this.helpTextId = `${this.identifier}-help-text`;
@@ -1215,7 +1219,7 @@ const MgInput = class {
     }
     watchTooltipPosition(newValue) {
         if (!mgInput_conf.tooltipPositions.includes(newValue)) {
-            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${mgInput_conf.tooltipPositions.join(', ')}. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${mgInput_conf.tooltipPositions.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchErrorMessage(newValue) {
@@ -1285,7 +1289,7 @@ const MgInput = class {
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
         if (!index_es.qe(this.label)) {
-            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index_es.Xt(this.label)}.`);
+            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index_es.Yt(this.label)}.`);
         }
         else {
             this.watchAriaDescribedbyIDs();
@@ -1489,7 +1493,7 @@ const MgInputCheckbox = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht([this.baseClassName, mgInput_conf.classFieldset]);
+        this.classCollection = new index_es.qt([this.baseClassName, mgInput_conf.classFieldset]);
         /**
          * Formated value to display in list
          */
@@ -1607,7 +1611,7 @@ const MgInputCheckbox = class {
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => index_es.Yt(item.title).includes(index_es.Yt(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => index_es.Vt(item.title).includes(index_es.Vt(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -1701,12 +1705,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateType(newValue) {
         if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else if (newValue === undefined) {
             this.mode = 'auto';
@@ -2124,13 +2128,13 @@ const MgInputDate = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--date']);
+        this.classCollection = new index_es.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) => index_es.qe(value) && index_es.Ct.test(value);
+        this.isValidPattern = (value) => index_es.qe(value) && index_es.Pt.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -2150,17 +2154,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}', index_es.Pt(index_es.cr(new Date('2025-12-24')), this.systemLocale));
+            text = text.replace('{pattern}', this.renderPattern()).replace('{date}', index_es.Zt(index_es.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}', index_es.Pt(this.min, this.systemLocale)).replace('{max}', index_es.Pt(this.max, this.systemLocale));
+                rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', index_es.Zt(this.min, this.systemLocale)).replace('{max}', index_es.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}', index_es.Pt(this.min, this.systemLocale));
+                rangeMessage = this.messages.input.date.helpText.min.replace('{min}', index_es.Zt(this.min, this.systemLocale));
             }
             else if (this.max !== DEFAULT_MAX_DATE) {
-                rangeMessage = this.messages.input.date.helpText.max.replace('{max}', index_es.Pt(this.max, this.systemLocale));
+                rangeMessage = this.messages.input.date.helpText.max.replace('{max}', index_es.Zt(this.max, this.systemLocale));
             }
             // Combine custom helpText with range message if both exist
             if (text !== undefined && rangeMessage !== undefined) {
@@ -2257,15 +2261,15 @@ const MgInputDate = class {
                 // min, max & minMax
                 else if (['min', 'max', 'minMax'].includes(inputError)) {
                     this.errorMessage = this.messages.input.date.helpText[inputError]
-                        .replace('{min}', index_es.Pt(this.min, this.systemLocale))
-                        .replace('{max}', index_es.Pt(this.max, this.systemLocale));
+                        .replace('{min}', index_es.Zt(this.min, this.systemLocale))
+                        .replace('{max}', index_es.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}', index_es.Pt(index_es.cr(new Date('2025-12-24')), this.systemLocale));
+                        .replace('{date}', index_es.Zt(index_es.ur(new Date('2025-12-24')), this.systemLocale));
                 }
             }
         };
@@ -2274,7 +2278,7 @@ const MgInputDate = class {
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = index_es.lr(this.systemLocale);
+            let patternLocal = index_es.fr(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -2291,7 +2295,7 @@ const MgInputDate = class {
         }
         else if (newValue && !index_es.qe(newValue)) {
             // check value validity
-            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else if (newValue === null || this.isValidPattern(newValue)) {
             this.valueChange.emit(newValue);
@@ -2308,7 +2312,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     handleValidityChange(newValue, _oldValue, prop) {
@@ -2424,7 +2428,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, index_es.Pt(this.value, this.locale))) : (index.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 (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, index_es.Zt(this.value, this.locale))) : (index.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;
             } }))));
@@ -2515,7 +2519,7 @@ const MgInputNumeric = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--numeric']);
+        this.classCollection = new index_es.qt(['mg-c-input--numeric']);
         /**
          * Handle input event
          */
@@ -2558,7 +2562,7 @@ const MgInputNumeric = class {
          * @param value - value to format
          * @returns formatted value according to locale
          */
-        this.formatErrorValue = (value) => index_es.ur(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
+        this.formatErrorValue = (value) => index_es.gr(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -2613,13 +2617,13 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return index_es.ur(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return index_es.gr(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return index_es.fr(value, this.locale, this.currency);
+                    return index_es.pr(value, this.locale, this.currency);
                 case 'percent':
-                    return index_es.pr(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return index_es.$r(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'unit':
-                    return index_es.gr(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return index_es.dr(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'none':
                     return value.toString();
             }
@@ -2734,22 +2738,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchFormat(newValue) {
         if (!formats.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateIntegerLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index_es.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: ${index_es.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: ${index_es.Yt(newValue)}.`);
         }
     }
     /**
@@ -2956,7 +2960,7 @@ const MgInputPassword = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--password']);
+        this.classCollection = new index_es.qt(['mg-c-input--password']);
         /**
          * Indicates if password is displayed or not
          */
@@ -3207,7 +3211,7 @@ const MgInputRadio = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--radio', mgInput_conf.classFieldset]);
+        this.classCollection = new index_es.qt(['mg-c-input--radio', mgInput_conf.classFieldset]);
         /**
          * Handle input event
          * @param event - input event
@@ -3258,7 +3262,7 @@ const MgInputRadio = class {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     watchValue(newValue) {
         var _a;
-        if (index_es.qt(this.items) && typeof newValue === 'string') {
+        if (index_es.Gt(this.items) && typeof newValue === 'string') {
             this.readonlyValue = newValue;
         }
         else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
@@ -3272,10 +3276,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index_es.Yt(newValue)}.`);
         }
         // String array
-        else if (index_es.qt(newValue)) {
+        else if (index_es.Gt(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
@@ -3283,7 +3287,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: ${index_es.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: ${index_es.Yt(newValue)}.`);
         }
     }
     watchInputVerticalList(newValue) {
@@ -3513,48 +3517,35 @@ const MgInputSelect = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--select']);
+        this.classCollection = new index_es.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 (index_es.qt(this.items) && this.items.includes(this.input.value)) {
-                this.setValue(this.input.value);
+            else if (index_es.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
          */
@@ -3601,7 +3592,7 @@ const MgInputSelect = class {
     }
     validateValue(newValue) {
         var _a, _b;
-        if (index_es.qt(this.items) && typeof newValue === 'string') {
+        if (index_es.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)) {
@@ -3610,6 +3601,12 @@ const MgInputSelect = class {
         else {
             this.readonlyValue = null;
         }
+        setTimeout(() => {
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }, 0);
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
@@ -3618,9 +3615,10 @@ const MgInputSelect = class {
             this.options = [];
         }
         // String array
-        else if (index_es.qt(newValue)) {
-            if (typeof this.value === 'string')
+        else if (index_es.Gt(newValue)) {
+            if (typeof this.value === 'string') {
                 this.valueExist = newValue.includes(this.value);
+            }
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -3636,7 +3634,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: ${index_es.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: ${index_es.Yt(newValue)}.`);
         }
     }
     watchReadonly(newValue) {
@@ -3730,8 +3728,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 *
@@ -3765,7 +3764,7 @@ const MgInputSelect = class {
      * @returns HTML Element
      */
     render() {
-        return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.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 (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.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
@@ -3804,7 +3803,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) => index_es.qt(options) || (Array.isArray(options) && options.every(isOption$1));
+const isDatalistOptions = (options) => index_es.Gt(options) || (Array.isArray(options) && options.every(isOption$1));
 const MgInputText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -3869,7 +3868,7 @@ const MgInputText = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--text']);
+        this.classCollection = new index_es.qt(['mg-c-input--text']);
         /**
          * Validate pattern configuration
          */
@@ -3895,7 +3894,7 @@ const MgInputText = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new index_es.Ht(this.classCollection.classes);
+            this.classCollection = new index_es.qt(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3903,7 +3902,7 @@ const MgInputText = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new index_es.Ht(this.classCollection.classes);
+            this.classCollection = new index_es.qt(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -3998,7 +3997,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchReadonly(newValue) {
@@ -4239,7 +4238,7 @@ const MgInputTextarea = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--textarea']);
+        this.classCollection = new index_es.qt(['mg-c-input--textarea']);
         /**
          * Handle input event
          */
@@ -4255,7 +4254,7 @@ const MgInputTextarea = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new index_es.Ht(this.classCollection.classes);
+            this.classCollection = new index_es.qt(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -4263,7 +4262,7 @@ const MgInputTextarea = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new index_es.Ht(this.classCollection.classes);
+            this.classCollection = new index_es.qt(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -4342,7 +4341,7 @@ const MgInputTextarea = class {
     }
     validatePattern(newValue) {
         if (newValue !== undefined && !(index_es.qe(this.pattern) && index_es.qe(this.patternErrorMessage))) {
-            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index_es.Xt(this.pattern)}'" and "patternErrorMessage='${index_es.Xt(this.patternErrorMessage)}'".`);
+            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index_es.Yt(this.pattern)}'" and "patternErrorMessage='${index_es.Yt(this.patternErrorMessage)}'".`);
         }
     }
     validatecharacterLeftHide(newValue) {
@@ -4489,8 +4488,8 @@ const MgInputTitle = class {
         if (!index_es.qe(newValue)) {
             throw new Error('<mg-input-title> prop "identifier" is required.');
         }
-        else if (!index_es.Dt(newValue)) {
-            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        else if (!index_es.Bt(newValue)) {
+            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateIsLegend(newValue) {
@@ -4578,7 +4577,7 @@ const MgInputToggle = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--toggle']);
+        this.classCollection = new index_es.qt(['mg-c-input--toggle']);
         /**
          * Checked internal value
          */
@@ -4639,10 +4638,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${index_es.Yt(newValue)}.`);
         }
         // String array
-        else if (index_es.qt(newValue)) {
+        else if (index_es.Gt(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -4650,7 +4649,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchIsOnOff(newValue) {
@@ -4880,17 +4879,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${index_es.Yt(newValue)}.`);
     }
     /*************
      * Lifecycle *
@@ -5023,12 +5022,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             this.updateMenuItems();
@@ -5044,7 +5043,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     /**
@@ -5142,7 +5141,7 @@ const MgMenuItem = class {
         /**
          * Identifier is used to control mg-popover
          */
-        this.identifier = index_es.Zt('mg-menu-item');
+        this.identifier = index_es.Dt('mg-menu-item');
         /**
          * Define menu-item status.
          */
@@ -5161,7 +5160,7 @@ const MgMenuItem = class {
         /**
          * Component button classes
          */
-        this.navigationButtonClassList = new index_es.Ht([this.navigationButton]);
+        this.navigationButtonClassList = new index_es.qt([this.navigationButton]);
         /**
          * Does component have children.
          */
@@ -5320,8 +5319,8 @@ const MgMenuItem = class {
         this.renderSlot = () => index.h("slot", null);
     }
     watchIdentifier(newValue) {
-        if (!index_es.Dt(newValue)) {
-            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (!index_es.Bt(newValue)) {
+            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             this.popoverIdentifier = `${this.identifier}-popover`;
@@ -5329,7 +5328,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchStatus(newValue, oldValue) {
@@ -5339,7 +5338,7 @@ const MgMenuItem = class {
     }
     watchExpanded(newValue) {
         if (typeof newValue !== 'boolean') {
-            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             this.updateExpanded(newValue);
@@ -5454,7 +5453,7 @@ const MgMenuItem = class {
      * @returns promise process wich emit the 'item-updated' event
      */
     componentShouldUpdate() {
-        return index_es.Qt(() => {
+        return index_es.er(() => {
             this.itemUpdated.emit();
         });
     }
@@ -5531,7 +5530,7 @@ const MgMessage = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-message']);
+        this.classCollection = new index_es.qt(['mg-c-message']);
         /**
          * Define if component is using actions slot
          */
@@ -5555,7 +5554,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (newValue !== undefined)
@@ -5566,7 +5565,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (newValue !== undefined)
@@ -5625,7 +5624,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 = index_es.Zt('mg-modal');
+        this.identifier = index_es.Dt('mg-modal');
         /**
          * Modal dialog role.
          */
@@ -5645,7 +5644,7 @@ const MgModal = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-modal']);
+        this.classCollection = new index_es.qt(['mg-c-modal']);
         /***********
          * Handles *
          ***********/
@@ -5658,17 +5657,17 @@ const MgModal = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!index_es.Dt(newValue)) {
-            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (!index_es.Bt(newValue)) {
+            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
-            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
     }
     validateModalTitle(newValue) {
         if (!index_es.qe(newValue)) {
-            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchOpen(newValue) {
@@ -5770,7 +5769,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 = index_es.Zt('mg-pagination');
+        this.identifier = index_es.Dt('mg-pagination');
         /**
          * Hide navigation label
          */
@@ -5815,18 +5814,18 @@ const MgPagination = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!index_es.Dt(newValue)) {
-            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (!index_es.Bt(newValue)) {
+            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateTotalPages(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateCurrentPage(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else if (newValue > this.totalPages) {
             throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
@@ -5890,7 +5889,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 = index_es.Zt('mg-panel');
+        this.identifier = index_es.Dt('mg-panel');
         /**
          * Define if panel title is editable
          */
@@ -5914,7 +5913,7 @@ const MgPanel = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-panel']);
+        this.classCollection = new index_es.qt(['mg-c-panel']);
         /**
          * Title is in edition mode
          */
@@ -6013,13 +6012,13 @@ const MgPanel = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!index_es.Dt(newValue)) {
-            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (!index_es.Bt(newValue)) {
+            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validatePanelTitle(newValue) {
         if (!index_es.qe(newValue))
-            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index_es.Yt(newValue)}.`);
         this.titleChange.emit(newValue);
     }
     validateTitlePattern(newValue) {
@@ -6028,14 +6027,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
     }
@@ -7885,7 +7884,7 @@ const MgPopover = class {
          * Sets an `id` attribute.
          * Needed by the input for accessibility `aria-decribedby`.
          */
-        this.identifier = index_es.Zt('mg-popover');
+        this.identifier = index_es.Dt('mg-popover');
         /**
          * Popover placement
          */
@@ -8004,8 +8003,8 @@ const MgPopover = class {
         };
     }
     validateIdentifier(newValue) {
-        if (!index_es.Dt(newValue)) {
-            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (!index_es.Bt(newValue)) {
+            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
         // use renderPopoverContent to update popover-content id
         this.renderPopoverContent();
@@ -8042,7 +8041,7 @@ const MgPopover = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index_es.Jt(window);
+        this.windows = index_es.Kt(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
@@ -8140,7 +8139,7 @@ const MgPopoverContent = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-popover-content']);
+        this.classCollection = new index_es.qt(['mg-c-popover-content']);
         /**
          * Handle action for close button
          */
@@ -8164,7 +8163,7 @@ const MgPopoverContent = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !index_es.Bt(slottedTitleElement, headingTags)) {
+        if (slottedTitleElement && !index_es.Jt(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
     }
@@ -8304,11 +8303,11 @@ const MgTable = class {
         /**
          * Class collection
          */
-        this.classCollection = new index_es.Ht([this.componentClass]);
+        this.classCollection = new index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -8327,7 +8326,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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     /**
@@ -8457,7 +8456,7 @@ const MgTable = class {
             captionTable.className = 'mg-u-visually-hidden';
             // Link caption to div
             if (!index_es.qe(captionTable.id)) {
-                captionTable.setAttribute('id', index_es.Zt(`${this.componentClass}-caption`));
+                captionTable.setAttribute('id', index_es.Dt(`${this.componentClass}-caption`));
             }
             divWrapper.setAttribute('aria-labelledby', captionTable.id);
             // Add sortable caption if neeeded
@@ -8541,7 +8540,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 = index_es.Zt('mg-tabs');
+        this.identifier = index_es.Dt('mg-tabs');
         /**
          * Define tabs size
          */
@@ -8553,7 +8552,7 @@ const MgTabs = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-tabs']);
+        this.classCollection = new index_es.qt(['mg-c-tabs']);
         /**
          * Validate that new tab status can be `Status.ACTIVE`
          * @param tab - tab item
@@ -8651,7 +8650,7 @@ const MgTabs = class {
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            index_es.Qt(() => {
+            index_es.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');
@@ -8668,30 +8667,30 @@ const MgTabs = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!index_es.Dt(newValue)) {
-            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (!index_es.Bt(newValue)) {
+            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateLabel(newValue) {
         if (!index_es.qe(newValue)) {
-            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         this.classCollection.add(`mg-c-tabs--size-${this.size}`);
     }
     validateItems(newValue) {
         // String array
-        if (index_es.qt(newValue))
+        if (index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${index_es.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
@@ -8716,7 +8715,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: ${index_es.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: ${index_es.Yt(newValue)}.`);
         }
     }
     /*************
@@ -8801,11 +8800,11 @@ const MgTag = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-tag']);
+        this.classCollection = new index_es.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: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -8891,7 +8890,7 @@ const MgTooltip = class {
          * Sets an `id` attribute.
          * Needed by the input for accessibility `aria-decribedby`.
          */
-        this.identifier = index_es.Zt('mg-tooltip');
+        this.identifier = index_es.Dt('mg-tooltip');
         /**
          * Tooltip placement
          */
@@ -8913,7 +8912,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
-            index_es.Qt(() => {
+            index_es.er(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.handleClickOutside, false);
                     localWindow.addEventListener('keydown', this.handlePressEscape, false);
@@ -9111,15 +9110,15 @@ const MgTooltip = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!index_es.Dt(newValue)) {
-            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${index_es.Xt(newValue)}.`);
+        if (!index_es.Bt(newValue)) {
+            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${index_es.Yt(newValue)}.`);
         }
         // use renderTooltipContent to update tooltip-content id
         this.renderTooltipContent();
     }
     watchMessage(newValue) {
         if (!index_es.qe(newValue)) {
-            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index_es.Yt(newValue)}.`);
         }
         if (this.mgTooltipContent !== undefined)
             this.mgTooltipContent.message = newValue;
@@ -9174,7 +9173,7 @@ const MgTooltip = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index_es.Jt(window);
+        this.windows = index_es.Kt(window);
         // Get tooltip element
         this.renderTooltipContent();
         //validate properties
@@ -9192,7 +9191,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(index_es.Gt) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index_es.Gt);
+        const interactiveElement = slotElement.matches(index_es.Xt) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index_es.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