@carbon/styles 1.70.0-rc.0 → 1.70.0

package/css/styles.css

@@ -7312,6 +7312,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--checkbox__validation-msg {
   display: none;
   align-items: flex-start;
+  inline-size: 100%;
   margin-block-start: 0.25rem;
 }
 
@@ -7433,11 +7434,21 @@ fieldset[disabled] .cds--form__helper-text {
   transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
 }
 
+.cds--checkbox-group--decorator legend.cds--label,
+.cds--checkbox-wrapper--decorator .cds--checkbox-label-text {
+  display: flex;
+}
+
 .cds--checkbox-group--slug legend.cds--label,
 .cds--checkbox-wrapper--slug .cds--checkbox-label-text {
   display: flex;
 }
 
+.cds--checkbox-group--decorator legend.cds--label .cds--checkbox-group-inner--decorator > *,
+.cds--checkbox-wrapper--decorator .cds--checkbox-label-text .cds--checkbox-wrapper-inner--decorator > * {
+  margin-inline-start: 0.5rem;
+}
+
 .cds--checkbox-group--slug legend.cds--label .cds--ai-label,
 .cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--ai-label,
 .cds--checkbox-group--slug legend.cds--label .cds--slug,
@@ -7445,6 +7456,11 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline-start: 0.5rem;
 }
 
+.cds--checkbox-wrapper--decorator .cds--checkbox-label-text .cds--ai-label__button--inline {
+  line-height: inherit;
+  margin-block-start: -0.0625rem;
+}
+
 .cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--ai-label__button--inline,
 .cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug__button--inline {
   line-height: inherit;
@@ -9153,6 +9169,10 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-background-inverse-hover, #474747);
 }
 
