@genexus/genexus-ide-ui 0.0.99 → 0.0.101

package/dist/genexus-ide-ui/p-e0d9ab03.entry.js

@@ -0,0 +1,257 @@
+import { r as t, c as e, a as r, h as a, H as o, g as i } from "./p-2776d2f9.js";
+
+import { L as s } from "./p-74d59062.js";
+
+import { c as l } from "./p-9c1b4eb9.js";
+
+import { r as n } from "./p-9bd5e66b.js";
+
+import { r as g } from "./p-549b1699.js";
+
+import { g as c } from "./p-6893ccb8.js";
+
+/* References Types*/
+/**
+ * @description This function converts string[] to SuggestItemData[]
+ */ const convertSuggestedApplicationsToSuggestItems = t => {
+  const e = {
+    suggestItems: null,
+    suggestLists: []
+  };
+  if (t.length) {
+    const r = {
+      label: "Applications",
+      items: []
+    };
+    t.forEach((t => {
+      const e = {
+        value: t,
+        description: null,
+        icon: null
+      };
+      r.items.push(e);
+    }));
+    e.suggestLists.push(r);
+  }
+  return e;
+};
+
+const d = ":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)}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;}:host .header{display:flex;flex-direction:column;gap:var(--gx-ide-grid-row-gap)}:host .header__first-row{display:flex;flex-direction:row;gap:var(--gx-ide-grid-column-gap)}:host .header__first-row .application-suggest{flex:1}:host .data-mappings{display:flex;flex-direction:column}:host .row-button{display:flex;align-items:center}";
+
+const f = class {
+  constructor(o) {
+    t(this, o);
+    this.componentDidRenderFirstTime = e(this, "componentDidRenderFirstTime", 7);
+    this.renderedFirstTime = false;
+    this.shortcutsSrc = r(`./gx-ide-assets/bpm-app-declaration/shortcuts.json`);
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+        this.listenApplicationSelected = async () => {
+      this.applicationSuggestEl.addEventListener("itemSelected", (t => {
+        this.getDataMappingCallbackHandler(t.detail.value);
+      }));
+    };
+    this.applicationSuggestValueChangedHandler = async t => {
+      const e = t.detail;
+      this.suggestApplicationsCallback(e).then((t => {
+        this.suggestedApplications = convertSuggestedApplicationsToSuggestItems(t);
+      })).catch((() => {}));
+    };
+    this.getDataMappingCallbackHandler = async t => {
+      this.application = await this.getDataMappingCallback(t);
+    };
+    this.selectApplicationCallbackHandler = async () => {
+      const t = await this.selectApplicationCallback();
+      if (t) {
+        this.application = t;
+      }
+    };
+    this.confirmCallbackHandler = async () => {
+      await this.confirmCallback(this.application);
+    };
+    this.cancelCallbackHandler = async () => {
+      await this.cancelCallback();
+    };
+    this.selectMappingCallbackHandler = t => async () => {
+      if (this.selectMappingCallback) {
+        const e = await this.selectMappingCallback(t);
+        if (e) {
+          // update actual application with new relevant data option
+          // first find mapping index
+          const r = this.applicationState.mappings.findIndex((e => e.parameter === t));
+          if (r !== -1) {
+            // new relevant data could be new, or already existent.
+            const t = this.applicationState.mappings[r].relevantDataOptions.find((t => t === e));
+            if (!t) {
+              // new. add.
+              this.applicationState.mappings[r].relevantDataOptions.push(e);
+            }
+            // always set this data as selected
+                        this.applicationState.mappings[r].relevantData = e;
+            // update
+                        this.application = Object.assign({}, this.applicationState);
+          }
+        }
+      }
+    };
+    this.dataOptionsToComboItems = t => {
+      const e = [ {
+        id: this._componentLocale.dataMappings.emptyOption
+      } ];
+      t.forEach((t => {
+        const r = {
+          id: t
+        };
+        e.push(r);
+      }));
+      return e;
+    };
+    this.clearApplicationHandler = () => {
+      this.application = {
+        application: undefined,
+        mappings: []
+      };
+    };
+    this.renderDataMappingsGrid = () => {
+      var t;
+      return a("gxg-grid", {
+        "ellipsis-cell-wrapper": true,
+        noBorder: true
+      }, a("ch-grid", {
+        part: "ch-grid-data-mappings"
+      }, a("ch-grid-columnset", null, a("ch-grid-column", {
+        columnName: ((t = this.application.application) === null || t === void 0 ? void 0 : t.typeIcon) === "objects/transaction" ? this._componentLocale.dataMappings.firstColName : this._componentLocale.dataMappings.firstColNameParameter,
+        settingable: false,
+        size: c.colSize.common
+      }), a("ch-grid-column", {
+        columnName: this._componentLocale.dataMappings.secondColName,
+        settingable: false,
+        sortable: false,
+        size: c.colSize.common
+      }), a("ch-grid-column", {
+        settingable: false,
+        sortable: false,
+        size: c.colSize.auto
+      })), this.application.mappings.map(((t, e) => {
+        var r;
+        return a("ch-grid-row", {
+          rowId: e + t.parameter
+        }, a("ch-grid-cell", null, a("span", {
+          class: "cell-wrapper"
+        }, `${t.access}: ${t.parameter}`)), a("ch-grid-cell", null, a("span", {
+          class: "cell-wrapper"
+        }, a("gxg-combo-box", {
+          disableFilter: true,
+          value: t.relevantData
+        }, g((r = this.dataOptionsToComboItems(t.relevantDataOptions)) !== null && r !== void 0 ? r : [])))), a("ch-grid-cell", null, a("span", {
+          class: "cell-wrapper"
+        }, a("gxg-button", {
+          "data-index": e,
+          type: "secondary-icon-only",
+          icon: "gemini-tools/add",
+          onClick: this.selectMappingCallbackHandler(t.parameter),
+          class: "select-mapping-callback-button"
+        }))));
+      }))));
+    };
+    this.suggestedApplications = undefined;
+    this.displayTitle = false;
+    this.application = undefined;
+    this.suggestApplicationsCallback = undefined;
+    this.selectApplicationCallback = undefined;
+    this.selectMappingCallback = undefined;
+    this.confirmCallback = undefined;
+    this.cancelCallback = undefined;
+    this.getDataMappingCallback = undefined;
+  }
+  watchApplicationHandler(t) {
+    this.applicationState = t;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await s.getComponentStrings(this.el);
+    this.applicationState = this.application;
+  }
+  async componentDidLoad() {
+    /*  this.applicationSuggestValueChangedHandler(this.applicationText); */
+    this.listenApplicationSelected();
+    this.applicationSuggestEl.focus();
+  }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    var t;
+    return a(o, {
+      class: "gx-ide-component"
+    }, a("div", {
+      class: "gx-ide-main-wrapper"
+    }, a("gx-ide-container", {
+      noContentPadding: true,
+      slimmerFooter: l.gxIdeContainer.slimmerFooter,
+      containerTitle: this.displayTitle ? this._componentLocale.componentName : null
+    }, a("header", {
+      slot: "header",
+      class: "header"
+    }, a("div", {
+      class: "header__first-row"
+    }, a("gxg-suggest", {
+      class: "application-suggest"
+    }, a("ch-suggest", {
+      value: ((t = this.application.application) === null || t === void 0 ? void 0 : t.name) || null,
+      onValueChanged: this.applicationSuggestValueChangedHandler,
+      ref: t => this.applicationSuggestEl = t,
+      part: "application-suggest"
+    }, n(this.suggestedApplications))), a("gxg-button", {
+      type: "secondary-icon-only",
+      icon: "gemini-tools/show-more-horizontal",
+      onClick: this.selectApplicationCallbackHandler,
+      class: "selector-dialog-button",
+      part: "open-selector-dialog-button"
+    }), a("gxg-button", {
+      type: "outlined",
+      part: "clear-application-button",
+      onClick: this.clearApplicationHandler
+    }, "Clear")), a("div", {
+      class: "header__second-row"
+    }, a("gx-ide-title", {
+      type: "secondary"
+    }, this._componentLocale.dataMappings.title))), a("div", {
+      class: "data-mappings"
+    }, this.renderDataMappingsGrid()), a("gxg-button", {
+      type: "secondary-text-only",
+      slot: "footer-end",
+      onClick: this.cancelCallbackHandler,
+      part: "cancel-button"
+    }, this._componentLocale.buttons.cancelButton), a("gxg-button", {
+      type: "primary-text-only",
+      slot: "footer-end",
+      icon: "general/datastore",
+      onClick: this.confirmCallbackHandler,
+      part: "confirm-button"
+    }, this._componentLocale.buttons.confirmButton))), a("gxg-shortcuts", {
+      src: this.shortcutsSrc
+    }));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/bpm-app-declaration" ];
+  }
+  get el() {
+    return i(this);
+  }
+  static get watchers() {
+    return {
+      application: [ "watchApplicationHandler" ]
+    };
+  }
+};
+
+f.style = d;
+
+export { f as gx_ide_bpm_app_declaration };
+//# sourceMappingURL=p-e0d9ab03.entry.js.map

