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

package/css/index.css

@@ -326,7 +326,7 @@
   filter: var(--cds-popover-drop-shadow, drop-shadow(0 0.125rem 0.125rem rgba(0, 0, 0, 0.2)));
 }
 
-.cds--popover--border .cds--popover > .cds--popover-content {
+.cds--popover--border > .cds--popover > .cds--popover-content {
   outline: 1px solid var(--cds-popover-border-color, var(--cds-border-subtle));
   outline-offset: -1px;
 }
@@ -390,7 +390,7 @@
   display: block;
 }
 
-.cds--popover--background-token__background .cds--popover-content {
+.cds--popover--background-token__background > .cds--popover > .cds--popover-content {
   background-color: var(--cds-background, #ffffff);
 }
 
@@ -426,7 +426,7 @@
   content: "";
 }
 
-.cds--popover--background-token__background .cds--popover-caret::after {
+.cds--popover--background-token__background > .cds--popover > .cds--popover-caret::after {
   background-color: var(--cds-background, #ffffff);
 }
 
@@ -2518,7 +2518,6 @@
   position: fixed;
   display: grid;
   background-color: var(--cds-layer);
-  block-size: 100%;
   grid-template-columns: 100%;
   grid-template-rows: auto 1fr auto;
   inline-size: 100%;
@@ -2531,7 +2530,6 @@
 @media (min-width: 42rem) {
   .cds--modal-container {
     position: relative;
-    block-size: auto;
     inline-size: 84%;
     max-block-size: 90%;
   }
@@ -8930,16 +8928,19 @@ a.cds--overflow-menu-options__btn::before {
  */
 .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 */
@@ -8947,8 +8948,13 @@ a.cds--overflow-menu-options__btn::before {
   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 {
@@ -8986,7 +8992,7 @@ a.cds--overflow-menu-options__btn::before {
   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) {
@@ -9004,6 +9010,7 @@ a.cds--overflow-menu-options__btn::before {
   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 {
@@ -9028,17 +9035,10 @@ a.cds--overflow-menu-options__btn::before {
 .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 {
@@ -9050,9 +9050,6 @@ a.cds--overflow-menu-options__btn::before {
 .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;
@@ -9064,8 +9061,8 @@ a.cds--overflow-menu-options__btn::before {
 }
 .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 {
@@ -9092,8 +9089,14 @@ a.cds--overflow-menu-options__btn::before {
   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;
@@ -9104,43 +9107,121 @@ a.cds--overflow-menu-options__btn::before {
     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;
@@ -9159,6 +9240,7 @@ a.cds--overflow-menu-options__btn::before {
   /* 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 {
@@ -9184,19 +9266,21 @@ a.cds--overflow-menu-options__btn::before {
 .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;
@@ -9209,31 +9293,29 @@ a.cds--overflow-menu-options__btn::before {
 .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 {
@@ -9254,6 +9336,9 @@ a.cds--overflow-menu-options__btn::before {
     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;
@@ -9295,7 +9380,6 @@ a.cds--overflow-menu-options__btn::before {
   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;