+.cds--multi-select--readonly .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
+  background-color: transparent;
+}
+
 .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) {
   background-color: var(--cds-background, #ffffff);
   color: var(--cds-text-primary, #161616);
@@ -9351,11 +9371,17 @@ fieldset[disabled] .cds--form__helper-text {
   border-color: currentColor;
 }
 
+.cds--tag--filter .cds--tag__decorator > *,
 .cds--tag--filter .cds--ai-label,
 .cds--tag--filter .cds--slug {
   min-inline-size: 2.00875rem;
 }
 
+.cds--tag .cds--tag__decorator:not(:has(.cds--ai-label)) {
+  block-size: 1rem;
+  text-align: center;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--tag {
     outline: 1px solid transparent;
@@ -9476,6 +9502,10 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-field-hover);
 }
 
+.cds--multi-select.cds--multi-select--readonly.cds--list-box {
+  cursor: default;
+}
+
 .cds--list-box--lg {
   block-size: 3rem;
   max-block-size: 3rem;
@@ -11516,11 +11546,15 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline: 0.5rem 0;
 }
 
+.cds--radio-button-group--decorator legend.cds--label,
+.cds--radio-button-wrapper--decorator .cds--radio-button__label-text,
 .cds--radio-button-group--slug legend.cds--label,
 .cds--radio-button-wrapper--slug .cds--radio-button__label-text {
   display: flex;
 }
 
+.cds--radio-button-group--decorator legend.cds--label .cds--radio-button-group-inner--decorator > *,
+.cds--radio-button-wrapper--decorator .cds--radio-button__label-text .cds--radio-button-wrapper-inner--decorator > *,
 .cds--radio-button-group--slug legend.cds--label .cds--ai-label,
 .cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--ai-label,
 .cds--radio-button-group--slug legend.cds--label .cds--slug,
@@ -11528,6 +11562,7 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline-start: 0.5rem;
 }
 
+.cds--radio-button-wrapper--decorator .cds--radio-button__label-text .cds--ai-label__button--inline,
 .cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--ai-label__button--inline,
 .cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug__button--inline {
   line-height: inherit;
@@ -16846,7 +16881,7 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--multi-select.cds--multi-select--readonly .cds--tag--filter {
-  box-shadow: 0 0 0 1px var(--cds-background-inverse, #393939);
+  box-shadow: 0 0 0 1px var(--cds-border-subtle);
 }
 
 .cds--multi-select.cds--multi-select--readonly .cds--tag--filter svg {
@@ -18877,6 +18912,12 @@ optgroup.cds--select-optgroup:disabled,
   transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
+.cds--select--readonly .cds--select-input__wrapper::before {
+  background-color: var(--cds-border-subtle) !important; /* stylelint-disable-line declaration-no-important */
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+  transition: none;
+}
+
 .cds--time-picker--fluid__wrapper .cds--select-input__wrapper::after {
   inset-inline-end: 0;
 }
@@ -19585,27 +19626,34 @@ optgroup.cds--select-optgroup:disabled,
   margin: 0;
 }
 
-.cds--modal--slug.cds--modal {
+.cds--modal--slug.cds--modal,
+.cds--modal--decorator:has(.cds--ai-label).cds--modal {
   background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
 }
 
-.cds--modal--slug .cds--modal-container {
+.cds--modal--slug .cds--modal-container,
+.cds--modal--decorator:has(.cds--ai-label) .cds--modal-container {
   background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   border: 1px solid transparent;
   background-color: var(--cds-layer);
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
-.cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
+.cds--modal--slug .cds--modal-container:has(.cds--modal-footer),
+.cds--modal--decorator:has(.cds--ai-label) .cds--modal-container:has(.cds--modal-footer) {
   background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
-.cds--modal--slug .cds--modal-content.cds--modal-scroll-content {
+.cds--modal--slug .cds--modal-content.cds--modal-scroll-content,
+.cds--modal--decorator .cds--modal-content.cds--modal-scroll-content {
   -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
           mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
 }
 
+.cds--modal-header > .cds--modal--inner__decorator:has(+ .cds--modal-close-button) > *,
+.cds--modal-header > .cds--modal-close-button ~ .cds--modal--inner__decorator > *,
+.cds--modal--decorator .cds--modal-container-body > .cds--modal--inner__decorator > *,
 .cds--modal-header > .cds--ai-label:has(+ .cds--modal-close-button),
 .cds--modal-header > .cds--modal-close-button ~ .cds--ai-label,
 .cds--modal--slug .cds--modal-container-body > .cds--ai-label,
@@ -19617,8 +19665,16 @@ optgroup.cds--select-optgroup:disabled,
   inset-inline-end: 3rem;
 }
 
-.cds--modal--slug .cds--modal-content--overflow-indicator::before,
-.cds--modal--slug .cds--modal-content--overflow-indicator {
+.cds--modal-header > .cds--modal--inner__decorator:not(:has(.cds--ai-label)) > * {
+  inset-block-start: 1rem;
+}
+
+.cds--modal-header > .cds--modal--inner__decorator:has(.cds--ai-label--revert) > * {
+  inset-block-start: 1.475rem;
+}
+
+.cds--modal--decorator .cds--modal-content--overflow-indicator::before,
+.cds--modal--decorator .cds--modal-content--overflow-indicator {
   display: none;
 }
 
@@ -23915,47 +23971,59 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--tile > .cds--tile--inner-decorator > *,
+.cds--tile--expandable > div > .cds--tile--inner-decorator > *,
 .cds--tile > .cds--ai-label,
 .cds--tile--expandable > div > .cds--ai-label,
 .cds--tile > .cds--slug,
 .cds--tile--expandable > div > .cds--slug,
-.cds--tile--clickable .cds--tile--slug-icon {
+.cds--tile--clickable .cds--tile--ai-label-icon {
   position: absolute;
   inset-block-start: 1rem;
   inset-inline-end: 1rem;
 }
 
+.cds--tile.cds--tile--selectable > .cds--tile--inner-decorator > *,
 .cds--tile.cds--tile--selectable > .cds--ai-label,
 .cds--tile.cds--tile--selectable > .cds--slug {
   inset-inline-end: 2.5rem;
 }
 
+.cds--tile.cds--tile--selectable.cds--tile--radio > .cds--tile--inner-decorator > *,
 .cds--tile.cds--tile--selectable.cds--tile--radio > .cds--ai-label,
 .cds--tile.cds--tile--selectable.cds--tile--radio > .cds--slug {
   inset-inline-end: 1rem;
   transition: inset-inline-end 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
+.cds--tile.cds--tile--selectable.cds--tile--radio.cds--tile--is-selected > .cds--tile--inner-decorator > *,
 .cds--tile.cds--tile--selectable.cds--tile--radio.cds--tile--is-selected > .cds--ai-label,
 .cds--tile.cds--tile--selectable.cds--tile--radio.cds--tile--is-selected > .cds--slug {
   inset-inline-end: 2.5rem;
 }
 
+.cds--tile.cds--tile--clickable > .cds--tile--inner-decorator > *,
 .cds--tile.cds--tile--clickable > .cds--ai-label,
 .cds--tile.cds--tile--clickable > .cds--slug {
   pointer-events: none;
 }
 
+.cds--tile--decorator:has(.cds--tile--ai-label-icon).cds--tile,
+.cds--tile--decorator:has(.cds--ai-label).cds--tile,
 .cds--tile--slug.cds--tile {
   background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
   border: 1px solid transparent;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
+.cds--tile--decorator:has(.cds--ai-label).cds--tile--expandable:hover,
 .cds--tile--slug.cds--tile--expandable:hover {
   background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
 }
 
+.cds--tile--decorator.cds--tile--selectable::before,
+.cds--tile--decorator.cds--tile--selectable::after,
+.cds--tile--decorator.cds--tile--clickable::before,
 .cds--tile--slug.cds--tile--selectable::before,
 .cds--tile--slug.cds--tile--selectable::after,
 .cds--tile--slug.cds--tile--clickable::before {
@@ -23970,46 +24038,63 @@ span.cds--pagination__text.cds--pagination__items-count {
   transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
+.cds--tile--decorator:has(.cds--ai-label).cds--tile--selectable::before,
+.cds--tile--decorator:has(.cds--ai-label).cds--tile--clickable::before,
 .cds--tile--slug.cds--tile--selectable::before,
 .cds--tile--slug.cds--tile--clickable::before {
   background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
+.cds--tile--decorator.cds--tile--selectable:hover::before,
+.cds--tile--decorator.cds--tile--clickable:hover::before,
 .cds--tile--slug.cds--tile--selectable:hover::before,
 .cds--tile--slug.cds--tile--clickable:hover::before {
   opacity: 1;
 }
 
+.cds--tile--decorator.cds--tile--selectable:focus,
+.cds--tile--decorator.cds--tile--clickable:focus,
+.cds--tile-input:focus + .cds--tile--decorator.cds--tile,
 .cds--tile--slug.cds--tile--selectable:focus,
 .cds--tile--slug.cds--tile--clickable:focus,
 .cds--tile-input:focus + .cds--tile--slug.cds--tile {
   outline-offset: -1px;
 }
 
+.cds--tile--decorator:has(.cds--tile--inner-decorator .cds--ai-label).cds--tile--selectable::after,
 .cds--tile--slug.cds--tile--selectable::after {
   background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-border-inverse, #161616), var(--cds-border-inverse, #161616)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
 
+.cds--tile--decorator.cds--tile--selectable:hover::after,
 .cds--tile--slug.cds--tile--selectable:hover::after {
   opacity: 0;
 }
 
+.cds--tile--decorator.cds--tile--is-selected::after,
 .cds--tile--slug.cds--tile--is-selected::after {
   opacity: 1;
 }
 
+.cds--tile--decorator:has(.cds--tile--inner-decorator).cds--tile--is-selected,
 .cds--tile--slug.cds--tile--is-selected {
   border-color: var(--cds-border-inverse, #161616);
 }
 
+.cds--tile--decorator.cds--tile--selectable .cds--tile-content,
+.cds--tile--decorator.cds--tile--clickable .cds--tile-content,
 .cds--tile--slug.cds--tile--selectable .cds--tile-content,
 .cds--tile--slug.cds--tile--clickable .cds--tile-content {
   position: relative;
   cursor: pointer;
 }
 
+.cds--tile--decorator.cds--tile--selectable .cds--tile-content,
+.cds--tile--decorator.cds--tile--clickable .cds--tile-content,
+.cds--tile--decorator.cds--tile--selectable > .cds--tile__checkmark,
+.cds--tile--decorator.cds--tile--is-selected .cds--tile--inner-decorator > *,
 .cds--tile--slug.cds--tile--selectable .cds--tile-content,
 .cds--tile--slug.cds--tile--clickable .cds--tile-content,
 .cds--tile--slug.cds--tile--selectable > .cds--tile__checkmark,
@@ -24018,30 +24103,38 @@ span.cds--pagination__text.cds--pagination__items-count {
   z-index: 1;
 }
 
+.cds--tile--decorator.cds--tile--selectable .cds--tile--inner-decorator > *:has(> .cds--popover--open),
 .cds--tile--slug.cds--tile--selectable .cds--ai-label:has(> .cds--popover--open),
 .cds--tile--slug.cds--tile--selectable .cds--slug:has(> .cds--popover--open) {
   z-index: 2;
 }
 
+.cds--tile--decorator.cds--tile--selectable > .cds--tile--inner-decorator > *,
+.cds--tile--decorator.cds--tile--selectable > .cds--tile__checkmark,
 .cds--tile--slug.cds--tile--selectable > .cds--ai-label,
 .cds--tile--slug.cds--tile--selectable > .cds--slug,
 .cds--tile--slug.cds--tile--selectable > .cds--tile__checkmark {
   z-index: 1;
 }
 
+.cds--tile--expandable:has(.cds--tile--inner-decorator > * > .cds--popover--open),
 .cds--tile--expandable:has(.cds--ai-label > .cds--popover--open),
 .cds--tile--expandable:has(.cds--slug > .cds--popover--open) {
   overflow: visible;
 }
 
-.cds--tile--clickable .cds--tile--slug-icon rect {
+.cds--tile--clickable .cds--tile--ai-label-icon rect {
   stroke: var(--cds-icon-primary, #161616);
 }
 
-.cds--tile--clickable .cds--tile--slug-icon path {
+.cds--tile--clickable .cds--tile--ai-label-icon path {
   fill: var(--cds-icon-primary, #161616);
 }
 
+.cds--tile--decorator-rounded,
+.cds--tile--decorator-rounded.cds--tile--selectable::before,
+.cds--tile--decorator-rounded.cds--tile--selectable::after,
+.cds--tile--decorator-rounded.cds--tile--clickable::before,
 .cds--tile--slug-rounded,
 .cds--tile--slug-rounded.cds--tile--selectable::before,
 .cds--tile--slug-rounded.cds--tile--selectable::after,
@@ -24049,6 +24142,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   border-radius: 0.5rem;
 }
 
+.cds--tile--decorator-rounded .cds--tile__chevron,
 .cds--tile--slug-rounded .cds--tile__chevron {
   border-end-end-radius: 0.5rem;
 }