@genexus/mercury 0.9.11 → 0.9.13

package/dist/mercury.scss

@@ -830,8 +830,8 @@
 @mixin spinner($size) {
   width: $size;
   height: $size;
-  border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
-  border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
+  border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
+  border-top: calc($size / 5) solid var(--mer-color__primary--300);
   border-radius: 50%;
   animation: spin var(--mer-timing--regular) linear infinite;
 
@@ -846,26 +846,26 @@
 }
 
 /// @group UtilityClasses
-/// @param {String} $elevation-01-selector [".elevation-01"] -
-/// @param {String} $elevation-02-selector [".elevation-02"] -
-/// @param {String} $elevation-03-selector [".elevation-03"] -
+/// @param {String} $elevation-1-selector [".elevation-1,:host(.elevation-1)"] -
+/// @param {String} $elevation-2-selector [".elevation-2,:host(.elevation-2)"] -
+/// @param {String} $elevation-3-selector [".elevation-3,:host(.elevation-3)"] -
 @mixin utilities-elevation(
-  $elevation-01-selector: ".elevation-01",
-  $elevation-02-selector: ".elevation-02",
-  $elevation-03-selector: ".elevation-03"
+  $elevation-1-selector: ".elevation-1,:host(.elevation-1)",
+  $elevation-2-selector: ".elevation-2,:host(.elevation-2)",
+  $elevation-3-selector: ".elevation-3,:host(.elevation-3)"
 ) {
-  #{$elevation-01-selector},
-  #{$elevation-02-selector},
-  #{$elevation-03-selector} {
+  #{$elevation-1-selector},
+  #{$elevation-2-selector},
+  #{$elevation-3-selector} {
     color: var(--mer-text__on-elevation);
   }
-  #{$elevation-01-selector} {
+  #{$elevation-1-selector} {
     background-color: var(--mer-surface__elevation--01);
   }
-  #{$elevation-02-selector} {
+  #{$elevation-2-selector} {
     background-color: var(--mer-surface__elevation--02);
   }
-  #{$elevation-03-selector} {
+  #{$elevation-3-selector} {
     background-color: var(--mer-surface__elevation--03);
   }
 }
@@ -975,10 +975,10 @@
 
     // TODO: update with Globant colors when available
     // primary
-    --mer-color__primary-blue--200: #005ac1;
-    --mer-color__primary-blue--300: #5498e8;
-    --mer-color__primary-blue--400: #437dc0;
-    --mer-color__primary-blue--600: #335884;
+    --mer-color__primary--200: #005ac1;
+    --mer-color__primary--300: #5498e8;
+    --mer-color__primary--400: #437dc0;
+    --mer-color__primary--600: #335884;
 
     // neutral
     --mer-color__neutral-gray--100: #4a5870;
@@ -1002,12 +1002,12 @@
     --mer-color__tinted-red--60: #fbb2b7;
     --mer-color__tinted-green--5: #f2f7f8;
     --mer-color__tinted-green--60: #94cac4;
-    --mer-color__tinted-blue--5: #f3f6fd;
-    --mer-color__tinted-blue--8: #eff5fd;
-    --mer-color__tinted-blue--10: #ecf3fd;
-    --mer-color__tinted-blue--20: #deebfe;
-    --mer-color__tinted-blue--30: #cfe3fe;
-    --mer-color__tinted-blue--50: #b1d2fe;
+    --mer-color__tinted-primary--5: #f3f6fd;
+    --mer-color__tinted-primary--8: #eff5fd;
+    --mer-color__tinted-primary--10: #ecf3fd;
+    --mer-color__tinted-primary--20: #deebfe;
+    --mer-color__tinted-primary--30: #cfe3fe;
+    --mer-color__tinted-primary--50: #b1d2fe;
 
     // message
     --mer-color__message-green--100: #208e80;
@@ -1024,10 +1024,10 @@
     // Mercury Colors
 
     // primary
-    --mer-color__primary-blue--200: #005ac1;
-    --mer-color__primary-blue--300: #5498e8;
-    --mer-color__primary-blue--400: #437dc0;
-    --mer-color__primary-blue--600: #335884;
+    --mer-color__primary--200: #005ac1;
+    --mer-color__primary--300: #5498e8;
+    --mer-color__primary--400: #437dc0;
+    --mer-color__primary--600: #335884;
 
     // neutral
     --mer-color__neutral-gray--100: #4a5870;
