@genexus/genexus-ide-ui 0.0.58 → 0.0.60

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

@@ -660,19 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 
@@ -716,6 +715,7 @@ FORM ELEMENTS
   padding-left: var(--spacing-comp-03);
   line-height: var(--line-height-regular);
   transition: background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;
+  border: 1px solid transparent;
   /*button styles are included on a mixin, because they are used on both, gxg-button, and gxg-button-group elements*/
 }
 :host(.button) .button-native:hover:not([disabled]) {
@@ -724,9 +724,7 @@ FORM ELEMENTS
 }
 :host(.button) .button-native:focus:not([disabled]):not(.no-tab-index) {
   background: var(--color-primary-enabled);
-  outline-style: solid;
-  outline-color: var(--gxg-border-color--focused);
-  outline-width: var(--border-width-md);
+  outline: var(--border-width-md) solid var(--gxg-border-color--focused);
   outline-offset: -2px;
 }
 :host(.button) .button-native:active:not([disabled]) {
@@ -734,7 +732,7 @@ FORM ELEMENTS
 }
 
 :host(.button.button--disabled) .button-native {
-  background: var(--color-primary-disabled);
+  background: var(--gxg-background-color--disabled);
   color: var(--color-primary-disabled);
   pointer-events: none;
 }
@@ -743,6 +741,13 @@ FORM ELEMENTS
   pointer-events: none;
 }
 
+/*********************************
+PRIMARY
+*********************************/
+:host(.button--primary) {
+  --gxg-border-color--focused: var(--color-primary-active--inverted);
+}
+
 /*********************************
 PRIMARY 'TEXT ONLY' BUTTON TYPE
 *********************************/
