@carbon/ibm-products 2.70.1 → 2.71.0-rc.0

package/css/index.css

@@ -2715,6 +2715,17 @@ input[data-invalid] ~ .cds--form-requirement,
   max-block-size: 12.5rem;
 }
 
+.cds--select--inline.cds--select--warning .cds--select-input--inline__wrapper ~ .cds--form-requirement,
+.cds--select-input--inline__wrapper[data-invalid] ~ .cds--form-requirement {
+  display: inline-flex;
+  overflow: visible;
+  margin: 0;
+  inline-size: 100%;
+  margin-block-end: 0;
+  max-block-size: 100%;
+  padding-inline-start: 0.5rem;
+}
+
 input[data-invalid] ~ .cds--form-requirement,
 .cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement,
 .cds--date-picker-input__wrapper ~ .cds--form-requirement,
@@ -2724,7 +2735,8 @@ input[data-invalid] ~ .cds--form-requirement,
 .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
 .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
 .cds--time-picker[data-invalid] ~ .cds--form-requirement,
-.cds--list-box[data-invalid] ~ .cds--form-requirement {
+.cds--list-box[data-invalid] ~ .cds--form-requirement,
+.cds--select-input--inline__wrapper[data-invalid] ~ .cds--form-requirement {
   color: var(--cds-text-error, #da1e28);
 }
 
@@ -4190,7 +4202,6 @@ fieldset[disabled] .cds--form__helper-text {
 }
 .cds--tabs.cds--tabs--contained:not(.cds--tabs--vertical) .cds--tabs__nav-link {
   border-block-end: 0;
-  padding-inline: var(--cds-layout-density-padding-inline-local);
 }
 .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
   line-height: calc(3rem - 0.5rem * 2);
@@ -7776,6 +7787,61 @@ a.cds--overflow-menu-options__btn::before {
   margin-block-end: 0;
 }
 
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+.clabs__resizer {
+  position: relative;
+  flex: none;
+  background-color: var(--cds-border-subtle);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .clabs__resizer:hover {
+    background-color: var(--cds-border-interactive, #0f62fe);
+    transition: background-color 150ms;
+  }
+}
+.clabs__resizer:focus {
+  background-color: var(--cds-border-interactive, #0f62fe);
+  outline: none;
+}
+.clabs__resizer:active {
+  background-color: var(--cds-border-interactive, #0f62fe);
+}
+.clabs__resizer:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+.clabs__resizer--horizontal {
+  block-size: 0.25rem;
+  cursor: ns-resize;
+}
+.clabs__resizer--vertical {
+  cursor: ew-resize;
+  inline-size: 0.25rem;
+}
+
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .smooth-resize {
+    transition: all 150ms linear;
+  }
+}
+
 @keyframes side-panel-entrance-reduced {
   0% {
     opacity: 0;
@@ -8342,49 +8408,6 @@ a.cds--overflow-menu-options__btn::before {
   background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
 }
 
-.clabs__resizer {
-  position: relative;
-  flex: none;
-  background-color: var(--cds-border-subtle-01, #c6c6c6);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .clabs__resizer:hover {
-    background-color: var(--cds-border-interactive, #0f62fe);
-    transition: background-color 150ms;
-  }
-}
-.clabs__resizer:focus {
-  background-color: var(--cds-border-interactive, #0f62fe);
-  outline: none;
-}
-.clabs__resizer:active {
-  background-color: var(--cds-border-interactive, #0f62fe);
-}
-.clabs__resizer:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: none;
-}
-.clabs__resizer--horizontal {
-  block-size: 0.25rem;
-  cursor: ns-resize;
-}
-.clabs__resizer--vertical {
-  cursor: ew-resize;
-  inline-size: 0.25rem;
-}
-
-.sr-only {
-  position: absolute;
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  margin: -1px;
-  block-size: 1px;
-  clip: rect(0, 0, 0, 0);
-  inline-size: 1px;
-  white-space: nowrap;
-}
-
 .c4p--create-side-panel.c4p--side-panel .c4p--create-side-panel__content-text {
   padding-inline-end: calc(20% - 1rem);
 }
@@ -14202,6 +14225,163 @@ button.c4p--add-select__global-filter-toggle--open {
   min-inline-size: 0;
 }
 
+.c4p--page-header__next.c4p--page-header {
+  background-color: var(--cds-layer-01, #f4f4f4);
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-bar {
+  block-size: 2.5rem;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--subgrid {
+  block-size: 100%;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  block-size: 100%;
+  inline-size: 100%;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__actions-flush .cds--css-grid {
+  padding-inline-end: 0;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__actions-flush .cds--css-grid-column {
+  margin-inline-end: 0;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-bar-border {
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__icon {
+  margin-inline-end: 0.5rem;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__actions {
+  display: inline-flex;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb__content-actions {
+  margin-inline-end: 0.75rem;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-wrapper {
+  display: inline-flex;
+}
+.c4p--page-header__next .c4p--page-header__content {
+  padding: 1.5rem 0;
+}
+.c4p--page-header__next .c4p--page-header__content__title-wrapper {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto minmax(var(--page-header-title-grid-width, 0), 1fr);
+  margin-block-end: 1rem;
+  min-block-size: 2.5rem;
+}
+@media (max-width: 41.98rem) {
+  .c4p--page-header__next .c4p--page-header__content__title-wrapper {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 1rem;
+  }
+}
+.c4p--page-header__next .c4p--page-header__content__start {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.c4p--page-header__next .c4p--page-header__content__title-container {
+  display: flex;
+}
+.c4p--page-header__next .c4p--page-header__content__title-container .cds--definition-term {
+  border-block-end: none;
+}
+.c4p--page-header__next .c4p--page-header__content__contextual-actions {
+  display: flex;
+}
+.c4p--page-header__next .c4p--page-header__content__title {
+  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-productive-heading-04-font-weight, 400);
+  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-inline-size: 40rem;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+.c4p--page-header__next .c4p--page-header__content:has(.c4p--page-header__content__contextual-actions) .c4p--page-header__content__title {
+  -webkit-line-clamp: 1;
+}
+.c4p--page-header__next .c4p--page-header__content__icon {
+  margin-inline-end: 1rem;
+}
+.c4p--page-header__next .c4p--page-header__content__page-actions {
+  display: flex;
+  justify-content: right;
+}
+@media (max-width: 41.98rem) {
+  .c4p--page-header__next .c4p--page-header__content__page-actions {
+    justify-content: left;
+    margin-block-start: 0;
+  }
+}
+.c4p--page-header__next .c4p--page-header__content__page-actions .cds--menu-button__trigger:not(.cds--btn--ghost) {
+  min-inline-size: 0;
+}
+.c4p--page-header__next .c4p--page-header__content__subtitle {
+  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-productive-heading-03-font-weight, 400);
+  line-height: var(--cds-productive-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
+  margin-block-end: 0.5rem;
+}
+.c4p--page-header__next .c4p--page-header__content__body {
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
+  margin-block-start: 0.5rem;
+  max-inline-size: 40rem;
+}
+.c4p--page-header__next [data-hidden]:not([data-fixed]) {
+  display: none;
+}
+.c4p--page-header__next .c4p--page-header__hero-image {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: flex-end;
+  block-size: 100%;
+}
+.c4p--page-header__next .c4p--page-header__tab-bar {
+  margin-inline-start: -1rem;
+}
+.c4p--page-header__next .c4p--page-header__tab-bar--tablist {
+  display: grid;
+  grid-gap: 4rem;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+.c4p--page-header__next .cds--tabs .cds--tab--overflow-nav-button {
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+.c4p--page-header__next .cds--tabs .cds--tab--overflow-nav-button.cds--tab--overflow-nav-button--next::before {
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cds-layer-01, #f4f4f4));
+}
+.c4p--page-header__next .cds--tabs .cds--tab--overflow-nav-button.cds--tab--overflow-nav-button--previous::before {
+  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-layer-01, #f4f4f4));
+}
+.c4p--page-header__next .c4p--page-header__tags {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+.c4p--page-header__next .c4p--page-header__tags-popover-list {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+.c4p--page-header__next .c4p--page-header__tag-item {
+  flex-shrink: 0;
+}
+
 .c4p--card__productive {
   display: flex;
   flex-direction: column;
@@ -20389,13 +20569,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
   block-size: 100%;
 }
 .c4p--interstitial-screen__carousel .c4p--carousel__item {
-  flex: 0 0 100% !important;
+  flex: 0 0 100%;
   scroll-snap-align: start;
 }
 .c4p--interstitial-screen--internal-body {
   padding: 0 !important;
   margin: 0 !important;
 }
+.c4p--interstitial-screen--content {
+  block-size: 100%;
+}
 .c4p--interstitial-screen--internal-header {
   position: relative;
   background-color: var(--cds-background, #ffffff);
@@ -20438,6 +20621,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 .c4p--interstitial-screen--footer {
   display: flex;
+  box-sizing: initial;
   flex-direction: row;
   justify-content: flex-end;
   background: var(--cds-background, #ffffff);
@@ -20454,7 +20638,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
   flex-grow: 1 !important;
   max-inline-size: none;
-  padding-inline-start: 2rem !important;
+  padding-inline-start: 2rem;
 }
 .c4p--interstitial-screen--footer .cds--inline-loading {
   position: absolute;
@@ -20480,14 +20664,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
   block-size: 100vh;
   max-inline-size: 100vw;
 }
-.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
-  padding-inline-start: 2.5rem !important;
-}
-@media (max-width: 81.98rem) {
-  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
-    padding-inline-start: 2rem !important;
-  }
-}
 
 .c4p--coachmark-dragbar {
   display: flex;
@@ -21033,7 +21209,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--coachmark-stack-element--is-mounted {
   inset-block-end: 0;
   /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
-  transition: 240ms cubic-bezier(0.2, 0, 1, 0.9);
+  transition: 110ms cubic-bezier(0.2, 0, 1, 0.9);
 }
 @media (prefers-reduced-motion) {
   .c4p--coachmark-stack-element--is-mounted {
@@ -21095,6 +21271,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
   white-space: nowrap;
 }
 
+.c4p--coachmark-stack--scaled-home {
+  opacity: 0.8;
+  transform: scale(0.9);
+}
+
+.c4p--coachmark-stack--unscaled-home {
+  opacity: 1;
+  transform: none;
+}
+
 .c4p--delimited-list-truncate {
   overflow: hidden;
   text-overflow: ellipsis;