@carbon/ibm-products 2.71.1 → 2.72.0-rc.0

package/css/index.css

@@ -8620,6 +8620,9 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--tearsheet .c4p--tearsheet__header-navigation {
   margin: 0.75rem 0 0;
 }
+.c4p--tearsheet .c4p--tearsheet__layer {
+  display: contents;
+}
 .c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__body {
   display: flex;
   flex-direction: row;
@@ -9405,11 +9408,13 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--card {
+  border: 1px solid transparent;
   background-color: var(--cds-layer-01, #f4f4f4);
   color: var(--cds-text-primary, #161616);
 }
 
 .c4p--card__clickable {
+  border-color: var(--cds-border-tile-01, #c6c6c6);
   cursor: pointer;
   transition: background-color 110ms;
 }
@@ -14226,13 +14231,22 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--page-header__next.c4p--page-header {
+  position: sticky;
   background-color: var(--cds-layer-01, #f4f4f4);
   border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: var(--c4p-page-header-header-top);
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar {
+  position: sticky;
+  z-index: 1;
+  background-color: var(--cds-layer);
   block-size: 2.5rem;
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: var(--c4p-page-header-breadcrumb-top);
 }
-.c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--subgrid {
+.c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--subgrid,
+.c4p--page-header__next .c4p--page-header__breadcrumb-bar .cds--css-grid {
   block-size: 100%;
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-container {
@@ -14256,12 +14270,30 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb__actions {
   display: inline-flex;
+  justify-content: flex-end;
+  inline-size: 100%;
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb__content-actions {
+  inline-size: 100%;
   margin-inline-end: 0.75rem;
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-wrapper {
   display: inline-flex;
+  inline-size: 100%;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-breadcrumb-overflow {
+  inline-size: 100%;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-breadcrumb-overflow .cds--breadcrumb {
+  display: flex;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-breadcrumb-overflow-item {
+  display: none;
+  opacity: 0;
+}
+.c4p--page-header__next .c4p--page-header__breadcrumb-wrapper .c4p--page-header-overflow-breadcrumb-item-with-items {
+  display: flex;
+  opacity: 1;
 }
 .c4p--page-header__next .c4p--page-header__content {
   padding: 1.5rem 0;
@@ -14359,6 +14391,28 @@ button.c4p--add-select__global-filter-toggle--open {
   grid-gap: 4rem;
   grid-template-columns: auto minmax(0, 1fr);
 }
+.c4p--page-header__next .c4p--page-header__tab-bar--tablist .c4p--page-header__tags {
+  display: flex;
+  align-self: center;
+  justify-content: flex-end;
+}
+.c4p--page-header__next .c4p--page-header__tab-bar--tablist.c4p--page-header__tab-bar--with-scroller .c4p--page-header__tags {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  transform: translateX(-1.5rem);
+}
+@media (min-width: 42rem) {
+  .c4p--page-header__next .c4p--page-header__tab-bar--tablist.c4p--page-header__tab-bar--with-scroller .c4p--page-header__tags {
+    padding-inline-end: 0.5rem;
+    transform: translateX(0);
+  }
+}
+@media (min-width: 99rem) {
+  .c4p--page-header__next .c4p--page-header__tab-bar--tablist.c4p--page-header__tab-bar--with-scroller .c4p--page-header__tags {
+    padding-inline-end: 1rem;
+  }
+}
 .c4p--page-header__next .cds--tabs .cds--tab--overflow-nav-button {
   background-color: var(--cds-layer-01, #f4f4f4);
 }
@@ -14368,6 +14422,9 @@ button.c4p--add-select__global-filter-toggle--open {
 .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 .cds--tabs .cds--tabs__nav-link {
+  margin-inline-end: 0.125rem;
+}
 .c4p--page-header__next .c4p--page-header__tags {
   display: flex;
   align-items: center;
@@ -14381,6 +14438,80 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--page-header__next .c4p--page-header__tag-item {
   flex-shrink: 0;
 }
+.c4p--page-header__next .c4p--page-header--scroller-button-icon {
+  /* stylelint-disable-next-line */
+  transition: transform 250ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c4p--page-header__next .c4p--page-header--scroller-button-icon {
+    transition: none;
+  }
+}
+.c4p--page-header__next .c4p--page-header--scroller-button-icon-collapsed {
+  transform: rotate(-180deg);
+}
+.c4p--page-header__next .c4p--page-header--scroller-button-container {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0.125rem;
+}
+@keyframes page-header-title-breadcrumb-animation {
+  0% {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  5% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes page-header-title-breadcrumb-animation-reduced-motion {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.c4p--page-header__next .c4p--page-header-title-breadcrumb {
+  opacity: 0;
+  transform: translateY(1rem);
+  transition: transform cubic-bezier(0.2, 0, 0.38, 0.9) 150ms, opacity cubic-bezier(0.2, 0, 0.38, 0.9) 150ms;
+}
+@supports not (animation-timeline: scroll()) {
+  .c4p--page-header__next .c4p--page-header-title-breadcrumb.c4p--page-header-title-breadcrumb-show {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .c4p--page-header__next .c4p--page-header-title-breadcrumb {
+      transform: translateY(0);
+      /* stylelint-disable-next-line */
+      transition: opacity cubic-bezier(0.2, 0, 0.38, 0.9) 150ms;
+    }
+  }
+}
+@supports (animation-timeline: scroll()) {
+  .c4p--page-header__next .c4p--page-header-title-breadcrumb {
+    animation-direction: alternate;
+    animation-duration: 1ms; /* Firefox requires this to apply the animation */
+    animation-name: page-header-title-breadcrumb-animation;
+    animation-timeline: scroll(block nearest);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .c4p--page-header__next .c4p--page-header-title-breadcrumb {
+      animation-name: page-header-title-breadcrumb-animation-reduced-motion;
+      transform: translateY(0);
+    }
+  }
+}
 
 .c4p--card__productive {
   display: flex;
@@ -20297,7 +20428,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   color: #ffffff;
 }
 
-.c4p--big-numbers__label {
+.c4p--big-number__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);
@@ -20307,7 +20438,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   color: var(--cds-text-secondary, #525252);
 }
 
-.c4p--big-numbers__value {
+.c4p--big-number__value {
   font-size: var(--cds-heading-04-font-size, 1.75rem);
   font-weight: var(--cds-heading-04-font-weight, 400);
   line-height: var(--cds-heading-04-line-height, 1.28572);
@@ -20315,138 +20446,138 @@ th.c4p--datagrid__select-all-toggle-on.button {
   margin-block-end: 0;
 }
 
-.c4p--big-numbers__total {
+.c4p--big-number__total {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
 }
 
-.c4p--big-numbers__total,
-.c4p--big-numbers__percentage-mark {
+.c4p--big-number__total,
+.c4p--big-number__percentage-mark {
   margin-block: auto 0.25rem;
 }
 
-.c4p--big-numbers__info {
+.c4p--big-number__info {
   vertical-align: top;
 }
 
-.c4p--big-numbers__trend {
+.c4p--big-number__trend {
   margin-block-start: 0.5rem;
   vertical-align: top;
 }
 
-.c4p--big-numbers__row {
+.c4p--big-number__row {
   display: flex;
 }
 
-.c4p--big-numbers__info {
+.c4p--big-number__info {
   padding-inline-start: 0.5rem;
 }
 
-.c4p--big-numbers__percentage {
+.c4p--big-number__percentage {
   font-size: var(--cds-heading-04-font-size, 1.75rem);
   font-weight: var(--cds-heading-04-font-weight, 400);
   line-height: var(--cds-heading-04-line-height, 1.28572);
   letter-spacing: var(--cds-heading-04-letter-spacing, 0);
 }
 
-.c4p--big-numbers__percentage-mark {
+.c4p--big-number__percentage-mark {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
 }
 
-.c4p--big-numbers__icon-button {
+.c4p--big-number__icon-button {
   margin-inline-start: 0.25rem;
 }
 
-.c4p--big-numbers--lg .c4p--big-numbers__value,
-.c4p--big-numbers--lg .c4p--big-numbers__percentage {
+.c4p--big-number--lg .c4p--big-number__value,
+.c4p--big-number--lg .c4p--big-number__percentage {
   font-size: var(--cds-heading-06-font-size, 2.625rem);
   font-weight: var(--cds-heading-06-font-weight, 300);
   line-height: var(--cds-heading-06-line-height, 1.199);
   letter-spacing: var(--cds-heading-06-letter-spacing, 0);
 }
 
-.c4p--big-numbers--lg .c4p--big-numbers__total,
-.c4p--big-numbers--lg .c4p--big-numbers__percentage-mark {
+.c4p--big-number--lg .c4p--big-number__total,
+.c4p--big-number--lg .c4p--big-number__percentage-mark {
   font-size: var(--cds-heading-03-font-size, 1.25rem);
   font-weight: var(--cds-heading-03-font-weight, 400);
   line-height: var(--cds-heading-03-line-height, 1.4);
   letter-spacing: var(--cds-heading-03-letter-spacing, 0);
 }
 
-.c4p--big-numbers--xl .c4p--big-numbers__label {
+.c4p--big-number--xl .c4p--big-number__label {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
 }
 
-.c4p--big-numbers--xl .c4p--big-numbers__value,
-.c4p--big-numbers--xl .c4p--big-numbers__percentage {
+.c4p--big-number--xl .c4p--big-number__value,
+.c4p--big-number--xl .c4p--big-number__percentage {
   font-size: var(--cds-heading-07-font-size, 3.375rem);
   font-weight: var(--cds-heading-07-font-weight, 300);
   line-height: var(--cds-heading-07-line-height, 1.19);
   letter-spacing: var(--cds-heading-07-letter-spacing, 0);
 }
 
-.c4p--big-numbers--xl .c4p--big-numbers__total,
-.c4p--big-numbers--xl .c4p--big-numbers__percentage-mark {
+.c4p--big-number--xl .c4p--big-number__total,
+.c4p--big-number--xl .c4p--big-number__percentage-mark {
   font-size: var(--cds-heading-04-font-size, 1.75rem);
   font-weight: var(--cds-heading-04-font-weight, 400);
   line-height: var(--cds-heading-04-line-height, 1.28572);
   letter-spacing: var(--cds-heading-04-letter-spacing, 0);
 }
 
-.c4p--big-numbers--xl .c4p--big-numbers__trend {
+.c4p--big-number--xl .c4p--big-number__trend {
   margin-block-start: 0.75rem;
 }
 
-.c4p--big-numbers-skeleton {
+.c4p--big-number-skeleton {
   inline-size: 4rem;
 }
 
-.c4p--big-numbers-skeleton__label {
+.c4p--big-number-skeleton__label {
   block-size: 0.75rem;
   margin-block: 0 0.5rem;
 }
 
-.c4p--big-numbers-skeleton__value {
+.c4p--big-number-skeleton__value {
   margin: 0;
   /* stylelint-disable-next-line declaration-no-important */
   block-size: 2.5rem !important;
 }
 
-.c4p--big-numbers-skeleton--lg {
+.c4p--big-number-skeleton--lg {
   inline-size: 5rem;
 }
 
-.c4p--big-numbers-skeleton--xl {
+.c4p--big-number-skeleton--xl {
   inline-size: 6rem;
 }
 
-.c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--lg .c4p--big-numbers-skeleton__label {
+.c4p--big-number-skeleton.c4p--big-number-skeleton--lg .c4p--big-number-skeleton__label {
   block-size: 0.75rem;
 }
 
-.c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--lg .c4p--big-numbers-skeleton__value {
+.c4p--big-number-skeleton.c4p--big-number-skeleton--lg .c4p--big-number-skeleton__value {
   /* stylelint-disable-next-line declaration-no-important */
   block-size: 3rem !important;
 }
 
-.c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--xl .c4p--big-numbers-skeleton__label {
+.c4p--big-number-skeleton.c4p--big-number-skeleton--xl .c4p--big-number-skeleton__label {
   block-size: 0.75rem;
 }
 
-.c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--xl .c4p--big-numbers-skeleton__value {
+.c4p--big-number-skeleton.c4p--big-number-skeleton--xl .c4p--big-number-skeleton__value {
   /* stylelint-disable-next-line declaration-no-important */
   block-size: 4rem !important;
 }
 
-.c4p--big-numbers .c4p--big-numbers__tooltip-trigger:focus {
+.c4p--big-number .c4p--big-number__tooltip-trigger:focus {
   outline: 1px solid var(--cds-focus, #0f62fe);
 }
 
@@ -20490,6 +20621,17 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background: transparent;
 }
 
+.c4p--truncated-text__text-content {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: clip;
+}
+.c4p--truncated-text__expand-toggle {
+  color: var(--cds-link-primary, #0f62fe);
+  cursor: pointer;
+}
+
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable declaration-no-important */
 .c4p--carousel {
@@ -21025,10 +21167,185 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background-color: #7c3dd6 !important;
 }
 
+/**
+ * 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.
+ */
+.c4p__bubble {
+  position: fixed;
+  z-index: 10000;
+  display: none;
+  padding: 1rem;
+  border-radius: 0.125rem;
+  /* stylelint-disable-next-line declaration-no-important */
+  background: var(--cds-layer) !important;
+  color: var(--cds-text-primary, #161616);
+  font-weight: bold;
+  inline-size: max-content;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+}
+
+.c4p__bubble-hidden {
+  display: none;
+}
+
+.c4p__bubble-open {
+  display: grid;
+  pointer-events: all;
+}
+
+.c4p__bubble-drop-shadow {
+  filter: drop-shadow(0 0.125rem 0.125rem rgba(0, 0, 0, 0.2));
+}
+
+.c4p__bubble__arrow {
+  position: absolute;
+  z-index: 10010;
+  background: var(--cds-layer);
+  block-size: 0.75rem;
+  inline-size: 0.75rem;
+  transform: rotate(45deg);
+}
+
+.c4p__bubble__header {
+  z-index: 10020;
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: -1rem;
+  margin-inline: -1rem;
+}
+
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable carbon/motion-easing-use */
+/* stylelint-disable max-nesting-depth */
+.c4p--coachmark-beacon {
+  position: relative;
+}
+.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::before {
+  display: none;
+}
+.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::after {
+  position: absolute;
+  border-radius: 50%;
+  /* stylelint-disable-next-line carbon/theme-use */
+  background-color: #4589ff;
+  block-size: 0.75rem;
+  content: "";
+  inline-size: 0.75rem;
+  inset-block-start: 0.625rem;
+  inset-inline-start: 0.625rem;
+}
+.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus {
+  outline: transparent;
+}
+.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus::before {
+  position: absolute;
+  display: block;
+  border-radius: 100%;
+  block-size: 18px;
+  content: "";
+  inline-size: 18px;
+  inset-block-start: 7px;
+  inset-inline-start: 7px;
+  /* stylelint-disable-next-line carbon/theme-use */
+  outline: 0.125rem var(--cds-focus, #0f62fe) solid;
+}
+.c4p--coachmark-beacon .c4p--coachmark-beacon__target {
+  display: flex;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: transparent;
+  block-size: 2rem;
+  cursor: pointer;
+  inline-size: 2rem;
+}
+.c4p--coachmark-beacon .c4p--coachmark-beacon__target[aria-expanded=true] circle {
+  animation: none;
+}
+.c4p--coachmark-beacon__center {
+  position: absolute;
+  z-index: 6900;
+  block-size: 5rem;
+  inline-size: 5rem;
+  inset-block-start: -1.375rem;
+  inset-inline-start: -1.375rem;
+  pointer-events: none;
+}
+.c4p--coachmark-beacon__center circle {
+  /* stylelint-disable-next-line carbon/motion-duration-use */
+  animation: ripple 2s infinite;
+  fill: var(--cds-support-info, #0043ce);
+  fill-opacity: 0;
+  -webkit-mask-image: none;
+  mask-image: none;
+  stroke: var(--cds-support-info, #0043ce);
+  stroke-opacity: 0;
+  stroke-width: 1px;
+  transition-timing-function: motion exit, productive;
+}
+@media (prefers-reduced-motion) {
+  .c4p--coachmark-beacon__center circle {
+    animation: none;
+  }
+}
+
+@keyframes ripple {
+  0% {
+    fill-opacity: 0;
+    r: 1px;
+    stroke-opacity: 0;
+    transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  }
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}
+@keyframes ring-ripple {
+  0% {
+    fill-opacity: 0;
+    r: 12px;
+    stroke-opacity: 0;
+    transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  }
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}
 .c4p--coachmark {
   position: relative;
 }
 
+.c4p--coachmark__next.c4p--coachmark__next--floating span:has(> div > .c4p--coachmark__next--content-header--drag-icon) {
+  margin-inline-end: auto;
+}
+
 /* stylelint-disable carbon/layout-use */
 /* stylelint-disable carbon/motion-easing-use */
 /* stylelint-disable max-nesting-depth */
@@ -25845,6 +26162,14 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   display: flex;
 }
 
+.c4p--condition-builder__visible {
+  visibility: visible;
+}
+
+.c4p--condition-builder__hidden {
+  visibility: hidden;
+}
+
 .c4p--condition-builder__condition-wrapper {
   display: flex;
   flex-flow: row wrap;