@genexus/mercury 0.18.0 → 0.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- export const bundle = `.accordion-outlined::part(header),.accordion-filled::part(header){font-family:var(--font-family-header)}.accordion-outlined::part(header),.accordion-filled::part(header){font-size:var(--font-size-subtitle-xs);line-height:var(--line-height-tight)}.accordion-outlined::part(header),.accordion-filled::part(header){font-weight:var(--font-weight-semi-bold)}.accordion-outlined,.accordion-filled{--ch-accordion__header-image-size: var(--mer-icon__box--sm);--ch-accordion__chevron-size: var(--mer-icon__box--sm);--ch-accordion-expand-collapse-duration: var(--mer-timing--fast);--ch-accordion-expand-collapse-timing-function: ease-in-out;--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);--accordion-panel__border-radius: var(--mer-border__radius--sm);--accordion-panel__border-color: transparent;--accordion-panel__bg-color: transparent;--accordion-header__outline-color: transparent;background-color:rgba(0,0,0,0) !important}.accordion-outlined::part(header),.accordion-filled::part(header){padding:var(--mer-spacing--sm);gap:var(--mer-spacing--sm);color:var(--accordion-header__color);outline-width:var(--mer-border__width--sm);outline-style:solid;outline-color:var(--accordion-header__outline-color);border-radius:var(--accordion-panel__border-radius)}.accordion-outlined::part(header):hover,.accordion-filled::part(header):hover{--accordion-header__outline-color: var(--mer-border-color__primary--hover)}.accordion-outlined::part(header):active,.accordion-filled::part(header):active{--accordion-header__outline-color: var(--mer-border-color__primary--active)}.accordion-outlined::part(header):focus-visible,.accordion-filled::part(header):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.accordion-outlined::part(header disabled),.accordion-filled::part(header disabled){--accordion-header__color: var(--mer-accent__primary--disabled)}.accordion-outlined::part(panel),.accordion-filled::part(panel){background-color:var(--accordion-panel__bg-color);border:var(--mer-border__width--sm) solid var(--accordion-panel__border-color);border-style:solid;border-radius:var(--accordion-panel__border-radius);color:var(--elevation-color, --mer-text__on-elevation)}.accordion-filled::part(panel){--accordion-panel__bg-color: var( --elevation-background-color, var(--mer-surface__elevation--01) );--accordion-panel__border-color: var(--accordion-panel__bg-color)}.accordion-filled::part(panel disabled){--accordion-panel__bg-color: var(--mer-surface__elevation--02)}.accordion-outlined::part(panel){--accordion-panel__bg-color: var(--elevation-background-color, transparent);--accordion-panel__border-color: var( --elevation-border-color, var(--mer-border-color__on-surface) )}.accordion-outlined::part(panel disabled){border-color:var(--mer-border-color__primary--disabled)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`;
1
+ export const bundle = `.accordion-outlined::part(header),.accordion-filled-header::part(header),.accordion-filled::part(header){font-family:var(--font-family-header)}.accordion-outlined::part(header),.accordion-filled-header::part(header),.accordion-filled::part(header){font-size:var(--font-size-subtitle-xs);line-height:var(--line-height-tight)}.accordion-outlined::part(header),.accordion-filled-header::part(header),.accordion-filled::part(header){font-weight:var(--font-weight-semi-bold)}.accordion-outlined,.accordion-filled-header,.accordion-filled{--ch-accordion__header-image-size: var(--mer-icon__box--sm);--ch-accordion__chevron-size: var(--mer-icon__box--sm);--ch-accordion-expand-collapse-duration: var(--mer-timing--fast);--ch-accordion-expand-collapse-timing-function: ease-in-out;--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);--accordion-panel__border-radius: var(--mer-border__radius--sm);--accordion-panel__border-color: transparent;--accordion-panel__bg-color: transparent;--accordion-header__outline-color: transparent;background-color:rgba(0,0,0,0) !important;gap:var(--mer-spacing--sm)}.accordion-outlined::part(header),.accordion-filled-header::part(header),.accordion-filled::part(header){color:var(--accordion-header__color);gap:var(--mer-spacing--sm);padding:var(--mer-spacing--sm);--outline-width: var(--mer-border__width--sm);outline:var(--mer-border__width--sm) solid var(--accordion-header__outline-color);border-radius:var(--accordion-panel__border-radius)}.accordion-filled-header::part(header){--accordion-header__color: var(--elevation-color, --mer-text__on-elevation);outline-offset:calc(var(--outline-width)*-1);background-color:var(--header__bg-color);--header__bg-color: var( --elevation-background-color, var(--mer-surface__elevation--01) )}.accordion-filled-header::part(header disabled){--header__bg-color: var(--mer-surface__elevation--02);--accordion-header__color: var(--mer-accent__primary--disabled)}.accordion-outlined::part(header):hover,.accordion-filled-header::part(header):hover,.accordion-filled::part(header):hover{--accordion-header__outline-color: var(--mer-border-color__primary--hover)}.accordion-outlined::part(header):active,.accordion-filled-header::part(header):active,.accordion-filled::part(header):active{--accordion-header__outline-color: var(--mer-border-color__primary--active)}.accordion-outlined::part(header):focus-visible,.accordion-filled-header::part(header):focus-visible,.accordion-filled::part(header):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.accordion-outlined::part(header disabled),.accordion-filled::part(header disabled){--accordion-header__color: var(--mer-accent__primary--disabled)}.accordion-outlined::part(panel),.accordion-filled-header::part(panel),.accordion-filled::part(panel){border-radius:var(--accordion-panel__border-radius)}.accordion-filled::part(panel),.accordion-outlined::part(panel){--panel-border-color: transparent;border:var(--mer-border__width--sm) solid var(--panel-border-color)}.accordion-filled::part(panel){--accordion-panel__bg-color: var( --elevation-background-color, var(--mer-surface__elevation--01) );--panel-border-color: var(--accordion-panel__bg-color);background-color:var(--accordion-panel__bg-color);color:var(--elevation-color, --mer-text__on-elevation)}.accordion-filled::part(panel disabled){--accordion-panel__bg-color: var(--mer-surface__elevation--02)}.accordion-outlined::part(panel){--accordion-panel__bg-color: var(--elevation-background-color, transparent);--panel-border-color: var( --elevation-border-color, var(--mer-border-color__on-surface) )}.accordion-outlined::part(panel disabled){--panel-border-color: var(--mer-border-color__primary--disabled)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`;
@@ -1 +1 @@
1
- export const bundle = `.chat::part(message assistant waiting),.chat::part(message__time),.chat::part(message__role){line-height:var(--line-height-tight)}.chat::part(message__time),.chat::part(message__role){font-size:var(--font-size-body-m)}.chat::part(message assistant waiting){font-size:var(--font-size-body-s)}.chat::part(message__content),.chat::part(send-input){font-size:var(--font-size-body-m);line-height:var(--line-height-tight);font-weight:var(--font-weight-regular)}.chat::part(message__role){font-weight:var(--font-weight-semi-bold)}.chat::part(message assistant waiting),.chat::part(message__time){font-weight:var(--font-weight-regular);font-style:italic}.chat::part(message assistant success)::after,.chat::part(message error)::after,.chat::part(message assistant warning)::after{content:"";display:grid;justify-self:flex-end;inline-size:16px;block-size:16px;-webkit-mask:no-repeat center/100% var(--chat-message-icon);background-color:var(--chat-message-icon-color)}.chat::part(send-input){--ch-edit-gap: var(--control__icon-gap);--ch-edit__image-size: var(--mer-icon__box--md);--ch-placeholder-color: var(--mer-color__neutral-gray--400);border-width:var(--control__border-width);border-style:var(--control__border-style);border-color:var(--control__border-color);border-radius:var(--control__border-radius);background-color:var(--control__bg-color);color:var(--control__color);--ch-placeholder-color: var(--control-placeholder__color);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.chat::part(send-input):focus{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.chat::part(send-input):hover{--control__border-color: var(--control__border-color--hover)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.chat{--button-block-size: 31px;--button-margin-block: 16px}.chat::part(content){gap:6px}.chat::part(message){display:grid;grid-template-columns:1fr max-content;grid-auto-rows:max-content;padding:var(--mer-spacing--sm);gap:var(--mer-spacing--sm);border-radius:var(--mer-border__radius--sm);overflow:hidden}.chat::part(message__role){display:inline-grid;grid-template-columns:max-content max-content;gap:6px}.chat::part(message__role)::before{content:"";display:grid;justify-self:flex-end;inline-size:4px;block-size:4px;border-radius:50%;align-self:center;background-color:currentColor}.chat::part(message__role user){color:var(--mer-accent__primary)}.chat::part(message__time){color:#828b96}.chat::part(message__content){color:var(--mer-color__neutral-gray--100)}.chat::part(message__content user),.chat::part(message__content no-error){grid-area:2/1/2/3}.chat::part(message user){background-color:rgba(91,167,255,.08);border-inline-start:2px solid var(--mer-border-color__primary)}.chat::part(message assistant){background-color:var(--mer-color__neutral-gray--900)}.chat::part(message assistant waiting){background-color:var(--mer-color__neutral-gray--900);border-radius:unset;color:#666}.chat::part(message assistant complete){background-color:var(--mer-surface__elevation--01)}.chat::part(message assistant warning){background-color:rgba(255,201,107,.05);border-inline-start:2px solid var(--mer-border-color__warning)}.chat::part(message assistant warning)::after{--chat-message-icon: var(--icon__system_warning_primary--enabled);--chat-message-icon-color: var(--mer-icon__warning)}.chat::part(message error){background-color:rgba(251,124,132,.05);border-inline-start:2px solid var(--mer-border-color__error)}.chat::part(message error)::after{--chat-message-icon: var( --icon__system_warning_primary--enabled );--chat-message-icon-color: var(--mer-icon__error)}.chat::part(message assistant success){background-color:rgba(63,168,155,.05);border-inline-start:2px solid var(--mer-border-color__success)}.chat::part(message assistant success)::after{--chat-message-icon: var(--icon__system_success_primary--enabled);--chat-message-icon-color: var(--mer-icon__success)}.chat::part(message__processing){color:var(--mer-text__on-surface);font-size:var(--font-size-body-s)}.chat::part(stop-generating-answer-button){border-radius:var(--control__border-radius);border:1px solid var(--mer-border-color__neutral);color:var(--control__border-style);font-size:var(--font-size-body-m);inline-size:100%;justify-content:center;line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline);transform:translateY(calc(var(--button-margin-block) / 2))}.chat::part(stop-generating-answer-button):hover{border-color:var(--mer-border-color__primary--hover);color:var(--mer-text__primary--hover)}.chat::part(stop-generating-answer-button):active{border-color:var(--mer-border-color__primary--active);color:var(--mer-text__on-primary--active)}.chat::part(send-input){background-color:var(--mer-color__neutral-gray--900);border-color:var(--mer-color__neutral-gray--900);--control__padding-block: 10px;background-color:var(--mer-surface__elevation--01) !important}.chat::part(send-input-wrapper){margin-block-start:calc(var(--button-block-size) + var(--button-margin-block))}`;
1
+ export const bundle = `.chat::part(message assistant waiting),.chat::part(message__time),.chat::part(message__role){line-height:var(--line-height-tight)}.chat::part(message__time),.chat::part(message__role){font-size:var(--font-size-body-m)}.chat::part(message assistant waiting){font-size:var(--font-size-body-s)}.chat::part(message__content),.chat::part(send-input){font-size:var(--font-size-body-m);line-height:var(--line-height-tight);font-weight:var(--font-weight-regular)}.chat::part(message__role){font-weight:var(--font-weight-semi-bold)}.chat::part(message assistant waiting),.chat::part(message__time){font-weight:var(--font-weight-regular);font-style:italic}.chat::part(message assistant success)::after,.chat::part(message error)::after,.chat::part(message assistant warning)::after{content:"";display:grid;justify-self:flex-end;inline-size:16px;block-size:16px;-webkit-mask:no-repeat center/100% var(--chat-message-icon);background-color:var(--chat-message-icon-color)}.chat::part(send-input){--ch-edit-gap: var(--control__icon-gap);--ch-edit__image-size: var(--mer-icon__box--md);--ch-placeholder-color: var(--mer-color__neutral-gray--400);border-width:var(--control__border-width);border-style:var(--control__border-style);border-color:var(--control__border-color);border-radius:var(--control__border-radius);background-color:var(--control__bg-color);color:var(--control__color);--ch-placeholder-color: var(--control-placeholder__color);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.chat::part(send-input):focus{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.chat::part(send-input):hover{--control__border-color: var(--control__border-color--hover)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.chat{--button-block-size: 31px;--button-margin-block: 16px}.chat::part(content){gap:6px}.chat::part(message){display:grid;grid-template-columns:1fr max-content;grid-auto-rows:max-content;padding:var(--mer-spacing--sm);gap:var(--mer-spacing--sm);border-radius:var(--mer-border__radius--sm);overflow:hidden}.chat::part(message__role){display:inline-grid;grid-template-columns:max-content max-content;gap:6px}.chat::part(message__role)::before{content:"";display:grid;justify-self:flex-end;inline-size:4px;block-size:4px;border-radius:50%;align-self:center;background-color:currentColor}.chat::part(message__role user){color:var(--mer-accent__primary)}.chat::part(message__time){color:#828b96}.chat::part(message__content){color:var(--mer-color__neutral-gray--100)}.chat::part(message__content user),.chat::part(message__content no-error){grid-area:2/1/2/3}.chat::part(message user){background-color:rgba(91,167,255,.08);border-inline-start:2px solid var(--mer-border-color__primary)}.chat::part(message assistant){background-color:var(--mer-color__neutral-gray--900)}.chat::part(message assistant waiting){background-color:var(--mer-color__neutral-gray--900);border-radius:unset;color:#666}.chat::part(message assistant complete){background-color:var(--mer-surface__elevation--01)}.chat::part(message assistant warning){background-color:rgba(255,201,107,.05);border-inline-start:2px solid var(--mer-border-color__warning)}.chat::part(message assistant warning)::after{--chat-message-icon: var(--icon__system_warning_primary--enabled);--chat-message-icon-color: var(--mer-icon__warning)}.chat::part(message error){background-color:rgba(251,124,132,.05);border-inline-start:2px solid var(--mer-border-color__error)}.chat::part(message error)::after{--chat-message-icon: var( --icon__system_warning_primary--enabled );--chat-message-icon-color: var(--mer-icon__error)}.chat::part(message assistant success){background-color:rgba(63,168,155,.05);border-inline-start:2px solid var(--mer-border-color__success)}.chat::part(message assistant success)::after{--chat-message-icon: var(--icon__system_check_success--enabled);--chat-message-icon-color: var(--mer-icon__success)}.chat::part(message__processing){color:var(--mer-text__on-surface);font-size:var(--font-size-body-s)}.chat::part(stop-generating-answer-button){border-radius:var(--control__border-radius);border:1px solid var(--mer-border-color__neutral);color:var(--control__border-style);font-size:var(--font-size-body-m);inline-size:100%;justify-content:center;line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline);transform:translateY(calc(var(--button-margin-block) / 2))}.chat::part(stop-generating-answer-button):hover{border-color:var(--mer-border-color__primary--hover);color:var(--mer-text__primary--hover)}.chat::part(stop-generating-answer-button):active{border-color:var(--mer-border-color__primary--active);color:var(--mer-text__on-primary--active)}.chat::part(send-input){background-color:var(--mer-color__neutral-gray--900);border-color:var(--mer-color__neutral-gray--900);--control__padding-block: 10px;background-color:var(--mer-surface__elevation--01) !important}.chat::part(send-input-wrapper){margin-block-start:calc(var(--button-block-size) + var(--button-margin-block))}`;
package/dist/mercury.scss CHANGED
@@ -3771,21 +3771,36 @@
3771
3771
  @include accordion-tokens();