@@ -1051,12 +1051,12 @@
     --mer-color__tinted-red--60: #fbb2b7;
     --mer-color__tinted-green--5: #f2f7f8;
     --mer-color__tinted-green--60: #94cac4;
-    --mer-color__tinted-blue--5: #f3f6fd;
-    --mer-color__tinted-blue--8: #eff5fd;
-    --mer-color__tinted-blue--10: #ecf3fd;
-    --mer-color__tinted-blue--20: #deebfe;
-    --mer-color__tinted-blue--30: #cfe3fe;
-    --mer-color__tinted-blue--50: #b1d2fe;
+    --mer-color__tinted-primary--5: #f3f6fd;
+    --mer-color__tinted-primary--8: #eff5fd;
+    --mer-color__tinted-primary--10: #ecf3fd;
+    --mer-color__tinted-primary--20: #deebfe;
+    --mer-color__tinted-primary--30: #cfe3fe;
+    --mer-color__tinted-primary--50: #b1d2fe;
 
     // message
     --mer-color__message-green--100: #208e80;
@@ -1077,10 +1077,10 @@
     // Globant Colors
 
     // primary
-    --mer-color__primary-blue--200: #bfd732;
-    --mer-color__primary-blue--300: #b4cc28;
-    --mer-color__primary-blue--400: #96aa22;
-    --mer-color__primary-blue--600: #697718;
+    --mer-color__primary--200: #bfd732;
+    --mer-color__primary--300: #b4cc28;
+    --mer-color__primary--400: #96aa22;
+    --mer-color__primary--600: #697718;
 
     // neutral
     --mer-color__neutral-gray--100: #ededed;
@@ -1105,16 +1105,16 @@
     --mer-color__tinted-red--60: #aa5962;
     --mer-color__tinted-green--5: #1c2830;
     --mer-color__tinted-green--60: #317571;
-    --mer-color__tinted-blue--5: #202118;
-    --mer-color__tinted-blue--8: #242619;
-    --mer-color__tinted-blue--10: #282a1a;
-    --mer-color__tinted-blue--20: #383d1c;
-    --mer-color__tinted-blue--30: #49501f;
-    --mer-color__tinted-blue--50: #6a7624;
+    --mer-color__tinted-primary--5: #202118;
+    --mer-color__tinted-primary--8: #242619;
+    --mer-color__tinted-primary--10: #282a1a;
+    --mer-color__tinted-primary--20: #383d1c;
+    --mer-color__tinted-primary--30: #49501f;
+    --mer-color__tinted-primary--50: #6a7624;
 
     // message
-    --mer-color__message-green--100: #208e80;
-    --mer-color__message-green--200: #208e80;
+    --mer-color__message-green--100: #b1e1b6;
+    --mer-color__message-green--200: #9ccba1;
     --mer-color__message-yellow--100: #dfa135;
     --mer-color__message-yellow--200: #dfa135;
     --mer-color__message-red--100: #da1a27;
@@ -1127,10 +1127,10 @@
     // Mercury Colors
 
     // primary
-    --mer-color__primary-blue--200: #5ba7ff;
-    --mer-color__primary-blue--300: #5498e8;
-    --mer-color__primary-blue--400: #437dc0;
-    --mer-color__primary-blue--600: #335884;
+    --mer-color__primary--200: #5ba7ff;
+    --mer-color__primary--300: #5498e8;
+    --mer-color__primary--400: #437dc0;
+    --mer-color__primary--600: #335884;
 
     // neutral
     --mer-color__neutral-gray--100: #e1ecf9;
@@ -1154,12 +1154,12 @@
     --mer-color__tinted-red--60: #aa5962;
     --mer-color__tinted-green--5: #1c2830;
     --mer-color__tinted-green--60: #317571;
