@genexus/genexus-ide-ui 0.0.63 → 0.0.65

package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-view/tree-view-item/tree-view-item.css

@@ -13,12 +13,16 @@
 }
 
 :host {
-  --checkbox-size: 1em;
-  --expandable-button-width: 0.75em;
-  --ch-tree-x-list-item-dashed-line--offset: 0px;
-  --tab-width: calc(
-    var(--checkbox-size) + var(--expandable-button-width) +
-      (5px * 2)
+  --ch-tree-view-view__checkbox-size: 1em;
+  --ch-tree-view-view__expandable-button-width: 0.75em;
+  --ch-tree-view-item__dashed-line--inset-inline-start: 0px;
+  --ch-tree-view-item__dashed-line--inset-inline-end: 4px;
+  --ch-tree-view-item-gap: 5px;
+  --ch-tree-view-item-custom-padding-inline-start: 0px;
+  --ch-tree-tab-width: calc(
+    var(--ch-tree-view-view__checkbox-size) +
+      var(--ch-tree-view-view__expandable-button-width) +
+      (var(--ch-tree-view-item-gap) * 2)
   );
   display: grid;
   grid-template-rows: min-content;
@@ -30,7 +34,7 @@
   display: flex;
   align-items: center;
   min-height: calc(1em + 6px);
-  padding-inline-start: var(--padding-inline-start);
+  padding-inline-start: calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );
 }
 .header--disabled {
   opacity: 0.5;
@@ -38,12 +42,12 @@
 }
 .header--even {
   --padding-inline-start: calc(
-    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)
+    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)
   );
 }
 .header--even + .expandable {
   --parent-padding-inline-start--even: calc(
-    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)
+    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)
   );
 }
 .header--even .dashed-line {
@@ -54,26 +58,30 @@
 }
 .header--even-expandable {
   --padding-inline-start: calc(
-        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(
-    var(--expandable-button-width) + 5px
+        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -
+          calc(
+    var(--ch-tree-view-view__expandable-button-width) +
+      var(--ch-tree-view-item-gap)
   )
       );
 }
 .header--even-expandable + .expandable {
   --parent-padding-inline-start--even: calc(
-        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(
-    var(--expandable-button-width) + 5px
+        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -
+          calc(
+    var(--ch-tree-view-view__expandable-button-width) +
+      var(--ch-tree-view-item-gap)
   )
       );
 }
 .header--odd {
   --padding-inline-start: calc(
-    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)
+    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)
   );
 }
 .header--odd + .expandable {
   --parent-padding-inline-start--odd: calc(
-    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)
+    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)
   );
 }
 .header--odd .dashed-line {
@@ -84,15 +92,19 @@
 }
 .header--odd-expandable {
   --padding-inline-start: calc(
-        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(
-    var(--expandable-button-width) + 5px
+        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -
+          calc(
+    var(--ch-tree-view-view__expandable-button-width) +
+      var(--ch-tree-view-item-gap)
   )
       );
 }
 .header--odd-expandable + .expandable {
   --parent-padding-inline-start--odd: calc(
-        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(
-    var(--expandable-button-width) + 5px
+        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -
+          calc(
+    var(--ch-tree-view-view__expandable-button-width) +
+      var(--ch-tree-view-item-gap)
   )
       );
 }
@@ -104,22 +116,29 @@
 }
 .header--expandable-offset {
   --own-offset: calc(
-    var(--expandable-button-width) + 5px
+    var(--ch-tree-view-view__expandable-button-width) +
+      var(--ch-tree-view-item-gap)
   );
 }
 .header--expandable-offset + .expandable {
-  --parent-expandable-offset: calc(var(--expandable-button-width) / 2);
+  --parent-expandable-offset: calc(
+    var(--ch-tree-view-view__expandable-button-width) / 2
+  );
 }
 .header--checkbox-offset + .expandable {
-  --parent-checkbox-offset: calc(var(--checkbox-size) / 2);
-  --parent-negative-checkbox-offset: calc(var(--checkbox-size) / 2);
+  --parent-checkbox-offset: calc(
+    var(--ch-tree-view-view__checkbox-size) / 2
+  );
+  --parent-negative-checkbox-offset: calc(
+    var(--ch-tree-view-view__checkbox-size) / 2
+  );
 }
 
 .dashed-line {
   position: absolute;
-  inset-inline-start: calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );
+  inset-inline-start: calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );
   height: 1px;
-  width: calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );
+  width: calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );
   border: 0 dashed color-mix(in srgb, currentColor 65%, transparent);
   border-block-end-width: 1px;
   pointer-events: none;
