@genexus/mercury 0.6.9 → 0.7.0
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.
- package/dist/bundles/css/all.css +1 -1
- package/dist/bundles/css/components/chat.css +1 -0
- package/dist/bundles/css/components/code.css +1 -1
- package/dist/bundles/css/components/edit.css +1 -1
- package/dist/bundles/css/components/markdown-viewer.css +1 -1
- package/dist/bundles/css/utils/form--full.css +1 -1
- package/dist/bundles/scss/components/chat.scss +3 -0
- package/dist/bundles.d.ts +9 -1
- package/dist/bundles.js +1 -0
- package/dist/mercury.scss +178 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chat::part(message assistant waiting),.chat::part(message__time),.chat::part(message__role),.chat::part(message__content){--text-body__font-size--l: var(--mer-font__size--sm);--text-body__font-size--m: var(--mer-font__size--xs);--text-body__font-size--s: var(--mer-font__size--3xs);--text-body__font-size--xs: var(--mer-font__size--4xs);--text-body__line-height: var(--mer-line-height--spaced);--text-body-regular__font-weight: var(--mer-font__weight--regular);--text-body-highlighted__font-weight: var(--mer-font__weight--semi-bold);--text-body-italic__font-weight: var(--mer-font__weight--regular)}.chat::part(message__content){font-size:var(--text-body__font-size--m);font-weight:var(--text-body-regular__font-weight);line-height:var(--text-body__line-height)}.chat::part(message__role){font-size:var(--text-body__font-size--m);font-weight:var(--text-body-highlighted__font-weight);line-height:var(--text-body__line-height)}.chat::part(message__time){font-size:var(--text-body__font-size--m);font-style:italic;font-weight:var(--text-body-italic__font-weight);line-height:var(--text-body__line-height)}.chat::part(message assistant waiting){font-size:var(--text-body__font-size--s);font-style:italic;font-weight:var(--text-body-italic__font-weight);line-height:var(--text-body__line-height)}.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);font-weight:var(--control__font-weight--regular);font-size:var(--control__font-size--small);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.chat::part(send-input):focus{border-color:var(--borders-un-border-color__focused)}.chat::part(send-input):hover{--control__border-color: var(--control__border-color--hover)}.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:#e1ecf9}.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 waiting){background-color:#11151c;border-radius:unset;color:#666}.chat::part(message assistant complete){background-color:var(--mer-color__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(send-input){background-color:#11151c;border-color:#11151c;--control__padding-block: 10px}.chat::part(send-input-wrapper){margin-block-start:14px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.code{--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-red: var(--mer-color__message-red--200);--code__color-green: var(--mer-color__message-green--200);--code__bg-color: var(--mer-
|
|
1
|
+
.code{--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-red: var(--mer-color__message-red--200);--code__color-green: var(--mer-color__message-green--200);--code__bg-color: var(--mer-color__surface);--code__border: var(--mer-border__width--sm) solid var(--mer-color__elevation--03);--code__border-radius: var(--mer-border__radius--sm);--code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);--ch-code__doctag: var(--code__color-blue);--ch-code__keyword: var(--code__color-blue);--ch-code__meta__keyword: var(--code__color-blue);--ch-code__template-tag: var(--code__color-blue);--ch-code__template-variable: var(--code__color-blue);--ch-code__type: var(--code__color-blue);--ch-code__variable-language: var(--code__color-blue);--ch-code__title: var(--code__color-base);--ch-code__title-class: var(--code__color-base);--ch-code__title-class-inherited: var(--code__color-base);--ch-code__title-function: var(--code__color-base);--ch-code__attr: var(--code__color-blue);--ch-code__attribute: var(--code__color-blue);--ch-code__literal: var(--code__color-blue);--ch-code__meta: var(--code__color-blue);--ch-code__number: var(--code__color-blue);--ch-code__operator: var(--code__color-blue);--ch-code__variable: var(--code__color-blue);--ch-code__selector-attr: var(--code__color-blue);--ch-code__selector-class: var(--code__color-blue);--ch-code__selector-id: var(--code__color-blue);--ch-code__regexp: var(--code__color-green);--ch-code__string: var(--code__color-green);--ch-code__meta__string: var(--code__color-green);--ch-code__built-in: var(--code__color-green);--ch-code__symbol: #e36209;--ch-code__comment: var(--code__color-green);--ch-code__code: var(--code__color-green);--ch-code__formula: var(--code__color-green);--ch-code__name: var(--code__color-light-blue);--ch-code__quote: var(--code__color-light-blue);--ch-code__selector-tag: var(--code__color-light-blue);--ch-code__selector-pseudo: var(--code__color-light-blue);--ch-code__subst: #24292e;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb__bg-color) var(--scrollbar-track__bg-color);padding:var(--code__padding);background-color:var(--code__bg-color);border:var(--code__border);border-radius:var(--code__border-radius);font-size:13px;line-height:1.55em;overflow:auto}.code::-webkit-scrollbar{width:var(--scrollbar__size);height:var(--scrollbar__size)}.code::-webkit-scrollbar-track{background-color:var(--scrollbar-track__bg-color);border-radius:var(--scrollbar-track__border-radius)}.code::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb__bg-color);border-radius:var(--scrollbar-thumb__border-radius)}.code::-webkit-scrollbar-corner{background:var(--scrollbar-corner__bg)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.form-input{--ch-edit-gap: var(--control__icon-gap);--ch-edit__image-size: var(--mer-icon__box--md);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);font-weight:var(--control__font-weight--regular);font-size:var(--control__font-size--small);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.form-input:focus{border-color:var(--borders-un-border-color__focused)}.form-input:hover{--control__border-color: var(--control__border-color--hover)}.form-input:disabled{--control__bg-color: var(--control__background-color--disabled);--control__border-color: var(--control__border-color--disabled);--control__color: var(--control__color--disabled);--ch-placeholder-color: var(--control-placeholder__color--disabled)}.form-input-error{--control__border-color: var(--control__border-color--error)}
|
|
1
|
+
.form-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);font-weight:var(--control__font-weight--regular);font-size:var(--control__font-size--small);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.form-input:focus{border-color:var(--borders-un-border-color__focused)}.form-input:hover{--control__border-color: var(--control__border-color--hover)}.form-input:disabled{--control__bg-color: var(--control__background-color--disabled);--control__border-color: var(--control__border-color--disabled);--control__color: var(--control__color--disabled);--ch-placeholder-color: var(--control-placeholder__color--disabled)}.form-input-error{--control__border-color: var(--control__border-color--error)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h6,h5,table>thead>tr,h4,h3,h2,h1{--heading-base__font-family: var(--mer-font-family--title);--heading__color: var( --mer-heading__gray--light );--heading-h1__font-size: var(--mer-font__size--xl);--heading-h1__font-weight: var(--mer-font__weight--bold);--heading-h1__line-height: var(--mer-line-height--tight);--heading-h2__font-size: var(--mer-font__size--lg);--heading-h2__font-weight: var(--mer-font__weight--bold);--heading-h2__line-height: var(--mer-line-height--tight);--heading-h3__font-size: var(--mer-font__size--sm);--heading-h3__font-weight: var(--mer-font__weight--bold);--heading-h3__line-height: var(--mer-line-height--regular);--heading-h4__font-size: var(--mer-font__size--xs);--heading-h4__font-weight: var(--mer-font__weight--bold);--heading-h4__line-height: var(--mer-line-height--spaced);--heading-h5__font-size: var(--mer-font__size--2xs);--heading-h5__font-weight: var(--mer-font__weight--bold);--heading-h5__line-height: var(--mer-line-height--spaced);--heading-h6__font-size: var(--mer-font__size--3xs);--heading-h6__font-weight: var(--mer-font__weight--semi-bold);--heading-h6__line-height: var(--mer-line-height--spaced);font-family:var(--mer-font-family--title);line-height:var(--mer-line-height--tight);color:var(--heading__color)}h1{font-size:var(--mer-font__size--xl);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h1__line-height)}h2{font-size:var(--mer-font__size--lg);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h2__line-height)}h3{font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h3__line-height)}table>thead>tr,h4{font-size:var(--mer-font__size--xs);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h4__line-height)}h5{font-size:var(--mer-font__size--2xs);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h5__line-height)}h6{font-size:var(--mer-font__size--3xs);font-weight:var(--mer-font__weight--semi-bold);line-height:var(--heading-h6__line-height)}a{text-decoration:underline}h1{margin-block:var(--mer-spacing--md) var(--mer-spacing--xs);padding-block-end:var(--mer-spacing--xs)}h2{margin-block:var(--mer-spacing--sm) 6px;padding-block-end:6px}h3{margin-block:var(--mer-spacing--xs) var(--mer-spacing--2xs);padding-block-end:var(--mer-spacing--2xs)}h4{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h5{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h6{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h1,h2,h3,h4,h5,h6{border-block-end:1px solid var(--mer-border-color__on-surface)}p,ul,ol,table,ch-code{margin-block:var(--mer-spacing--xs)}ul,ol{padding-inline-start:var(--mer-spacing--xl)}blockquote{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)}blockquote>p:first-of-type{margin-block-start:0}blockquote>p:last-of-type{margin-block-end:0}strong{font-weight:700}table{display:block;inline-size:max-content;border:1px solid var(--mer-border-color__on-surface);border-spacing:0}table>thead>tr{font-weight:unset}td{border-block-start:1px solid var(--mer-border-color__on-surface)}th,td{padding:var(--mer-spacing--xs);border-inline-start:1px solid var(--mer-border-color__on-surface)}tr>td:first-child,tr>th:first-child{border-inline-start:unset}thead>tr,tbody>tr:nth-child(2n){background-color:var(--mer-color__neutral-gray--700)}ch-code{border:1px solid var(--mer-border-color__on-surface);border-radius:4px;padding:var(--mer-spacing--md)}ch-code{--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-red: var(--mer-color__message-red--200);--code__color-green: var(--mer-color__message-green--200);--code__bg-color: var(--mer-
|
|
1
|
+
h6,h5,table>thead>tr,h4,h3,h2,h1{--heading-base__font-family: var(--mer-font-family--title);--heading__color: var( --mer-heading__gray--light );--heading-h1__font-size: var(--mer-font__size--xl);--heading-h1__font-weight: var(--mer-font__weight--bold);--heading-h1__line-height: var(--mer-line-height--tight);--heading-h2__font-size: var(--mer-font__size--lg);--heading-h2__font-weight: var(--mer-font__weight--bold);--heading-h2__line-height: var(--mer-line-height--tight);--heading-h3__font-size: var(--mer-font__size--sm);--heading-h3__font-weight: var(--mer-font__weight--bold);--heading-h3__line-height: var(--mer-line-height--regular);--heading-h4__font-size: var(--mer-font__size--xs);--heading-h4__font-weight: var(--mer-font__weight--bold);--heading-h4__line-height: var(--mer-line-height--spaced);--heading-h5__font-size: var(--mer-font__size--2xs);--heading-h5__font-weight: var(--mer-font__weight--bold);--heading-h5__line-height: var(--mer-line-height--spaced);--heading-h6__font-size: var(--mer-font__size--3xs);--heading-h6__font-weight: var(--mer-font__weight--semi-bold);--heading-h6__line-height: var(--mer-line-height--spaced);font-family:var(--mer-font-family--title);line-height:var(--mer-line-height--tight);color:var(--heading__color)}h1{font-size:var(--mer-font__size--xl);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h1__line-height)}h2{font-size:var(--mer-font__size--lg);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h2__line-height)}h3{font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h3__line-height)}table>thead>tr,h4{font-size:var(--mer-font__size--xs);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h4__line-height)}h5{font-size:var(--mer-font__size--2xs);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h5__line-height)}h6{font-size:var(--mer-font__size--3xs);font-weight:var(--mer-font__weight--semi-bold);line-height:var(--heading-h6__line-height)}a{text-decoration:underline}h1{margin-block:var(--mer-spacing--md) var(--mer-spacing--xs);padding-block-end:var(--mer-spacing--xs)}h2{margin-block:var(--mer-spacing--sm) 6px;padding-block-end:6px}h3{margin-block:var(--mer-spacing--xs) var(--mer-spacing--2xs);padding-block-end:var(--mer-spacing--2xs)}h4{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h5{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h6{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h1,h2,h3,h4,h5,h6{border-block-end:1px solid var(--mer-border-color__on-surface)}p,ul,ol,table,ch-code{margin-block:var(--mer-spacing--xs)}ul,ol{padding-inline-start:var(--mer-spacing--xl)}blockquote{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)}blockquote>p:first-of-type{margin-block-start:0}blockquote>p:last-of-type{margin-block-end:0}strong{font-weight:700}table{display:block;inline-size:max-content;border:1px solid var(--mer-border-color__on-surface);border-spacing:0}table>thead>tr{font-weight:unset}td{border-block-start:1px solid var(--mer-border-color__on-surface)}th,td{padding:var(--mer-spacing--xs);border-inline-start:1px solid var(--mer-border-color__on-surface)}tr>td:first-child,tr>th:first-child{border-inline-start:unset}thead>tr,tbody>tr:nth-child(2n){background-color:var(--mer-color__neutral-gray--700)}.code-block-container{position:relative}.code-block-header{display:grid;grid-auto-columns:max-content;grid-auto-flow:column;justify-content:flex-end;position:absolute;inset-block-start:var(--mer-spacing--md);inset-inline-end:var(--mer-spacing--xs);padding:6px;background-color:var(--mer-color__elevation--01);border-radius:var(--mer-border__radius--xs)}.button-copy-code{inline-size:18px;block-size:18px}.button-copy-code::before{content:"";display:grid;inline-size:100%;block-size:100%;-webkit-mask:no-repeat center/100% var(--icon__system_copy_primary--enabled);background-color:currentColor}.button-copy-code:focus-visible{outline:1px solid currentColor}ch-code{border:1px solid var(--mer-border-color__on-surface);border-radius:4px;padding:var(--mer-spacing--md)}ch-code{--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-red: var(--mer-color__message-red--200);--code__color-green: var(--mer-color__message-green--200);--code__bg-color: var(--mer-color__surface);--code__border: var(--mer-border__width--sm) solid var(--mer-color__elevation--03);--code__border-radius: var(--mer-border__radius--sm);--code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);--ch-code__doctag: var(--code__color-blue);--ch-code__keyword: var(--code__color-blue);--ch-code__meta__keyword: var(--code__color-blue);--ch-code__template-tag: var(--code__color-blue);--ch-code__template-variable: var(--code__color-blue);--ch-code__type: var(--code__color-blue);--ch-code__variable-language: var(--code__color-blue);--ch-code__title: var(--code__color-base);--ch-code__title-class: var(--code__color-base);--ch-code__title-class-inherited: var(--code__color-base);--ch-code__title-function: var(--code__color-base);--ch-code__attr: var(--code__color-blue);--ch-code__attribute: var(--code__color-blue);--ch-code__literal: var(--code__color-blue);--ch-code__meta: var(--code__color-blue);--ch-code__number: var(--code__color-blue);--ch-code__operator: var(--code__color-blue);--ch-code__variable: var(--code__color-blue);--ch-code__selector-attr: var(--code__color-blue);--ch-code__selector-class: var(--code__color-blue);--ch-code__selector-id: var(--code__color-blue);--ch-code__regexp: var(--code__color-green);--ch-code__string: var(--code__color-green);--ch-code__meta__string: var(--code__color-green);--ch-code__built-in: var(--code__color-green);--ch-code__symbol: #e36209;--ch-code__comment: var(--code__color-green);--ch-code__code: var(--code__color-green);--ch-code__formula: var(--code__color-green);--ch-code__name: var(--code__color-light-blue);--ch-code__quote: var(--code__color-light-blue);--ch-code__selector-tag: var(--code__color-light-blue);--ch-code__selector-pseudo: var(--code__color-light-blue);--ch-code__subst: #24292e;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb__bg-color) var(--scrollbar-track__bg-color);padding:var(--code__padding);background-color:var(--code__bg-color);border:var(--code__border);border-radius:var(--code__border-radius);font-size:13px;line-height:1.55em;overflow:auto}ch-code::-webkit-scrollbar{width:var(--scrollbar__size);height:var(--scrollbar__size)}ch-code::-webkit-scrollbar-track{background-color:var(--scrollbar-track__bg-color);border-radius:var(--scrollbar-track__border-radius)}ch-code::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb__bg-color);border-radius:var(--scrollbar-thumb__border-radius)}ch-code::-webkit-scrollbar-corner{background:var(--scrollbar-corner__bg)}code{padding-block:var(--mer-spacing--3xs);padding-inline:var(--mer-spacing--2xs);background-color:var(--mer-elevation__bg-color--01);border-radius:2px;font-size:calc(1em - 2px)}img{display:inline-block;max-inline-size:25%}:host>:first-child,ch-theme+*{margin-block-start:0px}:host>:last-child{margin-block-end:0px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.button-tertiary,.button-secondary,.button-primary{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;block-size:var(--control__height);border-width:var(--control__border-width);border-style:var(--control__border-style);border-color:var(--control__border-color);border-radius:var(--control__border-radius);font-size:var(--control__font-size--regular);line-height:var(--control__line-height);padding-inline:var(--control__padding-inline);padding-inline:var(--control__padding-inline)}.button-primary{--button-primary__background-color: var(--mer-accent__primary);--button-primary__border-color: var(--button-primary__background-color);--button-primary__color: var(--mer-text__on-primary);--button-primary__background-color--hover: var(--mer-accent__primary--hover);--button-primary__border-color--hover: var( --button-primary__background-color--hover );--button-primary__color--hover: var(--mer-text__on-primary);--button-primary__background-color--active: var( --mer-accent__primary--active );--button-primary__border-color--active: var( --button-primary__background-color--active );--button-primary__color--active: var(--mer-text__on-primary--active);--button-primary__background-color--disabled: var( --mer-accent__primary--disabled );--button-primary__border-color--disabled: var( --mer-border-color__primary--disabled );--button-primary__color--disabled: var(--mer-text__on-disabled);--button-primary__background-color--destructive: var( --mer-accent__primary--destructive );--button-primary__border-color--destructive: var( --button-primary__background-color--destructive );--button-primary__color--destructive: var(--mer-text__on-primary);font-weight:var(--control__font-weight--semi-bold);--control__border-color: var(--button-primary__border-color);background-color:var(--button-primary__background-color);color:var(--button-primary__color)}.button-primary:hover{background-color:var(--button-primary__background-color--hover);--control__border-color: var(--button-primary__border-color--hover);color:var(--button-primary__color--hover)}.button-primary:active{background-color:var(--button-primary__background-color--active);--control__border-color: var(--button-primary__border-color--active);color:var(--button-primary__color--active)}.button-primary:disabled{background-color:var(--button-primary__background-color--disabled);--control__border-color: var(--button-primary__background-color--disabled);color:var(--button-primary__color--disabled)}.button-primary--destructive:active,.button-primary--destructive:hover,.button-primary--destructive{--control__border-color: var(--button-primary__border-color--destructive);background-color:var(--button-primary__background-color--destructive);color:var(--button-primary__color--destructive)}.button-secondary{--button-secondary__background-color: transparent;--button-secondary__border-color: var(--mer-border-color__neutral);--button-secondary__color: var(--mer-text__neutral);--button-secondary__background-color--hover: transparent;--button-secondary__border-color--hover: var( --mer-border-color__primary--hover );--button-secondary__color--hover: var(--mer-text__primary--hover);--button-secondary__background-color--active: transparent;--button-secondary__border-color--active: var( --mer-border-color__primary--active );--button-secondary__color--active: var(--mer-text__on-primary--active);--button-secondary__background-color--disabled: transparent;--button-secondary__border-color--disabled: var(--mer-text__on-disabled);--button-secondary__color--disabled: var(--mer-text__on-disabled);--control__border-color: var(--button-secondary__border-color);background-color:var(--button-secondary__background-color);color:var(--button-secondary__color)}.button-secondary:hover{background-color:var(--button-secondary__background-color--hover);--control__border-color: var(--button-secondary__border-color--hover);color:var(--button-secondary__color--hover)}.button-secondary:active{background-color:var(--button-secondary__background-color--active);--control__border-color: var(--button-secondary__border-color--active);color:var(--button-secondary__color--active)}.button-secondary:disabled,.button-secondary--disabled{background-color:var(--button-secondary__background-color--disabled);--control__border-color: var(--button-secondary__border-color--disabled);color:var(--button-secondary__color--disabled)}.button-tertiary{--button-tertiary__background-color: transparent;--button-tertiary__border-color: transparent;--button-tertiary__color: var(--mer-text__primary);--button-tertiary__background-color--hover: transparent;--button-tertiary__border-color--hover: transparent;--button-tertiary__color--hover: var(--mer-text__primary--hover);--button-tertiary__background-color--active: transparent;--button-tertiary__border-color--active: transparent;--button-tertiary__color--active: var(--mer-text__primary--active);--button-tertiary__background-color--disabled: transparent;--button-tertiary__border-color--disabled: transparent;--button-tertiary__color--disabled: var(--mer-text__on-disabled);font-weight:var(--control__font-weight--regular);--control__border-color: var(--button-tertiary__border-color);background-color:var(--button-tertiary__background-color);color:var(--button-tertiary__color)}.button-tertiary:hover{background-color:var(--button-tertiary__background-color--hover);--control__border-color: var(--button-tertiary__border-color--hover);color:var(--button-tertiary__color--hover)}.button-tertiary:active{background-color:var(--button-tertiary__background-color--active);--control__border-color: var(--button-tertiary__border-color--active);color:var(--button-tertiary__color--active)}.button-tertiary:disabled,.button-tertiary--disabled{background-color:var(--button-tertiary__background-color--disabled);--control__border-color: var(--button-tertiary__border-color--disabled);color:var(--button-tertiary__color--disabled)}.field{display:grid}.field-group{--spacing-body-block-start: var(--mer-spacing--md);--spacing-body-block-end: var(--mer-spacing--md);--spacing-body-inline-start: var(--mer-spacing--md);--spacing-body-inline-end: var(--mer-spacing--md);display:grid;row-gap:var(--field-group__row-gap);column-gap:var(--field-group__column-gap)}.field-group-cols-2{display:grid;column-gap:var(--field__column-gap);row-gap:var(--field-group__row-gap);grid-template-columns:max-content auto}.field-block{row-gap:var(--field__row-gap);grid-template-rows:max-content 1fr}.field-inline{column-gap:var(--field__column-gap);grid-template-columns:max-content 1fr}.field-group-cols-2 .label,.field-inline .label{margin-block-start:var(--field-inline-label__margin-block-start)}.icon-size-sm{content:"";display:block;inline-size:var(--mer-icon__box--sm);block-size:var(--mer-icon__box--sm);background:no-repeat center/var(--mer-icon__size--sm) var(--icon-path)}.icon-size-md{content:"";display:block;inline-size:var(--mer-icon__box--md);block-size:var(--mer-icon__box--md);background:no-repeat center/var(--mer-icon__size--md) var(--icon-path)}.icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--control__icon-gap)}.button-icon-only{--control__padding-inline: 0;inline-size:var(--control__height);block-size:var(--control__height)}.button-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--mer-spacing--xs)}.checkbox{--ch-checkbox__container-size: var(--control-tiny__size);--ch-checkbox__option-size: calc(var(--control-tiny__size) / 2);gap:var(--label__gap--inline)}.checkbox:hover{--control__border-color: var(--control__border-color--hover)}.checkbox:hover::part(label){--label__color: var(--label__color--hover)}.checkbox::part(input){border-width:var(--control__border-width);border-style:var(--control__border-style);border-color:var(--control__border-color);border-radius:var(--control__border-radius)}.checkbox::part(input):focus{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.checkbox::part(option indeterminate){block-size:var(--mer-spacing--3xs)}.checkbox::part(label){color:var(--label__color);font-weight:var(--label__font-weight);font-size:var(--label__font-size);line-height:var(--label__line-height)}.checkbox::part(label disabled){--label__color: var(--label__color--disabled)}.combo-box{--ch-combo-box-separation-y: var(--mer-spacing--3xs);--ch-combo-box-item-gap: var(--mer-spacing--xs);--ch-combo-box-item__image-size: var(--mer-spacing--md);--ch-combo-box-group__expandable-button-size: var(--mer-spacing--md);--ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm);--ch-combo-box-item__background-image-size: 100%;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);font-weight:var(--control__font-weight--regular);font-size:var(--control__font-size--small);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.combo-box:hover{--control__border-color: var(--control__border-color--hover)}.combo-box::part(item nested){padding-inline-start:calc(var(--ch-combo-box-item-gap) + var(--ch-combo-box-group__expandable-button-size) + var(--mer-spacing--2xs))}.icon-sm{--ch-image-size: var(--mer-icon__box--sm);--ch-image-background-size: var(--mer-icon__size--sm)}.icon-md{--ch-image-size: var(--mer-icon__box--md);--ch-image-background-size: var(--mer-icon__size--md)}.form-input{--ch-edit-gap: var(--control__icon-gap);--ch-edit__image-size: var(--mer-icon__box--md);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);font-weight:var(--control__font-weight--regular);font-size:var(--control__font-size--small);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.form-input:focus{border-color:var(--borders-un-border-color__focused)}.form-input:hover{--control__border-color: var(--control__border-color--hover)}.form-input:disabled{--control__bg-color: var(--control__background-color--disabled);--control__border-color: var(--control__border-color--disabled);--control__color: var(--control__color--disabled);--ch-placeholder-color: var(--control-placeholder__color--disabled)}.radio-group{--ch-radio-group__radio-container-size: var(--control-tiny__size);--ch-radio-group__radio-option-size: calc(var(--mer-spacing--2xs) * 1.5);gap:var(--controls__container-row-gap)}.radio-group::part(radio-item){gap:var(--label__gap--inline)}.radio-group::part(radio__container){border:var(--mer-form-input__border);flex-shrink:0}.radio-group::part(radio__container):focus-within{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.radio-group::part(radio__container disabled){color:var(--borders-un-border-color__disabled)}.radio-group::part(radio__container checked){color:var(--mer-form-input-check__border-color)}.radio-group::part(radio__container error){background-color:var(--colors-Foundation-un-color__red--100);color:var(--borders-un-border-color__error)}.slider{--ch-slider-track-block-size: var(--slider-track__block-size);--ch-slider-track__selected-background-color: var( --slider-track__bg-color--selected );--ch-slider-track__unselected-background-color: var( --slider-track__bg-color--unselected );--ch-slider-thumb-background-color: var(--slider-thumb__bg-color);--ch-slider-thumb-size: var(--slider-thumb__size);--slider-track__block-size: var(--mer-spacing--2xs);--slider-track__bg-color--selected: var(--mer-color__primary-blue--200);--slider-track__bg-color--unselected: var(--mer-color__neutral-gray--650);--slider-track__bg-color--selected-disabled: var( --mer-accent__primary--disabled );--slider-track__bg-color--unselected-disabled: var( --mer-color__neutral-gray--450 );--slider-thumb__bg-color: var(--mer-color__neutral-gray--200);--slider-thumb__size: var(--mer-spacing--sm)}.slider:disabled{--ch-slider-track__selected-background-color: var( --slider-track__bg-color--selected-disabled );--ch-slider-track__unselected-background-color: var( --slider-track__bg-color--unselected-disabled )}.slider::part(track){border-radius:calc(var(--ch-slider-track-block-size)/2)}:where(button,a){all:unset;display:inline-flex;align-items:center;user-select:none;touch-action:manipulation;cursor:pointer}button:disabled{pointer-events:none}.label{color:var(--label__color);font-weight:var(--label__font-weight);font-size:var(--label__font-size);line-height:var(--label__line-height)}.label--disabled{--label__color: var(--label__color--disabled)}.checkbox::part(input disabled){--control__border-color: var(--control__border-color--disabled)}.checkbox::part(option disabled){--control__border-color: var(--control__border-color--disabled)}.combo-box:focus{border-color:var(--borders-un-border-color__focused)}.combo-box::part(placeholder){color:var(--control-placeholder__color);font-style:var(--control-placeholder__font-style)}.combo-box[disabled]{--control__bg-color: var(--control__background-color--disabled);--control__border-color: var(--control__border-color--disabled);--control__color: var(--control__color--disabled);--ch-placeholder-color: var(--control-placeholder__color--disabled)}.combo-box::part(group__header disabled){--item__bg-color: var(--item__bg-color--disabled);--item__border-color: var(--item__border-color--disabled);--item__color: var(--item__color--disabled)}.combo-box::part(item disabled){--item__bg-color: var(--item__bg-color--disabled);--item__border-color: var(--item__border-color--disabled);--item__color: var(--item__color--disabled)}.combo-box::part(window){background-color:var(--items-container__bg-color);border-color:var(--items-container__border-color);padding-block:var(--items-container__padding-block);padding-inline:var(--items-container__padding-inline);border-radius:var(--items-container__border-radius);box-shadow:var(--items-container__box-shadow);gap:var(--items-container__gap);max-block-size:var(--items-container__max-block-size)}.combo-box::part(group__header){background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item-header__font-weight);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline)}.combo-box::part(group__header expandable){background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item-header__font-weight);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline);border-radius:var(--item__border-radius)}.combo-box::part(group__header expandable):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover)}.combo-box::part(group){gap:var(--items-container__gap)}.combo-box::part(group__content){gap:var(--items-container__gap)}.combo-box::part(item){background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);border:var(--item__border-width) var(--item__border-style) var(--item__border-color);border-radius:var(--item__border-radius);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item__font-weight);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline)}.combo-box::part(item selected){--item__bg-color: var(--item__bg-color--selected);--item__border-color: var(--item__border-color--selected);--item__color: var(--item__color--selected)}.form-input-error{--control__border-color: var(--control__border-color--error)}.radio-group::part(radio__container disabled){border-color:var(--mer-border-color__primary--disabled)}.radio-group::part(radio__container checked){border-color:var(--mer-color__neutral-gray--300)}.radio-group::part(radio__label){color:var(--label__color);font-weight:var(--label__font-weight);font-size:var(--label__font-size);line-height:var(--label__line-height)}.radio-group::part(radio__label disabled){--label__color: var(--label__color--disabled)}.slider:focus-visible::part(thumb focus){outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}
|
|
1
|
+
.button-tertiary,.button-secondary,.button-primary{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;block-size:var(--control__height);border-width:var(--control__border-width);border-style:var(--control__border-style);border-color:var(--control__border-color);border-radius:var(--control__border-radius);font-size:var(--control__font-size--regular);line-height:var(--control__line-height);padding-inline:var(--control__padding-inline);padding-inline:var(--control__padding-inline)}.button-primary{--button-primary__background-color: var(--mer-accent__primary);--button-primary__border-color: var(--button-primary__background-color);--button-primary__color: var(--mer-text__on-primary);--button-primary__background-color--hover: var(--mer-accent__primary--hover);--button-primary__border-color--hover: var( --button-primary__background-color--hover );--button-primary__color--hover: var(--mer-text__on-primary);--button-primary__background-color--active: var( --mer-accent__primary--active );--button-primary__border-color--active: var( --button-primary__background-color--active );--button-primary__color--active: var(--mer-text__on-primary--active);--button-primary__background-color--disabled: var( --mer-accent__primary--disabled );--button-primary__border-color--disabled: var( --mer-border-color__primary--disabled );--button-primary__color--disabled: var(--mer-text__on-disabled);--button-primary__background-color--destructive: var( --mer-accent__primary--destructive );--button-primary__border-color--destructive: var( --button-primary__background-color--destructive );--button-primary__color--destructive: var(--mer-text__on-primary);font-weight:var(--control__font-weight--semi-bold);--control__border-color: var(--button-primary__border-color);background-color:var(--button-primary__background-color);color:var(--button-primary__color)}.button-primary:hover{background-color:var(--button-primary__background-color--hover);--control__border-color: var(--button-primary__border-color--hover);color:var(--button-primary__color--hover)}.button-primary:active{background-color:var(--button-primary__background-color--active);--control__border-color: var(--button-primary__border-color--active);color:var(--button-primary__color--active)}.button-primary:disabled{background-color:var(--button-primary__background-color--disabled);--control__border-color: var(--button-primary__background-color--disabled);color:var(--button-primary__color--disabled)}.button-primary--destructive:active,.button-primary--destructive:hover,.button-primary--destructive{--control__border-color: var(--button-primary__border-color--destructive);background-color:var(--button-primary__background-color--destructive);color:var(--button-primary__color--destructive)}.button-secondary{--button-secondary__background-color: transparent;--button-secondary__border-color: var(--mer-border-color__neutral);--button-secondary__color: var(--mer-text__neutral);--button-secondary__background-color--hover: transparent;--button-secondary__border-color--hover: var( --mer-border-color__primary--hover );--button-secondary__color--hover: var(--mer-text__primary--hover);--button-secondary__background-color--active: transparent;--button-secondary__border-color--active: var( --mer-border-color__primary--active );--button-secondary__color--active: var(--mer-text__on-primary--active);--button-secondary__background-color--disabled: transparent;--button-secondary__border-color--disabled: var(--mer-text__on-disabled);--button-secondary__color--disabled: var(--mer-text__on-disabled);--control__border-color: var(--button-secondary__border-color);background-color:var(--button-secondary__background-color);color:var(--button-secondary__color)}.button-secondary:hover{background-color:var(--button-secondary__background-color--hover);--control__border-color: var(--button-secondary__border-color--hover);color:var(--button-secondary__color--hover)}.button-secondary:active{background-color:var(--button-secondary__background-color--active);--control__border-color: var(--button-secondary__border-color--active);color:var(--button-secondary__color--active)}.button-secondary:disabled,.button-secondary--disabled{background-color:var(--button-secondary__background-color--disabled);--control__border-color: var(--button-secondary__border-color--disabled);color:var(--button-secondary__color--disabled)}.button-tertiary{--button-tertiary__background-color: transparent;--button-tertiary__border-color: transparent;--button-tertiary__color: var(--mer-text__primary);--button-tertiary__background-color--hover: transparent;--button-tertiary__border-color--hover: transparent;--button-tertiary__color--hover: var(--mer-text__primary--hover);--button-tertiary__background-color--active: transparent;--button-tertiary__border-color--active: transparent;--button-tertiary__color--active: var(--mer-text__primary--active);--button-tertiary__background-color--disabled: transparent;--button-tertiary__border-color--disabled: transparent;--button-tertiary__color--disabled: var(--mer-text__on-disabled);font-weight:var(--control__font-weight--regular);--control__border-color: var(--button-tertiary__border-color);background-color:var(--button-tertiary__background-color);color:var(--button-tertiary__color)}.button-tertiary:hover{background-color:var(--button-tertiary__background-color--hover);--control__border-color: var(--button-tertiary__border-color--hover);color:var(--button-tertiary__color--hover)}.button-tertiary:active{background-color:var(--button-tertiary__background-color--active);--control__border-color: var(--button-tertiary__border-color--active);color:var(--button-tertiary__color--active)}.button-tertiary:disabled,.button-tertiary--disabled{background-color:var(--button-tertiary__background-color--disabled);--control__border-color: var(--button-tertiary__border-color--disabled);color:var(--button-tertiary__color--disabled)}.field{display:grid}.field-group{--spacing-body-block-start: var(--mer-spacing--md);--spacing-body-block-end: var(--mer-spacing--md);--spacing-body-inline-start: var(--mer-spacing--md);--spacing-body-inline-end: var(--mer-spacing--md);display:grid;row-gap:var(--field-group__row-gap);column-gap:var(--field-group__column-gap)}.field-group-cols-2{display:grid;column-gap:var(--field__column-gap);row-gap:var(--field-group__row-gap);grid-template-columns:max-content auto}.field-block{row-gap:var(--field__row-gap);grid-template-rows:max-content 1fr}.field-inline{column-gap:var(--field__column-gap);grid-template-columns:max-content 1fr}.field-group-cols-2 .label,.field-inline .label{margin-block-start:var(--field-inline-label__margin-block-start)}.icon-size-sm{content:"";display:block;inline-size:var(--mer-icon__box--sm);block-size:var(--mer-icon__box--sm);background:no-repeat center/var(--mer-icon__size--sm) var(--icon-path)}.icon-size-md{content:"";display:block;inline-size:var(--mer-icon__box--md);block-size:var(--mer-icon__box--md);background:no-repeat center/var(--mer-icon__size--md) var(--icon-path)}.icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--control__icon-gap)}.button-icon-only{--control__padding-inline: 0;inline-size:var(--control__height);block-size:var(--control__height)}.button-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--mer-spacing--xs)}.checkbox{--ch-checkbox__container-size: var(--control-tiny__size);--ch-checkbox__option-size: calc(var(--control-tiny__size) / 2);gap:var(--label__gap--inline)}.checkbox:hover{--control__border-color: var(--control__border-color--hover)}.checkbox:hover::part(label){--label__color: var(--label__color--hover)}.checkbox::part(input){border-width:var(--control__border-width);border-style:var(--control__border-style);border-color:var(--control__border-color);border-radius:var(--control__border-radius)}.checkbox::part(input):focus{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.checkbox::part(option indeterminate){block-size:var(--mer-spacing--3xs)}.checkbox::part(label){color:var(--label__color);font-weight:var(--label__font-weight);font-size:var(--label__font-size);line-height:var(--label__line-height)}.checkbox::part(label disabled){--label__color: var(--label__color--disabled)}.combo-box{--ch-combo-box-separation-y: var(--mer-spacing--3xs);--ch-combo-box-item-gap: var(--mer-spacing--xs);--ch-combo-box-item__image-size: var(--mer-spacing--md);--ch-combo-box-group__expandable-button-size: var(--mer-spacing--md);--ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm);--ch-combo-box-item__background-image-size: 100%;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);font-weight:var(--control__font-weight--regular);font-size:var(--control__font-size--small);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.combo-box:hover{--control__border-color: var(--control__border-color--hover)}.combo-box::part(item nested){padding-inline-start:calc(var(--ch-combo-box-item-gap) + var(--ch-combo-box-group__expandable-button-size) + var(--mer-spacing--2xs))}.icon-sm{--ch-image-size: var(--mer-icon__box--sm);--ch-image-background-size: var(--mer-icon__size--sm)}.icon-md{--ch-image-size: var(--mer-icon__box--md);--ch-image-background-size: var(--mer-icon__size--md)}.form-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);font-weight:var(--control__font-weight--regular);font-size:var(--control__font-size--small);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.form-input:focus{border-color:var(--borders-un-border-color__focused)}.form-input:hover{--control__border-color: var(--control__border-color--hover)}.form-input:disabled{--control__bg-color: var(--control__background-color--disabled);--control__border-color: var(--control__border-color--disabled);--control__color: var(--control__color--disabled);--ch-placeholder-color: var(--control-placeholder__color--disabled)}.radio-group{--ch-radio-group__radio-container-size: var(--control-tiny__size);--ch-radio-group__radio-option-size: calc(var(--mer-spacing--2xs) * 1.5);gap:var(--controls__container-row-gap)}.radio-group::part(radio-item){gap:var(--label__gap--inline)}.radio-group::part(radio__container){border:var(--mer-form-input__border);flex-shrink:0}.radio-group::part(radio__container):focus-within{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.radio-group::part(radio__container disabled){color:var(--borders-un-border-color__disabled)}.radio-group::part(radio__container checked){color:var(--mer-form-input-check__border-color)}.radio-group::part(radio__container error){background-color:var(--colors-Foundation-un-color__red--100);color:var(--borders-un-border-color__error)}.slider{--ch-slider-track-block-size: var(--slider-track__block-size);--ch-slider-track__selected-background-color: var( --slider-track__bg-color--selected );--ch-slider-track__unselected-background-color: var( --slider-track__bg-color--unselected );--ch-slider-thumb-background-color: var(--slider-thumb__bg-color);--ch-slider-thumb-size: var(--slider-thumb__size);--slider-track__block-size: var(--mer-spacing--2xs);--slider-track__bg-color--selected: var(--mer-color__primary-blue--200);--slider-track__bg-color--unselected: var(--mer-color__neutral-gray--650);--slider-track__bg-color--selected-disabled: var( --mer-accent__primary--disabled );--slider-track__bg-color--unselected-disabled: var( --mer-color__neutral-gray--450 );--slider-thumb__bg-color: var(--mer-color__neutral-gray--200);--slider-thumb__size: var(--mer-spacing--sm)}.slider:disabled{--ch-slider-track__selected-background-color: var( --slider-track__bg-color--selected-disabled );--ch-slider-track__unselected-background-color: var( --slider-track__bg-color--unselected-disabled )}.slider::part(track){border-radius:calc(var(--ch-slider-track-block-size)/2)}:where(button,a){all:unset;display:inline-flex;align-items:center;user-select:none;touch-action:manipulation;cursor:pointer}button:disabled{pointer-events:none}.label{color:var(--label__color);font-weight:var(--label__font-weight);font-size:var(--label__font-size);line-height:var(--label__line-height)}.label--disabled{--label__color: var(--label__color--disabled)}.checkbox::part(input disabled){--control__border-color: var(--control__border-color--disabled)}.checkbox::part(option disabled){--control__border-color: var(--control__border-color--disabled)}.combo-box:focus{border-color:var(--borders-un-border-color__focused)}.combo-box::part(placeholder){color:var(--control-placeholder__color);font-style:var(--control-placeholder__font-style)}.combo-box[disabled]{--control__bg-color: var(--control__background-color--disabled);--control__border-color: var(--control__border-color--disabled);--control__color: var(--control__color--disabled);--ch-placeholder-color: var(--control-placeholder__color--disabled)}.combo-box::part(group__header disabled){--item__bg-color: var(--item__bg-color--disabled);--item__border-color: var(--item__border-color--disabled);--item__color: var(--item__color--disabled)}.combo-box::part(item disabled){--item__bg-color: var(--item__bg-color--disabled);--item__border-color: var(--item__border-color--disabled);--item__color: var(--item__color--disabled)}.combo-box::part(window){background-color:var(--items-container__bg-color);border-color:var(--items-container__border-color);padding-block:var(--items-container__padding-block);padding-inline:var(--items-container__padding-inline);border-radius:var(--items-container__border-radius);box-shadow:var(--items-container__box-shadow);gap:var(--items-container__gap);max-block-size:var(--items-container__max-block-size)}.combo-box::part(group__header){background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item-header__font-weight);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline)}.combo-box::part(group__header expandable){background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item-header__font-weight);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline);border-radius:var(--item__border-radius)}.combo-box::part(group__header expandable):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover)}.combo-box::part(group){gap:var(--items-container__gap)}.combo-box::part(group__content){gap:var(--items-container__gap)}.combo-box::part(item){background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);border:var(--item__border-width) var(--item__border-style) var(--item__border-color);border-radius:var(--item__border-radius);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item__font-weight);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline)}.combo-box::part(item selected){--item__bg-color: var(--item__bg-color--selected);--item__border-color: var(--item__border-color--selected);--item__color: var(--item__color--selected)}.form-input-error{--control__border-color: var(--control__border-color--error)}.radio-group::part(radio__container disabled){border-color:var(--mer-border-color__primary--disabled)}.radio-group::part(radio__container checked){border-color:var(--mer-color__neutral-gray--300)}.radio-group::part(radio__label){color:var(--label__color);font-weight:var(--label__font-weight);font-size:var(--label__font-size);line-height:var(--label__line-height)}.radio-group::part(radio__label disabled){--label__color: var(--label__color--disabled)}.slider:focus-visible::part(thumb focus){outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}
|
package/dist/bundles.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export type MercuryBundles = [MercuryBundleReset, ...MercuryBundleOptimized[]] |
|
|
|
2
2
|
export type MercuryBundleOptimized = MercuryBundleComponent | MercuryBundleComponentForm | MercuryBundleUtil;
|
|
3
3
|
export type MercuryBundleFull = MercuryBundleComponent | MercuryBundleUtil | MercuryBundleUtilFormFull;
|
|
4
4
|
export type MercuryBundleBase = "base/base" | "base/icons";
|
|
5
|
-
export type MercuryBundleComponent = "components/accordion" | "components/code" | "components/dialog" | "components/list-box" | "components/markdown-viewer" | "components/tab" | "components/tabular-grid" | "components/ticket-list" | "components/tree-view";
|
|
5
|
+
export type MercuryBundleComponent = "components/accordion" | "components/chat" | "components/code" | "components/dialog" | "components/list-box" | "components/markdown-viewer" | "components/tab" | "components/tabular-grid" | "components/ticket-list" | "components/tree-view";
|
|
6
6
|
export type MercuryBundleComponentForm = "components/button" | "components/checkbox" | "components/combo-box" | "components/edit" | "components/icon" | "components/radio-group" | "components/slider";
|
|
7
7
|
export type MercuryBundleReset = "resets/box-sizing";
|
|
8
8
|
export type MercuryBundleUtil = "utils/form" | "utils/layout" | "utils/typography" | "chameleon/scrollbar";
|
|
@@ -40,6 +40,14 @@ export declare const getThemeBundles: (basePath: string) => [{
|
|
|
40
40
|
readonly name: BundleNames;
|
|
41
41
|
readonly url: `${string}components/button.css`;
|
|
42
42
|
readonly attachStyleSheet: boolean;
|
|
43
|
+
}, {
|
|
44
|
+
readonly name: BundleNames;
|
|
45
|
+
readonly url: `${string}components/chat.css`;
|
|
46
|
+
readonly attachStyleSheet?: undefined;
|
|
47
|
+
} | {
|
|
48
|
+
readonly name: BundleNames;
|
|
49
|
+
readonly url: `${string}components/chat.css`;
|
|
50
|
+
readonly attachStyleSheet: boolean;
|
|
43
51
|
}, {
|
|
44
52
|
readonly name: BundleNames;
|
|
45
53
|
readonly url: `${string}components/checkbox.css`;
|
package/dist/bundles.js
CHANGED
|
@@ -28,6 +28,7 @@ export const getThemeBundles = (basePath) => [
|
|
|
28
28
|
// Components
|
|
29
29
|
getThemeModelItem(basePath, "components/accordion"),
|
|
30
30
|
getThemeModelItem(basePath, "components/button"),
|
|
31
|
+
getThemeModelItem(basePath, "components/chat"),
|
|
31
32
|
getThemeModelItem(basePath, "components/checkbox"),
|
|
32
33
|
getThemeModelItem(basePath, "components/code"),
|
|
33
34
|
getThemeModelItem(basePath, "components/combo-box"),
|
package/dist/mercury.scss
CHANGED
|
@@ -3480,6 +3480,139 @@
|
|
|
3480
3480
|
}
|
|
3481
3481
|
}
|
|
3482
3482
|
|
|
3483
|
+
%chat-message-icon {
|
|
3484
|
+
content: "";
|
|
3485
|
+
display: grid;
|
|
3486
|
+
justify-self: flex-end;
|
|
3487
|
+
inline-size: 16px;
|
|
3488
|
+
block-size: 16px;
|
|
3489
|
+
-webkit-mask: no-repeat center / 100% var(--chat-message-icon);
|
|
3490
|
+
background-color: var(--chat-message-icon-color);
|
|
3491
|
+
}
|
|
3492
|
+
|
|
3493
|
+
@mixin chat($chat-selector: ".chat") {
|
|
3494
|
+
#{$chat-selector} {
|
|
3495
|
+
&::part(content) {
|
|
3496
|
+
gap: 6px;
|
|
3497
|
+
}
|
|
3498
|
+
|
|
3499
|
+
&::part(message) {
|
|
3500
|
+
display: grid;
|
|
3501
|
+
grid-template-columns: 1fr max-content;
|
|
3502
|
+
grid-auto-rows: max-content;
|
|
3503
|
+
padding: var(--mer-spacing--sm);
|
|
3504
|
+
gap: var(--mer-spacing--sm);
|
|
3505
|
+
border-radius: var(--mer-border__radius--sm);
|
|
3506
|
+
overflow: hidden;
|
|
3507
|
+
}
|
|
3508
|
+
|
|
3509
|
+
&::part(message__role) {
|
|
3510
|
+
@extend %text-body-highlighted-m;
|
|
3511
|
+
display: inline-grid;
|
|
3512
|
+
grid-template-columns: max-content max-content;
|
|
3513
|
+
gap: 6px;
|
|
3514
|
+
|
|
3515
|
+
&::before {
|
|
3516
|
+
content: "";
|
|
3517
|
+
display: grid;
|
|
3518
|
+
justify-self: flex-end;
|
|
3519
|
+
inline-size: 4px;
|
|
3520
|
+
block-size: 4px;
|
|
3521
|
+
border-radius: 50%;
|
|
3522
|
+
align-self: center;
|
|
3523
|
+
background-color: currentColor;
|
|
3524
|
+
}
|
|
3525
|
+
}
|
|
3526
|
+
|
|
3527
|
+
&::part(message__role user) {
|
|
3528
|
+
color: var(--mer-accent__primary);
|
|
3529
|
+
}
|
|
3530
|
+
|
|
3531
|
+
&::part(message__time) {
|
|
3532
|
+
@extend %text-body-italic-m;
|
|
3533
|
+
color: #828b96;
|
|
3534
|
+
}
|
|
3535
|
+
|
|
3536
|
+
&::part(message__content) {
|
|
3537
|
+
@extend %text-body-regular-m;
|
|
3538
|
+
color: #e1ecf9;
|
|
3539
|
+
}
|
|
3540
|
+
|
|
3541
|
+
&::part(message__content user),
|
|
3542
|
+
&::part(message__content no-error) {
|
|
3543
|
+
grid-area: 2 / 1 / 2 / 3;
|
|
3544
|
+
}
|
|
3545
|
+
|
|
3546
|
+
&::part(message user) {
|
|
3547
|
+
background-color: rgba(91, 167, 255, 0.08);
|
|
3548
|
+
border-inline-start: 2px solid var(--mer-border-color__primary);
|
|
3549
|
+
}
|
|
3550
|
+
|
|
3551
|
+
&::part(message assistant waiting) {
|
|
3552
|
+
@extend %text-body-italic-s;
|
|
3553
|
+
background-color: #11151c;
|
|
3554
|
+
border-radius: unset;
|
|
3555
|
+
color: #666;
|
|
3556
|
+
}
|
|
3557
|
+
|
|
3558
|
+
&::part(message assistant complete) {
|
|
3559
|
+
background-color: var(--mer-color__elevation--01);
|
|
3560
|
+
}
|
|
3561
|
+
|
|
3562
|
+
&::part(message assistant warning) {
|
|
3563
|
+
background-color: rgba(255, 201, 107, 0.05);
|
|
3564
|
+
border-inline-start: 2px solid var(--mer-border-color__warning);
|
|
3565
|
+
|
|
3566
|
+
&::after {
|
|
3567
|
+
@extend %chat-message-icon;
|
|
3568
|
+
--chat-message-icon: var(--icon__system_warning_primary--enabled);
|
|
3569
|
+
--chat-message-icon-color: var(--mer-icon__warning);
|
|
3570
|
+
}
|
|
3571
|
+
}
|
|
3572
|
+
|
|
3573
|
+
&::part(message error) {
|
|
3574
|
+
background-color: rgba(251, 124, 132, 0.05);
|
|
3575
|
+
border-inline-start: 2px solid var(--mer-border-color__error);
|
|
3576
|
+
|
|
3577
|
+
&::after {
|
|
3578
|
+
@extend %chat-message-icon;
|
|
3579
|
+
--chat-message-icon: var(
|
|
3580
|
+
--icon__system_warning_primary--enabled
|
|
3581
|
+
); // TODO: Add error icon
|
|
3582
|
+
--chat-message-icon-color: var(--mer-icon__error);
|
|
3583
|
+
}
|
|
3584
|
+
}
|
|
3585
|
+
|
|
3586
|
+
&::part(message assistant success) {
|
|
3587
|
+
background-color: rgba(63, 168, 155, 0.05);
|
|
3588
|
+
border-inline-start: 2px solid var(--mer-border-color__success);
|
|
3589
|
+
|
|
3590
|
+
&::after {
|
|
3591
|
+
@extend %chat-message-icon;
|
|
3592
|
+
--chat-message-icon: var(--icon__system_success_primary--enabled);
|
|
3593
|
+
--chat-message-icon-color: var(--mer-icon__success);
|
|
3594
|
+
}
|
|
3595
|
+
}
|
|
3596
|
+
|
|
3597
|
+
@include form-input(
|
|
3598
|
+
$selector: "&::part(send-input)",
|
|
3599
|
+
$add--disabled: false,
|
|
3600
|
+
$add--placeholder: false,
|
|
3601
|
+
$add--error: false
|
|
3602
|
+
);
|
|
3603
|
+
|
|
3604
|
+
&::part(send-input) {
|
|
3605
|
+
background-color: #11151c;
|
|
3606
|
+
border-color: #11151c;
|
|
3607
|
+
--control__padding-block: 10px;
|
|
3608
|
+
}
|
|
3609
|
+
|
|
3610
|
+
&::part(send-input-wrapper) {
|
|
3611
|
+
margin-block-start: 14px;
|
|
3612
|
+
}
|
|
3613
|
+
}
|
|
3614
|
+
}
|
|
3615
|
+
|
|
3483
3616
|
%checkbox {
|
|
3484
3617
|
--ch-checkbox__container-size: var(--control-tiny__size);
|
|
3485
3618
|
--ch-checkbox__option-size: calc(var(--control-tiny__size) / 2);
|
|
@@ -3666,7 +3799,7 @@
|
|
|
3666
3799
|
--code__color-light-blue: var(--mer-color__primary-blue--200);
|
|
3667
3800
|
--code__color-red: var(--mer-color__message-red--200);
|
|
3668
3801
|
--code__color-green: var(--mer-color__message-green--200);
|
|
3669
|
-
--code__bg-color: var(--mer-
|
|
3802
|
+
--code__bg-color: var(--mer-color__surface);
|
|
3670
3803
|
--code__border: var(--mer-border__width--sm) solid
|
|
3671
3804
|
var(--mer-color__elevation--03);
|
|
3672
3805
|
--code__border-radius: var(--mer-border__radius--sm);
|
|
@@ -4783,6 +4916,7 @@
|
|
|
4783
4916
|
// --ch-edit-auto-fill-background-color: var(); not defined by design yet
|
|
4784
4917
|
--ch-edit-gap: var(--control__icon-gap);
|
|
4785
4918
|
--ch-edit__image-size: var(--mer-icon__box--md);
|
|
4919
|
+
--ch-placeholder-color: var(--mer-color__neutral-gray--400);
|
|
4786
4920
|
|
|
4787
4921
|
@include control-border();
|
|
4788
4922
|
@include control-colors-enabled();
|
|
@@ -5226,6 +5360,42 @@
|
|
|
5226
5360
|
// - - - - - - - - - - - - - - - - - - - -
|
|
5227
5361
|
// Code
|
|
5228
5362
|
// - - - - - - - - - - - - - - - - - - - -
|
|
5363
|
+
.code-block-container {
|
|
5364
|
+
position: relative;
|
|
5365
|
+
}
|
|
5366
|
+
|
|
5367
|
+
.code-block-header {
|
|
5368
|
+
display: grid;
|
|
5369
|
+
grid-auto-columns: max-content;
|
|
5370
|
+
grid-auto-flow: column;
|
|
5371
|
+
justify-content: flex-end;
|
|
5372
|
+
position: absolute;
|
|
5373
|
+
inset-block-start: var(--mer-spacing--md);
|
|
5374
|
+
inset-inline-end: var(--mer-spacing--xs);
|
|
5375
|
+
padding: 6px;
|
|
5376
|
+
background-color: var(--mer-color__elevation--01);
|
|
5377
|
+
border-radius: var(--mer-border__radius--xs);
|
|
5378
|
+
}
|
|
5379
|
+
|
|
5380
|
+
.button-copy-code {
|
|
5381
|
+
inline-size: 18px;
|
|
5382
|
+
block-size: 18px;
|
|
5383
|
+
|
|
5384
|
+
&::before {
|
|
5385
|
+
content: "";
|
|
5386
|
+
display: grid;
|
|
5387
|
+
inline-size: 100%;
|
|
5388
|
+
block-size: 100%;
|
|
5389
|
+
-webkit-mask: no-repeat center / 100%
|
|
5390
|
+
var(--icon__system_copy_primary--enabled);
|
|
5391
|
+
background-color: currentColor;
|
|
5392
|
+
}
|
|
5393
|
+
|
|
5394
|
+
&:focus-visible {
|
|
5395
|
+
outline: 1px solid currentColor;
|
|
5396
|
+
}
|
|
5397
|
+
}
|
|
5398
|
+
|
|
5229
5399
|
// Multiline code
|
|
5230
5400
|
ch-code {
|
|
5231
5401
|
// Override inline border-radius
|
|
@@ -7913,6 +8083,7 @@
|
|
|
7913
8083
|
// Components
|
|
7914
8084
|
$components: true,
|
|
7915
8085
|
$accordion: true,
|
|
8086
|
+
$chat: true,
|
|
7916
8087
|
$checkbox: true,
|
|
7917
8088
|
$code: true,
|
|
7918
8089
|
$combo-box: true,
|
|
@@ -16151,6 +16322,10 @@
|
|
|
16151
16322
|
@include accordion-outlined();
|
|
16152
16323
|
}
|
|
16153
16324
|
|
|
16325
|
+
@if $chat {
|
|
16326
|
+
@include chat();
|
|
16327
|
+
}
|
|
16328
|
+
|
|
16154
16329
|
@if $checkbox {
|
|
16155
16330
|
@include checkbox();
|
|
16156
16331
|
}
|
|
@@ -16258,6 +16433,7 @@
|
|
|
16258
16433
|
// Components
|
|
16259
16434
|
$components: false,
|
|
16260
16435
|
$accordion: false,
|
|
16436
|
+
$chat: false,
|
|
16261
16437
|
$checkbox: false,
|
|
16262
16438
|
$code: false,
|
|
16263
16439
|
$combo-box: false,
|
|
@@ -16321,6 +16497,7 @@
|
|
|
16321
16497
|
// Components
|
|
16322
16498
|
$components: $components,
|
|
16323
16499
|
$accordion: $accordion,
|
|
16500
|
+
$chat: $chat,
|
|
16324
16501
|
$checkbox: $checkbox,
|
|
16325
16502
|
$code: $code,
|
|
16326
16503
|
$combo-box: $combo-box,
|
package/package.json
CHANGED