-    --mer-color__tinted-blue--5: #1d2838;
-    --mer-color__tinted-blue--8: #1f2c3f;
-    --mer-color__tinted-blue--10: #1f2e43;
-    --mer-color__tinted-blue--20: #293d5c;
-    --mer-color__tinted-blue--30: #2e4e72;
-    --mer-color__tinted-blue--50: #3c689c;
+    --mer-color__tinted-primary--5: #1d2838;
+    --mer-color__tinted-primary--8: #1f2c3f;
+    --mer-color__tinted-primary--10: #1f2e43;
+    --mer-color__tinted-primary--20: #293d5c;
+    --mer-color__tinted-primary--30: #2e4e72;
+    --mer-color__tinted-primary--50: #3c689c;
 
     // message
     --mer-color__message-green--100: #3fa89b;
@@ -1320,9 +1320,9 @@
 
 // Tokens Semantic
 @mixin semantic-accent() {
-  --mer-accent__primary: var(--mer-color__primary-blue--200);
-  --mer-accent__primary--hover: var(--mer-color__primary-blue--400);
-  --mer-accent__primary--active: var(--mer-color__primary-blue--600);
+  --mer-accent__primary: var(--mer-color__primary--200);
+  --mer-accent__primary--hover: var(--mer-color__primary--400);
+  --mer-accent__primary--active: var(--mer-color__primary--600);
   --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500);
   --mer-accent__primary--destructive: var(--mer-color__message-red--100);
   --mer-accent__primary--destructive-hover: var(--mer-color__message-red--300);
@@ -1611,19 +1611,19 @@
   --item__color--enabled: var(--mer-text__on-elevation);
 
   // hover
-  --item__bg-color--hover: var(--mer-color__tinted-blue--5);
-  // --item__border-color--hover: var(--mer-color__tinted-blue--20); // to be defined later with design team
+  --item__bg-color--hover: var(--mer-color__tinted-primary--5);
+  // --item__border-color--hover: var(--mer-color__tinted-primary--20); // to be defined later with design team
   --item__border-color--hover: transparent;
   --item__color--hover: var(--mer-color__neutral-gray--100);
 
   // selected
-  --item__bg-color--selected: var(--mer-color__tinted-blue--10);
-  --item__border-color--selected: var(--mer-color__tinted-blue--30);
+  --item__bg-color--selected: var(--mer-color__tinted-primary--10);
+  --item__border-color--selected: var(--mer-color__tinted-primary--30);
   --item__color--selected: var(--mer-color__neutral-gray--100);
 
   // selected + hover
-  --item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
-  --item__border-color--selected-hover: var(--mer-color__tinted-blue--20);
+  --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10);
+  --item__border-color--selected-hover: var(--mer-color__tinted-primary--20);
   --item__color--selected-hover: var(--mer-color__neutral-gray--100);
 
   // disabled
@@ -1738,14 +1738,14 @@
   --tab-caption__color--enabled: var(--mer-text__neutral);
 
   // hover
-  --tab-caption__bg-color--hover: var(--mer-color__tinted-blue--10);
+  --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10);
 
   // selected
   --tab-caption__bg-color--selected-inline: transparent;
-  --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-blue--10);
+  --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10);
   --tab-caption__border-color--selected-inline: var(--mer-accent__primary);
   --tab-caption__border-color--selected-stack: var(
-    --mer-color__tinted-blue--20
+    --mer-color__tinted-primary--20
   );
   --tab-caption__color--selected: var(--mer-text__highlighted);
 