@@ -129,7 +148,7 @@
 
 .last-all-line {
   inset-block-start: 0;
-  height: calc(100% - var(--distance-to-checkbox));
+  height: calc(100% - var(--ch-tree-view-item-distance-to-checkbox));
   border-inline-start-width: 1px;
   border-end-start-radius: 2px;
 }
@@ -145,20 +164,20 @@
 .expandable-button {
   display: grid;
   place-items: center;
-  width: var(--expandable-button-width);
-  height: var(--expandable-button-width);
-  margin-inline-end: 5px;
+  width: var(--ch-tree-view-view__expandable-button-width);
+  height: var(--ch-tree-view-view__expandable-button-width);
+  margin-inline-end: var(--ch-tree-view-item-gap);
   z-index: 1;
   cursor: pointer;
   content-visibility: auto;
-  contain-intrinsic-size: auto var(--expandable-button-width);
+  contain-intrinsic-size: auto var(--ch-tree-view-view__expandable-button-width);
 }
 .expandable-button::before {
   content: "";
   width: calc(100% - 2px);
   height: calc(100% - 2px);
   background-color: currentColor;
-  -webkit-mask-size: calc(var(--expandable-button-width) - 2px);
+  -webkit-mask-size: calc( var(--ch-tree-view-view__expandable-button-width) - 2px );
 }
 .expandable-button--collapsed::before {
   -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z"/></svg>');
@@ -171,11 +190,12 @@
 }
 
 .checkbox {
-  margin-inline-end: 5px;
+  width: var(--ch-tree-view-view__checkbox-size);
+  margin-inline-end: var(--ch-tree-view-item-gap);
 }
 .checkbox::part(container) {
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
+  width: var(--ch-tree-view-view__checkbox-size);
+  height: var(--ch-tree-view-view__checkbox-size);
 }
 
 .action {
@@ -202,12 +222,12 @@
 
 .left-img {
   grid-area: left-img;
-  margin-inline-end: 5px;
+  margin-inline-end: var(--ch-tree-view-item-gap);
 }
 
 .right-img {
   grid-area: right-img;
-  margin-inline-start: 5px;
+  margin-inline-start: var(--ch-tree-view-item-gap);
 }
 
 .edit-name {
@@ -249,6 +269,8 @@
   display: grid;
   grid-auto-rows: min-content;
   position: relative;
+}
+.expandable--lazy-loaded {
   content-visibility: auto;
   contain-intrinsic-size: auto 100px;
 }

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

@@ -708,7 +708,6 @@ FORM ELEMENTS
   /*button styles are included on a mixin, because they are used on both, gxg-button, and gxg-button-group elements*/
   color: var(--color-on-primary);
   /*button styles overrides*/
-  border-radius: 0;
   background-color: var(--gray-00);
   color: var(--color-primary);
   border-inline-end: 1px solid var(--gray-02);
@@ -717,12 +716,12 @@ FORM ELEMENTS
   height: 20px;
 }
 :host(.button-group) ::slotted(button:first-child) {
-  border-top-left-radius: var(--border-radius-md);
-  border-bottom-left-radius: var(--border-radius-md);
+  border-top-left-radius: var(--border-radius-xs);
+  border-bottom-left-radius: var(--border-radius-xs);
 }
 :host(.button-group) ::slotted(button:last-child) {
-  border-top-right-radius: var(--border-radius-md);
-  border-bottom-right-radius: var(--border-radius-md);
+  border-top-right-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
 }
 :host(.button-group) ::slotted(button:focus) {
   outline: none;

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

@@ -735,4 +735,100 @@ FORM ELEMENTS
 
 :host([background=gray-01]) {
   background: var(--gray-01);
+}
+
+/*********************************************
+Mercury
+**********************************************/
+:host(.mercury) {
+  /*general styles for all type of cards*/
+  /*this is usually a mixing to include in every mercury component*/
+  font-family: var(--font-family-primary);
+  font-size: var(--mc-font-size-xs);
+  color: var(--gray-03);
+  line-height: var(--line-height-default);
+  font-weight: var(--font-weight-regular);
+  box-sizing: border-box;
+  padding: 0;
+  border-radius: 0;
+  background-color: var(--gray-10);
+  box-shadow: none;
+  color: var(--gray-04);
+}
+:host(.mercury) .content {
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  overflow: auto;
+}
+:host(.mercury) .content::-webkit-scrollbar {
+  width: var(--gxg-scrollbar-width, 6px);
+}
+:host(.mercury) .content::-webkit-scrollbar-track {
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
+}
+:host(.mercury) .content::-webkit-scrollbar-thumb {
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
+}
+:host(.mercury) .content::-webkit-scrollbar-thumb:hover {
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
+  cursor: pointer;
+}
+
+/*type "section"*/
+:host(.mercury.card--section) .content {
+  padding: var(--mc-card-section-padding--v) var(--mc-card-section-padding--h);
+}
+:host(.mercury.card--section) .card__header {
+  text-transform: capitalize;
+  display: flex;
+  gap: var(--spacing-comp-03);
+  margin: var(--mc-card-section-padding--v) var(--mc-card-section-padding--h) 0 var(--mc-card-section-padding--h);
+  padding-bottom: var(--mc-card-section-padding--v);
+  border-bottom: var(--border-width-sm) solid var(--gray-13);
+}
+
+/*type "article"*/
+:host(.mercury.card--article) {
+  color: var(--gray-06);
+  font-size: var(--mc-font-size-xs);
+}
+:host(.mercury.card--article) .content {
+  padding: var(--mc-card-article-padding--v) var(--mc-card-article-padding--h);
+}
+
+/*type "mini"*/
+:host(.mercury.card--mini) {
+  color: var(--gray-05);
+  font-size: var(--mc-font-size-xxs);
+}
+:host(.mercury.card--mini) .card__header {
+  text-transform: capitalize;
+  margin: var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h) 0 var(--mc-card-mini-padding--h);
+}
+:host(.mercury.card--mini) .content {
+  padding: var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h);
+}
+
+/*type "article" or "mini" shared styles*/
+:host(.mercury.card--article),
+:host(.mercury.card--mini) {
+  border-radius: var(--border-radius-sm);
+  border: var(--border-width-sm) solid var(--gray-00);
+}
+
+/*with title*/
+:host(.mercury.card--title) .wrapper {
+  display: grid;
+  height: 100%;
+  grid-template-rows: auto 1fr;
+}
+
+/*actionable*/
+:host(.mercury.card--actionable:hover) {
+  cursor: pointer;
+  background-color: var(--gray-11);
+  border-color: var(--gray-01);
 }