@@ -810,7 +815,6 @@ SECONDARY 'TEXT ONLY' BUTTON TYPE
 :host(.button--secondary-text-only) .button-native:focus:not([disabled]):not(.no-tab-index) {
   color: var(--color-primary-active);
   background: transparent;
-  box-shadow: var(--box-shadow-values) var(--color-primary-active);
 }
 :host(.button--secondary-text-only) .button-native:active:not([disabled]) {
   color: var(--color-primary-active);
@@ -844,7 +848,6 @@ SECONDARY 'TEXT ICON' BUTTON TYPE
 :host(.button--secondary-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index) {
   color: var(--color-primary-active);
   background: transparent;
-  box-shadow: var(--box-shadow-values) var(--color-primary-active);
 }
 :host(.button--secondary-text-icon) .button-native:active:not([disabled]) {
   color: var(--color-primary-active);
@@ -884,7 +887,7 @@ SECONDARY 'TEXT ICON' BUTTON TYPE
 *********************************/
 :host(.button--outlined) .button-native,
 :host(.button--outlined-text-icon) .button-native {
-  box-shadow: inset 0px 0px 0px 1px var(--color-primary-enabled);
+  border-color: var(--color-primary-enabled);
   background: var(--color-background);
   padding-inline-start: var(--spacing-comp-04);
   padding-inline-end: var(--spacing-comp-04);
@@ -892,20 +895,20 @@ SECONDARY 'TEXT ICON' BUTTON TYPE
 :host(.button--outlined) .button-native:hover:not([disabled]),
 :host(.button--outlined-text-icon) .button-native:hover:not([disabled]) {
   color: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
   background: var(--color-primary-hover-opacity-01);
-  box-shadow: inset 0px 0px 0px 1px var(--color-primary-hover);
 }
 :host(.button--outlined) .button-native:focus:not([disabled]):not(.no-tab-index),
 :host(.button--outlined-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index) {
   color: var(--color-primary-active);
   background: transparent;
-  box-shadow: inset 0px 0px 0px 2px var(--color-primary-active);
+  outline: var(--border-width-md) solid var(--gxg-border-color--focused);
+  outline-offset: -2px;
 }
 :host(.button--outlined) .button-native:active:not([disabled]),
 :host(.button--outlined-text-icon) .button-native:active:not([disabled]) {
   color: var(--color-primary-active);
   background: transparent;
-  box-shadow: inset 0px 0px 0px 1px var(--color-primary-active);
 }
 :host(.button--outlined) .button-native gxg-icon:not(.ghost-icon),
 :host(.button--outlined-text-icon) .button-native gxg-icon:not(.ghost-icon) {
@@ -914,7 +917,7 @@ SECONDARY 'TEXT ICON' BUTTON TYPE
 
 :host(.button--outlined.button--disabled) .button-native,
 :host(.button--outlined-text-icon.button--disabled) .button-native {
-  box-shadow: inset 0px 0px 0px 1px var(--color-primary-disabled);
+  border-color: var(--gxg-border-color--disabled);
   background: var(--color-transparent);
   color: var(--color-primary-disabled);
 }
@@ -939,7 +942,8 @@ SECONDARY 'TEXT ICON' BUTTON TYPE
 }
 :host(.button--tertiary) .button-native:focus:not([disabled]):not(.no-tab-index) {
   background: transparent;
-  box-shadow: var(--box-shadow-values) var(--color-primary-active);
+  outline: var(--border-width-md) solid var(--gxg-border-color--focused);
+  outline-offset: -2px;
 }
 :host(.button--tertiary) .button-native:active:not([disabled]) {
   background: transparent;
@@ -1004,6 +1008,26 @@ ICON ONLY
   padding: 0;
 }
 
+/*********************************
+GRAB ATTENTION ANIMATION
+*********************************/
+:host(.button--primary-text-only[grab-attention]:not([disabled])) .button-native:not(:hover),
+:host(.button--primary-text-icon[grab-attention]:not([disabled])) .button-native:not(:hover),
+:host(.button--primary-icon-only[grab-attention]:not([disabled])) .button-native:not(:hover) {
+  animation-name: grabAttentionPrimary;
+  animation-duration: 500ms;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes grabAttentionPrimary {
+  from {
+    background-color: var(--color-primary-enabled);
+  }
+  to {
+    background-color: var(--color-primary-hover);
+  }
+}
 /*********************************************
 LARGE VERSION (html tag has 'gxg-large' class)
 **********************************************/

package/dist/node_modules/@genexus/gemini/dist/collection/components/button-group/button-group.css

@@ -660,19 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 
@@ -710,9 +709,9 @@ FORM ELEMENTS
   color: var(--color-on-primary);
   /*button styles overrides*/
   border-radius: 0;
-  background-color: var(--gray-01);
+  background-color: var(--gray-00);
   color: var(--color-primary);
-  border-right: 1px solid var(--gray-02);
+  border-inline-end: 1px solid var(--gray-02);
   padding-left: var(--spacing-comp-03);
   padding-right: var(--spacing-comp-03);
   height: 20px;
@@ -725,30 +724,51 @@ FORM ELEMENTS
   border-top-right-radius: var(--border-radius-md);
   border-bottom-right-radius: var(--border-radius-md);
 }
-:host(.button-group) ::slotted(button:hover) {
-  cursor: pointer;
-  color: var(--color-on-primary);
-  background: var(--color-primary-hover);
-}
 :host(.button-group) ::slotted(button:focus) {
   outline: none;
 }
 :host(.button-group) ::slotted(button[data-active]) {
   color: var(--color-on-primary);
-  background-color: var(--color-primary-active);
-  border-right-color: var(--color-primary-active);
+  background-color: var(--color-primary-enabled);
+  border-right-color: var(--color-primary-enabled);
 }
-:host(.button-group) .disabled-layer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  cursor: not-allowed;
-  z-index: 10;
+:host(.button-group) ::slotted(button:not([outlined]):hover) {
+  color: var(--color-on-primary);
+  background-color: var(--color-primary-hover);
+  cursor: pointer;
+}
+
+:host([disable-active]) ::slotted(button[data-active]) {
+  pointer-events: none;
+}
+
+/*Disabled*/
+:host(:not([outlined])) ::slotted(button[data-active]) {
+  --gxg-border-color--focused: var(--color-primary-active--inverted);
+  color: var(--color-on-primary);
+  background-color: var(--color-primary-enabled);
+  border-right-color: var(--color-primary-enabled);
+}
+:host(:not([outlined])) ::slotted(button[disabled]) {
+  background-color: var(--gxg-background-color--disabled);
+  color: var(--gxg-color--disabled);
+  border-inline-end-color: var(--gxg-border-color--disabled);
+  pointer-events: none;
+}
+
+:host([outlined]) ::slotted(button[disabled]),
+:host([outlined]) ::slotted(button[data-active][disabled]) {
+  background-color: var(--color-background);
+  color: var(--gxg-color--disabled);
+  border-color: var(--gxg-border-color--disabled);
+  pointer-events: none;
+  cursor: cell;
 }
 
 :host(.button-group:not([disabled])) ::slotted(button:focus) {
   outline: none;
-  box-shadow: var(--box-shadow-values) var(--color-primary-active);
+  outline: var(--border-width-md) solid var(--gxg-border-color--focused);
+  outline-offset: -2px;
 }
 
 :host(.rtl) ::slotted(button:last-child) {
@@ -777,10 +797,20 @@ FORM ELEMENTS
 }
 
 :host([outlined]) ::slotted(button) {
-  background: transparent;
+  background: var(--color-background);
   border-width: var(--border-width-sm);
   border-style: var(--border-style-regular);
-  border-color: var(--color-primary-active);
+  border-color: var(--color-primary-enabled);
+}
+
+:host([outlined]) ::slotted(button[data-active]) {
+  color: var(--color-primary-hover);
+  background-color: var(--color-primary-hover-opacity-01);
+}
+
+:host([outlined]) ::slotted(button:hover) {
+  color: var(--color-primary-hover);
+  background-color: var(--color-primary-hover-opacity-01);
 }
 
 :host([outlined]) ::slotted(button:not(:last-child)) {
@@ -791,12 +821,6 @@ FORM ELEMENTS
   border-right: none;
 }
 
-:host([outlined][disabled]) ::slotted(button) {
-  border-color: var(--color-primary-disabled);
-  color: var(--color-primary-disabled);
-  background-color: transparent;
-}
-
 /*CENTER*/
 :host([title-alignment=center]) {
   /*Title alignment*/
@@ -812,15 +836,6 @@ FORM ELEMENTS
   justify-content: flex-end;
 }
 
-:host([disabled]) ::slotted(button),
-:host([disabled]) ::slotted(button[data-active]) {
-  background-color: var(--color-primary-disabled);
-  color: var(--color-on-disabled);
-}
-:host([disabled]) ::slotted(button) {
-  border-right-color: var(--color-on-disabled);
-}
-
 :host([full-width]) {
   display: block;
   width: 100%;

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

@@ -660,19 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 

package/dist/node_modules/@genexus/gemini/dist/collection/components/color-picker/color-picker.css

@@ -322,19 +322,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 

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

@@ -660,19 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 

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

@@ -660,19 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 

package/dist/node_modules/@genexus/gemini/dist/collection/components/combo-box/combo-box.css

@@ -660,22 +660,87 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 
+/*Warning*/
+:host(.gxg-validation--warning) .form-element {
+  border-color: var(--color-warning-dark);
+}
+:host(.gxg-validation--warning) .form-element:focus {
+  outline-color: var(--color-warning-dark);
+  border-color: var(--color-warning-dark);
+}
+:host(.gxg-validation--warning) .form-element:focus + .checkmark {
+  --checkmark-border-color: var(--color-warning-dark);
+}
+
+/*Error*/
+:host(.gxg-validation--error) .form-element {
+  border-color: var(--color-error-dark);
+}
+:host(.gxg-validation--error) .form-element:focus {
+  outline-color: var(--color-error-dark);
+  border-color: var(--color-error-dark);
+}
+:host(.gxg-validation--error) .form-element:focus + .checkmark {
+  --checkmark-border-color: var(--color-error-dark);
+}
+
+/*Success*/
+:host(.gxg-validation--success) .form-element {
+  border-color: var(--color-success-dark);
+}
+:host(.gxg-validation--success) .form-element:focus {
+  outline-color: var(--color-success-dark);
+  border-color: var(--color-success-dark);
+}
+:host(.gxg-validation--success) .form-element:focus + .checkmark {
+  --checkmark-border-color: var(--color-success-dark);
+}
+
+/*Tooltip*/
+.tooltip-outer-wrapper {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns var(--timing-02);
+}
+
+:host(.tooltip--visible) .tooltip-outer-wrapper {
+  grid-template-columns: 1fr;
+}
+
+.tooltip-inner-wrapper {
+  overflow: hidden;
+  transition: 150ms width;
+  width: 0;
+}
+.tooltip-inner-wrapper gxg-icon {
+  display: flex;
+  position: relative !important;
+  top: 0 !important;
+  transform: none !important;
+  margin-inline-start: var(--spacing-comp-01);
+}
+.tooltip-inner-wrapper--visible {
+  width: 24px;
+}
+.tooltip-inner-wrapper--hidden {
+  display: none;
+}
+
 :host {
   font-family: var(--font-family-primary);
   display: block;
@@ -693,7 +758,6 @@ FORM ELEMENTS
 }
 :host .main-container .outer-wrapper {
   display: flex;
-  gap: var(--spacing-comp-01);
   align-items: center;
 }
 :host .main-container .label {
@@ -736,19 +800,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 :host .main-container .items-container::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 :host .main-container .items-container::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 :host .main-container .items-container::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 :host .main-container .items-container::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 :host .main-container .items-container--show {

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

@@ -321,19 +321,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 

package/dist/node_modules/@genexus/gemini/dist/collection/components/contextual-menu/contextual-menu.css

@@ -660,19 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 

package/dist/node_modules/@genexus/gemini/dist/collection/components/contextual-menu-item/contextual-menu-item.css

@@ -660,19 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }
 

package/dist/node_modules/@genexus/gemini/dist/collection/components/contextual-menu-submenu/contextual-menu-submenu.css

@@ -660,19 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
   cursor: pointer;
 }