package/dist/genexus-ide-ui/{p-e585f550.entry.js → p-e3925761.entry.js}

@@ -23,11 +23,10 @@ const i = class {
     this.menuItemActive.emit(this.label);
   }
   render() {
-    return o(a, {
-      onClick: this.setActive.bind(this)
-    }, o("li", {
+    return o(a, null, o("li", {
       class: "menu-item",
-      ref: e => this.listItem = e
+      ref: e => this.listItem = e,
+      onClick: this.setActive.bind(this)
     }, o("div", {
       class: "menu-item__container"
     }, this.includeIcon(), this.label)));
@@ -37,4 +36,4 @@ const i = class {
 i.style = r;
 
 export { i as gxg_menu_item };
-//# sourceMappingURL=p-e585f550.entry.js.map
+//# sourceMappingURL=p-e3925761.entry.js.map

package/dist/genexus-ide-ui/{p-e585f550.entry.js.map → p-e3925761.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["menuItemCss","GxgMenuItem","constructor","hostRef","this","label","undefined","icon","active","includeIcon","h","slot","type","size","setActive","menuItemActive","emit","render","Host","onClick","bind","class","ref","el","listItem"],"sources":["node_modules/@genexus/gemini/dist/collection/components/menu/menu-item/menu-item.css?tag=gxg-menu-item&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/menu/menu-item/menu-item.js"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n   ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n  line-height: 1.15;\n  /* 1 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n}\n\n/* Sections\n   ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n  margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n  display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n   ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/* Text-level semantics\n   ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n  background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  text-decoration: underline dotted;\n  /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n   ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n  border-style: none;\n}\n\n/* Forms\n   ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  /* 1 */\n  font-size: 100%;\n  /* 1 */\n  line-height: 1.15;\n  /* 1 */\n  margin: 0;\n  /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n  -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=button]:-moz-focusring,\n[type=reset]:-moz-focusring,\n[type=submit]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\nlegend {\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n  overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=checkbox],\n[type=radio] {\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=search] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=search]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n}\n\n/* Interactive\n   ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n  display: list-item;\n}\n\n/* Misc\n   ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n  display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n  display: none;\n}\n\n: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 .menu-item {\n  color: var(--color-on-background);\n  position: relative;\n}\n:host .menu-item:before {\n  content: \"\";\n  display: block;\n  height: 100%;\n  width: 2px;\n  background-color: transparent;\n  position: absolute;\n}\n:host .menu-item__container {\n  height: var(--spacing-comp-06);\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0 var(--spacing-comp-05) 0 var(--spacing-comp-05);\n  display: flex;\n  align-items: center;\n}\n:host .menu-item__container:hover {\n  background-color: var(--gray-02);\n}\n:host .menu-item gxg-icon {\n  margin-right: var(--spacing-comp-01);\n}\n:host :menu-item--tab {\n  font-weight: var(--font-weight-semibold);\n}\n\n:host([active]) .menu-item:before {\n  background-color: var(--gray-03);\n}","import { h, Host } from \"@stencil/core\";\nexport class GxgMenuItem {\n    constructor() {\n        this.label = undefined;\n        this.icon = null;\n        this.active = false;\n    }\n    //A reference to the input\n    listItem;\n    // Event called 'todoCompleted' that is \"composed\", \"cancellable\" and it will bubble up!\n    menuItemActive;\n    includeIcon() {\n        if (this.icon !== null) {\n            return h(\"gxg-icon\", { slot: \"icon\", type: this.icon, size: \"small\" });\n        }\n    }\n    setActive() {\n        this.menuItemActive.emit(this.label);\n    }\n    render() {\n        return (h(Host, { onClick: this.setActive.bind(this) }, h(\"li\", { class: \"menu-item\", ref: (el) => (this.listItem = el) }, h(\"div\", { class: \"menu-item__container\" }, this.includeIcon(), this.label))));\n    }\n    static get is() { return \"gxg-menu-item\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"menu-item.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"menu-item.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"label\": {\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\": \"label\",\n                \"reflect\": false\n            },\n            \"icon\": {\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\": \"icon\",\n                \"reflect\": false,\n                \"defaultValue\": \"null\"\n            },\n            \"active\": {\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\": \"active\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"menuItemActive\",\n                \"name\": \"menuItemActive\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n}\n//# sourceMappingURL=menu-item.js.map\n"],"mappings":";;AAAA,MAAMA,IAAc;;MCCPC,IAAW;EACpB,WAAAC,CAAAC;;;IACIC,KAAKC,QAAQC;IACbF,KAAKG,OAAO;IACZH,KAAKI,SAAS;;EAMlB,WAAAC;IACI,IAAIL,KAAKG,SAAS,MAAM;MACpB,OAAOG,EAAE,YAAY;QAAEC,MAAM;QAAQC,MAAMR,KAAKG;QAAMM,MAAM;;;;EAGpE,SAAAC;IACIV,KAAKW,eAAeC,KAAKZ,KAAKC;;EAElC,MAAAY;IACI,OAAQP,EAAEQ,GAAM;MAAEC,SAASf,KAAKU,UAAUM,KAAKhB;OAASM,EAAE,MAAM;MAAEW,OAAO;MAAaC,KAAMC,KAAQnB,KAAKoB,WAAWD;OAAOb,EAAE,OAAO;MAAEW,OAAO;OAA0BjB,KAAKK,eAAeL,KAAKC"}
+{"version":3,"names":["menuItemCss","GxgMenuItem","constructor","hostRef","this","label","undefined","icon","active","includeIcon","h","slot","type","size","setActive","menuItemActive","emit","render","Host","class","ref","el","listItem","onClick","bind"],"sources":["node_modules/@genexus/gemini/dist/collection/components/menu/menu-item/menu-item.css?tag=gxg-menu-item&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/menu/menu-item/menu-item.js"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n   ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n  line-height: 1.15;\n  /* 1 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n}\n\n/* Sections\n   ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n  margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n  display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n   ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/* Text-level semantics\n   ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n  background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  text-decoration: underline dotted;\n  /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n   ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n  border-style: none;\n}\n\n/* Forms\n   ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  /* 1 */\n  font-size: 100%;\n  /* 1 */\n  line-height: 1.15;\n  /* 1 */\n  margin: 0;\n  /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n  -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=button]:-moz-focusring,\n[type=reset]:-moz-focusring,\n[type=submit]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\nlegend {\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n  overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=checkbox],\n[type=radio] {\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=search] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=search]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n}\n\n/* Interactive\n   ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n  display: list-item;\n}\n\n/* Misc\n   ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n  display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n  display: none;\n}\n\n: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 .menu-item {\n  color: var(--color-on-background);\n  position: relative;\n}\n:host .menu-item:before {\n  content: \"\";\n  display: block;\n  height: 100%;\n  width: 2px;\n  background-color: transparent;\n  position: absolute;\n}\n:host .menu-item__container {\n  height: var(--spacing-comp-06);\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0 var(--spacing-comp-05) 0 var(--spacing-comp-05);\n  display: flex;\n  align-items: center;\n}\n:host .menu-item__container:hover {\n  background-color: var(--gray-02);\n}\n:host .menu-item gxg-icon {\n  margin-right: var(--spacing-comp-01);\n}\n:host :menu-item--tab {\n  font-weight: var(--font-weight-semibold);\n}\n\n:host([active]) .menu-item:before {\n  background-color: var(--gray-03);\n}","import { h, Host } from \"@stencil/core\";\nexport class GxgMenuItem {\n    constructor() {\n        this.label = undefined;\n        this.icon = null;\n        this.active = false;\n    }\n    //A reference to the input\n    listItem;\n    // Event called 'todoCompleted' that is \"composed\", \"cancellable\" and it will bubble up!\n    menuItemActive;\n    includeIcon() {\n        if (this.icon !== null) {\n            return h(\"gxg-icon\", { slot: \"icon\", type: this.icon, size: \"small\" });\n        }\n    }\n    setActive() {\n        this.menuItemActive.emit(this.label);\n    }\n    render() {\n        return (h(Host, null, h(\"li\", { class: \"menu-item\", ref: el => (this.listItem = el), onClick: this.setActive.bind(this) }, h(\"div\", { class: \"menu-item__container\" }, this.includeIcon(), this.label))));\n    }\n    static get is() { return \"gxg-menu-item\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"menu-item.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"menu-item.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"label\": {\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\": \"label\",\n                \"reflect\": false\n            },\n            \"icon\": {\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\": \"icon\",\n                \"reflect\": false,\n                \"defaultValue\": \"null\"\n            },\n            \"active\": {\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\": \"active\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"menuItemActive\",\n                \"name\": \"menuItemActive\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n}\n//# sourceMappingURL=menu-item.js.map\n"],"mappings":";;AAAA,MAAMA,IAAc;;MCCPC,IAAW;EACpB,WAAAC,CAAAC;;;IACIC,KAAKC,QAAQC;IACbF,KAAKG,OAAO;IACZH,KAAKI,SAAS;;EAMlB,WAAAC;IACI,IAAIL,KAAKG,SAAS,MAAM;MACpB,OAAOG,EAAE,YAAY;QAAEC,MAAM;QAAQC,MAAMR,KAAKG;QAAMM,MAAM;;;;EAGpE,SAAAC;IACIV,KAAKW,eAAeC,KAAKZ,KAAKC;;EAElC,MAAAY;IACI,OAAQP,EAAEQ,GAAM,MAAMR,EAAE,MAAM;MAAES,OAAO;MAAaC,KAAKC,KAAOjB,KAAKkB,WAAWD;MAAKE,SAASnB,KAAKU,UAAUU,KAAKpB;OAASM,EAAE,OAAO;MAAES,OAAO;OAA0Bf,KAAKK,eAAeL,KAAKC"}

package/dist/node_modules/@genexus/gemini/dist/collection/components/card/card.css

@@ -779,6 +779,12 @@ FORM ELEMENTS
   white-space: nowrap;
   overflow: hidden;
 }
+:host(.card) .card__header--left-full-width {
+  width: 100% !important;
+}
+:host(.card) .card__header--left-full-width .card-title-wrapper {
+  white-space: unset;
+}
 :host(.card) .card__header--right {
   display: flex;
   flex-direction: row;
@@ -841,6 +847,7 @@ FORM ELEMENTS
   background-color: var(--mer-elevation__background-color--02);
   border: var(--mer-elevation__border-02);
   box-shadow: var(--mer-elevation__box-shadow--02);
+  border: var(--gxg-card-article_border);
 }
 :host(.card--article) .card__header .card__title {
   margin: var(--gxg-card-article-title_margin);
@@ -873,7 +880,7 @@ FORM ELEMENTS
   background-color: var(--mer-elevation__background-color--02);
   border: var(--mer-elevation__border-02);
   box-shadow: var(--mer-elevation__box-shadow--02);
-  border-color: transparent;
+  border: var(--gxg-card-mini_border);
 }
 :host(.card--mini) .card__header {
   margin: var(--gxg-card-mini-header_margin);
@@ -919,6 +926,11 @@ FORM ELEMENTS
   border-bottom: 0;
 }
 
+/*noBorder*/
+:host(.card--no-border) {
+  border: none !important;
+}
+
 /*hiChar*/
 .hiChar {
   color: var(--gxg-hi-char-color);

package/dist/node_modules/@genexus/gemini/dist/collection/components/pills/pill.css

@@ -655,14 +655,11 @@ FORM ELEMENTS
 :host {
   display: inline-flex;
   align-items: center;
-  border-color: var(--gray-02);
-  border-width: var(--border-width-sm);
-  border-style: var(--border-style-regular);
-  border-radius: 11px;
-  padding-inline-start: var(--spacing-comp-02);
-  padding-inline-end: var(--spacing-comp-03);
+  border-radius: var(--gxg-pill__border-radius);
+  padding-inline-start: var(--gxg-pill__padding-inline-start);
+  padding-inline-end: var(--gxg-pill__padding-inline-end);
   opacity: 1;
-  height: var(--spacing-comp-04);
+  height: var(--gxg-pill__height);
   box-sizing: border-box;
   transition-property: opacity;
   transition-duration: var(--ui-animaton-speed);
@@ -676,7 +673,6 @@ FORM ELEMENTS
   line-height: var(--ds-base-font-line-height--comfortable);
 }
 :host .clear-button {
-  margin-inline-start: 10px;
   cursor: pointer;
   opacity: 0.7;
 }
@@ -700,9 +696,9 @@ FORM ELEMENTS
 
 :host([type=static]),
 :host([type=static-with-action]) {
-  background-color: var(--gray-01);
-  border-color: var(--gray-01);
-  font-style: italic;
+  border: var(--gxg-pill-static__border);
+  background-color: var(--gxg-pill-static__background-color);
+  font-style: var(--gxg-pill-static__font-style);
 }
 
 :host([type=static-with-action]),
@@ -710,39 +706,36 @@ FORM ELEMENTS
   padding-inline-end: 0;
 }
 
-:host([type=button]) {
-  padding-inline-end: var(--spacing-comp-02);
+:host([type=button]),
+:host([type=button-with-action]) {
+  border: var(--gxg-pill-with-action__border);
 }
 
 :host([type=button]:hover),
 :host([type=button-with-action]:hover) {
-  border-color: var(--gray-07);
+  border: var(--gxg-pill-with-action__border--hover);
   cursor: pointer;
 }
 
 :host([type=button]:focus),
 :host([type=button-with-action]:focus) {
-  border-color: var(--gray-07);
+  border: var(--gxg-pill-with-action__border--hover);
 }
 
 :host([type=button]:active),
 :host([type=button-with-action]:active) {
-  border-color: var(--gray-07);
+  border: var(--gxg-pill-with-action__border--hover);
 }
 
-:host([type=button-with-action]) {
-  padding-inline-end: 2px;
-}
 :host([type=button-with-action]) .clear-button {
   cursor: pointer;
   opacity: 0.5;
-  margin-inline-start: 8px;
 }
 :host([type=button-with-action]) .clear-button:hover {
   opacity: 0.75;
 }
 
-:host(.hide) {
+:host(.hide-pill) {
   opacity: 0;
 }
 
@@ -754,7 +747,7 @@ FORM ELEMENTS
   pointer-events: none;
 }
 :host([disabled]) .title {
-  color: var(--gray-03);
+  color: var(--gxg-pill__color--disabled);
 }
 :host([disabled]) gxg-icon {
   opacity: 0.3;
@@ -762,7 +755,7 @@ FORM ELEMENTS
 
 :host([disabled][type=button]),
 :host([disabled][type=button-with-action]) {
-  border-color: var(--gray-03);
+  border: var(--gxg-pill-with-action__border--disabled);
 }
 
 :host([disabled]:focus) {
@@ -784,32 +777,4 @@ LARGE VERSION (html tag has 'gxg-large' class)
 }
 :host(.large) gxg-icon.clear-button {
   transform: scale(0.85);
-}
-
-/*********************************************
-Mercury
-**********************************************/
-:host(.mercury) {
-  background-color: var(--gray-10);
-  padding: var(--spacing-comp-01) var(--spacing-comp-04);
-  border-radius: var(--border-radius-xl);
-  height: 34px;
-  border-color: transparent;
-}
-:host(.mercury) .title {
-  font-size: var(--font-size--xs);
-  color: var(--gray-07);
-}
-
-:host(.mercury[type=static]),
-:host(.mercury[type=static-with-action]) {
-  background-color: var(--gray-10);
-}
-:host(.mercury[type=static]) .title,
-:host(.mercury[type=static-with-action]) .title {
-  color: var(--gray-03);
-}
-
-:host(.mercury[italic]) .title {
-  font-style: italic;
 }

package/dist/node_modules/@genexus/gemini/dist/collection/components/pills/pills.css

@@ -4,13 +4,6 @@
 
 .pills-wrapper {
   display: flex;
-  gap: var(--spacing-comp-02);
+  gap: var(--gxg-pills__gap);
   flex-wrap: wrap;
-}
-
-/*********************************************
-Mercury
-**********************************************/
-:host(.mercury) .pills-wrapper {
-  gap: var(--spacing-comp-04);
 }

package/dist/node_modules/@genexus/gemini/dist/collection/components/tab/tab.css

@@ -357,6 +357,13 @@ FORM ELEMENTS
 :host .container::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0);
 }
+:host .container--reduced {
+  font-size: var(--gxg-tab-font-size--reduced);
+  padding-block-start: var(--gxg-tab-vertical-padding--reduced);
+  padding-inline-end: var(--gxg-tab-horizontal-padding--reduced);
+  padding-block-end: var(--gxg-tab-vertical-padding--reduced);
+  padding-inline-start: var(--gxg-tab-horizontal-padding--reduced);
+}
 
 :host(.not-selected) {
   display: none;

package/dist/node_modules/@genexus/gemini/dist/collection/components/tab-bar/tab-bar.css

@@ -382,6 +382,24 @@ FORM ELEMENTS
   width: 0;
 }
 
+/*Stacked*/
+:host(.gxg-tab-bar--left-stacked),
+:host(.gxg-tab-bar--right-stacked) {
+  height: 100%;
+}
+:host(.gxg-tab-bar--left-stacked) .tab-bar,
+:host(.gxg-tab-bar--right-stacked) .tab-bar {
+  flex-direction: column;
+}
+
+:host(.gxg-tab-bar--left-stacked) {
+  border-inline-end: var(--ds-border-common-styles);
+}
+
+:host(.gxg-tab-bar--right-stacked) {
+  border-inline-start: var(--ds-border-common-styles);
+}
+
 /*Scrollable*/
 :host([scrollable]) .nav {
   width: 100%;