package/dist/node_modules/@genexus/gemini/dist/collection/components/ide-loader/ide-loader.css

@@ -24,7 +24,7 @@ ch-window::part(window) {
   height: 100%;
 }
 
-.loader-wrapper {
+.loader__wrapper {
   opacity: 0;
   transition: var(--show-transition) opacity;
   width: 100%;
@@ -34,7 +34,6 @@ ch-window::part(window) {
   backdrop-filter: blur(15px);
   padding: var(--spacing-comp-05);
   flex-direction: column;
-  gap: var(--spacing-comp-04);
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
@@ -42,11 +41,10 @@ ch-window::part(window) {
   animation: wrapper 0.6s infinite alternate;
   color: var(--color-on-secondary);
 }
-.loader-wrapper--visible {
+.loader__wrapper--visible {
   opacity: 1;
 }
-
-.loader-spinner {
+.loader__spinner {
   border: 2px var(--gray-01) solid;
   border-top: 2px var(--color-primary-enabled) solid;
   border-radius: 50%;
@@ -55,10 +53,20 @@ ch-window::part(window) {
   width: 30px;
   height: 30px;
 }
-
-.loader-description {
+.loader__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-block-start: var(--spacing-comp-05);
+  gap: var(--spacing-comp-03);
   max-width: 400px;
-  text-align: center;
+}
+.loader__content-wrapper--hidden {
+  display: none;
+}
+.loader__cancel-button--move-up {
+  /*If the loader has title, but no description, the space between the title and the button is a little too much. Move up a little bit*/
+  position: relative;
+  top: -4px;
 }
 
 /*background color animation*/
@@ -67,7 +75,7 @@ ch-window::part(window) {
     background-color: rgba(var(--color-background--rgb), 0.45);
   }
   to {
-    background-color: rgba(var(--gray-02--rgb), 0.25);
+    background-color: rgba(var(--color-background--rgb), 0.25);
   }
 }
 /*spinner animation*/

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

@@ -393,7 +393,7 @@ FORM ELEMENTS
 }
 
 :host(.has-icon.no-checkbox) .container {
-  padding-inline-start: var(--spacing-comp-01);
+  padding-inline-start: calc(var(--spacing-comp-01) * 1.5);
 }
 
 .description {
@@ -432,5 +432,5 @@ FORM ELEMENTS
 LARGE VERSION (html tag has 'gxg-large' class)
 **********************************************/
 :host(.large) .container {
-  padding: var(--spacing-comp-01);
+  padding: var(--spacing-comp-01) var(--spacing-comp-02);
 }

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

@@ -809,4 +809,32 @@ 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

@@ -6,4 +6,11 @@
   display: flex;
   gap: var(--spacing-comp-02);
   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

@@ -385,4 +385,10 @@ LARGE VERSION (html tag has 'gxg-large' class)
 **********************************************/
 :host(.large) .container {
   font-size: var(--font-size-lg);
+}
+
+:host(.mercury) .container {
+  padding: var(--spacing-comp-05) var(--spacing-comp-04);
+  line-height: var(--line-height-default);
+  font-size: var(--mc-font-size-xs);
 }

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

@@ -432,4 +432,14 @@ FORM ELEMENTS
 :host(.rtl) .tab-bar-menu {
   left: 0;
   right: auto;
+}
+
+/*********************************************
+Mercury
+**********************************************/
+:host(.mercury) .tab-bar {
+  background: transparent;
+}
+:host(.mercury) .nav--border {
+  border-bottom-color: var(--gray-13);
 }

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

@@ -456,4 +456,47 @@ LARGE VERSION (html tag has 'gxg-large' class)
 **********************************************/
 :host(.large) .tab-button {
   font-size: var(--font-size-lg);
+}
+
+/*********************************************
+Mercury
+**********************************************/
+:host(.mercury) .tab-button {
+  padding: var(--spacing-comp-01) var(--spacing-comp-03);
+  height: 30px;
+  min-height: 0;
+  /*states > focus*/
+  /*states > hover*/
+  /*states > selected*/
+  /*after (bar line)*/
+  /*text*/
+}
+:host(.mercury) .tab-button:focus {
+  outline: var(--border-width-md) solid var(--gxg-border-color--focused);
+  outline-offset: 0;
+  outline-width: var(--border-width-sm);
+}
+:host(.mercury) .tab-button:hover:not(.tab-button--selected) {
+  --color-on-background: var(--gray-07);
+}
+:host(.mercury) .tab-button:hover:not(.tab-button--selected) .tab-button__text {
+  color: var(--gray-07);
+}
+:host(.mercury) .tab-button:hover:not(.tab-button--selected):after {
+  background-color: transparent;
+}
+:host(.mercury) .tab-button--selected {
+  pointer-events: none;
+}
+:host(.mercury) .tab-button--selected:after {
+  background-color: var(--color-primary-enabled);
+}
+:host(.mercury) .tab-button:after {
+  height: var(--border-width-sm);
+}
+:host(.mercury) .tab-button__text {
+  color: var(--gray-05);
+  font-size: var(--mc-font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: capitalize;
 }

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

@@ -398,4 +398,16 @@ FORM ELEMENTS
 :host([position=right]) .tabs-container {
   height: 100%;
   width: calc(100% - 32px);
+}
+/*********************************************
+Mercury
+**********************************************/
+:host(.mercury) {
+  background-color: var(--gray-10);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+:host(.mercury[no-background]) {
+  background-color: transparent;
 }

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

@@ -686,6 +686,7 @@ FORM ELEMENTS
   margin: 0;
   padding: 0;
   margin: 0 auto;
+  line-height: 1.6em;
 }
 :host p.no-line,
 :host q.no-line,
@@ -759,4 +760,13 @@ LARGE VERSION (html tag has 'gxg-large' class)
 :host(.large) .gxg-alert-warning,
 :host(.large) .gxg-alert-success {
   font-size: var(--font-size-lg);
+}
+
+:host(.mercury) .gxg-text {
+  font-size: var(--mc-font-size-xs);
+  color: var(--gray-02);
+}
+
+:host(.mercury[italic]) {
+  font-style: italic;
 }

package/dist/node_modules/@genexus/gemini/dist/collection/components/title-editable/title-editable.css

@@ -1,9 +1,9 @@
 :host {
   display: block;
+  color: var(--mc-editable-title-color);
 }
 :host .wrapper {
   font-family: var(--font-family-primary);
-  color: var(--color-on-background);
   position: relative;
   max-width: 100%;
 }
@@ -47,16 +47,21 @@
 
 /*title types*/
 :host([title-type=h1]) .wrapper {
-  font-size: 24px;
+  font-size: var(--mc-font-size-lg);
   font-weight: var(--font-weight-bold);
   text-transform: capitalize;
 }
 
 :host([title-type=h2]) .wrapper {
-  font-size: 16px;
+  font-size: var(--mc-font-size-sm);
   font-weight: var(--font-weight-bold);
 }
 
+:host([title-type=h3]) .wrapper {
+  font-size: var(--mc-font-size-xxs);
+  font-weight: var(--font-weight-semibold);
+}
+
 /*fluid*/
 :host([fluid]) .wrapper {
   display: inline-flex;