@@ -2471,8 +2471,8 @@
 @mixin spinner($size) {
   width: $size;
   height: $size;
-  border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
-  border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
+  border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
+  border-top: calc($size / 5) solid var(--mer-color__primary--300);
   border-radius: 50%;
   animation: spin var(--mer-timing--regular) linear infinite;
 
@@ -2963,7 +2963,7 @@
   $field-selector: ".field",
   $field-block-selector: ".field-block",
   $field-inline-selector: ".field-inline",
-  $field-inline__label-selector: ".field-inline .label",
+  $field-inline__label-selector: ".field-inline > .label",
   $field-group-cols-2-selector: ".field-group-cols-2",
   $field-group-cols-2__label-selector: ".field-group-cols-2 .label"
 ) {
@@ -3745,6 +3745,12 @@
 
 %accordion {
   @include accordion-tokens();
+
+  --spacing-body-block-start: var(--mer-spacing--sm);
+  --spacing-body-block-end: var(--mer-spacing--sm);
+  --spacing-body-inline-start: var(--mer-spacing--sm);
+  --spacing-body-inline-end: var(--mer-spacing--sm);
+
   gap: var(--accordion__gap);
 
   &-outlined {
@@ -3820,9 +3826,6 @@
 
 %accordion-section {
   // "1px" is used to improve the display of the outline when :focus-visible
-  margin-block: var(--accordion-section__margin-block);
-  margin-inline: var(--accordion-section__margin-inline);
-  // background-color: var(--accordion-section__bg-color);
 
   &-outlined {
     &--disabled {
@@ -4061,7 +4064,7 @@
       }
     }
 
-    @include form-input(
+    @include input(
       $selector: "&::part(send-input)",
       $add--disabled: false,
       $add--placeholder: false,
@@ -4253,8 +4256,8 @@
 @mixin code-tokens() {
   // TODO: variable names should be updated to something more descriptive
   --code__color-base: var(--mer-text__on-surface);
-  --code__color-blue: var(--mer-color__primary-blue--400);
-  --code__color-light-blue: var(--mer-color__primary-blue--200);
+  --code__color-blue: var(--mer-color__primary--400);
+  --code__color-light-blue: var(--mer-color__primary--200);
   --code__color-red: var(--mer-color__message-red--200);
   --code__color-green: var(--mer-color__message-green--200);
   --code__bg-color: var(--mer-surface__elevation--01);
@@ -5065,8 +5068,8 @@
 @mixin spinner($size) {
   width: $size;
   height: $size;
-  border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
-  border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
+  border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
+  border-top: calc($size / 5) solid var(--mer-color__primary--300);
   border-radius: 50%;
   animation: spin var(--mer-timing--regular) linear infinite;
 
@@ -5247,10 +5250,10 @@
 }
 
 %dialog {
-  --spacing-body-block-start: var(--mer-spacing--lg);
-  --spacing-body-block-end: var(--mer-spacing--lg);
-  --spacing-body-inline-start: var(--mer-spacing--md);
-  --spacing-body-inline-end: var(--mer-spacing--md);
+  --spacing-body-block-start: var(--mer-spacing--md);
+  --spacing-body-block-end: var(--mer-spacing--md);
+  --spacing-body-inline-start: var(--mer-spacing--sm);
+  --spacing-body-inline-end: var(--mer-spacing--sm);
   --ch-dialog-max-inline-size: 800px;
   background-color: var(--mer-surface__elevation--01);
   box-shadow: var(--mer-box-shadow--01);
@@ -5291,8 +5294,8 @@
   }
 
   &__footer {
-    @include control-footer-base();
-    @include control-footer-border();
+    padding-block: var(--mer-spacing--xs);
+    padding-inline: var(--mer-spacing--sm);
   }
 
   // ------------------------------
@@ -5301,7 +5304,7 @@
   &__edge {
     $edge-border-width: var(--mer-border__width--lg);
     $edge-border-style: solid;
-    $edge-color: var(--mer-color__tinted-blue--20);
+    $edge-color: var(--mer-color__tinted-primary--20);
     border-color: transparent;
     transition: var(--mer-timing--fast) border-color;
 
@@ -5394,6 +5397,8 @@
   #{$footer-selector} {
     @extend %dialog__footer;
   }
+  // @include buttons-spacer($footer-selector);
+  @include control-footer($with-border-selector: $footer-selector);
 
   // ------------------------------
   // Edges (For dragging)
@@ -5562,7 +5567,7 @@
   }
 }
 
-%form-input {
+%input {
   // ch-chameleon custom vars (do not edit their names)
   // --ch-edit-auto-fill-background-color: var(); not defined by design yet
   --ch-edit-gap: var(--control__icon-gap);
@@ -5589,31 +5594,31 @@
 }
 
 /// @group Form
-/// @param {String} $selector [".form-input"] -
-/// @param {String} $error-selector [".form-input-error"] -
+/// @param {String} $selector [".input"] -
+/// @param {String} $error-selector [".input-error"] -
 /// @param {Boolean} $add--disabled [true] -
 /// @param {Boolean} $add--error [true] -
-@mixin form-input(
-  $selector: ".form-input",
-  $error-selector: ".form-input-error",
+@mixin input(
+  $selector: ".input",
+  $error-selector: ".input-error",
   $add--disabled: true,
   $add--error: true,
   $add--placeholder: true
 ) {
   #{$selector} {
-    @extend %form-input;
+    @extend %input;
 
     &:focus {
-      @extend %form-input--focus;
+      @extend %input--focus;
     }
 
     &:hover {
-      @extend %form-input--hover;
+      @extend %input--hover;
     }
 
     @if $add--disabled {
       &:disabled {
-        @extend %form-input--disabled;
+        @extend %input--disabled;
       }
     }
 
@@ -5959,7 +5964,7 @@
     margin-block: var(--mer-spacing--xs);
     padding-block: var(--mer-spacing--xs);
     padding-inline: calc(var(--mer-spacing--xl) - 4px) var(--mer-spacing--xl);
-    border-inline-start: 4px solid var(--mer-color__primary-blue--400);
+    border-inline-start: 4px solid var(--mer-color__primary--400);
 
     // First <p> don't add margin-block-start, because the <blockquote> adds it
     & > p:first-of-type {
@@ -6941,8 +6946,8 @@
 @mixin spinner($size) {
   width: $size;
   height: $size;
-  border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
-  border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
+  border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
+  border-top: calc($size / 5) solid var(--mer-color__primary--300);
   border-radius: 50%;
   animation: spin var(--mer-timing--regular) linear infinite;
 
@@ -6990,8 +6995,8 @@
     --control__color: var(--mer-text__neutral);
   }
   &--processing {
-    --control__border-color: var(--mer-color__tinted-blue--50);
-    --control__bg-color: var(--mer-color__tinted-blue--8);
+    --control__border-color: var(--mer-color__tinted-primary--50);
+    --control__bg-color: var(--mer-color__tinted-primary--8);
     --control__color: var(--mer-accent__primary);
 
     // custom processing icon
@@ -8125,29 +8130,153 @@
 }
 
 %sidebar {
+  // chameleon tokens (do not modify names)
   --ch-sidebar-inline-size--collapsed: 42px;
   --ch-sidebar__chevron-size: 24px;
-  --ch-sidebar__chevron-image-size: 16px;
+  --ch-sidebar__chevron-image-size: var(--mer-spacing--sm); // 12px
+  --ch-sidebar__chevron-background-image: var(
+    --icon__system_arrow-right_primary--enabled
+  );
+
+  // spacing body tokens
+  --spacing-body-block-start: var(--mer-spacing--sm);
+  --spacing-body-block-end: var(--mer-spacing--sm);
+  --spacing-body-inline-start: var(--mer-spacing--sm);
+  --spacing-body-inline-end: var(--mer-spacing--sm);
+
+  // sidebar tokens
+  --sidebar-button-border-width: var(--mer-border__width--sm);
+  --sidebar-button-margin: calc(
+    (
+        var(--ch-sidebar-inline-size--collapsed) -
+          (
+            var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) *
+              2
+          )
+      ) / 2
+  );
 
   background-color: var(--mer-color__neutral-gray--800);
-  color: var(--mer-color__neutral-gray--300);
+  overflow: hidden;
+
+  // Collapsed Hidden
+
+  &-collapsed-hidden {
+    --ch-sidebar-inline-size--collapsed: 0;
+  }
+
+  // With Motion
+
+  &-with-motion {
+    &.ch-sidebar--collapsed {
+      // WA to win over user "inline-size" property. This allows the transition.
+      inline-size: var(--ch-sidebar-inline-size--collapsed) !important;
+    }
+    transition: var(--mer-timing--super-fast) ease inline-size;
+
+    &--button-before {
+      transition: var(--mer-timing--super-fast) ease transform;
+    }
+  }
+
+  // - - - - - - - -
+  // Button
+  // - - - - - - - -
 
   &-expand-button {
-    padding: var(--mer-spacing--xs);
+    background-color: var(--mer-surface__elevation--02);
+    border: var(--sidebar-button-border-width) solid
+      var(--mer-border-color__on-elevation--01);
+    color: var(--mer-icon__neutral);
+    inline-size: calc(
+      var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) * 2
+    );
+    margin: var(--sidebar-button-margin);
+
+    &--before {
+      transform: rotate(180deg);
+    }
+
+    &--hover {
+      background-color: var(--mer-surface__elevation--03);
+      border-color: var(--mer-border-color__on-elevation--02);
+      color: var(--mer-icon__highlighted);
+    }
+
+    &--active {
+      background-color: var(--mer-surface__elevation--01);
+      border-color: var(--mer-border-color__on-elevation--01);
+    }
+
+    &--focus-visible {
+      @include focus-outline();
+    }
+
+    &--collapsed {
+      &-before {
+        transform: rotate(0);
+      }
+    }
   }
 }
 
 @mixin sidebar(
   $sidebar-selector: ".sidebar",
-  $expand-button-selector: ".sidebar::part(expand-button)"
+  $sidebar-collapsed-hidden-selector: ".sidebar-collapsed-hidden",
+  $sidebar-with-motion-selector: ".sidebar-with-motion",
+  $sidebar-with-motion-button-selector:
+    ".sidebar-with-motion::part(expand-button)",
+  $expand-button-selector: ".sidebar::part(expand-button)",
+  $expand-button-collapsed-selector: ".sidebar::part(expand-button collapsed)"
 ) {
   #{$sidebar-selector} {
     @extend %sidebar;
   }
 
+  // Collapsed hidden
+  #{$sidebar-collapsed-hidden-selector} {
+    @extend %sidebar-collapsed-hidden;
+  }
+
+  // With motion
+  #{$sidebar-with-motion-selector} {
+    @extend %sidebar-with-motion;
+  }
+  #{$sidebar-with-motion-button-selector}::before {
+    @extend %sidebar-with-motion--button-before;
+  }
+
+  // - - - - - - - -
+  // Button
+  // - - - - - - - -
+
+  // enabled
   #{$expand-button-selector} {
     @extend %sidebar-expand-button;
   }
+  #{$expand-button-selector}::before {
+    @extend %sidebar-expand-button--before;
+  }
+  // hover
+  #{$expand-button-selector}:hover {
+    @extend %sidebar-expand-button--hover;
+  }
+  // active
+  #{$expand-button-selector}:active {
+    @extend %sidebar-expand-button--active;
+  }
+
+  #{$expand-button-selector}:focus-visible {
+    @extend %sidebar-expand-button--focus-visible;
+  }
+
+  // collapsed
+  #{$expand-button-collapsed-selector} {
+    @extend %sidebar-expand-button--collapsed;
+  }
+  #{$expand-button-collapsed-selector}::before {
+    @extend %sidebar-expand-button--collapsed-before;
+  }
 }
 
 %slider__slider {
@@ -8173,7 +8302,7 @@
   // - - - - - - - - - - - - - - - - - - - -
   // track
   --slider-track__block-size: var(--mer-spacing--2xs);
-  --slider-track__bg-color--selected: var(--mer-color__primary-blue--200);
+  --slider-track__bg-color--selected: var(--mer-color__primary--200);
   --slider-track__bg-color--unselected: var(--mer-color__neutral-gray--650);
   --slider-track__bg-color--selected-disabled: var(
     --mer-accent__primary--disabled
@@ -9768,7 +9897,7 @@
 }
 
 %tree-view-drop--after {
-  background-color: var(--mer-color__primary-blue--200);
+  background-color: var(--mer-color__primary--200);
 }
 
 %tree-view-item__header {
@@ -10008,8 +10137,8 @@
 }
 
 /// @group Widget
-/// @param {String} $selector [".widget"] -
-@mixin widget($selector: ".widget") {
+/// @param {String} $selector [".widget,:host(.widget)"] -
+@mixin widget($selector: ".widget,:host(.widget)") {
   #{$selector} {
     @extend %widget;
   }
@@ -18389,7 +18518,7 @@
   }
 
   @if $edit {
-    @include form-input();
+    @include input();
   }
 
   @if $flexible-layout {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.9.11",
+  "version": "0.9.13",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "module": "dist/assets-manager.js",