@carbon/ibm-products-styles 2.75.0 → 2.76.0-rc.0

package/css/index-without-carbon-released-only.css

@@ -3182,16 +3182,19 @@ p.c4p--about-modal__copyright-text:first-child {
  */
 .c4p--tearsheet__next .c4p--tearsheet__next__container {
   align-self: flex-end;
+  border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   block-size: 100%;
   inset-block-start: auto;
-  max-block-size: calc(100% - 3rem);
-  transform: translate3d(0, min(95vh, 500px), 0);
+  max-block-size: calc(100% - var(--tearsheet-vertical-gap, 3rem));
 }
 @media (max-width: 41.98rem) {
-  .c4p--tearsheet__next .c4p--tearsheet__next__container {
+  .c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container {
     max-block-size: none;
   }
 }
+.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container {
+  transform: translate3d(0, min(95vh, 500px), 0);
+}
 .c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container {
   border: 1px solid transparent;
   /* override carbon ai removing background gradient */
@@ -3199,8 +3202,13 @@ p.c4p--about-modal__copyright-text:first-child {
   border-block-end: 0;
   box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
+.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content {
+  position: relative;
+  background: linear-gradient(to top, var(--cds-background, 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-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, 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-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, 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));
+}
 .c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container {
-  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
+  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-block-size 240ms cubic-bezier(0, 0, 0.3, 1);
 }
 @media (min-width: 42rem) {
   .c4p--tearsheet__next.c4p--tearsheet__next--wide .c4p--tearsheet__next__container {
@@ -3238,7 +3246,7 @@ p.c4p--about-modal__copyright-text:first-child {
   display: grid;
   flex-basis: unset;
   gap: 1rem;
-  grid-template-columns: auto minmax(var(--tearsheet-header-title-grid-width, 0), 1fr);
+  grid-template-columns: minmax(auto, 40rem) minmax(var(--tearsheet-header-title-grid-width, 0), 1fr);
   inline-size: calc(100% - var(--tearsheet-header-action-offset));
 }
 @media (max-width: 41.98rem) {
@@ -3256,6 +3264,7 @@ p.c4p--about-modal__copyright-text:first-child {
   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);
+  color: var(--cds-text-secondary, #525252);
   margin-block-end: 0.25rem;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-title {
@@ -3280,17 +3289,10 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet__next .c4p--tearsheet__next__header-title svg {
   flex-shrink: 0;
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__leading-icon {
-  flex-direction: row;
-}
-.c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__leading-icon svg {
+.c4p--tearsheet__next .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start {
   margin-inline-end: 1rem;
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__trailing-icon {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-.c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__trailing-icon svg {
+.c4p--tearsheet__next .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end {
   margin-inline-start: 1rem;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-description {
@@ -3302,9 +3304,6 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet__next .c4p--tearsheet__next__header--no-close-icon {
   display: none;
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__header-content {
-  max-inline-size: 40rem;
-}
 .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar {
   position: relative;
   display: flex;
@@ -3316,8 +3315,8 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar .c4p--tearsheet__next__scroller-container {
   position: absolute;
-  inset-inline-end: -2rem;
-  margin-inline-end: 1px;
+  inset-block-end: 0.125rem;
+  inset-inline-end: calc(-2rem + 0.125rem);
 }
 @media (max-width: 41.98rem) {
   .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar .c4p--tearsheet__next__scroller-container {
@@ -3344,8 +3343,14 @@ p.c4p--about-modal__copyright-text:first-child {
   inline-size: 100%;
   margin-block-start: -14px;
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > *:not([hidden]) + *:not([hidden]) {
-  padding-inline-start: 0.5rem;
+.c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > *.c4p--tearsheet__next__header-action-item:not([data-hidden=true]) {
+  margin-inline-end: 0.5rem; /* space between visible items */
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions {
+  /* Remove margin on the last visible item */
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > *.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2) {
+  margin-inline-end: 0;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > * {
   flex-shrink: 0;
@@ -3356,43 +3361,121 @@ p.c4p--about-modal__copyright-text:first-child {
     margin-inline-end: 0;
   }
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__header {
-  opacity: 1;
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header {
+  padding-inline: 1rem;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions {
+  display: none;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-title {
+  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--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions {
+  justify-content: flex-start;
+  margin-inline-end: 0;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body {
+  grid-template-columns: 1fr 0;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush) {
+  padding-inline: 1rem;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
-.cds--modal-close-button),
-.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper) {
+.cds--modal-close-button,
+.excludeFromCollapse) {
   overflow: hidden;
   max-block-size: 50vh;
   opacity: 1;
-  transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
+  transition: max-block-size 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1), margin 240ms cubic-bezier(0, 0, 0.3, 1), padding 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-actions,
+.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content *:not(.c4p--tearsheet__next__content__title-wrapper,
+.c4p--tearsheet__next__header-label) {
+  opacity: 1;
+  transition: all 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed {
+  padding-block-start: 0.75rem;
+  transition: padding 240ms cubic-bezier(0, 0, 0.3, 1);
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
 .cds--modal-close-button,
 .excludeFromCollapse),
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions > *:not(.c4p--tearsheet__next__content__header-actions),
-.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper),
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper),
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
 .cds--modal-close-button,
-.excludeFromCollapse) * {
+.excludeFromCollapse) *,
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper) * {
   overflow: hidden;
   padding: 0;
   margin: 0;
   max-block-size: 0;
-  min-block-size: 0;
   opacity: 0;
-  transition: all 240ms ease;
-  visibility: hidden;
+  pointer-events: none;
+  transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title {
+  font-size: var(--cds-label-02-font-size, 0.875rem);
+  font-weight: var(--cds-label-02-font-weight, 400);
+  line-height: var(--cds-label-02-line-height, 1.28572);
+  letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
+  align-items: center;
+  margin-block-start: 0.25rem;
+  transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title > span {
+  display: flex;
+  align-items: center;
+  block-size: 1.5rem;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content {
+  align-self: center;
+  margin-block-end: 0;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions {
+  margin-block-start: -0.125rem;
+}
+@media (max-width: 41.98rem) {
+  .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions {
+    display: none;
+  }
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,
-.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions .c4p--tearsheet__next__header-title {
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title {
   margin-block: 0;
-  transition: all 240ms ease;
+  transition: margin-block 240ms ease;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper {
+  min-block-size: 2.5rem;
+  padding-block-end: 0.75rem;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar::before {
+  position: absolute;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.12);
+  block-size: 1px;
+  content: "";
+  inline-size: 100vw;
+  inset-block-start: -0.25rem;
+  inset-inline-start: 50%;
+  pointer-events: none;
+  transform: translateX(-50%);
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__body-layout {
   display: grid;
@@ -3411,6 +3494,7 @@ p.c4p--about-modal__copyright-text:first-child {
   /* Assign components to their named grid areas */
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__influencer {
+  border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   grid-area: influencer;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__body {
@@ -3436,19 +3520,21 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet__next .c4p--tearsheet__next__main-content,
 .c4p--tearsheet__next .c4p--tearsheet__next__summary-content {
   overflow: auto;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),
+.c4p--tearsheet__next .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),
+.c4p--tearsheet__next .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush) {
   padding-inline: 2rem;
 }
 @media (max-width: 41.98rem) {
-  .c4p--tearsheet__next .c4p--tearsheet__next__influencer,
-  .c4p--tearsheet__next .c4p--tearsheet__next__main-content,
-  .c4p--tearsheet__next .c4p--tearsheet__next__summary-content {
+  .c4p--tearsheet__next .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),
+  .c4p--tearsheet__next .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),
+  .c4p--tearsheet__next .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush) {
     padding-inline: 1rem;
   }
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__main-content {
   position: relative;
-  background: linear-gradient(to top, var(--cds-background, 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-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, 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-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, 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));
 }
 .c4p--tearsheet__next .c4p--side-panel {
   position: absolute;
@@ -3461,31 +3547,29 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet__next .c4p--side-panel .c4p--side-panel__header {
   min-block-size: 0;
 }
-
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header {
-  padding-inline: 1rem;
-}
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-title {
-  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--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible {
+  --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  --overlay-alpha: 0.5;
+  z-index: calc(9000 - var(--stack-depth, 0));
+  background-color: initial;
 }
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions {
-  justify-content: flex-start;
-  margin-inline-end: 0;
+.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible::before {
+  position: absolute;
+  display: block;
+  background: var(--overlay-color);
+  content: "";
+  inset: 0;
+  opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);
+  transition: background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
 }
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body {
-  grid-template-columns: 1fr 0;
+@media (prefers-reduced-motion: reduce) {
+  .c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible::before {
+    transition: none;
+  }
 }
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer,
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content,
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content {
-  padding-inline: 1rem;
+.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container {
+  max-block-size: calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));
+  transform: scaleX(var(--scale-factor));
 }
 
 .c4p--tearsheet.c4p--tearsheet {
@@ -3506,6 +3590,9 @@ p.c4p--about-modal__copyright-text:first-child {
     transition: none;
   }
 }
+.c4p--tearsheet.c4p--tearsheet:not(.is-visible).c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
+  transform: translate3d(0, min(95vh, 500px), 0);
+}
 .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet {
   /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
   background: initial;
@@ -3547,7 +3634,6 @@ p.c4p--about-modal__copyright-text:first-child {
   block-size: 100%;
   inset-block-start: auto;
   max-block-size: calc(100% - 3rem);
-  transform: translate3d(0, min(95vh, 500px), 0);
 }
 .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-ai-label .c4p--tearsheet__container {
   border: 1px solid transparent;