@genexus/genexus-ide-ui 0.0.99 → 0.0.101

package/dist/components/tab.js.map

@@ -1 +1 @@
-{"file":"tab.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,04SAA04S;;MCE54S,MAAM;IACf;;;;QACI,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KAC3B;;IAED,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;gBACjB,eAAe,EAAE,IAAI,CAAC,YAAY;gBAClC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU;gBAClC,IAAI,EAAE,IAAI,CAAC,UAAU;gBACrB,cAAc,EAAE,CAAC,IAAI,CAAC,UAAU;gBAChC,YAAY,EAAE,IAAI,CAAC,SAAS;gBAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;gBACnB,SAAS,EAAE,IAAI;gBACf,iBAAiB,EAAE,IAAI,CAAC,aAAa;gBACrC,aAAa,EAAE,IAAI,CAAC,aAAa,KAAK,QAAQ;gBAC9C,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;aAC3C,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE;KAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/tab/tab.css?tag=gxg-tab&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/tab/tab.js"],"sourcesContent":[":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:host {\n  height: 100%;\n  overflow-y: auto;\n  display: block;\n}\n:host .container {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  font-size: var(--gxg-tab-font-size);\n  color: var(--gxg-tab-color);\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  padding-block-start: var(--gxg-tab-vertical-padding);\n  padding-inline-end: var(--gxg-tab-horizontal-padding);\n  padding-block-end: var(--gxg-tab-vertical-padding);\n  padding-inline-start: var(--gxg-tab-horizontal-padding);\n  overflow-y: auto;\n  background-color: var(--gxg-tab-background-color);\n}\n:host .container::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n:host .container::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n:host .container::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n:host .container::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n:host .container::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:host(.not-selected) {\n  display: none;\n}\n\n:host(.no-padding) .container {\n  padding: 0;\n}\n\n:host(.flex) {\n  display: flex;\n}\n\n:host(.overflow-auto) {\n  overflow: auto;\n}\n\n.container--flex {\n  display: flex;\n}\n.container--flex.flex-column {\n  flex-direction: column;\n}\n.container--flex.flex-row {\n  flex-direction: row;\n}","import { h, Host } from \"@stencil/core\";\nimport state from \"../store\";\nexport class GxgTab {\n    constructor() {\n        this.tab = undefined;\n        this.noPadding = false;\n        this.flexContainer = false;\n        this.flex = false;\n        this.overflowAuto = false;\n        this.flexDirection = \"column\";\n        this.isSelected = false;\n    }\n    el;\n    render() {\n        return (h(Host, { class: {\n                \"overflow-auto\": this.overflowAuto,\n                flex: this.flex && this.isSelected,\n                open: this.isSelected,\n                \"not-selected\": !this.isSelected,\n                \"no-padding\": this.noPadding,\n                large: state.large,\n                mercury: state.mercury,\n            } }, h(\"div\", { class: {\n                container: true,\n                \"container--flex\": this.flexContainer,\n                \"flex-column\": this.flexDirection === \"column\",\n                \"flex-row\": this.flexDirection === \"row\",\n            }, part: \"container\" }, h(\"slot\", null))));\n    }\n    static get is() { return \"gxg-tab\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"tab.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"tab.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"tab\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The tab id. Should match the \\\"tab\\\" value of the correlative \\\"gxg-tab\\\"\"\n                },\n                \"attribute\": \"tab\",\n                \"reflect\": false\n            },\n            \"noPadding\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute removes the tab .container padding\"\n                },\n                \"attribute\": \"no-padding\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"flexContainer\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the container display flex\"\n                },\n                \"attribute\": \"flex-container\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"flex\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the display of the tab 'flex' only when is open\"\n                },\n                \"attribute\": \"flex\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"overflowAuto\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the .container overflow property set to 'auto'\"\n                },\n                \"attribute\": \"overflow-auto\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"flexDirection\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"TabContainerFlexDirection\",\n                    \"resolved\": \"\\\"column\\\" | \\\"row\\\"\",\n                    \"references\": {\n                        \"TabContainerFlexDirection\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/tab/tab.tsx\",\n                            \"id\": \"src/components/tab/tab.tsx::TabContainerFlexDirection\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The container flex-direction, if container is flex.\"\n                },\n                \"attribute\": \"flex-direction\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"column\\\"\"\n            },\n            \"isSelected\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The selected tab\"\n                },\n                \"attribute\": \"is-selected\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=tab.js.map\n"],"version":3}
+{"file":"tab.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,ssTAAssT;;MCExsT,MAAM;IACf;;;;QACI,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACxB;;IAED,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;gBACjB,eAAe,EAAE,IAAI,CAAC,YAAY;gBAClC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU;gBAClC,IAAI,EAAE,IAAI,CAAC,UAAU;gBACrB,cAAc,EAAE,CAAC,IAAI,CAAC,UAAU;gBAChC,YAAY,EAAE,IAAI,CAAC,SAAS;gBAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;gBACnB,SAAS,EAAE,IAAI;gBACf,iBAAiB,EAAE,IAAI,CAAC,aAAa;gBACrC,aAAa,EAAE,IAAI,CAAC,aAAa,KAAK,QAAQ;gBAC9C,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;gBACxC,oBAAoB,EAAE,IAAI,CAAC,OAAO;aACrC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE;KAClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/tab/tab.css?tag=gxg-tab&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/tab/tab.js"],"sourcesContent":[":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:host {\n  height: 100%;\n  overflow-y: auto;\n  display: block;\n}\n:host .container {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  font-size: var(--gxg-tab-font-size);\n  color: var(--gxg-tab-color);\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  padding-block-start: var(--gxg-tab-vertical-padding);\n  padding-inline-end: var(--gxg-tab-horizontal-padding);\n  padding-block-end: var(--gxg-tab-vertical-padding);\n  padding-inline-start: var(--gxg-tab-horizontal-padding);\n  overflow-y: auto;\n  background-color: var(--gxg-tab-background-color);\n}\n:host .container::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n:host .container::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n:host .container::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n:host .container::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n:host .container::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n:host .container--reduced {\n  font-size: var(--gxg-tab-font-size--reduced);\n  padding-block-start: var(--gxg-tab-vertical-padding--reduced);\n  padding-inline-end: var(--gxg-tab-horizontal-padding--reduced);\n  padding-block-end: var(--gxg-tab-vertical-padding--reduced);\n  padding-inline-start: var(--gxg-tab-horizontal-padding--reduced);\n}\n\n:host(.not-selected) {\n  display: none;\n}\n\n:host(.no-padding) .container {\n  padding: 0;\n}\n\n:host(.flex) {\n  display: flex;\n}\n\n:host(.overflow-auto) {\n  overflow: auto;\n}\n\n.container--flex {\n  display: flex;\n}\n.container--flex.flex-column {\n  flex-direction: column;\n}\n.container--flex.flex-row {\n  flex-direction: row;\n}","import { h, Host } from \"@stencil/core\";\nimport state from \"../store\";\nexport class GxgTab {\n    constructor() {\n        this.tab = undefined;\n        this.noPadding = false;\n        this.flexContainer = false;\n        this.flex = false;\n        this.overflowAuto = false;\n        this.flexDirection = \"column\";\n        this.isSelected = false;\n        this.reduced = false;\n    }\n    el;\n    render() {\n        return (h(Host, { class: {\n                \"overflow-auto\": this.overflowAuto,\n                flex: this.flex && this.isSelected,\n                open: this.isSelected,\n                \"not-selected\": !this.isSelected,\n                \"no-padding\": this.noPadding,\n                large: state.large,\n                mercury: state.mercury\n            } }, h(\"div\", { class: {\n                container: true,\n                \"container--flex\": this.flexContainer,\n                \"flex-column\": this.flexDirection === \"column\",\n                \"flex-row\": this.flexDirection === \"row\",\n                \"container--reduced\": this.reduced\n            }, part: \"container\" }, h(\"slot\", null))));\n    }\n    static get is() { return \"gxg-tab\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"tab.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"tab.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"tab\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The tab id. Should match the \\\"tab\\\" value of the correlative \\\"gxg-tab\\\"\"\n                },\n                \"attribute\": \"tab\",\n                \"reflect\": false\n            },\n            \"noPadding\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute removes the tab .container padding\"\n                },\n                \"attribute\": \"no-padding\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"flexContainer\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the container display flex\"\n                },\n                \"attribute\": \"flex-container\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"flex\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the display of the tab 'flex' only when is open\"\n                },\n                \"attribute\": \"flex\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"overflowAuto\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the .container overflow property set to 'auto'\"\n                },\n                \"attribute\": \"overflow-auto\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"flexDirection\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"TabContainerFlexDirection\",\n                    \"resolved\": \"\\\"column\\\" | \\\"row\\\"\",\n                    \"references\": {\n                        \"TabContainerFlexDirection\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/tab/tab.tsx\",\n                            \"id\": \"src/components/tab/tab.tsx::TabContainerFlexDirection\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The container flex-direction, if container is flex.\"\n                },\n                \"attribute\": \"flex-direction\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"column\\\"\"\n            },\n            \"isSelected\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The selected tab\"\n                },\n                \"attribute\": \"is-selected\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"reduced\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will make the font size smaller.\"\n                },\n                \"attribute\": \"reduced\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=tab.js.map\n"],"version":3}

