@carbon/ibm-products 2.56.1 → 2.57.0

package/css/index-full-carbon.css

@@ -39,6 +39,10 @@
   fill: var(--cds-button-danger-primary, #da1e28);
 }
 
+.c4p--apikey-modal__checkmark-icon {
+  fill: var(--cds-button-primary, #0f62fe);
+}
+
 .c4p--about-modal .cds--modal-container {
   grid-template-rows: auto auto 1fr auto;
 }
@@ -3100,7 +3104,7 @@ p.c4p--about-modal__copyright-text:first-child {
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-.c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label {
+.c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-decorator {
   border-color: transparent;
   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));
 }
@@ -3165,10 +3169,10 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--side-panel .c4p--side-panel__header:not(.c4p--side-panel__header--has-title)::before {
   background-color: transparent;
 }
-.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label {
+.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-decorator {
   --c4p--side-panel--title-padding-right: 4rem;
 }
-.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label {
+.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-decorator, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-decorator {
   --c4p--side-panel--title-padding-right: 5rem;
 }
 .c4p--side-panel .c4p--side-panel__animated-scroll-wrapper {
@@ -3264,7 +3268,7 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--side-panel .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content {
   padding-top: 0.5rem;
 }
-.c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls {
+.c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-decorator .c4p--side-panel--scrolls {
   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;
   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));
 }
@@ -3313,7 +3317,8 @@ p.c4p--about-modal__copyright-text:first-child {
   height: 2.5rem;
 }
 .c4p--side-panel .c4p--side-panel__slug-and-close,
-.c4p--side-panel .c4p--side-panel__ai-label-and-close {
+.c4p--side-panel .c4p--side-panel__ai-label-and-close,
+.c4p--side-panel .c4p--side-panel__decorator-and-close {
   position: absolute;
   z-index: 10; /* must be higher than title container border bottom */
   top: 0;
@@ -3323,7 +3328,8 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 @media (prefers-reduced-motion) {
   .c4p--side-panel .c4p--side-panel__slug-and-close,
-  .c4p--side-panel .c4p--side-panel__ai-label-and-close {
+  .c4p--side-panel .c4p--side-panel__ai-label-and-close,
+  .c4p--side-panel .c4p--side-panel__decorator-and-close {
     position: absolute;
   }
 }
@@ -3407,8 +3413,10 @@ p.c4p--about-modal__copyright-text:first-child {
   inset: 0;
 }
 
+/* stylelint-disable-next-line carbon/theme-token-use */
 .c4p--side-panel--has-slug + .c4p--side-panel__overlay,
-.c4p--side-panel--has-ai-label + .c4p--side-panel__overlay {
+.c4p--side-panel--has-ai-label + .c4p--side-panel__overlay,
+.c4p--side-panel--has-decorator + .c4p--side-panel__overlay {
   background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
 }
 
@@ -7666,12 +7674,7 @@ button.c4p--add-select__global-filter-toggle--open {
   visibility: hidden;
 }
 .c4p--page-header .c4p--page-header__subtitle-row {
-  display: -webkit-box;
-  overflow: hidden;
-  max-width: 100%;
   margin-top: 0.5rem;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
 }
 @media (min-width: 42rem) {
   .c4p--page-header .c4p--page-header__subtitle-row {
@@ -7687,6 +7690,19 @@ button.c4p--add-select__global-filter-toggle--open {
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
+.c4p--page-header .c4p--page-header__subtitle-tooltip .cds--definition-term {
+  border-bottom: 0;
+  letter-spacing: inherit;
+}
+.c4p--page-header .c4p--page-header__subtitle-tooltip .cds--popover-content.cds--definition-tooltip {
+  max-inline-size: fit-content;
+}
+.c4p--page-header .c4p--page-header__subtitle-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .c4p--page-header .c4p--page-header__available-row {
   font-size: var(--cds-body-01-font-size, 0.875rem);
   font-weight: var(--cds-body-01-font-weight, 400);
@@ -22650,6 +22666,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 .cds--btn--ghost .cds--btn__icon {
   position: static;
+  align-self: center;
   margin-inline-start: 0.5rem;
 }
 .cds--btn--ghost:hover, .cds--btn--ghost:active {
@@ -35230,6 +35247,7 @@ optgroup.cds--select-optgroup:disabled,
   display: none;
 }
 
+.cds--select--decorator .cds--select__inner-wrapper--decorator > *,
 .cds--select--slug .cds--ai-label,
 .cds--select--slug .cds--slug {
   position: absolute;
@@ -35239,6 +35257,8 @@ optgroup.cds--select-optgroup:disabled,
   transform: translateY(-50%);
 }
 
+.cds--select--decorator .cds--select__inner-wrapper--decorator > *::after,
+.cds--select--decorator .cds--select__inner-wrapper--decorator > *::before,
 .cds--select--slug .cds--ai-label::after,
 .cds--select--slug .cds--ai-label::before,
 .cds--select--slug .cds--slug::after,
@@ -35250,41 +35270,66 @@ optgroup.cds--select-optgroup:disabled,
   inline-size: 0.0625rem;
 }
 
+.cds--select--decorator .cds--select__inner-wrapper--decorator > *::before,
 .cds--select--slug .cds--ai-label::before,
 .cds--select--slug .cds--slug::before {
   display: none;
   inset-inline-start: calc(-0.5rem - 1px);
 }
 
+.cds--select--decorator .cds--select__inner-wrapper--decorator > *::after,
 .cds--select--slug .cds--ai-label::after,
 .cds--select--slug .cds--slug::after {
   display: block;
+  inset-block-start: 0;
   inset-inline-end: calc(-0.5rem - 1px);
 }
 
+.cds--select--decorator .cds--select__inner-wrapper--decorator > .cds--ai-label--revert::before,
+.cds--select--slug .cds--ai-label--revert::before,
+.cds--select--slug .cds--slug--revert::before {
+  inset-block-start: 0.5rem;
+  inset-inline-start: 0;
+}
+
+.cds--select--decorator .cds--select__inner-wrapper--decorator > .cds--ai-label--revert,
+.cds--select--slug .cds--ai-label--revert {
+  inset-inline-end: 2.5625rem;
+}
+
+.cds--select--decorator .cds--ai-label--revert::after,
 .cds--select--slug .cds--ai-label--revert::after,
 .cds--select--slug .cds--slug--revert::after {
   inset-block-start: 0.5rem;
-  inset-inline-end: -0.0625rem;
+  inset-inline-end: -1px;
 }
 
-.cds--select--slug .cds--select-input:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
-.cds--select--slug .cds--select-input:has(~ .cds--slug):not(:has(~ .cds--slug--revert)) {
-  background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
-  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+.cds--select--decorator .cds--select-input:has(~ .cds--select__inner-wrapper--decorator),
+.cds--select--slug .cds--select-input:has(~ .cds--ai-label),
+.cds--select--slug .cds--select-input:has(~ .cds--slug) {
   padding-inline-end: 4rem;
 }
 
-.cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
-.cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--slug):not(:has(~ .cds--slug--revert)) {
+.cds--select--decorator:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--select__inner-wrapper--decorator),
+.cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--ai-label),
+.cds--select--slug:has(.cds--select__invalid-icon) .cds--select-input:has(~ .cds--slug) {
   padding-inline-end: 6rem;
 }
 
+.cds--select--decorator .cds--select-input:has(~ .cds--select__inner-wrapper--decorator .cds--ai-label):not(:has(~ .cds--select__inner-wrapper--decorator .cds--ai-label--revert)),
+.cds--select--slug .cds--select-input:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
+.cds--select--slug .cds--select-input:has(~ .cds--slug):not(:has(~ .cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+}
+
+.cds--select--decorator:has(.cds--select__invalid-icon) .cds--select__inner-wrapper--decorator > *::before,
 .cds--select--slug:has(.cds--select__invalid-icon) .cds--ai-label::before,
 .cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before {
   display: block;
 }
 
+.cds--select--decorator .cds--select-input__wrapper .cds--select-input ~ .cds--select__invalid-icon,
 .cds--select--slug .cds--select-input__wrapper[data-invalid] .cds--select-input ~ .cds--select__invalid-icon,
 .cds--select--slug .cds--select-input__wrapper .cds--select-input ~ .cds--select__invalid-icon {
   inset-inline-end: 5rem;
@@ -35439,10 +35484,11 @@ optgroup.cds--select-optgroup:disabled,
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--select--fluid .cds--select--decorator .cds--select__inner-wrapper--decorator > *,
 .cds--select--fluid .cds--select--slug .cds--ai-label,
 .cds--select--fluid .cds--select--slug .cds--slug {
   inset-block-start: 2.625rem;
-  inset-inline-end: 2.5rem;
+  inset-inline-end: 3rem;
 }
 
 .cds--select--fluid .cds--select--slug .cds--select-input {