@mgdis/mg-components 6.14.0 → 6.15.0

package/dist/components/mg-popover-content2.js

@@ -53,11 +53,11 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'c87fe52d52b80954170963fd1378b3a05313f9c6' }, h("mg-card", { key: 'a38755a5a7055d4bd4166531326b1be245d2906f', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: '823e99beb15aa19f6f2f7cee2c5e1088cc116425', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '70daf81e59533585b6a051a6d97539a75833432e', icon: "cross" }))), h("div", { key: 'cccf70c8fba6906e6724629642383fad0c98656e', class: "mg-c-popover-content__title" }, h("slot", { key: 'b05acb47b32d27d1629d39451e4a786d2f404406', name: "title" })), h("slot", { key: '40de167b1fb77c7d8fc557f60cf176c0991e991d', name: "content" })), h("slot", { key: 'c6c1305d5ff51d2af0d56b1199731cd41645c99d', name: "arrow" })));
+        return (h(Host, { key: '2746e72f636c1a702d2b15836343ca8503f233e5' }, h("mg-card", { key: '84e28550627969d4e15ded5a5f8b6d19584eb891', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'f25c773593441597e81330997df3175cd9a963e4', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '723f3d1e8a85356d7aa9be9c875b273d7c9c1f72', icon: "cross" }))), h("div", { key: '283316f2a66212d9afc128aaec3fb24e4a40c0eb', class: "mg-c-popover-content__title" }, h("slot", { key: 'a1839a9a3259ccb221b90e82f786eb0e7c3d2a19', name: "title" })), h("slot", { key: '708903013417e27f4a9ed9811fde886d6b697dec', name: "content" })), h("slot", { key: 'fad6024a2474ffd5f46925101baa0e6ab9f2e951', name: "arrow" })));
     }
     get element() { return this; }
     static get style() { return mgPopoverContentCss; }
-}, [1, "mg-popover-content", {
+}, [257, "mg-popover-content", {
         "closeButton": [4, "close-button"],
         "classCollection": [32]
     }]);

package/dist/components/mg-popover2.js

@@ -249,7 +249,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'c25d773831395cf154f85cda3be67af22d6d8767' }, h("slot", { key: 'c6fb5897222e527cc36c78e1f32aaadc4d3c4b01' }), h("slot", { key: 'd7f682fdf78caa8491b8e9a74e6d5e91dbf5ef84', name: "content" })));
+        return (h(Host, { key: '7ea28f19a5a61f6191c2aece439e85da8f067270' }, h("slot", { key: 'aa6a627b90246ca327e2971329ab58b02eeb1d04' }), h("slot", { key: '1851353a6b4de659d6027a0bf3ba5f2120f7137d', name: "content" })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -259,7 +259,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
         "display": ["handleDisplay"]
     }; }
     static get style() { return mgPopoverCss; }
-}, [1, "mg-popover", {
+}, [257, "mg-popover", {
         "identifier": [1],
         "placement": [1],
         "arrowHide": [4, "arrow-hide"],

package/dist/components/mg-progress.js

@@ -75,7 +75,7 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'e6d254a68f35c5019158ab17fcb0e4dfd1943ef8', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '5b427579ad97336076504a45013a0be00673f9a9', class: "mg-c-progress" }, h("div", { key: '76dbdf88550caf51890e10c45c034d73cd02db5d', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: 'b0ab6f784cdb8cc25a40b83a0d97bcda5b5c1f9b', class: "mg-c-progress__fill", style: {
+        return (h(Host, { key: '62c66dbd93249bfde3eb8ff449b49884edfe49c3', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'b349c9d7358086ca4668705a1935fd8bbdb86afa', class: "mg-c-progress" }, h("div", { key: '57cc19d07c0f006f8ecf3a1f86ec12e37ffd8d6b', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: 'b4c49d94d9cfe2e1a6d8013aa4a39cde51b36d04', class: "mg-c-progress__fill", style: {
                 width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
             } })))));
     }
@@ -87,7 +87,7 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
         "max": ["watchMax"]
     }; }
     static get style() { return mgProgressCss; }
