@carbon/ibm-products 2.0.0-rc.21 → 2.0.0-rc.22

package/css/index.css

@@ -211,6 +211,7 @@
 }
 
 .cds--snippet--disabled .cds--snippet-btn--expand:hover,
+.cds--snippet--disabled .cds--copy-btn,
 .cds--snippet--disabled .cds--copy-btn:hover {
   background-color: var(--cds-layer);
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -455,13 +456,13 @@
   overflow-x: auto;
 }
 
-.cds--snippet--multi .cds--snippet-container pre::after {
+.cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
   position: absolute;
   top: 0;
   right: 0;
   width: 1rem;
   height: 100%;
-  background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
+  background-image: linear-gradient(to right, transparent, var(--cds-layer));
   content: "";
 }
 
@@ -1041,7 +1042,7 @@
   color: var(--cds-text-on-color, #ffffff);
 }
 .cds--btn--danger:hover {
-  background-color: var(--cds-button-danger-hover, #b81922);
+  background-color: var(--cds-button-danger-hover, #b81921);
 }
 .cds--btn--danger:focus {
   border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1065,7 +1066,7 @@
   color: var(--cds-button-danger-secondary, #da1e28);
 }
 .cds--btn--danger--tertiary:hover {
-  background-color: var(--cds-button-danger-hover, #b81922);
+  background-color: var(--cds-button-danger-hover, #b81921);
 }
 .cds--btn--danger--tertiary:focus {
   border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1079,7 +1080,7 @@
   fill: currentColor;
 }
 .cds--btn--danger--tertiary:hover {
-  border-color: var(--cds-button-danger-hover, #b81922);
+  border-color: var(--cds-button-danger-hover, #b81921);
   color: var(--cds-text-on-color, #ffffff);
 }
 .cds--btn--danger--tertiary:focus {
@@ -1105,7 +1106,7 @@
   padding: calc(0.875rem - 3px) 16px;
 }
 .cds--btn--danger--ghost:hover {
-  background-color: var(--cds-button-danger-hover, #b81922);
+  background-color: var(--cds-button-danger-hover, #b81921);
 }
 .cds--btn--danger--ghost:focus {
   border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1310,9 +1311,14 @@
 .cds--modal .cds--dropdown-list,
 .cds--modal .cds--number input[type=number],
 .cds--modal .cds--date-picker__input,
-.cds--modal .cds--multi-select {
+.cds--modal .cds--multi-select,
+.cds--modal .cds--number__control-btn::before,
+.cds--modal .cds--number__control-btn::after {
   background-color: var(--cds-field-02, #ffffff);
 }
+.cds--modal .cds--number__rule-divider {
+  background-color: var(--cds-border-subtle-02, #e0e0e0);
+}
 
 .cds--modal.is-visible .cds--modal-container {
   transform: translate3d(0, 0, 0);
@@ -1385,7 +1391,7 @@
   }
 }
 
-.cds--modal-content p,
+.cds--modal-content > p,
 .cds--modal-content__regular-content {
   font-size: var(--cds-body-01-font-size, 0.875rem);
   font-weight: var(--cds-body-01-font-weight, 400);
@@ -1427,7 +1433,7 @@
 .cds--modal-container--xs .cds--modal-content__regular-content {
   padding-right: 1rem;
 }
-.cds--modal-container--xs .cds--modal-content p {
+.cds--modal-container--xs .cds--modal-content > p {
   padding-right: 0;
 }
 @media (min-width: 42rem) {
@@ -1450,7 +1456,7 @@
 .cds--modal-container--sm .cds--modal-content__regular-content {
   padding-right: 1rem;
 }
-.cds--modal-container--sm .cds--modal-content p {
+.cds--modal-container--sm .cds--modal-content > p {
   padding-right: 0;
 }
 @media (min-width: 42rem) {
@@ -1463,7 +1469,7 @@
     width: 42%;
     max-height: 72%;
   }
-  .cds--modal-container--sm .cds--modal-content p,
+  .cds--modal-container--sm .cds--modal-content > p,
 .cds--modal-container--sm .cds--modal-content__regular-content {
     padding-right: 20%;
   }
@@ -1587,11 +1593,16 @@
   overflow: hidden;
 }
 
-.cds--body--with-modal-open .cds--tooltip,
-.cds--body--with-modal-open .cds--overflow-menu-options {
+.cds--body--with-modal-open .cds--modal .cds--tooltip,
+.cds--body--with-modal-open .cds--modal .cds--overflow-menu-options {
   z-index: 9000;
 }
 
+.cds--modal-container--full-width .cds--modal-content {
+  padding: 0;
+  margin: 0;
+}
+
 /* stylelint-disable */
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--modal-close__icon {
@@ -1607,6 +1618,16 @@
 }
 
 /* stylelint-enable */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px var(--cds-field) inset;
+  -webkit-text-fill-color: var(--cds-text-primary, #161616);
+}
+
 .cds--fieldset html {
   font-size: 100%;
 }
@@ -1664,6 +1685,13 @@
   font-weight: 600;
 }
 
+.cds--label .cds--toggletip-label {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+}
+
 .cds--label--no-margin {
   margin-bottom: 0;
 }
@@ -1755,7 +1783,7 @@
 }
 
 input[type=number] {
-  font-family: carbon--font-family("mono");
+  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
 }
 
 input[data-invalid]:not(:focus),
@@ -1966,16 +1994,12 @@ fieldset[disabled] .cds--form__helper-text {
   width: 100%;
 }
 
-.cds--text-input__invalid-icon,
-.cds--text-input__readonly-icon {
+.cds--text-input__invalid-icon {
   position: absolute;
   top: 50%;
   right: 1rem;
-  transform: translateY(-50%);
-}
-
-.cds--text-input__invalid-icon {
   fill: var(--cds-support-error, #da1e28);
+  transform: translateY(-50%);
 }
 
 .cds--text-input__invalid-icon--warning {
@@ -2224,8 +2248,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--text-input--invalid,
-.cds--text-input--warning,
-.cds--text-input-wrapper--readonly .cds--text-input {
+.cds--text-input--warning {
   padding-right: 2.5rem;
 }
 
@@ -2241,14 +2264,28 @@ fieldset[disabled] .cds--form__helper-text {
   right: 2.5rem;
 }
 
-.cds--text-input:disabled + .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
+.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
   cursor: not-allowed;
+}
+
+.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
-.cds--text-input:disabled + .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
+.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--text-input__counter-alert {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+}
+
 .cds--text-input:disabled {
   outline: 2px solid transparent;
   outline-offset: -2px;
@@ -2439,6 +2476,17 @@ fieldset[disabled] .cds--form__helper-text {
   flex-direction: column;
 }
 
+.cds--text-input-wrapper--inline .cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-height: 12.5rem;
+  font-weight: 400;
+}
+
+.cds--text-input-wrapper--inline--invalid .cds--form-requirement {
+  color: var(--cds-text-error, #da1e28);
+}
+
 .cds--form--fluid .cds--text-input-wrapper--readonly,
 .cds--text-input-wrapper--readonly .cds--text-input {
   background: transparent;
@@ -2451,6 +2499,15 @@ fieldset[disabled] .cds--form__helper-text {
   }
 }
 
+.cds--text-input__label-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.cds--text-input__label-wrapper .cds--text-input__label-counter {
+  align-self: end;
+}
+
 @keyframes stroke {
   100% {
     stroke-dashoffset: 0;
@@ -2480,7 +2537,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--inline-loading__checkmark-container {
-  fill: var(--cds-support-success, #198038);
+  fill: var(--cds-support-success, #24a148);
 }
 .cds--inline-loading__checkmark-container.cds--inline-loading__svg {
   position: absolute;
@@ -2820,6 +2877,9 @@ fieldset[disabled] .cds--form__helper-text {
   border-bottom: 0;
   line-height: calc(3rem - (0.5rem * 2));
 }
+.cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
+  overflow-x: visible;
+}
 .cds--tabs .cds--tabs__nav-item--icon, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
   display: flex;
   width: var(--cds-icon-tab-size, 2.5rem);
@@ -3240,7 +3300,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 .cds--overflow-menu:hover,
 .cds--overflow-menu__trigger:hover {
-  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+  background-color: var(--cds-layer-hover);
 }
 
 .cds--overflow-menu--sm {
@@ -3284,6 +3344,10 @@ fieldset[disabled] .cds--form__helper-text {
   fill: var(--cds-icon-primary, #161616);
 }
 
+.cds--overflow-menu__wrapper {
+  line-height: 0;
+}
+
 .cds--overflow-menu-options {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   position: absolute;
@@ -3525,7 +3589,7 @@ a.cds--overflow-menu-options__btn::before {
 
 .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:hover, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:active, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:focus {
   outline: 2px solid transparent;
@@ -5138,7 +5202,7 @@ a.cds--overflow-menu-options__btn::before {
 .security--combo-button .security--combo-button__overflow-menu {
   width: 3rem;
   height: auto;
-  border-left: 0.125rem solid var(--cds-border-subtle-01, #e0e0e0);
+  border-left: 0.125rem solid var(--cds-border-subtle-01, #c6c6c6);
   background-color: var(--cds-background-brand, #0f62fe);
 }
 
@@ -5318,6 +5382,10 @@ a.cds--overflow-menu-options__btn::before {
   fill: var(--cds-interactive, #0f62fe);
 }
 
+.cds--progress--space-equal .cds--progress-text {
+  overflow: hidden;
+}
+
 .cds--progress-label {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -5343,19 +5411,20 @@ a.cds--overflow-menu-options__btn::before {
   cursor: pointer;
 }
 
-.cds--progress-label:focus {
-  box-shadow: 0 0.1875rem 0 0 var(--cds-link-primary, #0f62fe);
-  color: var(--cds-link-primary, #0f62fe);
-  outline: none;
-}
-
 .cds--progress--space-equal .cds--progress-label {
   max-width: 100%;
   margin-right: 0.75rem;
 }
 
+.cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus {
+  outline: none;
+}
+.cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus-visible .cds--progress-label {
+  color: var(--cds-focus, #0f62fe);
+  outline: 0.0625rem solid var(--cds-focus, #0f62fe);
+}
 .cds--progress-step-button:not(.cds--progress-step-button--unclickable) .cds--progress-label:active {
-  box-shadow: 0 0.1875rem 0 0 var(--cds-text-primary, #161616);
+  box-shadow: 0 0.0625rem 0 0 var(--cds-text-primary, #161616);
   color: var(--cds-text-primary, #161616);
 }
 
@@ -5487,11 +5556,6 @@ a.cds--overflow-menu-options__btn::before {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   cursor: not-allowed;
 }
-.cds--progress-step--disabled .cds--progress-label:focus,
-.cds--progress-step--disabled .cds--progress-label:active {
-  box-shadow: none;
-  outline: none;
-}
 .cds--progress-step--disabled .cds--progress-line {
   cursor: not-allowed;
 }
@@ -5534,6 +5598,10 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 
+.cds--progress.cds--progress--vertical.cds--skeleton .cds--progress-label {
+  margin-top: 0.0625rem;
+}
+
 .cds--progress--vertical {
   display: flex;
   flex-direction: column;
@@ -5587,6 +5655,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .cds--toggle {
+  display: inline-block;
   user-select: none;
 }
 
@@ -5617,7 +5686,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .cds--toggle__appearance {
-  display: grid;
+  display: inline-grid;
   align-items: center;
   column-gap: 0.5rem;
   cursor: pointer;
@@ -5650,12 +5719,13 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
-.cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
+.cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
+.cds--toggle:active .cds--toggle__switch {
   box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
 }
 
 .cds--toggle__switch--checked {
-  background-color: var(--cds-support-success, #198038);
+  background-color: var(--cds-support-success, #24a148);
 }
 .cds--toggle__switch--checked::before {
   transform: translateX(1.5rem);
@@ -5688,7 +5758,7 @@ a.cds--overflow-menu-options__btn::before {
   right: 0.3125rem;
   width: 0.375rem;
   height: 0.3125rem;
-  fill: var(--cds-support-success, #198038);
+  fill: var(--cds-support-success, #24a148);
   visibility: hidden;
 }
 
@@ -5716,6 +5786,31 @@ a.cds--overflow-menu-options__btn::before {
   fill: var(--cds-button-disabled, #c6c6c6);
 }
 
+.cds--toggle--readonly .cds--toggle__appearance {
+  cursor: default;
+}
+
+.cds--toggle--readonly .cds--toggle__switch {
+  border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+  background-color: transparent;
+}
+.cds--toggle--readonly .cds--toggle__switch::before {
+  top: 0.125rem;
+  left: 0.125rem;
+  background-color: var(--cds-text-primary, #161616);
+}
+
+.cds--toggle--readonly .cds--toggle__check {
+  top: 0.3125rem;
+  right: 0.25rem;
+  fill: var(--cds-background, #ffffff);
+}
+
+.cds--toggle--readonly .cds--toggle__text {
+  cursor: text;
+  user-select: text;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--toggle__switch,
 .cds--toggle__switch::before {
@@ -5725,7 +5820,8 @@ a.cds--overflow-menu-options__btn::before {
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
-.cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
+.cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
+.cds--toggle:active .cds--toggle__switch {
     color: Highlight;
     outline: 1px solid Highlight;
   }
@@ -5894,7 +5990,7 @@ a.cds--overflow-menu-options__btn::before {
   top: 0;
   height: min-content;
   padding-top: 0;
-  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   background-color: transparent;
   grid-row: 1;
   overflow-x: auto;
@@ -6669,12 +6765,12 @@ a.cds--overflow-menu-options__btn::before {
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
   padding: 1.5rem 2rem;
-  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   margin: 0;
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
   padding: 1rem;
-  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   margin: 0;
 }
 .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -6745,7 +6841,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 .c4p--tearsheet .c4p--tearsheet__influencer {
   flex: 0 0 257px;
-  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   overflow-y: auto;
 }
 .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
@@ -6768,7 +6864,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
   border-right: none;
-  border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 .c4p--tearsheet .c4p--tearsheet__content {
   overflow: auto;
@@ -6810,7 +6906,7 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--tearsheet .c4p--tearsheet__buttons {
   display: inline-flex;
   min-width: 100%;
-  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
   background: var(--cds-background, #ffffff);
@@ -7052,6 +7148,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .cds--link.cds--link--inline {
+  display: inline;
   text-decoration: underline;
 }
 .cds--link.cds--link--inline:focus, .cds--link.cds--link--inline:visited {
@@ -7240,6 +7337,7 @@ a.cds--overflow-menu-options__btn::before {
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
     fill: ButtonText;
+    background-color: ButtonText;
   }
 }
 
@@ -7257,6 +7355,19 @@ a.cds--overflow-menu-options__btn::before {
   background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
+  border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--radio-button-group--readonly .cds--radio-button__label {
+  cursor: default;
+}
+
+.cds--radio-button-group--readonly .cds--radio-button__label-text {
+  cursor: text;
+  user-select: text;
+}
+
 .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: 1.5px;
@@ -7808,6 +7919,10 @@ a.cds--overflow-menu-options__btn::before {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--file-container--drop {
+  width: 100%;
+}
+
 .cds--file-btn ~ .cds--file-container {
   margin-top: 1.5rem;
 }
@@ -7959,7 +8074,6 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .cds--file__state-container .cds--file-complete {
-  cursor: pointer;
   fill: var(--cds-interactive, #0f62fe);
 }
 .cds--file__state-container .cds--file-complete:focus {
@@ -8388,15 +8502,15 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
-  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 
 .c4p--add-select__column {
   overflow: auto;
   flex: 0 0 20rem;
   padding: 1rem;
-  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
-  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+  border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 .c4p--add-select__column-search-bar {
   display: flex;
@@ -8638,6 +8752,9 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-border-subtle-selected-01: #525252;
   --cds-border-subtle-selected-02: #6f6f6f;
   --cds-border-subtle-selected-03: #8d8d8d;
+  --cds-border-tile-01: #525252;
+  --cds-border-tile-02: #6f6f6f;
+  --cds-border-tile-03: #8d8d8d;
   --cds-field-01: #262626;
   --cds-field-02: #393939;
   --cds-field-03: #525252;
@@ -8649,6 +8766,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-focus-inverse: #0f62fe;
   --cds-highlight: #002d9c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
+  --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
   --cds-icon-on-color: #ffffff;
   --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8734,6 +8852,10 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-label-01-font-weight: 400;
   --cds-label-01-line-height: 1.33333;
   --cds-label-01-letter-spacing: 0.32px;
+  --cds-label-02-font-size: 0.875rem;
+  --cds-label-02-font-weight: 400;
+  --cds-label-02-line-height: 1.28572;
+  --cds-label-02-letter-spacing: 0.16px;
   --cds-helper-text-01-font-size: 0.75rem;
   --cds-helper-text-01-line-height: 1.33333;
   --cds-helper-text-01-letter-spacing: 0.32px;
@@ -8795,11 +8917,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-productive-heading-05-font-weight: 400;
   --cds-productive-heading-05-line-height: 1.25;
   --cds-productive-heading-05-letter-spacing: 0;
-  --cds-productive-heading-06-font-size: 2rem;
+  --cds-productive-heading-06-font-size: 2.625rem;
   --cds-productive-heading-06-font-weight: 300;
   --cds-productive-heading-06-line-height: 1.199;
   --cds-productive-heading-06-letter-spacing: 0;
-  --cds-productive-heading-07-font-size: 2.625rem;
+  --cds-productive-heading-07-font-size: 3.375rem;
   --cds-productive-heading-07-font-weight: 300;
   --cds-productive-heading-07-line-height: 1.19;
   --cds-productive-heading-07-letter-spacing: 0;
@@ -8854,7 +8976,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-display-03-line-height: 1.19;
   --cds-display-03-letter-spacing: 0;
   --cds-display-04-font-size: 2.625rem;
-  --cds-display-04-font-weight: 600;
+  --cds-display-04-font-weight: 300;
   --cds-display-04-line-height: 1.19;
   --cds-display-04-letter-spacing: 0;
   --cds-legal-01-font-size: 0.75rem;
@@ -8901,11 +9023,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-heading-05-font-weight: 400;
   --cds-heading-05-line-height: 1.25;
   --cds-heading-05-letter-spacing: 0;
-  --cds-heading-06-font-size: 2rem;
+  --cds-heading-06-font-size: 2.625rem;
   --cds-heading-06-font-weight: 300;
   --cds-heading-06-line-height: 1.199;
   --cds-heading-06-letter-spacing: 0;
-  --cds-heading-07-font-size: 2.625rem;
+  --cds-heading-07-font-size: 3.375rem;
   --cds-heading-07-font-weight: 300;
   --cds-heading-07-line-height: 1.19;
   --cds-heading-07-letter-spacing: 0;
@@ -8952,7 +9074,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-fluid-display-03-line-height: 1.19;
   --cds-fluid-display-03-letter-spacing: 0;
   --cds-fluid-display-04-font-size: 2.625rem;
-  --cds-fluid-display-04-font-weight: 600;
+  --cds-fluid-display-04-font-weight: 300;
   --cds-fluid-display-04-line-height: 1.19;
   --cds-fluid-display-04-letter-spacing: 0;
   --cds-button-separator: #161616;
@@ -8980,9 +9102,10 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
   position: fixed;
   z-index: 2;
   top: 3rem;
@@ -9094,7 +9217,7 @@ button.c4p--add-select__global-filter-toggle--open {
   fill: var(--cds-support-error, #da1e28);
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
-  fill: var(--cds-support-success, #198038);
+  fill: var(--cds-support-success, #24a148);
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
   fill: var(--cds-support-warning, #f1c21b);
@@ -9403,6 +9526,12 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 
+.cds--breadcrumb .cds--overflow-menu.cds--btn--icon-only {
+  min-height: 1.125rem;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .cds--icon--skeleton {
   position: relative;
   padding: 0;
@@ -12253,7 +12382,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--card__productive .c4p--card__footer {
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 .c4p--card__productive .c4p--card__footer-no-button {
   justify-content: flex-end;
@@ -13317,6 +13446,7 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .cds--popover {
   position: absolute;
+  z-index: 6000;
   top: 0;
   right: 0;
   bottom: 0;
@@ -13489,13 +13619,13 @@ button.c4p--add-select__global-filter-toggle--open {
 .cds--popover--left-top .cds--popover-content {
   top: -50%;
   right: 100%;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
 .cds--popover--left-bottom .cds--popover-content {
   right: 100%;
   bottom: -50%;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
 
 .cds--popover--left .cds--popover-content::before,
@@ -13542,8 +13672,8 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--toolbar__group {
   display: flex;
-  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
-  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 
 .c4p--toolbar--vertical > .c4p--toolbar__group,
@@ -13617,6 +13747,9 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-border-subtle-selected-01: #6f6f6f;
   --cds-border-subtle-selected-02: #8d8d8d;
   --cds-border-subtle-selected-03: #a8a8a8;
+  --cds-border-tile-01: #6f6f6f;
+  --cds-border-tile-02: #8d8d8d;
+  --cds-border-tile-03: #a8a8a8;
   --cds-field-01: #393939;
   --cds-field-02: #525252;
   --cds-field-03: #6f6f6f;
@@ -13628,6 +13761,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-focus-inverse: #0f62fe;
   --cds-highlight: #0043ce;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
+  --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
   --cds-icon-on-color: #ffffff;
   --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -13713,6 +13847,10 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-label-01-font-weight: 400;
   --cds-label-01-line-height: 1.33333;
   --cds-label-01-letter-spacing: 0.32px;
+  --cds-label-02-font-size: 0.875rem;
+  --cds-label-02-font-weight: 400;
+  --cds-label-02-line-height: 1.28572;
+  --cds-label-02-letter-spacing: 0.16px;
   --cds-helper-text-01-font-size: 0.75rem;
   --cds-helper-text-01-line-height: 1.33333;
   --cds-helper-text-01-letter-spacing: 0.32px;
@@ -13774,11 +13912,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-productive-heading-05-font-weight: 400;
   --cds-productive-heading-05-line-height: 1.25;
   --cds-productive-heading-05-letter-spacing: 0;
-  --cds-productive-heading-06-font-size: 2rem;
+  --cds-productive-heading-06-font-size: 2.625rem;
   --cds-productive-heading-06-font-weight: 300;
   --cds-productive-heading-06-line-height: 1.199;
   --cds-productive-heading-06-letter-spacing: 0;
-  --cds-productive-heading-07-font-size: 2.625rem;
+  --cds-productive-heading-07-font-size: 3.375rem;
   --cds-productive-heading-07-font-weight: 300;
   --cds-productive-heading-07-line-height: 1.19;
   --cds-productive-heading-07-letter-spacing: 0;
@@ -13833,7 +13971,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-display-03-line-height: 1.19;
   --cds-display-03-letter-spacing: 0;
   --cds-display-04-font-size: 2.625rem;
-  --cds-display-04-font-weight: 600;
+  --cds-display-04-font-weight: 300;
   --cds-display-04-line-height: 1.19;
   --cds-display-04-letter-spacing: 0;
   --cds-legal-01-font-size: 0.75rem;
@@ -13880,11 +14018,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-heading-05-font-weight: 400;
   --cds-heading-05-line-height: 1.25;
   --cds-heading-05-letter-spacing: 0;
-  --cds-heading-06-font-size: 2rem;
+  --cds-heading-06-font-size: 2.625rem;
   --cds-heading-06-font-weight: 300;
   --cds-heading-06-line-height: 1.199;
   --cds-heading-06-letter-spacing: 0;
-  --cds-heading-07-font-size: 2.625rem;
+  --cds-heading-07-font-size: 3.375rem;
   --cds-heading-07-font-weight: 300;
   --cds-heading-07-line-height: 1.19;
   --cds-heading-07-letter-spacing: 0;
@@ -13931,7 +14069,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-fluid-display-03-line-height: 1.19;
   --cds-fluid-display-03-letter-spacing: 0;
   --cds-fluid-display-04-font-size: 2.625rem;
-  --cds-fluid-display-04-font-weight: 600;
+  --cds-fluid-display-04-font-weight: 300;
   --cds-fluid-display-04-line-height: 1.19;
   --cds-fluid-display-04-letter-spacing: 0;
   --cds-button-separator: #161616;
@@ -13989,9 +14127,10 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
   position: fixed;
   top: 3rem;
   right: 0;
@@ -14038,6 +14177,9 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-border-subtle-selected-01: #525252;
   --cds-border-subtle-selected-02: #6f6f6f;
   --cds-border-subtle-selected-03: #8d8d8d;
+  --cds-border-tile-01: #525252;
+  --cds-border-tile-02: #6f6f6f;
+  --cds-border-tile-03: #8d8d8d;
   --cds-field-01: #262626;
   --cds-field-02: #393939;
   --cds-field-03: #525252;
@@ -14049,6 +14191,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-focus-inverse: #0f62fe;
   --cds-highlight: #002d9c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
+  --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
   --cds-icon-on-color: #ffffff;
   --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -14134,6 +14277,10 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-label-01-font-weight: 400;
   --cds-label-01-line-height: 1.33333;
   --cds-label-01-letter-spacing: 0.32px;
+  --cds-label-02-font-size: 0.875rem;
+  --cds-label-02-font-weight: 400;
+  --cds-label-02-line-height: 1.28572;
+  --cds-label-02-letter-spacing: 0.16px;
   --cds-helper-text-01-font-size: 0.75rem;
   --cds-helper-text-01-line-height: 1.33333;
   --cds-helper-text-01-letter-spacing: 0.32px;
@@ -14195,11 +14342,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-productive-heading-05-font-weight: 400;
   --cds-productive-heading-05-line-height: 1.25;
   --cds-productive-heading-05-letter-spacing: 0;
-  --cds-productive-heading-06-font-size: 2rem;
+  --cds-productive-heading-06-font-size: 2.625rem;
   --cds-productive-heading-06-font-weight: 300;
   --cds-productive-heading-06-line-height: 1.199;
   --cds-productive-heading-06-letter-spacing: 0;
-  --cds-productive-heading-07-font-size: 2.625rem;
+  --cds-productive-heading-07-font-size: 3.375rem;
   --cds-productive-heading-07-font-weight: 300;
   --cds-productive-heading-07-line-height: 1.19;
   --cds-productive-heading-07-letter-spacing: 0;
@@ -14254,7 +14401,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-display-03-line-height: 1.19;
   --cds-display-03-letter-spacing: 0;
   --cds-display-04-font-size: 2.625rem;
-  --cds-display-04-font-weight: 600;
+  --cds-display-04-font-weight: 300;
   --cds-display-04-line-height: 1.19;
   --cds-display-04-letter-spacing: 0;
   --cds-legal-01-font-size: 0.75rem;
@@ -14301,11 +14448,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-heading-05-font-weight: 400;
   --cds-heading-05-line-height: 1.25;
   --cds-heading-05-letter-spacing: 0;
-  --cds-heading-06-font-size: 2rem;
+  --cds-heading-06-font-size: 2.625rem;
   --cds-heading-06-font-weight: 300;
   --cds-heading-06-line-height: 1.199;
   --cds-heading-06-letter-spacing: 0;
-  --cds-heading-07-font-size: 2.625rem;
+  --cds-heading-07-font-size: 3.375rem;
   --cds-heading-07-font-weight: 300;
   --cds-heading-07-line-height: 1.19;
   --cds-heading-07-letter-spacing: 0;
@@ -14352,7 +14499,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-fluid-display-03-line-height: 1.19;
   --cds-fluid-display-03-letter-spacing: 0;
   --cds-fluid-display-04-font-size: 2.625rem;
-  --cds-fluid-display-04-font-weight: 600;
+  --cds-fluid-display-04-font-weight: 300;
   --cds-fluid-display-04-line-height: 1.19;
   --cds-fluid-display-04-letter-spacing: 0;
   --cds-button-separator: #161616;
@@ -14410,9 +14557,10 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
 }
 
 .c4p--web-terminal__body {
@@ -15293,8 +15441,8 @@ button.c4p--add-select__global-filter-toggle--open {
   justify-content: flex-end;
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
-  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
-  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   overflow: hidden;
   margin: 0;
   background-color: var(--cds-field-01, #f4f4f4);
@@ -15366,8 +15514,8 @@ button.c4p--add-select__global-filter-toggle--open {
   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);
-  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
-  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   position: absolute;
   z-index: 3;
   display: none;
@@ -15666,7 +15814,9 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__grid-container td.cds--table-column-checkbox,
 .c4p--datagrid__grid-container th.cds--table-column-checkbox {
   /* stylelint-disable-next-line declaration-no-important */
-  padding-right: 1.5rem !important;
+  width: 3rem !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-right: 1rem !important;
 }
 
 .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
@@ -15730,7 +15880,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--datagrid__head-hidden-select-all {
-  padding-right: 2.5rem;
+  padding-right: 3rem;
 }
 .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
   position: sticky;
@@ -15771,6 +15921,13 @@ button.c4p--add-select__global-filter-toggle--open {
   width: 100% !important;
 }
 
+.c4p--datagrid__sticky thead {
+  display: flex;
+}
+.c4p--datagrid__sticky thead tr.c4p--datagrid__sticky {
+  width: auto;
+}
+
 .c4p--datagrid__displayFlex {
   position: relative;
   display: flex;
@@ -15806,6 +15963,9 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
   border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
 }
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
+  overflow: hidden;
+}
 .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
   height: 100%;
 }
@@ -15833,7 +15993,7 @@ button.c4p--add-select__global-filter-toggle--open {
     );
   width: 1px;
   height: var(--c4p--datagrid--indicator-height);
-  border-left: 1px solid var(--cds-background-brand, #0f62fe);
+  border-left: 1px solid var(--cds-border-subtle-selected-01, #c6c6c6);
   content: "";
 }
 
@@ -15869,7 +16029,7 @@ button.c4p--add-select__global-filter-toggle--open {
   left: 0;
   width: 1px;
   height: 1rem;
-  border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   content: "";
   transform: translateY(-50%);
 }
@@ -16034,6 +16194,19 @@ button.c4p--add-select__global-filter-toggle--open {
   content: "";
 }
 
+.c4p--datagrid tr.c4p--datagrid__carbon-nested-row td:first-child:empty,
+.c4p--datagrid tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__expandable-row-cell {
+  border-bottom: none;
+}
+
+.cds--data-table td.c4p--datagrid__expandable-row-cell {
+  padding-left: 0.5rem;
+}
+
+.c4p--datagrid__carbon-row-expanded .c4p--datagrid__expandable-row-cell {
+  border-bottom: none;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -16170,7 +16343,7 @@ button.c4p--add-select__global-filter-toggle--open {
   right: 0;
   display: flex;
   align-items: center;
-  border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
+  border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
 }
 
 .c4p--datagrid__right-sticky-column-header {
@@ -16185,7 +16358,7 @@ button.c4p--add-select__global-filter-toggle--open {
   left: 0;
   display: flex;
   align-items: center;
-  border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
+  border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
 }
 
 .c4p--datagrid__left-sticky-column-header {
@@ -16197,7 +16370,7 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
 .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
-  left: 2.5rem;
+  left: 3rem;
 }
 
 .c4p--datagrid__sticky-noShadow {
@@ -16525,8 +16698,8 @@ button.c4p--add-select__global-filter-toggle--open {
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
-th.c4p--datagrid__select-all-toggle-on,
-td.c4p--datagrid__select-all-toggle-on {
+.c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
+.c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
   /* stylelint-disable-next-line declaration-no-important */
   width: 4.5rem !important;
   /* stylelint-disable-next-line declaration-no-important */