@carbon/ibm-products 2.95.0 → 2.96.0

package/css/index-full-carbon.css

@@ -101,17 +101,13 @@
 }
 
 .c4p--about-modal .c4p--about-modal__links-container a + a {
-  position: relative;
-  margin-inline-start: 1rem;
+  border-inline-start: 1px solid var(--cds-border-strong-01, #8d8d8d);
+  margin-inline-start: 0.75rem;
+  padding-inline-start: 0.75rem;
 }
-.c4p--about-modal .c4p--about-modal__links-container a + a::before {
-  position: absolute;
-  background-color: var(--cds-border-strong-01, #8d8d8d);
-  block-size: 1lh;
-  content: "";
-  inline-size: 1px;
-  inset-block-start: 0;
-  inset-inline-start: -0.5rem;
+
+.c4p--about-modal .c4p--about-modal__links-container a {
+  margin-block-end: 0.5rem;
 }
 
 .c4p--about-modal .c4p--about-modal__content,
@@ -128,6 +124,14 @@
   margin-block-start: 1rem;
 }
 
+.c4p--about-modal__links-container + .c4p--about-modal__copyright-text {
+  margin-block-start: 0.5rem;
+}
+
+.c4p--about-modal__links-container + .c4p--about-modal__content {
+  margin-block-start: 1rem;
+}
+
 p.c4p--about-modal__content:first-child,
 p.c4p--about-modal__copyright-text:first-child {
   margin-block-start: 2rem;
@@ -1773,9 +1777,10 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--card-next__header {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
+  display: grid;
+  column-gap: 1rem;
+  grid-template-columns: auto 1fr;
+  row-gap: 0;
 }
 
 .c4p--card-next__body {
@@ -1830,128 +1835,142 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--card-next__header-media {
   display: flex;
-  flex-shrink: 0;
   align-items: flex-start;
   justify-content: flex-start;
-  block-size: auto;
-  inline-size: auto;
-  margin-block-end: 1rem;
-  margin-block-start: 1rem;
-  margin-inline-end: 1rem;
-  margin-inline-start: 1rem;
+  grid-column: 1/-1;
+  margin-block: 1rem;
+  margin-inline: 1rem;
   max-block-size: 4rem;
 }
 
-.c4p--card-next__header > .c4p--card-next__header-media:not(:first-child) {
-  margin-inline-start: 1rem;
+.c4p--card-next__media {
+  inline-size: 100%;
 }
 
-.c4p--card-next__header:has(> .c4p--card-next__header-media:first-child + .c4p--card-next__actions) > .c4p--card-next__header-media:first-child {
-  margin-inline-end: 0;
+.c4p--card-next--horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 }
-.c4p--card-next__header:has(> .c4p--card-next__header-media:first-child + .c4p--card-next__actions) > .c4p--card-next__actions {
-  margin-inline-start: auto;
+
+.c4p--card-next__media--horizontal {
+  overflow: hidden;
+  flex-basis: var(--c4p--card-next--media-width, 33.33%);
+  flex-shrink: 0;
+  align-self: stretch;
 }
 
-.c4p--card-next__media {
-  inline-size: 100%;
+.c4p--card-next--horizontal > .c4p--card-next__content {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+.c4p--card-next--horizontal > .c4p--card-next__content > .c4p--card-next__body {
+  flex: 1 0 auto;
+}
+
+.c4p--card-next--horizontal > .c4p--card-next__content > .c4p--card-next__footer {
+  margin-block-start: auto;
 }
 
-.c4p--card-next__label {
+.c4p--card-next__title > .c4p--card-next__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);
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
   color: var(--cds-text-secondary, #525252);
-  margin-block-start: 1rem;
-  margin-inline: 1rem;
 }
+
 .c4p--card-next__label--truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c4p--card-next__title-content > .c4p--card-next__label {
-  margin-inline: 0;
+.c4p--card-next__label--truncate-multi {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--c4p--card-next--label-line-clamp);
+  text-overflow: ellipsis;
 }
 
 .c4p--card-next__title {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
   color: var(--cds-text-primary, #161616);
+  gap: 0.125rem;
   margin-inline: 1rem;
+  min-inline-size: 0;
 }
-.c4p--card-next__title--truncate {
+
+.c4p--card-next__title-text-row {
+  display: block;
+}
+
+.c4p--card-next__title-text-row--truncate {
   overflow: hidden;
+  max-inline-size: var(--c4p--card-next--title-max-width, 100%);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.c4p--card-next__title--truncate-multi {
+
+.c4p--card-next__title-text-row--truncate-multi {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--c4p--card-next--title-line-clamp);
+  max-inline-size: var(--c4p--card-next--title-max-width, 100%);
   text-overflow: ellipsis;
 }
 
-.c4p--card-next__title-content > .c4p--card-next__title {
-  margin-inline: 0;
-}
-
 .c4p--card-next__title-media {
   display: flex;
   flex-shrink: 0;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
+  grid-column: 1;
   margin-block-start: 1rem;
   margin-inline-start: 1rem;
   max-block-size: 4rem;
 }
 
-.c4p--card-next__header-content {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 1rem;
-  min-inline-size: 0;
-}
-
-.c4p--card-next__title-content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-inline-size: 0;
-  padding-inline-end: 1rem;
+.c4p--card-next__header:has(> .c4p--card-next__title-media) > .c4p--card-next__title {
+  grid-column: 2;
+  margin-inline-start: 0;
 }
 
-.c4p--card-next--expressive .c4p--card-next__title {
+.c4p--card-next--expressive .c4p--card-next__title-text-row {
   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--card-next--productive .c4p--card-next__title {
+.c4p--card-next--productive .c4p--card-next__title-text-row {
   font-size: var(--cds-heading-compact-02-font-size, 1rem);
   font-weight: var(--cds-heading-compact-02-font-weight, 600);
   line-height: var(--cds-heading-compact-02-line-height, 1.375);
   letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
 }
 
-.c4p--card-next__title--with-start-icon {
+.c4p--card-next__title-text-row--with-start-icon {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
 }
 
-.c4p--card-next__title--with-end-icon {
+.c4p--card-next__title-text-row--with-end-icon {
   display: block;
 }
 
 .c4p--card-next__title-start-icon {
   display: flex;
   flex-shrink: 0;
-  margin-block: 0.125rem;
+  margin-block-start: 0.125rem;
 }
 
 .c4p--card-next__title-end-icon {
@@ -1961,36 +1980,30 @@ button.c4p--add-select__global-filter-toggle--open {
   vertical-align: middle;
 }
 
-.c4p--card-next__header > .c4p--card-next__title:first-child,
-.c4p--card-next__header > .c4p--card-next__header-media:first-child + .c4p--card-next__title,
-.c4p--card-next__header > .c4p--card-next__media:first-child + .c4p--card-next__title,
-.c4p--card-next__title-content > .c4p--card-next__title:first-child {
-  margin-block-start: 1rem;
-}
-
-.c4p--card-next__header > .c4p--card-next__title:last-child,
-.c4p--card-next__title-content > .c4p--card-next__title:last-child,
-.c4p--card-next__title:not(:has(+ .c4p--card-next__caption)) {
-  margin-block-end: 1rem;
+.c4p--card-next__header > .c4p--card-next__title {
+  margin-block: 1rem;
 }
 
-.c4p--card-next__caption {
+.c4p--card-next__title > .c4p--card-next__description {
   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);
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
   color: var(--cds-text-secondary, #525252);
-  margin-block-end: 1rem;
-  margin-inline: 1rem;
 }
-.c4p--card-next__caption--truncate {
+
+.c4p--card-next__description--truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c4p--card-next__title-content > .c4p--card-next__caption {
-  margin-inline: 0;
+.c4p--card-next__description--truncate-multi {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--c4p--card-next--description-line-clamp);
+  text-overflow: ellipsis;
 }
 
 .c4p--card-next__actions {
@@ -2006,10 +2019,6 @@ button.c4p--add-select__global-filter-toggle--open {
   max-inline-size: 50%;
 }
 
-.c4p--card-next__header:has(> .c4p--card-next__header-media:first-child) .c4p--card-next__actions {
-  margin-block-end: 2rem;
-}
-
 .c4p--card-next__action {
   display: inline-flex;
 }
@@ -2046,11 +2055,11 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-inline-end: 10rem;
 }
 
-.c4p--card-next--has-ai-label .c4p--card-next__caption {
+.c4p--card-next--has-ai-label .c4p--card-next__description {
   padding-inline-end: 3rem;
 }
 
-.c4p--card-next--has-ai-label:has(.c4p--card-next__actions) .c4p--card-next__caption {
+.c4p--card-next--has-ai-label:has(.c4p--card-next__actions) .c4p--card-next__description {
   padding-inline-end: 10rem;
 }
 
@@ -2058,10 +2067,6 @@ button.c4p--add-select__global-filter-toggle--open {
   inset-inline-end: 2.5rem;
 }
 
-.c4p--card-next--has-ai-label .c4p--card-next__header > .c4p--card-next__title:not(:has(+ .c4p--card-next__caption)) {
-  margin-block-end: 1rem;
-}
-
 .c4p--card-next__clickable.c4p--card-next--has-ai-label::before {
   background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) 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-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
   position: absolute;
@@ -7634,7 +7639,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--page-header__next .c4p--page-header__breadcrumb-bar {
   position: sticky;
-  z-index: 1;
+  z-index: 2;
   background-color: var(--cds-layer);
   block-size: 2.5rem;
   /* stylelint-disable-next-line carbon/layout-use */