3772
3772
 
3773
3773
  background-color: transparent !important;
3774
+ gap: var(--mer-spacing--sm);
3774
3775
  // force elevation-* class not applying on the host
3775
3776
  }
3776
3777
 
3777
3778
  %accordion-header {
3778
3779
  @extend %subtitle-semi-bold-xs;
3779
- padding: var(--mer-spacing--sm);
3780
- gap: var(--mer-spacing--sm);
3781
3780
  color: var(--accordion-header__color);
3782
- // border: var(--mer-border__width--sm) solid
3783
- // var(--accordion-header__border-color);
3784
- outline-width: var(--mer-border__width--sm);
3785
- outline-style: solid;
3786
- outline-color: var(--accordion-header__outline-color);
3781
+ gap: var(--mer-spacing--sm);
3782
+ padding: var(--mer-spacing--sm);
3783
+ --outline-width: var(--mer-border__width--sm);
3784
+ outline: var(--mer-border__width--sm) solid
3785
+ var(--accordion-header__outline-color);
3787
3786
  border-radius: var(--accordion-panel__border-radius);
3788
3787
 
3788
+ &-filled {
3789
+ --accordion-header__color: var(--elevation-color, --mer-text__on-elevation);
3790
+
3791
+ outline-offset: calc(var(--outline-width) * -1);
3792
+ background-color: var(--header__bg-color);
3793
+
3794
+ --header__bg-color: var(
3795
+ --elevation-background-color,
3796
+ var(--mer-surface__elevation--01)
3797
+ );
3798
+ &--disabled {
3799
+ --header__bg-color: var(--mer-surface__elevation--02);
3800
+ --accordion-header__color: var(--mer-accent__primary--disabled);
3801
+ }
3802
+ }
3803
+
3789
3804
  &--hover {
3790
3805
  --accordion-header__outline-color: var(--mer-border-color__primary--hover);
3791
3806
  }
@@ -3801,34 +3816,38 @@
3801
3816
  }