package/dist/components/tabs.js

@@ -1,12 +1,64 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const tabsCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:block;height:auto;background:var(--color-background);border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);position:relative;font-family:var(--ds-base-font-family-primary)}.main-container{height:100%;max-height:100%;display:flex;flex-direction:column;justify-content:space-between;border-width:var(--gxg-tabs-border-width);border-style:solid;border-color:var(--gxg-tabs-border-color);border-radius:var(--gxg-tabs-border-radius);overflow:hidden}.main-container--no-border{border:none}.tabs-container{height:100%;overflow-y:auto}:host([position=left]) .tab-bar-container{transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10}:host([position=left]) .tabs-container{height:100%;width:calc(100% - 32px);margin-left:32px}:host([position=right]) .tab-bar-container{transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10;left:calc(100% - 32px)}:host([position=right]) .tabs-container{height:100%;width:calc(100% - 32px)}";
+const tabsCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:block;height:auto;background:var(--color-background);border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);position:relative;font-family:var(--ds-base-font-family-primary)}.main-container{height:100%;max-height:100%;display:flex;flex-direction:column;justify-content:space-between;border-width:var(--gxg-tabs-border-width);border-style:solid;border-color:var(--gxg-tabs-border-color);border-radius:var(--gxg-tabs-border-radius);overflow:hidden}.main-container--no-border{border:none}.tabs-container{height:100%;overflow-y:auto}:host([position=left-rotated]) .main-container,:host([position=right-rotated]) .main-container{flex-direction:row}:host([position=left-rotated]) .tab-bar-container,:host([position=right-rotated]) .tab-bar-container{height:100%;overflow:auto;width:40px;position:relative;}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-track,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-corner,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host([position=left-rotated]) ::slotted(gxg-tab-bar),:host([position=right-rotated]) ::slotted(gxg-tab-bar){transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10}:host([position=left-rotated]) ::slotted(gxg-tab),:host([position=right-rotated]) ::slotted(gxg-tab){border-left-width:var(--gxg-tabs-border-width);border-left-style:solid;border-left-color:var(--gxg-tabs-border-color)}:host([position=left-rotated]) .tabs-container,:host([position=right-rotated]) .tabs-container{width:calc(100% - 32px)}:host([position=left-rotated]) .main-container{flex-direction:row}:host([position=right-rotated]) .main-container{flex-direction:row-reverse}:host([position=left-stacked]) .main-container,:host([position=right-stacked]) .main-container{flex-direction:row}:host([position=left-stacked]) .main-container{flex-direction:row}:host([position=right-stacked]) .main-container{flex-direction:row-reverse}";
 
 const GxgTabs = /*@__PURE__*/ proxyCustomElement(class GxgTabs extends HTMLElement {
     constructor() {
+        this.evaluateStacked = () => {
+            if (this.position === "left-stacked" || this.position === "right-stacked") {
+                //stacked tabBar
+                const tabBar = this.el.querySelector("gxg-tab-bar");
+                if (tabBar) {
+                    tabBar.stacked = this.position;
+                }
+                const tabButtons = this.el.querySelectorAll("gxg-tab-button");
+                if (tabButtons) {
+                    tabButtons.forEach(tabButton => {
+                        tabButton.stackedStyle = true;
+                    });
+                }
+                //stacked buttons
+            }
+        };
+        this.evaluateReduced = () => {
+            if (this.reduced) {
+                //tab buttons
+                const gxgTabButtons = Array.from(this.el.querySelectorAll("gxg-tab-button"));
+                gxgTabButtons.forEach(tabButton => {
+                    tabButton.reduced = true;
+                });
+                //tabs
+                const gxgTabs = Array.from(this.el.querySelectorAll("gxg-tab"));
+                gxgTabs.forEach(tab => {
+                    tab.reduced = true;
+                });
+            }
+        };
         this.getTab = (tab) => {
             return this.el.querySelector(`gxg-tab-button[key=${tab}]`);
         };
+        this.activateTab = () => {
+            //buttons
+            const tabButtons = Array.from(this.el.querySelectorAll("gxg-tab-button"));
+            tabButtons.forEach(tabButton => {
+                if (tabButton.tab !== this.activeTab) {
+                    tabButton.isSelected = false;
+                }
+                else {
+                    tabButton.isSelected = true;
+                }
+            });
+            //tabs
+            const tabs = Array.from(this.el.querySelectorAll("gxg-tab"));
+            tabs.forEach(tab => {
+                if (tab.tab !== this.activeTab) {
+                    tab.isSelected = false;
+                }
+                else {
+                    tab.isSelected = true;
+                }
+            });
+        };
         super();
         this.__registerHost();
         this.__attachShadow();
@@ -19,9 +71,15 @@ const GxgTabs = /*@__PURE__*/ proxyCustomElement(class GxgTabs extends HTMLEleme
         this.buttonsBorderAbove = false;
         this.noBackground = false;
         this.noPadding = false;
-        this.activeTab = "";
+        this.reduced = false;
+        this.activeTab = undefined;
     }
     get el() { return this; }
+    watchActiveTabHandler(activeTab) {
+        if ((activeTab === null || activeTab === void 0 ? void 0 : activeTab.length) > 0) {
+            this.activateTab();
+        }
+    }
     tabActivatedHandler(event) {
         event.stopPropagation();
         this.updateActiveChildren(event.target.tab, "gxg-tab-button");
@@ -29,6 +87,11 @@ const GxgTabs = /*@__PURE__*/ proxyCustomElement(class GxgTabs extends HTMLEleme
     }
     componentWillLoad() {
         this.configureTabs();
+        this.evaluateReduced();
+        if (this.activeTab) {
+            this.activateTab();
+        }
+        this.evaluateStacked();
     }
     updateActiveChildren(activeTab, tagName) {
         let children;
@@ -93,6 +156,9 @@ const GxgTabs = /*@__PURE__*/ proxyCustomElement(class GxgTabs extends HTMLEleme
                 h("div", { class: "tabs-container" }, h("slot", null))
             ])));
     }
+    static get watchers() { return {
+        "activeTab": ["watchActiveTabHandler"]
+    }; }
     static get style() { return tabsCss; }
 }, [1, "gxg-tabs", {
         "position": [1],
@@ -104,10 +170,13 @@ const GxgTabs = /*@__PURE__*/ proxyCustomElement(class GxgTabs extends HTMLEleme
         "buttonsBorderAbove": [4, "buttons-border-above"],
         "noBackground": [516, "no-background"],
         "noPadding": [4, "no-padding"],
-        "activeTab": [32],
+        "reduced": [516],
+        "activeTab": [1, "active-tab"],
         "setActiveTab": [64],
         "setFirstActiveTab": [64]
-    }, [[0, "tabActivated", "tabActivatedHandler"]]]);
+    }, [[0, "tabActivated", "tabActivatedHandler"]], {
+        "activeTab": ["watchActiveTabHandler"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"file":"tabs.js","mappings":"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","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/tabs/tabs.css?tag=gxg-tabs&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/tabs/tabs.js"],"sourcesContent":[":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:host {\n  display: block;\n  height: auto;\n  background: var(--color-background);\n  border-radius: var(--border-width-md);\n  box-shadow: var(--box-shadow-01);\n  position: relative;\n  font-family: var(--ds-base-font-family-primary);\n}\n\n.main-container {\n  height: 100%;\n  max-height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  border-width: var(--gxg-tabs-border-width);\n  border-style: solid;\n  border-color: var(--gxg-tabs-border-color);\n  border-radius: var(--gxg-tabs-border-radius);\n  overflow: hidden;\n}\n.main-container--no-border {\n  border: none;\n}\n\n.tabs-container {\n  height: 100%;\n  overflow-y: auto;\n}\n\n:host([position=left]) .tab-bar-container {\n  transform: rotate(-90deg) translate(-100%, 0);\n  transform-origin: left top;\n  position: absolute;\n  z-index: 10;\n}\n:host([position=left]) .tabs-container {\n  height: 100%;\n  width: calc(100% - 32px);\n  margin-left: 32px;\n}\n\n:host([position=right]) .tab-bar-container {\n  transform: rotate(-90deg) translate(-100%, 0);\n  transform-origin: left top;\n  position: absolute;\n  z-index: 10;\n  left: calc(100% - 32px);\n}\n:host([position=right]) .tabs-container {\n  height: 100%;\n  width: calc(100% - 32px);\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTabs {\n    constructor() {\n        this.position = \"top\";\n        this.height = \"100%\";\n        this.maxHeight = \"100%\";\n        this.minWidth = \"200px\";\n        this.tabBarBorder = false;\n        this.noBorder = false;\n        this.buttonsBorderAbove = false;\n        this.noBackground = false;\n        this.noPadding = false;\n        this.activeTab = \"\";\n    }\n    el;\n    tabActivatedHandler(event) {\n        event.stopPropagation();\n        this.updateActiveChildren(event.target.tab, \"gxg-tab-button\");\n        this.updateActiveChildren(event.target.tab, \"gxg-tab\");\n    }\n    componentWillLoad() {\n        this.configureTabs();\n    }\n    updateActiveChildren(activeTab, tagName) {\n        let children;\n        if (tagName === \"gxg-tab\") {\n            children = this.el.querySelectorAll(\":scope > gxg-tab\");\n        }\n        else if (tagName === \"gxg-tab-button\") {\n            const tabBar = this.el.querySelector(\":scope > gxg-tab-bar\");\n            children = tabBar.querySelectorAll(\":scope > gxg-tab-button\");\n        }\n        for (const child of children) {\n            child.isSelected = activeTab === child.tab;\n        }\n    }\n    configureTabs() {\n        const tabs = this.el.querySelectorAll(\"gxg-tab\");\n        if (this.noPadding) {\n            tabs.forEach(tab => {\n                tab.noPadding = true;\n            });\n        }\n        if (this.buttonsBorderAbove) {\n            const tabButtons = this.el.querySelectorAll(\"gxg-tab-button\");\n            tabButtons.forEach(tabButton => (tabButton.borderAbove = true));\n        }\n    }\n    async setActiveTab(tab) {\n        if (tab) {\n            const tabEl = this.getTab(tab);\n            if (!tabEl?.disabled) {\n                this.updateActiveChildren(tab, \"gxg-tab-button\");\n                this.updateActiveChildren(tab, \"gxg-tab\");\n            }\n        }\n    }\n    /**\n     * Sets the first tab that is not disabled and hidden as the active tab\n     */\n    async setFirstActiveTab() {\n        const allTabs = Array.from(this.el.querySelectorAll(\"gxg-tab-button\"));\n        const firstEnabledTab = allTabs.find(tab => !tab.hidden && !tab.disabled);\n        if (firstEnabledTab && firstEnabledTab.tab) {\n            this.updateActiveChildren(firstEnabledTab.tab, \"gxg-tab-button\");\n            this.updateActiveChildren(firstEnabledTab.tab, \"gxg-tab\");\n        }\n    }\n    getTab = (tab) => {\n        return this.el.querySelector(`gxg-tab-button[key=${tab}]`);\n    };\n    render() {\n        return (h(Host, { style: {\n                height: this.height,\n                maxHeight: this.maxHeight,\n                minWidth: this.minWidth\n            } }, h(\"div\", { class: {\n                \"main-container\": true,\n                \"main-container--no-border\": this.noBorder\n            } }, this.position === \"bottom\"\n            ? [\n                h(\"div\", { class: \"tabs-container\" }, h(\"slot\", null)),\n                h(\"div\", { class: \"tab-bar-container\" }, h(\"slot\", { name: \"tab-bar-container\" }))\n            ]\n            : [\n                h(\"div\", { class: \"tab-bar-container\" }, h(\"slot\", { name: \"tab-bar-container\" })),\n                h(\"div\", { class: \"tabs-container\" }, h(\"slot\", null))\n            ])));\n    }\n    static get is() { return \"gxg-tabs\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"tabs.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"tabs.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"position\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"TabsPosition\",\n                    \"resolved\": \"\\\"bottom\\\" | \\\"left\\\" | \\\"right\\\" | \\\"top\\\"\",\n                    \"references\": {\n                        \"TabsPosition\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/tabs/tabs.tsx\",\n                            \"id\": \"src/components/tabs/tabs.tsx::TabsPosition\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"position\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"top\\\"\"\n            },\n            \"height\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"height\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"100%\\\"\"\n            },\n            \"maxHeight\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"max-height\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"100%\\\"\"\n            },\n            \"minWidth\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"min-width\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"200px\\\"\"\n            },\n            \"tabBarBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"tab-bar-border\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"noBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"no-border\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"buttonsBorderAbove\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"buttons-border-above\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"noBackground\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute removes the background color (only for mercury)\"\n                },\n                \"attribute\": \"no-background\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"noPadding\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute removes each tab .container padding\"\n                },\n                \"attribute\": \"no-padding\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"activeTab\": {}\n        };\n    }\n    static get methods() {\n        return {\n            \"setActiveTab\": {\n                \"complexType\": {\n                    \"signature\": \"(tab: string) => Promise<void>\",\n                    \"parameters\": [{\n                            \"name\": \"tab\",\n                            \"type\": \"string\",\n                            \"docs\": \"\"\n                        }],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"\",\n                    \"tags\": []\n                }\n            },\n            \"setFirstActiveTab\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Sets the first tab that is not disabled and hidden as the active tab\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get listeners() {\n        return [{\n                \"name\": \"tabActivated\",\n                \"method\": \"tabActivatedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=tabs.js.map\n"],"version":3}
+{"file":"tabs.js","mappings":"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","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/tabs/tabs.css?tag=gxg-tabs&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/tabs/tabs.js"],"sourcesContent":[":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:host {\n  display: block;\n  height: auto;\n  background: var(--color-background);\n  border-radius: var(--border-width-md);\n  box-shadow: var(--box-shadow-01);\n  position: relative;\n  font-family: var(--ds-base-font-family-primary);\n}\n\n.main-container {\n  height: 100%;\n  max-height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  border-width: var(--gxg-tabs-border-width);\n  border-style: solid;\n  border-color: var(--gxg-tabs-border-color);\n  border-radius: var(--gxg-tabs-border-radius);\n  overflow: hidden;\n}\n.main-container--no-border {\n  border: none;\n}\n\n.tabs-container {\n  height: 100%;\n  overflow-y: auto;\n}\n\n:host([position=left-rotated]) .main-container,\n:host([position=right-rotated]) .main-container {\n  flex-direction: row;\n}\n:host([position=left-rotated]) .tab-bar-container,\n:host([position=right-rotated]) .tab-bar-container {\n  height: 100%;\n  overflow: auto;\n  width: 40px;\n  position: relative;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-track,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-corner,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n:host([position=left-rotated]) ::slotted(gxg-tab-bar),\n:host([position=right-rotated]) ::slotted(gxg-tab-bar) {\n  transform: rotate(-90deg) translate(-100%, 0);\n  transform-origin: left top;\n  position: absolute;\n  z-index: 10;\n}\n:host([position=left-rotated]) ::slotted(gxg-tab),\n:host([position=right-rotated]) ::slotted(gxg-tab) {\n  border-left-width: var(--gxg-tabs-border-width);\n  border-left-style: solid;\n  border-left-color: var(--gxg-tabs-border-color);\n}\n:host([position=left-rotated]) .tabs-container,\n:host([position=right-rotated]) .tabs-container {\n  width: calc(100% - 32px);\n}\n:host([position=left-rotated]) .main-container {\n  flex-direction: row;\n}\n\n:host([position=right-rotated]) .main-container {\n  flex-direction: row-reverse;\n}\n\n:host([position=left-stacked]) .main-container,\n:host([position=right-stacked]) .main-container {\n  flex-direction: row;\n}\n\n:host([position=left-stacked]) .main-container {\n  flex-direction: row;\n}\n\n:host([position=right-stacked]) .main-container {\n  flex-direction: row-reverse;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTabs {\n    constructor() {\n        this.position = \"top\";\n        this.height = \"100%\";\n        this.maxHeight = \"100%\";\n        this.minWidth = \"200px\";\n        this.tabBarBorder = false;\n        this.noBorder = false;\n        this.buttonsBorderAbove = false;\n        this.noBackground = false;\n        this.noPadding = false;\n        this.reduced = false;\n        this.activeTab = undefined;\n    }\n    el;\n    watchActiveTabHandler(activeTab) {\n        if (activeTab?.length > 0) {\n            this.activateTab();\n        }\n    }\n    tabActivatedHandler(event) {\n        event.stopPropagation();\n        this.updateActiveChildren(event.target.tab, \"gxg-tab-button\");\n        this.updateActiveChildren(event.target.tab, \"gxg-tab\");\n    }\n    componentWillLoad() {\n        this.configureTabs();\n        this.evaluateReduced();\n        if (this.activeTab) {\n            this.activateTab();\n        }\n        this.evaluateStacked();\n    }\n    evaluateStacked = () => {\n        if (this.position === \"left-stacked\" || this.position === \"right-stacked\") {\n            //stacked tabBar\n            const tabBar = this.el.querySelector(\"gxg-tab-bar\");\n            if (tabBar) {\n                tabBar.stacked = this.position;\n            }\n            const tabButtons = this.el.querySelectorAll(\"gxg-tab-button\");\n            if (tabButtons) {\n                tabButtons.forEach(tabButton => {\n                    tabButton.stackedStyle = true;\n                });\n            }\n            //stacked buttons\n        }\n    };\n    evaluateReduced = () => {\n        if (this.reduced) {\n            //tab buttons\n            const gxgTabButtons = Array.from(this.el.querySelectorAll(\"gxg-tab-button\"));\n            gxgTabButtons.forEach(tabButton => {\n                tabButton.reduced = true;\n            });\n            //tabs\n            const gxgTabs = Array.from(this.el.querySelectorAll(\"gxg-tab\"));\n            gxgTabs.forEach(tab => {\n                tab.reduced = true;\n            });\n        }\n    };\n    updateActiveChildren(activeTab, tagName) {\n        let children;\n        if (tagName === \"gxg-tab\") {\n            children = this.el.querySelectorAll(\":scope > gxg-tab\");\n        }\n        else if (tagName === \"gxg-tab-button\") {\n            const tabBar = this.el.querySelector(\":scope > gxg-tab-bar\");\n            children = tabBar.querySelectorAll(\":scope > gxg-tab-button\");\n        }\n        for (const child of children) {\n            child.isSelected = activeTab === child.tab;\n        }\n    }\n    configureTabs() {\n        const tabs = this.el.querySelectorAll(\"gxg-tab\");\n        if (this.noPadding) {\n            tabs.forEach(tab => {\n                tab.noPadding = true;\n            });\n        }\n        if (this.buttonsBorderAbove) {\n            const tabButtons = this.el.querySelectorAll(\"gxg-tab-button\");\n            tabButtons.forEach(tabButton => (tabButton.borderAbove = true));\n        }\n    }\n    async setActiveTab(tab) {\n        if (tab) {\n            const tabEl = this.getTab(tab);\n            if (!tabEl?.disabled) {\n                this.updateActiveChildren(tab, \"gxg-tab-button\");\n                this.updateActiveChildren(tab, \"gxg-tab\");\n            }\n        }\n    }\n    /**\n     * Sets the first tab that is not disabled and hidden as the active tab\n     */\n    async setFirstActiveTab() {\n        const allTabs = Array.from(this.el.querySelectorAll(\"gxg-tab-button\"));\n        const firstEnabledTab = allTabs.find(tab => !tab.hidden && !tab.disabled);\n        if (firstEnabledTab && firstEnabledTab.tab) {\n            this.updateActiveChildren(firstEnabledTab.tab, \"gxg-tab-button\");\n            this.updateActiveChildren(firstEnabledTab.tab, \"gxg-tab\");\n        }\n    }\n    getTab = (tab) => {\n        return this.el.querySelector(`gxg-tab-button[key=${tab}]`);\n    };\n    activateTab = () => {\n        //buttons\n        const tabButtons = Array.from(this.el.querySelectorAll(\"gxg-tab-button\"));\n        tabButtons.forEach(tabButton => {\n            if (tabButton.tab !== this.activeTab) {\n                tabButton.isSelected = false;\n            }\n            else {\n                tabButton.isSelected = true;\n            }\n        });\n        //tabs\n        const tabs = Array.from(this.el.querySelectorAll(\"gxg-tab\"));\n        tabs.forEach(tab => {\n            if (tab.tab !== this.activeTab) {\n                tab.isSelected = false;\n            }\n            else {\n                tab.isSelected = true;\n            }\n        });\n    };\n    render() {\n        return (h(Host, { style: {\n                height: this.height,\n                maxHeight: this.maxHeight,\n                minWidth: this.minWidth\n            } }, h(\"div\", { class: {\n                \"main-container\": true,\n                \"main-container--no-border\": this.noBorder\n            } }, this.position === \"bottom\"\n            ? [\n                h(\"div\", { class: \"tabs-container\" }, h(\"slot\", null)),\n                h(\"div\", { class: \"tab-bar-container\" }, h(\"slot\", { name: \"tab-bar-container\" }))\n            ]\n            : [\n                h(\"div\", { class: \"tab-bar-container\" }, h(\"slot\", { name: \"tab-bar-container\" })),\n                h(\"div\", { class: \"tabs-container\" }, h(\"slot\", null))\n            ])));\n    }\n    static get is() { return \"gxg-tabs\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"tabs.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"tabs.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"position\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"TabsPosition\",\n                    \"resolved\": \"\\\"bottom\\\" | \\\"left-rotated\\\" | \\\"left-stacked\\\" | \\\"right-rotated\\\" | \\\"right-stacked\\\" | \\\"top\\\"\",\n                    \"references\": {\n                        \"TabsPosition\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/tabs/tabs.tsx\",\n                            \"id\": \"src/components/tabs/tabs.tsx::TabsPosition\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"position\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"top\\\"\"\n            },\n            \"height\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"height\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"100%\\\"\"\n            },\n            \"maxHeight\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"max-height\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"100%\\\"\"\n            },\n            \"minWidth\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"min-width\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"200px\\\"\"\n            },\n            \"tabBarBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"tab-bar-border\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"noBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"no-border\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"buttonsBorderAbove\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"attribute\": \"buttons-border-above\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"noBackground\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute removes the background color (only for mercury)\"\n                },\n                \"attribute\": \"no-background\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"noPadding\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute removes each tab .container padding\"\n                },\n                \"attribute\": \"no-padding\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"reduced\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will make buttons and tabs reduced, meaning that the font size and padding, will be smaller. Also, the icons in the buttons will not be displayed.\"\n                },\n                \"attribute\": \"reduced\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"activeTab\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The actual active tab, and tab-button\"\n                },\n                \"attribute\": \"active-tab\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get methods() {\n        return {\n            \"setActiveTab\": {\n                \"complexType\": {\n                    \"signature\": \"(tab: string) => Promise<void>\",\n                    \"parameters\": [{\n                            \"name\": \"tab\",\n                            \"type\": \"string\",\n                            \"docs\": \"\"\n                        }],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"\",\n                    \"tags\": []\n                }\n            },\n            \"setFirstActiveTab\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Sets the first tab that is not disabled and hidden as the active tab\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"activeTab\",\n                \"methodName\": \"watchActiveTabHandler\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"tabActivated\",\n                \"method\": \"tabActivatedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=tabs.js.map\n"],"version":3}

package/dist/esm/ch-icon_5.entry.js

@@ -475,10 +475,11 @@ const COLOR_MAPPINGS = {
     "primary-hover": "color-primary-hover",
     success: "ds-success-color--dark",
     warning: "ds-warning-color--dark",
-    mercury: "gray-03",
+    mercury: "mer-icon__primary",
     "mercury-primary": "mer-icon__primary",
     "mercury-on-primary": "mer-text__on-primary",
-    "mercury-text-on-message": "mer-text__on-message"
+    "mercury-text-on-message": "mer-text__on-message",
+    "mercury-neutral": "mer-icon__neutral"
 };
 const GxgIcon = class {
     constructor(hostRef) {