-}, [1, "mg-progress", {
+}, [257, "mg-progress", {
         "label": [1],
         "ariaRole": [1, "aria-role"],
         "value": [2],

package/dist/components/mg-skip-links.js

@@ -43,14 +43,14 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '9df42d332b207abf989ef73f3c83ebbcfcf222a6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '0185490dbd3dfb08b534a898fe779850ce96c427', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: '66ea9a2abfd1db7a1c7c46e9cdcd15af013ea406', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '07f404865c3ad0d815b87e32a46716136ed77d7d', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     get element() { return this; }
     static get watchers() { return {
         "links": ["validateLinks"]
     }; }
     static get style() { return mgSkipLinksCss; }
-}, [1, "mg-skip-links", {
+}, [257, "mg-skip-links", {
         "links": [16]
     }, undefined, {
         "links": ["validateLinks"]

package/dist/components/mg-table.js

@@ -16,7 +16,7 @@ const textAlignments = ['left', 'center', 'right'];
 // Define possible data types
 const dataTypes = ['string', 'numeric', 'date'];
 
-const mgTableCss = ".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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}";
+const mgTableCss = ".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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h1);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h2);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h3);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h4);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h5);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h6);font-weight:bold}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}";
 
 /**
  * Check if value is a valid align object
@@ -127,11 +127,11 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
             Object.entries(this.columns).forEach(([key, value]) => {
                 // Add alignment to stylesheet
                 if (value.align !== undefined) {
-                    this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);
+                    this.alignmentStylesheet.insertRule(`.${this.componentClass} th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align};&>*{display:inline-block;}}`);
                 }
                 // if align is not defined and datatype is number, align right
                 else if (value.datatype === 'numeric') {
-                    this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);
+                    this.alignmentStylesheet.insertRule(`.${this.componentClass} th:nth-child(${key}),td:nth-child(${key}){text-align:right;&>*{display:inline-block;}}`);
                 }
                 // Define if column is sortable
                 if (value.sortable) {

package/dist/components/mg-tabs.js

@@ -1,314 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList, n as nextTick, a as isValideID, t as toString, i as isValidString, d as allItemsAreString } from './index2.js';
-import { K as Keys } from './events.utils.js';
-import { d as defineCustomElement$3 } from './mg-badge2.js';
-import { d as defineCustomElement$2 } from './mg-icon2.js';
-
-/**
- * Available tabs items status
- */
-const Status = {
-    VISIBLE: 'visible',
-    HIDDEN: 'hidden',
-    DISABLED: 'disabled',
-    ACTIVE: 'active',
-};
-/**
- * List of all possibles sizes
- */
-const sizes = ['medium', 'large'];
-
-const mgTabsCss = "/*!\n * @prop --mg-c-tabs-color: Defines tabs global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`.\n * @prop --mg-c-tabs-color-text: Defines tabs text color. Unset by default, fallback on `--mg-b-color-dark`.\n */.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium{padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:var(--mg-b-size-16) var(--mg-b-size-32)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-tabs-navigation-button-column-gap, var(--mg-b-size-8));cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}";
-
-/**
- * type TabItem validation function
- * @param tab - tab item
- * @returns tab item type is valid
- */
-const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
-const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.activeTabChange = createEvent(this, "active-tab-change", 7);
-        /************
-         * Internal *
-         ************/
-        // classes
-        this.tabPanel = 'panel';
-        this.buttonTabBaseClass = 'mg-c-tabs__navigation-button';
-        this.startIndex = 1;
-        /**
-         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-         * If not set, it will be created.
-         */
-        this.identifier = createID('mg-tabs');
-        /**
-         * Define tabs size
-         */
-        this.size = 'medium';
-        /**
-         * Component tabs
-         */
-        this.tabs = [];
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-tabs']);
-        /**
-         * Validate that new tab status can be `Status.ACTIVE`
-         * @param tab - tab item
-         * @returns true when tab match condition to get a `Status.ACTIVE`
-         */
-        this.isActivableTab = (tab) => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);
-        /**
-         * Method to know if given tab has the given status
-         * @param tab - item tab key to set to ACTIVE status
-         * @param status - status to valide
-         * @returns status comparaison
-         */
-        this.tabHasStatus = (tab, status) => tab.status === status;
-        /**
-         * Method to get element id from index
-         * @param element - to get id
-         * @param index - to generate id
-         * @returns generated element id
-         */
-        this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
-        /**
-         * Method to get tab item index
-         * @param index - to get
-         * @returns index
-         */
-        this.getTabItemIndex = (index) => index + this.startIndex;
-        /**
-         * Handle click events on tabs
-         * @param event - mouse event
-         */
-        this.handleClick = (event) => {
-            const tabId = event.currentTarget.dataset.index;
-            if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {
-                event.preventDefault();
-            }
-            else {
-                this.activeTab = Number(tabId);
-                this.tabFocus = undefined;
-            }
-        };
-        /**
-         * get navigation button class from given status
-         * @param status - button tab status
-         * @returns button class/selector variant
-         */
-        this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
-        /**
-         * Handle keyboard event on tabs
-         * @param event - mouse event
-         */
-        this.handleKeydown = (event) => {
-            const parent = event.target.parentElement;
-            if ([Keys.ARROWLEFT, Keys.ARROWRIGHT].includes(event.key)) {
-                this.tabFocus = Number(event.target.dataset.index);
-                parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
-                // Move right
-                if (event.key === Keys.ARROWRIGHT) {
-                    this.tabFocus++;
-                    // If we're at the end, go to the start
-                    if (this.tabFocus > this.tabs.length)
-                        this.tabFocus = this.startIndex;
-                    // Move left
-                }
-                else if (event.key === Keys.ARROWLEFT) {
-                    this.tabFocus--;
-                    // If we're at the start, move to the end
-                    if (this.tabFocus < this.startIndex)
-                        this.tabFocus = this.tabs.length;
-                }
-                const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
-                // if focus item is ['hidden'] we recursively repeat action
-                if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
-                    parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
-                    // else run focus methods on tabFocus element
-                }
-                else {
-                    parentButtonElement.setAttribute('tabindex', '0');
-                    parentButtonElement.focus();
-                }
-            }
-            else if (event.key === Keys.TAB) {
-                this.resetFocus();
-            }
-        };
-        /**
-         * Reset focus on document click
-         * @param event - mouse event
-         */
-        this.handleDocumentClick = (event) => {
-            if (event.target.closest('mg-tabs') !== this.element)
-                this.resetFocus();
-        };
-        /**
-         * Method to reset focus behavior
-         */
-        this.resetFocus = () => {
-            // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            nextTick(() => {
-                this.tabFocus = undefined;
-                Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
-                    tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
-                });
-            });
-        };
-        /**
-         * Validate slots setting
-         */
-        this.validateSlots = () => {
-            const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
-            if (slots.length !== this.tabs.length)
-                throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
-        };
-    }
-    watchIdentifier(newValue) {
-        if (!isValideID(newValue)) {
-            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateLabel(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateSize(newValue) {
-        if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-        this.classCollection.add(`mg-c-tabs--size-${this.size}`);
-    }
-    validateItems(newValue) {
-        // String array
-        if (allItemsAreString(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: ${toString(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
-        // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
-        if (newValue === undefined) {
-            this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
-                ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
-                : this.startIndex;
-        }
-        else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {
-            // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
-            this.tabs.forEach((tab, index) => {
-                const isNewActiveTab = index === newValue - this.startIndex;
-                // reset active tabs
-                if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab)
-                    tab.status = Status.VISIBLE;
-                // set active tab from given tab key
-                else if (this.isActivableTab(tab) && isNewActiveTab)
-                    tab.status = Status.ACTIVE;
-            });
-            // emit change active tab key event
-            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: ${toString(newValue)}.`);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        // Check tabs format
-        this.watchIdentifier(this.identifier);
-        this.validateLabel(this.label);
-        this.validateItems(this.items);
-        this.validateActiveTab(this.activeTab);
-        this.validateSize(this.size);
-        this.validateSlots();
-    }
-    /**
-     * add listners
-     */
-    componentDidLoad() {
-        document.addEventListener('click', this.handleDocumentClick, false);
-    }
-    /**
-     * remove listeners
-     */
-    disconnectedCallback() {
-        document.removeEventListener('keydown', this.handleDocumentClick);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("div", { key: '06dd97d9d4e77f606dee3c4a8960b51265345666', class: this.classCollection.join() }, h("header", { key: 'ea3771bdfe8576bb8b443823a2c338a51ed3ba69', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
-                [`${this.buttonTabBaseClass}`]: true,
-                [`${this.buttonTabBaseClass}--horizontal`]: true,
-                [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
-                [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
-                [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
-            }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier"],
-        "label": ["validateLabel"],
-        "size": ["validateSize"],
-        "items": ["validateItems"],
-        "activeTab": ["validateActiveTab"]
-    }; }
-    static get style() { return mgTabsCss; }
-}, [1, "mg-tabs", {
-        "identifier": [1],
-        "label": [1],
-        "size": [1],
-        "items": [16],
-        "activeTab": [1538, "active-tab"],
-        "tabs": [32],
-        "classCollection": [32]
-    }, undefined, {
-        "identifier": ["watchIdentifier"],
-        "label": ["validateLabel"],
-        "size": ["validateSize"],
-        "items": ["validateItems"],
-        "activeTab": ["validateActiveTab"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-tabs", "mg-badge", "mg-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgTabs$1);
-            }
-            break;
-        case "mg-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { M as MgTabs$1, d as defineCustomElement$1 } from './mg-tabs2.js';
 
 const MgTabs = MgTabs$1;
 const defineCustomElement = defineCustomElement$1;