@genexus/mercury 0.9.12 → 0.9.14

package/dist/mercury.scss

@@ -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);
   }
 }
@@ -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,
@@ -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);
   }
 
   // ------------------------------
@@ -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;
       }
     }
 
@@ -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 {
@@ -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;
   }
@@ -13826,6 +13955,15 @@
   --icon__system_card-variant_primary--hover: url('#{$icons-path}system/light/card-variant.svg#primary--hover'); 
   --icon__system_card-variant_primary--active: url('#{$icons-path}system/light/card-variant.svg#primary--active'); 
   --icon__system_card-variant_primary--disabled: url('#{$icons-path}system/light/card-variant.svg#primary--disabled'); 
+  --icon__system_assistant_on-surface--enabled: url('#{$icons-path}system/light/assistant.svg#on-surface--enabled'); 
+  --icon__system_assistant_on-surface--hover: url('#{$icons-path}system/light/assistant.svg#on-surface--hover'); 
+  --icon__system_assistant_on-surface--active: url('#{$icons-path}system/light/assistant.svg#on-surface--active'); 
+  --icon__system_assistant_on-surface--disabled: url('#{$icons-path}system/light/assistant.svg#on-surface--disabled'); 
+  --icon__system_assistant_on-elevation--enabled: url('#{$icons-path}system/light/assistant.svg#on-elevation--enabled'); 
+  --icon__system_assistant_primary--enabled: url('#{$icons-path}system/light/assistant.svg#primary--enabled'); 
+  --icon__system_assistant_primary--hover: url('#{$icons-path}system/light/assistant.svg#primary--hover'); 
+  --icon__system_assistant_primary--active: url('#{$icons-path}system/light/assistant.svg#primary--active'); 
+  --icon__system_assistant_primary--disabled: url('#{$icons-path}system/light/assistant.svg#primary--disabled'); 
   --icon__system_arrow-up_on-surface--enabled: url('#{$icons-path}system/light/arrow-up.svg#on-surface--enabled'); 
   --icon__system_arrow-up_on-surface--hover: url('#{$icons-path}system/light/arrow-up.svg#on-surface--hover'); 
   --icon__system_arrow-up_on-surface--active: url('#{$icons-path}system/light/arrow-up.svg#on-surface--active'); 
@@ -13898,15 +14036,6 @@
   --icon__system_add-circle_primary--hover: url('#{$icons-path}system/light/add-circle.svg#primary--hover'); 
   --icon__system_add-circle_primary--active: url('#{$icons-path}system/light/add-circle.svg#primary--active'); 
   --icon__system_add-circle_primary--disabled: url('#{$icons-path}system/light/add-circle.svg#primary--disabled'); 
-  --icon__system_Assistant_on-surface--enabled: url('#{$icons-path}system/light/Assistant.svg#on-surface--enabled'); 
-  --icon__system_Assistant_on-surface--hover: url('#{$icons-path}system/light/Assistant.svg#on-surface--hover'); 
-  --icon__system_Assistant_on-surface--active: url('#{$icons-path}system/light/Assistant.svg#on-surface--active'); 
-  --icon__system_Assistant_on-surface--disabled: url('#{$icons-path}system/light/Assistant.svg#on-surface--disabled'); 
-  --icon__system_Assistant_on-elevation--enabled: url('#{$icons-path}system/light/Assistant.svg#on-elevation--enabled'); 
-  --icon__system_Assistant_primary--enabled: url('#{$icons-path}system/light/Assistant.svg#primary--enabled'); 
-  --icon__system_Assistant_primary--hover: url('#{$icons-path}system/light/Assistant.svg#primary--hover'); 
-  --icon__system_Assistant_primary--active: url('#{$icons-path}system/light/Assistant.svg#primary--active'); 
-  --icon__system_Assistant_primary--disabled: url('#{$icons-path}system/light/Assistant.svg#primary--disabled'); 
 
   }
 
@@ -14483,6 +14612,15 @@
   --icon__system_card-variant_primary--hover: url('#{$icons-path}system/dark/card-variant.svg#primary--hover'); 
   --icon__system_card-variant_primary--active: url('#{$icons-path}system/dark/card-variant.svg#primary--active'); 
   --icon__system_card-variant_primary--disabled: url('#{$icons-path}system/dark/card-variant.svg#primary--disabled'); 
+  --icon__system_assistant_on-surface--enabled: url('#{$icons-path}system/dark/assistant.svg#on-surface--enabled'); 
+  --icon__system_assistant_on-surface--hover: url('#{$icons-path}system/dark/assistant.svg#on-surface--hover'); 
+  --icon__system_assistant_on-surface--active: url('#{$icons-path}system/dark/assistant.svg#on-surface--active'); 
+  --icon__system_assistant_on-surface--disabled: url('#{$icons-path}system/dark/assistant.svg#on-surface--disabled'); 
+  --icon__system_assistant_on-elevation--enabled: url('#{$icons-path}system/dark/assistant.svg#on-elevation--enabled'); 
+  --icon__system_assistant_primary--enabled: url('#{$icons-path}system/dark/assistant.svg#primary--enabled'); 
+  --icon__system_assistant_primary--hover: url('#{$icons-path}system/dark/assistant.svg#primary--hover'); 
+  --icon__system_assistant_primary--active: url('#{$icons-path}system/dark/assistant.svg#primary--active'); 
+  --icon__system_assistant_primary--disabled: url('#{$icons-path}system/dark/assistant.svg#primary--disabled'); 
   --icon__system_arrow-up_on-surface--enabled: url('#{$icons-path}system/dark/arrow-up.svg#on-surface--enabled'); 
   --icon__system_arrow-up_on-surface--hover: url('#{$icons-path}system/dark/arrow-up.svg#on-surface--hover'); 
   --icon__system_arrow-up_on-surface--active: url('#{$icons-path}system/dark/arrow-up.svg#on-surface--active'); 
@@ -14555,15 +14693,6 @@
   --icon__system_add-circle_primary--hover: url('#{$icons-path}system/dark/add-circle.svg#primary--hover'); 
   --icon__system_add-circle_primary--active: url('#{$icons-path}system/dark/add-circle.svg#primary--active'); 
   --icon__system_add-circle_primary--disabled: url('#{$icons-path}system/dark/add-circle.svg#primary--disabled'); 
-  --icon__system_Assistant_on-surface--enabled: url('#{$icons-path}system/dark/Assistant.svg#on-surface--enabled'); 
-  --icon__system_Assistant_on-surface--hover: url('#{$icons-path}system/dark/Assistant.svg#on-surface--hover'); 
-  --icon__system_Assistant_on-surface--active: url('#{$icons-path}system/dark/Assistant.svg#on-surface--active'); 
-  --icon__system_Assistant_on-surface--disabled: url('#{$icons-path}system/dark/Assistant.svg#on-surface--disabled'); 
-  --icon__system_Assistant_on-elevation--enabled: url('#{$icons-path}system/dark/Assistant.svg#on-elevation--enabled'); 
-  --icon__system_Assistant_primary--enabled: url('#{$icons-path}system/dark/Assistant.svg#primary--enabled'); 
-  --icon__system_Assistant_primary--hover: url('#{$icons-path}system/dark/Assistant.svg#primary--hover'); 
-  --icon__system_Assistant_primary--active: url('#{$icons-path}system/dark/Assistant.svg#primary--active'); 
-  --icon__system_Assistant_primary--disabled: url('#{$icons-path}system/dark/Assistant.svg#primary--disabled'); 
 
   }
   
@@ -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.12",
+  "version": "0.9.14",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "module": "dist/assets-manager.js",