3802
3817
 
3803
3818
  %accordion-panel {
3804
- background-color: var(--accordion-panel__bg-color);
3805
- border: var(--mer-border__width--sm) solid
3806
- var(--accordion-panel__border-color);
3807
- border-style: solid;
3808
3819
  border-radius: var(--accordion-panel__border-radius);
3809
- color: var(--elevation-color, --mer-text__on-elevation);
3820
+
3821
+ &-filled,
3822
+ &-outlined {
3823
+ --panel-border-color: transparent;
3824
+ border: var(--mer-border__width--sm) solid var(--panel-border-color);
3825
+ }
3810
3826
 
3811
3827
  &-filled {
3812
3828
  --accordion-panel__bg-color: var(
3813
3829
  --elevation-background-color,
3814
3830
  var(--mer-surface__elevation--01)
3815
3831
  );
3816
- --accordion-panel__border-color: var(--accordion-panel__bg-color);
3832
+ --panel-border-color: var(--accordion-panel__bg-color);
3817
3833
 
3818
3834
  &--disabled {
3819
3835
  --accordion-panel__bg-color: var(--mer-surface__elevation--02);
3820
3836
  }
3837
+
3838
+ background-color: var(--accordion-panel__bg-color);
3839
+ color: var(--elevation-color, --mer-text__on-elevation);
3821
3840
  }
3822
3841
 
3823
3842
  &-outlined {
3824
3843
  --accordion-panel__bg-color: var(--elevation-background-color, transparent);
3825
- --accordion-panel__border-color: var(
3844
+ --panel-border-color: var(
3826
3845
  --elevation-border-color,
3827
3846
  var(--mer-border-color__on-surface)
3828
3847
  );
3829
3848
 
3830
3849
  &--disabled {
3831
- border-color: var(--mer-border-color__primary--disabled);
3850
+ --panel-border-color: var(--mer-border-color__primary--disabled);
3832
3851
  }
3833
3852
  }
3834
3853
  }
@@ -3875,6 +3894,41 @@
3875
3894
  }
