@carbon/ibm-products 2.17.0 → 2.17.2

package/css/index.css

@@ -1189,6 +1189,12 @@
   box-shadow: none;
 }
 
+.cds--btn-set .cds--btn.cds--btn--loading {
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--btn:focus {
     color: Highlight;
@@ -3244,6 +3250,28 @@ fieldset[disabled] .cds--form__helper-text {
   border-block-end-color: var(--cds-border-subtle);
 }
 
+.cds--text-input__field-wrapper .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 1rem;
+  transform: translateY(-50%);
+}
+
+.cds--text-input__field-wrapper--slug .cds--text-input {
+  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+  padding-inline-end: 2.5rem;
+}
+
+.cds--text-input--invalid:has(~ .cds--slug),
+.cds--text-input--warning:has(~ .cds--slug) {
+  padding-inline-end: 4rem;
+}
+
+.cds--text-input--invalid ~ .cds--slug,
+.cds--text-input--warning ~ .cds--slug {
+  inset-inline-end: 2.5rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,
   .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg {
@@ -3335,6 +3363,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--loading--small {
   block-size: 1rem;
   inline-size: 1rem;
+  line-height: 1rem;
 }
 .cds--loading--small circle {
   stroke-width: 16;
@@ -3470,6 +3499,16 @@ fieldset[disabled] .cds--form__helper-text {
   stroke: var(--cds-interactive, #0f62fe);
 }
 
+.cds--btn .cds--inline-loading--btn {
+  min-block-size: 0;
+}
+.cds--btn .cds--inline-loading--btn .cds--inline-loading__text {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+}
+
 /* If IE11 Don't show check animation */
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
   .cds--inline-loading__checkmark-container {
@@ -7118,6 +7157,7 @@ a.cds--overflow-menu-options__btn::before {
   --c4p--side-panel--content-bottom-padding: 4rem;
   --c4p--side-panel--collapsed-title-y-position: 1rem;
   --c4p--side-panel--label-text-height: 0;
+  --c4p--side-panel--title-padding-right: 3rem;
   position: fixed;
   z-index: 9000;
   top: 3rem;
@@ -7283,6 +7323,9 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title::before {
   background-color: transparent;
 }
+.c4p--side-panel__container.c4p--side-panel__container--has-slug {
+  --c4p--side-panel--title-padding-right: 6rem;
+}
 .c4p--side-panel__container.c4p--side-panel__container-is-animating {
   pointer-events: none;
 }
@@ -7302,7 +7345,8 @@ a.cds--overflow-menu-options__btn::before {
   letter-spacing: var(--cds-heading-03-letter-spacing, 0);
   display: -webkit-box;
   overflow: hidden;
-  padding-right: 3rem;
+  /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
+  padding-right: var(--c4p--side-panel--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   position: inherit;
@@ -7318,7 +7362,7 @@ a.cds--overflow-menu-options__btn::before {
   line-height: var(--cds-label-01-line-height, 1.33333);
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
   overflow: hidden;
-  padding-right: 1rem;
+  padding-right: var(--c4p--side-panel--title-padding-right);
   opacity: var(--c4p--side-panel--subtitle-opacity);
   text-overflow: ellipsis;
   transform: translateY(var(--c4p--side-panel--title-y-position));
@@ -7331,7 +7375,8 @@ a.cds--overflow-menu-options__btn::before {
   letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
   display: -webkit-box;
   overflow: hidden;
-  padding-right: 3rem;
+  /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
+  padding-right: var(--c4p--side-panel--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   position: absolute;
@@ -7376,6 +7421,9 @@ a.cds--overflow-menu-options__btn::before {
   margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height));
   overflow-x: hidden;
 }
+.c4p--side-panel__container.c4p--side-panel__container--has-slug .c4p--side-panel__inner-content {
+  background-image: linear-gradient(0deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(0deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+}
 .c4p--side-panel__container .c4p--side-panel__inner-content-with-actions {
   height: calc(100vh - (var(--c4p--side-panel--content-bottom-padding) + 2rem));
 }
@@ -7428,17 +7476,22 @@ a.cds--overflow-menu-options__btn::before {
   color: var(--cds-text-primary, #161616);
 }
 .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button {
-  position: absolute;
-  z-index: 5;
-  top: 0.5rem;
-  right: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0.5rem;
+  margin-bottom: 0;
 }
 .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
   margin: 0;
 }
+.c4p--side-panel__container .c4p--side-panel__slug-and-close {
+  position: fixed;
+  z-index: 5;
+  top: 0;
+  right: 0;
+  display: flex;
+}
 .c4p--side-panel__container .c4p--side-panel__body-content {
   padding: 1rem;
   padding-top: 0;
@@ -7940,6 +7993,10 @@ a.cds--overflow-menu-options__btn::before {
   overflow-x: hidden;
 }
 
+.c4p--tearsheet-create .c4p--tearsheet-create__content .cds--form {
+  height: inherit;
+}
+
 .c4p--tearsheet-create .c4p--tearsheet-create__content .cds--grid {
   padding: 0;
   margin: 0;
@@ -8492,6 +8549,21 @@ a.cds--overflow-menu-options__btn::before {
   margin-inline-start: 0.5rem;
 }
 
+.cds--radio-button-group--slug legend.cds--label,
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text {
+  display: flex;
+}
+
+.cds--radio-button-group--slug legend.cds--label .cds--slug,
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug {
+  margin-inline-start: 0.5rem;
+}
+
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug__button--inline {
+  line-height: inherit;
+  margin-block-start: -0.0625rem;
+}
+
 .c4p--export-modal .cds--modal-footer .cds--btn {
   max-width: none;
 }
@@ -9645,6 +9717,9 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 .c4p--notifications-panel__container {
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -9727,9 +9802,19 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-02: transparent;
+  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
+  --cds-slug-callout-aura-start-hover-02: transparent;
+  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
   --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-hollow-hover: #b5b5b5;
@@ -14314,6 +14399,9 @@ button.c4p--add-select__global-filter-toggle--open {
   despite of which carbon theme the user has.
 */
 .c4p--web-terminal {
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -14396,9 +14484,19 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-02: transparent;
+  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
+  --cds-slug-callout-aura-start-hover-02: transparent;
+  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
   --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-hollow-hover: #b5b5b5;
@@ -14761,6 +14859,9 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--web-terminal__documentation-overflow {
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -14843,9 +14944,19 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-02: transparent;
+  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
+  --cds-slug-callout-aura-start-hover-02: transparent;
+  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
   --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-hollow-hover: #b5b5b5;
@@ -15185,6 +15296,10 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
 }
 
+.c4p--web-terminal__documentation-overflow .cds--overflow-menu-options__btn {
+  text-decoration: none;
+}
+
 .c4p--web-terminal__body {
   height: 100%;
 }
@@ -16713,7 +16828,7 @@ button.c4p--add-select__global-filter-toggle--open {
   position: relative;
 }
 
-.c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
+.c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::after {
   position: absolute;
   /* stylelint-disable-next-line carbon/layout-token-use */
   top: -1px;
@@ -17067,6 +17182,11 @@ button.c4p--add-select__global-filter-toggle--open {
   background-color: var(--cds-layer-02, #ffffff);
 }
 
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center td.c4p--datagrid__expandable-row-cell,
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-top td.c4p--datagrid__expandable-row-cell {
+  padding-top: 0.5rem;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -17369,6 +17489,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background: var(--cds-layer-hover);
 }
 
+.c4p--datagrid .cds--data-table tbody tr:hover td.c4p--datagrid__expanded-row-cell-wrapper,
+.c4p--datagrid .cds--data-table td.c4p--datagrid__expanded-row-cell-wrapper,
+.c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-expanded td.c4p--datagrid__expandable-row-cell {
+  border: none;
+}
+
+.c4p--datagrid .cds--data-table td.c4p--datagrid__expanded-row-cell-wrapper {
+  padding: 0;
+}
+
 .c4p--datagrid__draggable-handleStyle {
   display: flex;
   align-items: center;