@genexus/mercury 0.9.12 → 0.9.13
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/accordion.css +1 -1
- package/dist/bundles/css/components/dialog.css +1 -1
- package/dist/bundles/css/components/edit.css +1 -1
- package/dist/bundles/css/components/sidebar.css +1 -1
- package/dist/bundles/css/components/widget.css +1 -1
- package/dist/bundles/css/utils/elevation.css +1 -1
- package/dist/bundles/css/utils/form--full.css +1 -1
- package/dist/bundles/css/utils/form.css +1 -1
- package/dist/bundles/css/utils/layout.css +1 -1
- package/dist/bundles/css/utils/spacing.css +1 -0
- package/dist/bundles/scss/utils/layout.scss +1 -5
- package/dist/bundles/scss/utils/spacing.scss +4 -0
- package/dist/bundles.d.ts +9 -1
- package/dist/bundles.js +1 -0
- package/dist/mercury.scss +169 -40
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.accordion-outlined::part(header),.accordion-filled::part(header){--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)}.accordion-outlined::part(header),.accordion-filled::part(header){font-size:var(--text-body__font-size--m);font-weight:var(--text-body-highlighted__font-weight);line-height:var(--text-body__line-height)}.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--xs);--spacing-body-block-end: var(--mer-spacing--xs);--spacing-body-inline-start: var(--mer-spacing--sm);--spacing-body-inline-end: var(--mer-spacing--sm);--accordion__gap: var(--mer-spacing--2xs);--accordion-panel__border-radius: var(--mer-border__radius--sm);--accordion-panel__bg-color: var(--mer-surface__elevation--01);--accordion-panel__bg-color--disabled: var(--mer-surface__elevation--02);--accordion-panel-outlined__border-color: var(--mer-border-color__on-surface);--accordion-panel-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );--accordion-panel-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );--accordion-panel-outlined__border: var(--mer-border__width--sm) solid var(--accordion-panel-outlined__border-color);--accordion-panel-outlined__border-radius: var(--mer-border__radius--sm);--accordion-header__padding: var(--mer-spacing--sm);--accordion-header__gap: var(--mer-spacing--sm);--accordion-header__color: var(--mer-text__highlighted);--accordion-header__color--disabled: var(--mer-accent__primary--disabled);--accordion-header__border-width: var(--mer-border__width--sm);--accordion-header__border-color: transparent;--accordion-header__border-radius: var(--accordion-panel__border-radius);--accordion-header__border-block-end-color: var( --mer-border-color__on-surface );--accordion-section__border-color: var(--mer-border-color__on-elevation--01);--accordion-section__margin-block: var(--mer-spacing--sm);--accordion-section__margin-inline: var(--mer-spacing--sm);--accordion-section__bg-color: var(--mer-surface__elevation--01);--accordion-section__border: var(--mer-border__width--sm) solid var(--accordion-section__border-color);--accordion-section__border-radius: var(--mer-border__radius--sm);--accordion-section-outlined__border-color: var( --mer-border-color__on-surface );--accordion-section-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );gap:var(--accordion__gap)}.accordion-outlined{--accordion-section__border-color: var( --accordion-section-outlined__border-color );--accordion-section__bg-color: transparent}.accordion-outlined::part(header),.accordion-filled::part(header){padding:var(--accordion-header__padding);gap:var(--accordion-header__gap);color:var(--accordion-header__color);border:var(--accordion-header__border-width) solid var(--accordion-header__border-color)}.accordion-outlined::part(header):hover,.accordion-filled::part(header):hover{--accordion-header__border-color: var(--mer-border-color__primary--hover)}.accordion-outlined::part(header):active,.accordion-filled::part(header):active{--accordion-header__border-color: var(--mer-border-color__primary--active)}.accordion-outlined::part(header):hover,.accordion-filled::part(header):hover,.accordion-outlined::part(header):active,.accordion-filled::part(header):active{--accordion-header__border-block-end-color: var( --accordion-header__border-color )}.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-filled::part(header disabled){color:var(--mer-accent__primary--disabled)}.accordion-outlined::part(header disabled){color:var(--mer-accent__primary--disabled)}.accordion-outlined::part(header expanded),.accordion-filled::part(header expanded){border-block-end-color:var(--accordion-header__border-block-end-color)}.accordion-filled::part(panel){border-radius:var(--mer-border__radius--sm);background-color:var(--accordion-panel__bg-color)}.accordion-filled::part(panel disabled){--accordion-panel__bg-color: var(--accordion-panel__bg-color--disabled)}.accordion-outlined::part(panel){border:var(--accordion-panel-outlined__border);border-radius:var(--accordion-panel-outlined__border-radius)}.accordion-outlined::part(panel disabled){border-color:var(--accordion-panel-outlined__border-color--disabled)}
|
|
1
|
+
.accordion-outlined::part(header),.accordion-filled::part(header){--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)}.accordion-outlined::part(header),.accordion-filled::part(header){font-size:var(--text-body__font-size--m);font-weight:var(--text-body-highlighted__font-weight);line-height:var(--text-body__line-height)}.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--xs);--spacing-body-block-end: var(--mer-spacing--xs);--spacing-body-inline-start: var(--mer-spacing--sm);--spacing-body-inline-end: var(--mer-spacing--sm);--accordion__gap: var(--mer-spacing--2xs);--accordion-panel__border-radius: var(--mer-border__radius--sm);--accordion-panel__bg-color: var(--mer-surface__elevation--01);--accordion-panel__bg-color--disabled: var(--mer-surface__elevation--02);--accordion-panel-outlined__border-color: var(--mer-border-color__on-surface);--accordion-panel-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );--accordion-panel-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );--accordion-panel-outlined__border: var(--mer-border__width--sm) solid var(--accordion-panel-outlined__border-color);--accordion-panel-outlined__border-radius: var(--mer-border__radius--sm);--accordion-header__padding: var(--mer-spacing--sm);--accordion-header__gap: var(--mer-spacing--sm);--accordion-header__color: var(--mer-text__highlighted);--accordion-header__color--disabled: var(--mer-accent__primary--disabled);--accordion-header__border-width: var(--mer-border__width--sm);--accordion-header__border-color: transparent;--accordion-header__border-radius: var(--accordion-panel__border-radius);--accordion-header__border-block-end-color: var( --mer-border-color__on-surface );--accordion-section__border-color: var(--mer-border-color__on-elevation--01);--accordion-section__margin-block: var(--mer-spacing--sm);--accordion-section__margin-inline: var(--mer-spacing--sm);--accordion-section__bg-color: var(--mer-surface__elevation--01);--accordion-section__border: var(--mer-border__width--sm) solid var(--accordion-section__border-color);--accordion-section__border-radius: var(--mer-border__radius--sm);--accordion-section-outlined__border-color: var( --mer-border-color__on-surface );--accordion-section-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );--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)}.accordion-outlined{--accordion-section__border-color: var( --accordion-section-outlined__border-color );--accordion-section__bg-color: transparent}.accordion-outlined::part(header),.accordion-filled::part(header){padding:var(--accordion-header__padding);gap:var(--accordion-header__gap);color:var(--accordion-header__color);border:var(--accordion-header__border-width) solid var(--accordion-header__border-color)}.accordion-outlined::part(header):hover,.accordion-filled::part(header):hover{--accordion-header__border-color: var(--mer-border-color__primary--hover)}.accordion-outlined::part(header):active,.accordion-filled::part(header):active{--accordion-header__border-color: var(--mer-border-color__primary--active)}.accordion-outlined::part(header):hover,.accordion-filled::part(header):hover,.accordion-outlined::part(header):active,.accordion-filled::part(header):active{--accordion-header__border-block-end-color: var( --accordion-header__border-color )}.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-filled::part(header disabled){color:var(--mer-accent__primary--disabled)}.accordion-outlined::part(header disabled){color:var(--mer-accent__primary--disabled)}.accordion-outlined::part(header expanded),.accordion-filled::part(header expanded){border-block-end-color:var(--accordion-header__border-block-end-color)}.accordion-filled::part(panel){border-radius:var(--mer-border__radius--sm);background-color:var(--accordion-panel__bg-color)}.accordion-filled::part(panel disabled){--accordion-panel__bg-color: var(--accordion-panel__bg-color--disabled)}.accordion-outlined::part(panel){border:var(--accordion-panel-outlined__border);border-radius:var(--accordion-panel-outlined__border-radius)}.accordion-outlined::part(panel disabled){border-color:var(--accordion-panel-outlined__border-color--disabled)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dialog::part(close-button){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)}.dialog::part(caption){--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)}.dialog::part(caption){font-size:var(--mer-font__size--2xs);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h5__line-height)}.dialog::part(caption){--heading__color: var(--mer-heading__gray--light)}.dialog::part(dialog){--spacing-body-block-start: var(--mer-spacing--
|
|
1
|
+
.dialog::part(close-button){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)}.dialog::part(caption){--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)}.dialog::part(caption){font-size:var(--mer-font__size--2xs);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h5__line-height)}.dialog::part(caption){--heading__color: var(--mer-heading__gray--light)}.dialog::part(dialog){--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)}.dialog.ch-dialog--modal{background-color:rgba(32,36,40,.9);backdrop-filter:blur(1.5px);z-index:108}.dialog::part(header){gap:var(--mer-spacing--sm);padding-block:var(--mer-spacing--md);padding-inline:var(--mer-spacing--sm);border-block-end:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01)}.dialog::part(caption){word-break:break-word}.dialog::part(close-button){--icon-path: var(--icon__system_close_primary--enabled)}.dialog::part(close-button):hover{--icon-path: var(--icon__system_close_primary--hover)}.dialog::part(close-button):active{--icon-path: var(--icon__system_close_primary--active)}.dialog::part(content){overflow:auto}.dialog::part(footer){padding-block:var(--mer-spacing--xs);padding-inline:var(--mer-spacing--sm)}.dialog::part(edge){border-color:rgba(0,0,0,0);transition:var(--mer-timing--fast) border-color}.dialog::part(edge):hover{border-color:var(--mer-color__tinted-primary--20)}.dialog::part(edge-block-start){border-block-start-width:var(--mer-border__width--lg);border-block-start-style:solid}.dialog::part(edge-inline-end){border-inline-end-width:var(--mer-border__width--lg);border-inline-end-style:solid}.dialog::part(edge-block-end){border-block-end-width:var(--mer-border__width--lg);border-block-end-style:solid}.dialog::part(edge-inline-start){border-inline-start-width:var(--mer-border__width--lg);border-inline-start-style:solid}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.control-footer,.dialog::part(footer){--control-footer-justify-content: end;padding-block-start:var(--mer-spacing--xs);display:flex;justify-content:var(--control-footer-justify-content);align-items:center}.control-footer-start{--control-footer-justify-content: start}.control-footer-center{--control-footer-justify-content: center}.control-footer-space-between{--control-footer-justify-content: space-between}.dialog::part(footer){border-block-start:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.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--regular);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.input:focus{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.input:hover{--control__border-color: var(--control__border-color--hover)}.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)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.input::placeholder{font-style:italic}.input-error{--control__border-color: var(--control__border-color--error)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.sidebar{--ch-sidebar-inline-size--collapsed: 42px;--ch-sidebar__chevron-size: 24px;--ch-sidebar__chevron-image-size:
|
|
1
|
+
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.sidebar{--ch-sidebar-inline-size--collapsed: 42px;--ch-sidebar__chevron-size: 24px;--ch-sidebar__chevron-image-size: var(--mer-spacing--sm);--ch-sidebar__chevron-background-image: var( --icon__system_arrow-right_primary--enabled );--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-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);overflow:hidden}.sidebar-collapsed-hidden{--ch-sidebar-inline-size--collapsed: 0}.sidebar-with-motion{transition:var(--mer-timing--super-fast) ease inline-size}.ch-sidebar--collapsed.sidebar-with-motion{inline-size:var(--ch-sidebar-inline-size--collapsed) !important}.sidebar-with-motion::part(expand-button)::before{transition:var(--mer-timing--super-fast) ease transform}.sidebar::part(expand-button){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)}.sidebar::part(expand-button)::before{transform:rotate(180deg)}.sidebar::part(expand-button):hover{background-color:var(--mer-surface__elevation--03);border-color:var(--mer-border-color__on-elevation--02);color:var(--mer-icon__highlighted)}.sidebar::part(expand-button):active{background-color:var(--mer-surface__elevation--01);border-color:var(--mer-border-color__on-elevation--01)}.sidebar::part(expand-button):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.sidebar::part(expand-button collapsed)::before{transform:rotate(0)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.widget{--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)}
|
|
1
|
+
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.widget,:host(.widget){--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)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.elevation-
|
|
1
|
+
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.elevation-1,:host(.elevation-1),.elevation-2,:host(.elevation-2),.elevation-3,:host(.elevation-3){color:var(--mer-text__on-elevation)}.elevation-1,:host(.elevation-1){background-color:var(--mer-surface__elevation--01)}.elevation-2,:host(.elevation-2){background-color:var(--mer-surface__elevation--02)}.elevation-3,:host(.elevation-3){background-color:var(--mer-surface__elevation--03)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.button-tertiary,.button-secondary,.button-primary{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;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-block:var(--control__padding-block);padding-inline:var(--control__padding-inline);padding-inline:var(--control__padding-inline)}.button-tertiary:focus-visible,.button-secondary:focus-visible,.button-primary:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.button-primary{--button-primary__bg-color: var(--mer-accent__primary);--button-primary__border-color: var(--button-primary__bg-color);--button-primary__color: var(--mer-text__on-primary);--button-primary__bg-color--hover: var(--mer-accent__primary--hover);--button-primary__border-color--hover: var(--button-primary__bg-color--hover);--button-primary__color--hover: var(--mer-text__on-primary);--button-primary__bg-color--active: var(--mer-accent__primary--active);--button-primary__border-color--active: var( --button-primary__bg-color--active );--button-primary__color--active: var(--mer-text__on-primary--active);--button-primary__bg-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__bg-color--destructive: var( --mer-accent__primary--destructive );--button-primary__bg-color--destructive-hover: var( --mer-accent__primary--destructive-hover );--button-primary__bg-color--destructive-active: var( --mer-accent__primary--destructive-active );--button-primary__border-color--destructive: var( --button-primary__bg-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__bg-color);color:var(--button-primary__color)}.button-primary:hover{background-color:var(--button-primary__bg-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__bg-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__bg-color--disabled);--control__border-color: var(--button-primary__bg-color--disabled);color:var(--button-primary__color--disabled)}.button-primary-destructive{--control__border-color: var(--button-primary__border-color--destructive);background-color:var(--button-primary__bg-color--destructive);color:var(--button-primary__color--destructive)}.button-primary-destructive:hover{--control__border-color: var( --button-primary__bg-color--destructive-hover );background-color:var(--button-primary__bg-color--destructive-hover);color:var(--button-primary__color--destructive)}.button-primary-destructive:active{--control__border-color: var( --button-primary__bg-color--destructive-active );background-color:var(--button-primary__bg-color--destructive-active);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);--button-secondary__bg-color--destructive: transparent;--button-secondary__bg-color--destructive-hover: var( --mer-accent__primary--destructive-hover );--button-secondary__bg-color--destructive-active: var( --mer-accent__primary--destructive-active );--button-secondary__border-color--destructive: var( --button-primary__bg-color--destructive );--button-secondary__color--destructive: var(--mer-text__on-primary);--button-secondary__bg-color--destructive: var(transparent);--button-secondary__bg-color--destructive-hover: var( --mer-color__message-red--600 );--button-secondary__bg-color--destructive-active: var( --mer-color__message-red--500 );--button-secondary__border-color--destructive: var( --mer-accent__primary--destructive );--button-secondary__color--destructive: var( --mer-accent__primary--destructive );--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-secondary-destructive{--control__border-color: var(--button-secondary__border-color--destructive);background-color:var(--button-secondary__bg-color--destructive);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:hover{--control__border-color: var( --button-secondary__bg-color--destructive-hover );background-color:var(--button-secondary__bg-color--destructive-hover);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:active{--control__border-color: var( --button-secondary__bg-color--destructive-active );background-color:var(--button-secondary__bg-color--destructive-active);color:var(--button-secondary__color--destructive)}.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)}.buttons-spacer{display:flex;gap:var(--mer-spacing--xs)}.field{display:grid}.field-group-inline,.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);row-gap:var(--field-group__row-gap);column-gap:var(--field-group__column-gap)}.field-group{display:grid}.field-group-inline{display:flex;flex-wrap:wrap}.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{padding:0;box-sizing:border-box;inline-size:calc(var(--control__font-size--regular)*var(--control__line-height) + var(--control__padding-block)*2 + var(--control__border-width)*2);block-size:calc(var(--control__font-size--regular)*var(--control__line-height) + var(--control__padding-block)*2 + var(--control__border-width)*2)}.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);--ch-checkbox__image-size: var(--mer-icon__box--md);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-icon__box--md);--ch-combo-box-item__background-image-size: 100%;--ch-combo-box-group__expandable-button-size: var(--mer-spacing--md);--ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm);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--regular);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--regular);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.form-input:focus{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.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)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.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--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)}.checkbox-error::part(input){--control__border-color: var(--control__border-color--error)}.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-error{--control__border-color: var(--control__border-color--error)}.combo-box::part(window){border-style:var(--items-container__border-style);border-width:var(--items-container__border-width);border-radius:var(--items-container__border-radius);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);gap:var(--items-container__gap);max-block-size:var(--items-container__max-block-size);box-shadow:var(--items-container__box-shadow)}.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::placeholder{font-style:italic}.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;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-block:var(--control__padding-block);padding-inline:var(--control__padding-inline);padding-inline:var(--control__padding-inline)}.button-tertiary:focus-visible,.button-secondary:focus-visible,.button-primary:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.button-primary{--button-primary__bg-color: var(--mer-accent__primary);--button-primary__border-color: var(--button-primary__bg-color);--button-primary__color: var(--mer-text__on-primary);--button-primary__bg-color--hover: var(--mer-accent__primary--hover);--button-primary__border-color--hover: var(--button-primary__bg-color--hover);--button-primary__color--hover: var(--mer-text__on-primary);--button-primary__bg-color--active: var(--mer-accent__primary--active);--button-primary__border-color--active: var( --button-primary__bg-color--active );--button-primary__color--active: var(--mer-text__on-primary--active);--button-primary__bg-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__bg-color--destructive: var( --mer-accent__primary--destructive );--button-primary__bg-color--destructive-hover: var( --mer-accent__primary--destructive-hover );--button-primary__bg-color--destructive-active: var( --mer-accent__primary--destructive-active );--button-primary__border-color--destructive: var( --button-primary__bg-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__bg-color);color:var(--button-primary__color)}.button-primary:hover{background-color:var(--button-primary__bg-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__bg-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__bg-color--disabled);--control__border-color: var(--button-primary__bg-color--disabled);color:var(--button-primary__color--disabled)}.button-primary-destructive{--control__border-color: var(--button-primary__border-color--destructive);background-color:var(--button-primary__bg-color--destructive);color:var(--button-primary__color--destructive)}.button-primary-destructive:hover{--control__border-color: var( --button-primary__bg-color--destructive-hover );background-color:var(--button-primary__bg-color--destructive-hover);color:var(--button-primary__color--destructive)}.button-primary-destructive:active{--control__border-color: var( --button-primary__bg-color--destructive-active );background-color:var(--button-primary__bg-color--destructive-active);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);--button-secondary__bg-color--destructive: transparent;--button-secondary__bg-color--destructive-hover: var( --mer-accent__primary--destructive-hover );--button-secondary__bg-color--destructive-active: var( --mer-accent__primary--destructive-active );--button-secondary__border-color--destructive: var( --button-primary__bg-color--destructive );--button-secondary__color--destructive: var(--mer-text__on-primary);--button-secondary__bg-color--destructive: var(transparent);--button-secondary__bg-color--destructive-hover: var( --mer-color__message-red--600 );--button-secondary__bg-color--destructive-active: var( --mer-color__message-red--500 );--button-secondary__border-color--destructive: var( --mer-accent__primary--destructive );--button-secondary__color--destructive: var( --mer-accent__primary--destructive );--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-secondary-destructive{--control__border-color: var(--button-secondary__border-color--destructive);background-color:var(--button-secondary__bg-color--destructive);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:hover{--control__border-color: var( --button-secondary__bg-color--destructive-hover );background-color:var(--button-secondary__bg-color--destructive-hover);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:active{--control__border-color: var( --button-secondary__bg-color--destructive-active );background-color:var(--button-secondary__bg-color--destructive-active);color:var(--button-secondary__color--destructive)}.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)}.buttons-spacer{display:flex;gap:var(--mer-spacing--xs)}.field{display:grid}.field-group-inline,.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);row-gap:var(--field-group__row-gap);column-gap:var(--field-group__column-gap)}.field-group{display:grid}.field-group-inline{display:flex;flex-wrap:wrap}.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{padding:0;box-sizing:border-box;inline-size:calc(var(--control__font-size--regular)*var(--control__line-height) + var(--control__padding-block)*2 + var(--control__border-width)*2);block-size:calc(var(--control__font-size--regular)*var(--control__line-height) + var(--control__padding-block)*2 + var(--control__border-width)*2)}.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);--ch-checkbox__image-size: var(--mer-icon__box--md);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-icon__box--md);--ch-combo-box-item__background-image-size: 100%;--ch-combo-box-group__expandable-button-size: var(--mer-spacing--md);--ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm);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--regular);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)}.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--regular);line-height:var(--control__line-height);padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline)}.input:focus{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.input:hover{--control__border-color: var(--control__border-color--hover)}.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)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.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--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)}.checkbox-error::part(input){--control__border-color: var(--control__border-color--error)}.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-error{--control__border-color: var(--control__border-color--error)}.combo-box::part(window){border-style:var(--items-container__border-style);border-width:var(--items-container__border-width);border-radius:var(--items-container__border-radius);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);gap:var(--items-container__gap);max-block-size:var(--items-container__max-block-size);box-shadow:var(--items-container__box-shadow)}.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)}.input::placeholder{font-style:italic}.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 +1 @@
|
|
|
1
|
-
.field{display:grid}.field-group-inline,.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);row-gap:var(--field-group__row-gap);column-gap:var(--field-group__column-gap)}.field-group{display:grid}.field-group-inline{display:flex;flex-wrap:wrap}.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
|
|
1
|
+
.field{display:grid}.field-group-inline,.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);row-gap:var(--field-group__row-gap);column-gap:var(--field-group__column-gap)}.field-group{display:grid}.field-group-inline{display:flex;flex-wrap:wrap}.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)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.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)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.layout{--spacing-body-block-start: var(--mer-spacing--md);--spacing-body-block-end: var(--mer-spacing--md);--spacing-body-inline-start: var(--mer-spacing--lg);--spacing-body-inline-end: var(--mer-spacing--lg);display:grid;gap:var(--mer-spacing--md)}.layout__panel{display:grid}.layout--cols-1{grid-template-rows:1fr;grid-template-columns:1fr}.layout--cols-2{grid-template-rows:1fr;grid-template-columns:repeat(2, 1fr)}.layout--cols-3{grid-template-rows:1fr;grid-template-columns:repeat(3, 1fr)}.layout--cols-4{grid-template-rows:1fr;grid-template-columns:repeat(4, 1fr)}.layout--cols-1-2{grid-template-rows:1fr;grid-template-columns:1fr 2fr}.layout--cols-2-1{grid-template-rows:1fr;grid-template-columns:2fr 1fr}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.control-footer,.control-footer-with-border{--control-footer-justify-content: end;padding-block-start:var(--mer-spacing--xs);display:flex;justify-content:var(--control-footer-justify-content);align-items:center}.control-footer-start{--control-footer-justify-content: start}.control-footer-center{--control-footer-justify-content: center}.control-footer-space-between{--control-footer-justify-content: space-between}.control-footer-with-border{border-block-start:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01)}.control-header,.control-header-with-border{padding-block-end:var(--mer-spacing--md)}.control-header-with-border{border-block-end:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.spacing-body,:host(.spacing-body){padding-block:var(--spacing-body-block-start) var(--spacing-body-block-end);padding-inline:var(--spacing-body-inline-start) var(--spacing-body-inline-end)}.spacing-body-block,:host(.spacing-body-block){padding-block:var(--spacing-body-block-start) var(--spacing-body-block-end)}.spacing-body-block-start,:host(.spacing-body-block-start){padding-block-start:var(--spacing-body-block-start)}.spacing-body-block-end,:host(.spacing-body-block-end){padding-block-end:var(--spacing-body-block-end)}.spacing-body-inline,:host(.spacing-body-inline){padding-inline:var(--spacing-body-inline-start) var(--spacing-body-inline-end)}.spacing-body-inline-start,:host(.spacing-body-inline-start){padding-inline-start:var(--spacing-body-inline-start)}.spacing-body-inline-end,:host(.spacing-body-inline-end){padding-inline-end:var(--spacing-body-inline-end)}.spacing-body,:host(.spacing-body){padding-block:var(--spacing-body-block-start) var(--spacing-body-block-end);padding-inline:var(--spacing-body-inline-start) var(--spacing-body-inline-end)}.spacing-body-block,:host(.spacing-body-block){padding-block:var(--spacing-body-block-start) var(--spacing-body-block-end)}.spacing-body-block-start,:host(.spacing-body-block-start){padding-block-start:var(--spacing-body-block-start)}.spacing-body-block-end,:host(.spacing-body-block-end){padding-block-end:var(--spacing-body-block-end)}.spacing-body-inline,:host(.spacing-body-inline){padding-inline:var(--spacing-body-inline-start) var(--spacing-body-inline-end)}.spacing-body-inline-start,:host(.spacing-body-inline-start){padding-inline-start:var(--spacing-body-inline-start)}.spacing-body-inline-end,:host(.spacing-body-inline-end){padding-inline-end:var(--spacing-body-inline-end)}.spacing-body,:host(.spacing-body){padding-block:var(--spacing-body-block-start) var(--spacing-body-block-end);padding-inline:var(--spacing-body-inline-start) var(--spacing-body-inline-end)}.spacing-body-block,:host(.spacing-body-block){padding-block:var(--spacing-body-block-start) var(--spacing-body-block-end)}.spacing-body-block-start,:host(.spacing-body-block-start){padding-block-start:var(--spacing-body-block-start)}.spacing-body-block-end,:host(.spacing-body-block-end){padding-block-end:var(--spacing-body-block-end)}.spacing-body-inline,:host(.spacing-body-inline){padding-inline:var(--spacing-body-inline-start) var(--spacing-body-inline-end)}.spacing-body-inline-start,:host(.spacing-body-inline-start){padding-inline-start:var(--spacing-body-inline-start)}.spacing-body-inline-end,:host(.spacing-body-inline-end){padding-inline-end:var(--spacing-body-inline-end)}.spacing-body,:host(.spacing-body){padding-block:var(--spacing-body-block-start) var(--spacing-body-block-end);padding-inline:var(--spacing-body-inline-start) var(--spacing-body-inline-end)}.spacing-body-block,:host(.spacing-body-block){padding-block:var(--spacing-body-block-start) var(--spacing-body-block-end)}.spacing-body-block-start,:host(.spacing-body-block-start){padding-block-start:var(--spacing-body-block-start)}.spacing-body-block-end,:host(.spacing-body-block-end){padding-block-end:var(--spacing-body-block-end)}.spacing-body-inline,:host(.spacing-body-inline){padding-inline:var(--spacing-body-inline-start) var(--spacing-body-inline-end)}.spacing-body-inline-start,:host(.spacing-body-inline-start){padding-inline-start:var(--spacing-body-inline-start)}.spacing-body-inline-end,:host(.spacing-body-inline-end){padding-inline-end:var(--spacing-body-inline-end)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
|
package/dist/bundles.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export type MercuryBundleBase = "base/base" | "base/icons";
|
|
|
6
6
|
export type MercuryBundleComponent = "components/accordion" | "components/chat" | "components/code" | "components/dialog" | "components/flexible-layout" | "components/list-box" | "components/markdown-viewer" | "components/navigation-list" | "components/pills" | "components/segmented-control" | "components/sidebar" | "components/tab" | "components/tabular-grid" | "components/ticket-list" | "components/tooltip" | "components/tree-view" | "components/widget";
|
|
7
7
|
export type MercuryBundleComponentForm = "components/button" | "components/checkbox" | "components/combo-box" | "components/edit" | "components/icon" | "components/radio-group" | "components/slider";
|
|
8
8
|
export type MercuryBundleReset = "resets/box-sizing";
|
|
9
|
-
export type MercuryBundleUtil = "utils/
|
|
9
|
+
export type MercuryBundleUtil = "utils/elevation" | "utils/form" | "utils/layout" | "utils/spacing" | "utils/typography" | "chameleon/scrollbar";
|
|
10
10
|
export type MercuryBundleUtilFormFull = "utils/form--full";
|
|
11
11
|
type BundleNames = MercuryBundleComponent | MercuryBundleComponentForm | MercuryBundleReset | MercuryBundleUtil | MercuryBundleUtilFormFull;
|
|
12
12
|
/**
|
|
@@ -257,6 +257,14 @@ export declare const getThemeBundles: (basePath: string) => [{
|
|
|
257
257
|
readonly name: BundleNames;
|
|
258
258
|
readonly url: `${string}utils/layout.css`;
|
|
259
259
|
readonly attachStyleSheet: boolean;
|
|
260
|
+
}, {
|
|
261
|
+
readonly name: BundleNames;
|
|
262
|
+
readonly url: `${string}utils/spacing.css`;
|
|
263
|
+
readonly attachStyleSheet?: undefined;
|
|
264
|
+
} | {
|
|
265
|
+
readonly name: BundleNames;
|
|
266
|
+
readonly url: `${string}utils/spacing.css`;
|
|
267
|
+
readonly attachStyleSheet: boolean;
|
|
260
268
|
}, {
|
|
261
269
|
readonly name: BundleNames;
|
|
262
270
|
readonly url: `${string}utils/typography.css`;
|
package/dist/bundles.js
CHANGED
|
@@ -57,6 +57,7 @@ export const getThemeBundles = (basePath) => [
|
|
|
57
57
|
getThemeModelItem(basePath, "utils/elevation"),
|
|
58
58
|
getThemeModelItem(basePath, "utils/form--full"),
|
|
59
59
|
getThemeModelItem(basePath, "utils/layout"),
|
|
60
|
+
getThemeModelItem(basePath, "utils/spacing"),
|
|
60
61
|
getThemeModelItem(basePath, "utils/typography"),
|
|
61
62
|
getThemeModelItem(basePath, "chameleon/scrollbar")
|
|
62
63
|
];
|
package/dist/mercury.scss
CHANGED
|
@@ -846,26 +846,26 @@
|
|
|
846
846
|
}
|
|
847
847
|
|
|
848
848
|
/// @group UtilityClasses
|
|
849
|
-
/// @param {String} $elevation-
|
|
850
|
-
/// @param {String} $elevation-
|
|
851
|
-
/// @param {String} $elevation-
|
|
849
|
+
/// @param {String} $elevation-1-selector [".elevation-1,:host(.elevation-1)"] -
|
|
850
|
+
/// @param {String} $elevation-2-selector [".elevation-2,:host(.elevation-2)"] -
|
|
851
|
+
/// @param {String} $elevation-3-selector [".elevation-3,:host(.elevation-3)"] -
|
|
852
852
|
@mixin utilities-elevation(
|
|
853
|
-
$elevation-
|
|
854
|
-
$elevation-
|
|
855
|
-
$elevation-
|
|
853
|
+
$elevation-1-selector: ".elevation-1,:host(.elevation-1)",
|
|
854
|
+
$elevation-2-selector: ".elevation-2,:host(.elevation-2)",
|
|
855
|
+
$elevation-3-selector: ".elevation-3,:host(.elevation-3)"
|
|
856
856
|
) {
|
|
857
|
-
#{$elevation-
|
|
858
|
-
#{$elevation-
|
|
859
|
-
#{$elevation-
|
|
857
|
+
#{$elevation-1-selector},
|
|
858
|
+
#{$elevation-2-selector},
|
|
859
|
+
#{$elevation-3-selector} {
|
|
860
860
|
color: var(--mer-text__on-elevation);
|
|
861
861
|
}
|
|
862
|
-
#{$elevation-
|
|
862
|
+
#{$elevation-1-selector} {
|
|
863
863
|
background-color: var(--mer-surface__elevation--01);
|
|
864
864
|
}
|
|
865
|
-
#{$elevation-
|
|
865
|
+
#{$elevation-2-selector} {
|
|
866
866
|
background-color: var(--mer-surface__elevation--02);
|
|
867
867
|
}
|
|
868
|
-
#{$elevation-
|
|
868
|
+
#{$elevation-3-selector} {
|
|
869
869
|
background-color: var(--mer-surface__elevation--03);
|
|
870
870
|
}
|
|
871
871
|
}
|
|
@@ -2963,7 +2963,7 @@
|
|
|
2963
2963
|
$field-selector: ".field",
|
|
2964
2964
|
$field-block-selector: ".field-block",
|
|
2965
2965
|
$field-inline-selector: ".field-inline",
|
|
2966
|
-
$field-inline__label-selector: ".field-inline .label",
|
|
2966
|
+
$field-inline__label-selector: ".field-inline > .label",
|
|
2967
2967
|
$field-group-cols-2-selector: ".field-group-cols-2",
|
|
2968
2968
|
$field-group-cols-2__label-selector: ".field-group-cols-2 .label"
|
|
2969
2969
|
) {
|
|
@@ -3745,6 +3745,12 @@
|
|
|
3745
3745
|
|
|
3746
3746
|
%accordion {
|
|
3747
3747
|
@include accordion-tokens();
|
|
3748
|
+
|
|
3749
|
+
--spacing-body-block-start: var(--mer-spacing--sm);
|
|
3750
|
+
--spacing-body-block-end: var(--mer-spacing--sm);
|
|
3751
|
+
--spacing-body-inline-start: var(--mer-spacing--sm);
|
|
3752
|
+
--spacing-body-inline-end: var(--mer-spacing--sm);
|
|
3753
|
+
|
|
3748
3754
|
gap: var(--accordion__gap);
|
|
3749
3755
|
|
|
3750
3756
|
&-outlined {
|
|
@@ -3820,9 +3826,6 @@
|
|
|
3820
3826
|
|
|
3821
3827
|
%accordion-section {
|
|
3822
3828
|
// "1px" is used to improve the display of the outline when :focus-visible
|
|
3823
|
-
margin-block: var(--accordion-section__margin-block);
|
|
3824
|
-
margin-inline: var(--accordion-section__margin-inline);
|
|
3825
|
-
// background-color: var(--accordion-section__bg-color);
|
|
3826
3829
|
|
|
3827
3830
|
&-outlined {
|
|
3828
3831
|
&--disabled {
|
|
@@ -4061,7 +4064,7 @@
|
|
|
4061
4064
|
}
|
|
4062
4065
|
}
|
|
4063
4066
|
|
|
4064
|
-
@include
|
|
4067
|
+
@include input(
|
|
4065
4068
|
$selector: "&::part(send-input)",
|
|
4066
4069
|
$add--disabled: false,
|
|
4067
4070
|
$add--placeholder: false,
|
|
@@ -5247,10 +5250,10 @@
|
|
|
5247
5250
|
}
|
|
5248
5251
|
|
|
5249
5252
|
%dialog {
|
|
5250
|
-
--spacing-body-block-start: var(--mer-spacing--
|
|
5251
|
-
--spacing-body-block-end: var(--mer-spacing--
|
|
5252
|
-
--spacing-body-inline-start: var(--mer-spacing--
|
|
5253
|
-
--spacing-body-inline-end: var(--mer-spacing--
|
|
5253
|
+
--spacing-body-block-start: var(--mer-spacing--md);
|
|
5254
|
+
--spacing-body-block-end: var(--mer-spacing--md);
|
|
5255
|
+
--spacing-body-inline-start: var(--mer-spacing--sm);
|
|
5256
|
+
--spacing-body-inline-end: var(--mer-spacing--sm);
|
|
5254
5257
|
--ch-dialog-max-inline-size: 800px;
|
|
5255
5258
|
background-color: var(--mer-surface__elevation--01);
|
|
5256
5259
|
box-shadow: var(--mer-box-shadow--01);
|
|
@@ -5291,8 +5294,8 @@
|
|
|
5291
5294
|
}
|
|
5292
5295
|
|
|
5293
5296
|
&__footer {
|
|
5294
|
-
|
|
5295
|
-
|
|
5297
|
+
padding-block: var(--mer-spacing--xs);
|
|
5298
|
+
padding-inline: var(--mer-spacing--sm);
|
|
5296
5299
|
}
|
|
5297
5300
|
|
|
5298
5301
|
// ------------------------------
|
|
@@ -5394,6 +5397,8 @@
|
|
|
5394
5397
|
#{$footer-selector} {
|
|
5395
5398
|
@extend %dialog__footer;
|
|
5396
5399
|
}
|
|
5400
|
+
// @include buttons-spacer($footer-selector);
|
|
5401
|
+
@include control-footer($with-border-selector: $footer-selector);
|
|
5397
5402
|
|
|
5398
5403
|
// ------------------------------
|
|
5399
5404
|
// Edges (For dragging)
|
|
@@ -5562,7 +5567,7 @@
|
|
|
5562
5567
|
}
|
|
5563
5568
|
}
|
|
5564
5569
|
|
|
5565
|
-
%
|
|
5570
|
+
%input {
|
|
5566
5571
|
// ch-chameleon custom vars (do not edit their names)
|
|
5567
5572
|
// --ch-edit-auto-fill-background-color: var(); not defined by design yet
|
|
5568
5573
|
--ch-edit-gap: var(--control__icon-gap);
|
|
@@ -5589,31 +5594,31 @@
|
|
|
5589
5594
|
}
|
|
5590
5595
|
|
|
5591
5596
|
/// @group Form
|
|
5592
|
-
/// @param {String} $selector [".
|
|
5593
|
-
/// @param {String} $error-selector [".
|
|
5597
|
+
/// @param {String} $selector [".input"] -
|
|
5598
|
+
/// @param {String} $error-selector [".input-error"] -
|
|
5594
5599
|
/// @param {Boolean} $add--disabled [true] -
|
|
5595
5600
|
/// @param {Boolean} $add--error [true] -
|
|
5596
|
-
@mixin
|
|
5597
|
-
$selector: ".
|
|
5598
|
-
$error-selector: ".
|
|
5601
|
+
@mixin input(
|
|
5602
|
+
$selector: ".input",
|
|
5603
|
+
$error-selector: ".input-error",
|
|
5599
5604
|
$add--disabled: true,
|
|
5600
5605
|
$add--error: true,
|
|
5601
5606
|
$add--placeholder: true
|
|
5602
5607
|
) {
|
|
5603
5608
|
#{$selector} {
|
|
5604
|
-
@extend %
|
|
5609
|
+
@extend %input;
|
|
5605
5610
|
|
|
5606
5611
|
&:focus {
|
|
5607
|
-
@extend %
|
|
5612
|
+
@extend %input--focus;
|
|
5608
5613
|
}
|
|
5609
5614
|
|
|
5610
5615
|
&:hover {
|
|
5611
|
-
@extend %
|
|
5616
|
+
@extend %input--hover;
|
|
5612
5617
|
}
|
|
5613
5618
|
|
|
5614
5619
|
@if $add--disabled {
|
|
5615
5620
|
&:disabled {
|
|
5616
|
-
@extend %
|
|
5621
|
+
@extend %input--disabled;
|
|
5617
5622
|
}
|
|
5618
5623
|
}
|
|
5619
5624
|
|
|
@@ -8125,29 +8130,153 @@
|
|
|
8125
8130
|
}
|
|
8126
8131
|
|
|
8127
8132
|
%sidebar {
|
|
8133
|
+
// chameleon tokens (do not modify names)
|
|
8128
8134
|
--ch-sidebar-inline-size--collapsed: 42px;
|
|
8129
8135
|
--ch-sidebar__chevron-size: 24px;
|
|
8130
|
-
--ch-sidebar__chevron-image-size:
|
|
8136
|
+
--ch-sidebar__chevron-image-size: var(--mer-spacing--sm); // 12px
|
|
8137
|
+
--ch-sidebar__chevron-background-image: var(
|
|
8138
|
+
--icon__system_arrow-right_primary--enabled
|
|
8139
|
+
);
|
|
8140
|
+
|
|
8141
|
+
// spacing body tokens
|
|
8142
|
+
--spacing-body-block-start: var(--mer-spacing--sm);
|
|
8143
|
+
--spacing-body-block-end: var(--mer-spacing--sm);
|
|
8144
|
+
--spacing-body-inline-start: var(--mer-spacing--sm);
|
|
8145
|
+
--spacing-body-inline-end: var(--mer-spacing--sm);
|
|
8146
|
+
|
|
8147
|
+
// sidebar tokens
|
|
8148
|
+
--sidebar-button-border-width: var(--mer-border__width--sm);
|
|
8149
|
+
--sidebar-button-margin: calc(
|
|
8150
|
+
(
|
|
8151
|
+
var(--ch-sidebar-inline-size--collapsed) -
|
|
8152
|
+
(
|
|
8153
|
+
var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) *
|
|
8154
|
+
2
|
|
8155
|
+
)
|
|
8156
|
+
) / 2
|
|
8157
|
+
);
|
|
8131
8158
|
|
|
8132
8159
|
background-color: var(--mer-color__neutral-gray--800);
|
|
8133
|
-
|
|
8160
|
+
overflow: hidden;
|
|
8161
|
+
|
|
8162
|
+
// Collapsed Hidden
|
|
8163
|
+
|
|
8164
|
+
&-collapsed-hidden {
|
|
8165
|
+
--ch-sidebar-inline-size--collapsed: 0;
|
|
8166
|
+
}
|
|
8167
|
+
|
|
8168
|
+
// With Motion
|
|
8169
|
+
|
|
8170
|
+
&-with-motion {
|
|
8171
|
+
&.ch-sidebar--collapsed {
|
|
8172
|
+
// WA to win over user "inline-size" property. This allows the transition.
|
|
8173
|
+
inline-size: var(--ch-sidebar-inline-size--collapsed) !important;
|
|
8174
|
+
}
|
|
8175
|
+
transition: var(--mer-timing--super-fast) ease inline-size;
|
|
8176
|
+
|
|
8177
|
+
&--button-before {
|
|
8178
|
+
transition: var(--mer-timing--super-fast) ease transform;
|
|
8179
|
+
}
|
|
8180
|
+
}
|
|
8181
|
+
|
|
8182
|
+
// - - - - - - - -
|
|
8183
|
+
// Button
|
|
8184
|
+
// - - - - - - - -
|
|
8134
8185
|
|
|
8135
8186
|
&-expand-button {
|
|
8136
|
-
|
|
8187
|
+
background-color: var(--mer-surface__elevation--02);
|
|
8188
|
+
border: var(--sidebar-button-border-width) solid
|
|
8189
|
+
var(--mer-border-color__on-elevation--01);
|
|
8190
|
+
color: var(--mer-icon__neutral);
|
|
8191
|
+
inline-size: calc(
|
|
8192
|
+
var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) * 2
|
|
8193
|
+
);
|
|
8194
|
+
margin: var(--sidebar-button-margin);
|
|
8195
|
+
|
|
8196
|
+
&--before {
|
|
8197
|
+
transform: rotate(180deg);
|
|
8198
|
+
}
|
|
8199
|
+
|
|
8200
|
+
&--hover {
|
|
8201
|
+
background-color: var(--mer-surface__elevation--03);
|
|
8202
|
+
border-color: var(--mer-border-color__on-elevation--02);
|
|
8203
|
+
color: var(--mer-icon__highlighted);
|
|
8204
|
+
}
|
|
8205
|
+
|
|
8206
|
+
&--active {
|
|
8207
|
+
background-color: var(--mer-surface__elevation--01);
|
|
8208
|
+
border-color: var(--mer-border-color__on-elevation--01);
|
|
8209
|
+
}
|
|
8210
|
+
|
|
8211
|
+
&--focus-visible {
|
|
8212
|
+
@include focus-outline();
|
|
8213
|
+
}
|
|
8214
|
+
|
|
8215
|
+
&--collapsed {
|
|
8216
|
+
&-before {
|
|
8217
|
+
transform: rotate(0);
|
|
8218
|
+
}
|
|
8219
|
+
}
|
|
8137
8220
|
}
|
|
8138
8221
|
}
|
|
8139
8222
|
|
|
8140
8223
|
@mixin sidebar(
|
|
8141
8224
|
$sidebar-selector: ".sidebar",
|
|
8142
|
-
$
|
|
8225
|
+
$sidebar-collapsed-hidden-selector: ".sidebar-collapsed-hidden",
|
|
8226
|
+
$sidebar-with-motion-selector: ".sidebar-with-motion",
|
|
8227
|
+
$sidebar-with-motion-button-selector:
|
|
8228
|
+
".sidebar-with-motion::part(expand-button)",
|
|
8229
|
+
$expand-button-selector: ".sidebar::part(expand-button)",
|
|
8230
|
+
$expand-button-collapsed-selector: ".sidebar::part(expand-button collapsed)"
|
|
8143
8231
|
) {
|
|
8144
8232
|
#{$sidebar-selector} {
|
|
8145
8233
|
@extend %sidebar;
|
|
8146
8234
|
}
|
|
8147
8235
|
|
|
8236
|
+
// Collapsed hidden
|
|
8237
|
+
#{$sidebar-collapsed-hidden-selector} {
|
|
8238
|
+
@extend %sidebar-collapsed-hidden;
|
|
8239
|
+
}
|
|
8240
|
+
|
|
8241
|
+
// With motion
|
|
8242
|
+
#{$sidebar-with-motion-selector} {
|
|
8243
|
+
@extend %sidebar-with-motion;
|
|
8244
|
+
}
|
|
8245
|
+
#{$sidebar-with-motion-button-selector}::before {
|
|
8246
|
+
@extend %sidebar-with-motion--button-before;
|
|
8247
|
+
}
|
|
8248
|
+
|
|
8249
|
+
// - - - - - - - -
|
|
8250
|
+
// Button
|
|
8251
|
+
// - - - - - - - -
|
|
8252
|
+
|
|
8253
|
+
// enabled
|
|
8148
8254
|
#{$expand-button-selector} {
|
|
8149
8255
|
@extend %sidebar-expand-button;
|
|
8150
8256
|
}
|
|
8257
|
+
#{$expand-button-selector}::before {
|
|
8258
|
+
@extend %sidebar-expand-button--before;
|
|
8259
|
+
}
|
|
8260
|
+
// hover
|
|
8261
|
+
#{$expand-button-selector}:hover {
|
|
8262
|
+
@extend %sidebar-expand-button--hover;
|
|
8263
|
+
}
|
|
8264
|
+
// active
|
|
8265
|
+
#{$expand-button-selector}:active {
|
|
8266
|
+
@extend %sidebar-expand-button--active;
|
|
8267
|
+
}
|
|
8268
|
+
|
|
8269
|
+
#{$expand-button-selector}:focus-visible {
|
|
8270
|
+
@extend %sidebar-expand-button--focus-visible;
|
|
8271
|
+
}
|
|
8272
|
+
|
|
8273
|
+
// collapsed
|
|
8274
|
+
#{$expand-button-collapsed-selector} {
|
|
8275
|
+
@extend %sidebar-expand-button--collapsed;
|
|
8276
|
+
}
|
|
8277
|
+
#{$expand-button-collapsed-selector}::before {
|
|
8278
|
+
@extend %sidebar-expand-button--collapsed-before;
|
|
8279
|
+
}
|
|
8151
8280
|
}
|
|
8152
8281
|
|
|
8153
8282
|
%slider__slider {
|
|
@@ -10008,8 +10137,8 @@
|
|
|
10008
10137
|
}
|
|
10009
10138
|
|
|
10010
10139
|
/// @group Widget
|
|
10011
|
-
/// @param {String} $selector [".widget"] -
|
|
10012
|
-
@mixin widget($selector: ".widget") {
|
|
10140
|
+
/// @param {String} $selector [".widget,:host(.widget)"] -
|
|
10141
|
+
@mixin widget($selector: ".widget,:host(.widget)") {
|
|
10013
10142
|
#{$selector} {
|
|
10014
10143
|
@extend %widget;
|
|
10015
10144
|
}
|
|
@@ -18389,7 +18518,7 @@
|
|
|
18389
18518
|
}
|
|
18390
18519
|
|
|
18391
18520
|
@if $edit {
|
|
18392
|
-
@include
|
|
18521
|
+
@include input();
|
|
18393
18522
|
}
|
|
18394
18523
|
|
|
18395
18524
|
@if $flexible-layout {
|
package/package.json
CHANGED