3876
3895
  }
3877
3896
 
3897
+ @mixin accordion-filled-header(
3898
+ $accordion-selector: ".accordion-filled-header",
3899
+ $panel-selector: ".accordion-filled-header::part(panel)",
3900
+ $panel-disabled-selector: ".accordion-filled-header::part(panel disabled)",
3901
+ $header-selector: ".accordion-filled-header::part(header)",
3902
+ $header-disabled-selector: ".accordion-filled-header::part(header disabled)"
3903
+ ) {
3904
+ #{$accordion-selector} {
3905
+ @extend %accordion;
3906
+ }
3907
+
3908
+ #{$panel-selector} {
3909
+ @extend %accordion-panel;
3910
+ }
3911
+
3912
+ #{$header-selector} {
3913
+ @extend %accordion-header;
3914
+ @extend %accordion-header-filled;
3915
+
3916
+ &:hover {
3917
+ @extend %accordion-header--hover;
3918
+ }
3919
+ &:active {
3920
+ @extend %accordion-header--active;
3921
+ }
3922
+ &:focus-visible {
3923
+ @extend %accordion-header--focus-visible;
3924
+ }
3925
+ }
3926
+
3927
+ #{$header-disabled-selector} {
3928
+ @extend %accordion-header-filled--disabled;
3929
+ }
3930
+ }
3931
+
3878
3932
  @mixin accordion-outlined(
3879
3933
  $accordion-selector: ".accordion-outlined",
3880
3934
  $panel-selector: ".accordion-outlined::part(panel)",
@@ -4029,7 +4083,7 @@
4029
4083
 
4030
4084
  &::after {
4031
4085
  @extend %chat-message-icon;
4032
- --chat-message-icon: var(--icon__system_success_primary--enabled);
4086
+ --chat-message-icon: var(--icon__system_check_success--enabled);
4033
4087
  --chat-message-icon-color: var(--mer-icon__success);
4034
4088
  }
4035
4089
  }
@@ -24474,6 +24528,7 @@ $tabular-grid-controls: ($combo-box-selector, $input-selector);
24474
24528
  // - - - - - - - - - - - - - - - - - - -
24475
24529
  @if $accordion {
24476
24530
  @include accordion-filled();
24531
+ @include accordion-filled-header();
24477
24532
  @include accordion-outlined();
24478
24533
  }
24479
24534
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@genexus/mercury",
3
- "version": "0.18.0",
3
+ "version": "0.19.1",
4
4
  "description": "Mercury Design System is a robust and scalable solution designed to improve product development.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",