@carbon/ibm-products 2.96.0 → 2.97.0

package/css/index-full-carbon.css

@@ -1072,25 +1072,6 @@ button.c4p--add-select__global-filter-toggle--open {
   gap: 0.5rem;
   margin-inline-start: auto;
 }
-.c4p--add-select__next__selection-summary-item-default {
-  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
-  padding-block: 0.75rem;
-  padding-inline: 1rem;
-}
-.c4p--add-select__next__selection-summary-item-default-title {
-  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);
-  color: var(--cds-text-primary, #161616);
-}
-.c4p--add-select__next__selection-summary-item-default-subtitle {
-  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);
-  color: var(--cds-text-secondary, #525252);
-}
 
 .c4p--add-select__next__selection-summary-item {
   position: relative;
@@ -1217,6 +1198,73 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-inline: 1rem;
 }
 
+@keyframes add-select-item-panel-entrance {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes add-select-item-panel-exit {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+@keyframes add-select-item-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes add-select-item-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.c4p--add-select__next__item-summary-panel {
+  display: none;
+  block-size: 100%;
+  inline-size: 100%;
+  transform: translateX(0);
+  transition-behavior: allow-discrete;
+  transition-duration: 150ms;
+  transition-property: display, opacity, transform;
+}
+.c4p--add-select__next__item-summary-panel--open {
+  display: flex;
+  flex-direction: column;
+  animation: add-select-item-panel-entrance 150ms cubic-bezier(0, 0, 0.38, 0.9) forwards;
+}
+@starting-style {
+  .c4p--add-select__next__item-summary-panel--open {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+@media (prefers-reduced-motion) {
+  .c4p--add-select__next__item-summary-panel--open {
+    animation: add-select-item-panel-entrance-reduced 150ms cubic-bezier(0, 0, 0.38, 0.9) forwards;
+  }
+  @starting-style {
+    .c4p--add-select__next__item-summary-panel--open {
+      opacity: 0;
+      transform: translateX(0);
+    }
+  }
+}
 .c4p--add-select__next__item-summary-panel-header {
   display: flex;
   align-items: center;
@@ -4363,6 +4411,7 @@ button.c4p--add-select__global-filter-toggle--open {
   flex-grow: 1;
   grid-template-columns: 100%;
   grid-template-rows: 1fr auto;
+  min-inline-size: 0;
 }
 .c4p--tearsheet .c4p--tearsheet__main {
   display: flex;
@@ -4370,6 +4419,7 @@ button.c4p--add-select__global-filter-toggle--open {
   background-color: var(--cds-background, #ffffff);
   grid-column: 1/-1;
   grid-row: 1/-1;
+  min-inline-size: 0;
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
   background-color: var(--cds-layer);
@@ -4382,6 +4432,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--tearsheet .c4p--tearsheet__content {
   overflow: auto;
   flex-grow: 1;
+  min-inline-size: 0;
 }
 .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__content, .c4p--tearsheet.c4p--tearsheet--has-ai-label .c4p--tearsheet__content {
   background: linear-gradient(to top, var(--cds-ai-popover-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-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-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-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
@@ -7791,7 +7842,6 @@ button.c4p--add-select__global-filter-toggle--open {
   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;
@@ -7886,9 +7936,11 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--page-header__next .c4p--page-header__tab-bar {
   position: sticky;
   z-index: 1;
+  align-content: center;
   background-color: var(--cds-layer);
   /* stylelint-disable-next-line carbon/layout-use */
   inset-block-start: var(--c4p-page-header-breadcrumb-top);
+  min-block-size: 2.5rem;
 }
 .c4p--page-header__next.c4p--page-header.c4p--page-header--disable-sticky-tab-bar .c4p--page-header__tab-bar {
   position: static;