@carbon/ibmdotcom-styles 2.16.0-rc.1 → 2.16.0-rc.3

package/dist/ibm-dotcom-styles.css

@@ -3883,15 +3883,15 @@ screen and (prefers-contrast) {
   -webkit-padding-before: 0;
   padding-block-start: 0
 }
-.c4d--video-player[background-mode=true] .c4d--video-player__video-container,
-:host(c4d-video-player[background-mode=true]) .c4d--video-player__video-container {
+.c4d--video-player[background-mode] .c4d--video-player__video-container,
+:host(c4d-video-player[background-mode]) .c4d--video-player__video-container {
   padding: 0;
   block-size: 100%
 }
-.c4d--video-player[background-mode=true] .c4d--video-player__video,
-.c4d--video-player[background-mode=true] ::slotted(.c4d--video-player__video),
-:host(c4d-video-player[background-mode=true]) .c4d--video-player__video,
-:host(c4d-video-player[background-mode=true]) ::slotted(.c4d--video-player__video) {
+.c4d--video-player[background-mode] .c4d--video-player__video,
+.c4d--video-player[background-mode] ::slotted(.c4d--video-player__video),
+:host(c4d-video-player[background-mode]) .c4d--video-player__video,
+:host(c4d-video-player[background-mode]) ::slotted(.c4d--video-player__video) {
   aspect-ratio: var(--native-file-aspect-ratio,16/9);
   inset: 50% 0 0 50%;
   min-block-size: 100%;
@@ -6087,7 +6087,8 @@ screen and (prefers-contrast) {
 }
 .cds--content-layout ::slotted([data-autoid^=c4d--card]:not([slot])),
 .cds--content-layout ::slotted([data-autoid^=c4d--tabs-]:not([slot])),
-.cds--content-layout ::slotted(c4d-content-group:not([slot])) {
+.cds--content-layout ::slotted(c4d-content-group:not([slot])),
+.cds--content-layout ::slotted(c4d-cta-block-item-row:not([slot])) {
   -webkit-margin-start: 0;
   margin-inline-start: 0
 }
@@ -9764,6 +9765,26 @@ screen and (prefers-contrast) {
   inset-block-start: 0;
   opacity: 16%
 }
+.cds--card .cds--card,
+:host(c4d-card) .cds--card,
+:host(c4d-card-cta) .cds--card,
+:host(c4d-card-group-item) .cds--card,
+:host(c4d-card-group-item) .cds--card .cds--card,
+:host(c4d-card-in-card) .cds--card,
+:host(c4d-content-group-cards-item) .cds--card,
+:host(c4d-content-group-cards-item) .cds--card .cds--card,
+:host(c4d-region-item) .cds--link .cds--card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between
+}
 .cds--card .cds--card__wrapper,
 :host(c4d-card) .cds--card__wrapper,
 :host(c4d-card-cta) .cds--card__wrapper,
@@ -10155,13 +10176,6 @@ screen and (prefers-contrast) {
   flex-direction: column;
   gap: 1rem
 }
-:host(c4d-card) ::slotted(div),
-:host(c4d-card-cta) ::slotted(div),
-:host(c4d-card-group-item) ::slotted(div),
-:host(c4d-card-in-card) ::slotted(div) {
-  -webkit-margin-start: -.25rem!important;
-  margin-inline-start: -.25rem!important
-}
 :host(c4d-card[aspect-ratio="1:1"]) .cds--card__wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -10544,43 +10558,43 @@ screen and (prefers-contrast) {
   margin-inline-end: .5rem
 }
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--tile {
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--tile {
   border-color: var(--cds-background-inverse,#393939);
   background-color: var(--cds-background-inverse,#393939)
 }
+:host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile:hover .c4d-image,
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile:hover ::slotted(c4d-card-cta-image),
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile:hover ::slotted(c4d-image),
-:host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile:hover c4d-image,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--tile:hover ::slotted(c4d-card-cta-image),
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--tile:hover ::slotted(c4d-image),
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--tile:hover c4d-image {
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--tile:hover .c4d-image,
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--tile:hover ::slotted(c4d-card-cta-image),
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--tile:hover ::slotted(c4d-image) {
   -webkit-filter: brightness(108%);
   filter: brightness(108%)
 }
+:host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile:hover .c4d-image::after,
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile:hover ::slotted(c4d-card-cta-image)::after,
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile:hover ::slotted(c4d-image)::after,
-:host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--tile:hover c4d-image::after,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--tile:hover ::slotted(c4d-card-cta-image)::after,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--tile:hover ::slotted(c4d-image)::after,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--tile:hover c4d-image::after {
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--tile:hover .c4d-image::after,
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--tile:hover ::slotted(c4d-card-cta-image)::after,
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--tile:hover ::slotted(c4d-image)::after {
   display: none
 }
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--card__wrapper:hover,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--card__wrapper:hover {
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card__wrapper:hover {
   background-color: var(--cds-background-inverse-hover,#474747)
 }
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--card__copy,
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--card__heading,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--card__copy,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--card__heading {
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card__copy,
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card__heading {
   color: var(--cds-icon-inverse,#fff)
 }
 :host(c4d-card)[color-scheme=inverse]:not([disabled]) .cds--card__eyebrow,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card .cds--card__eyebrow {
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card__eyebrow {
   color: var(--cds-text-placeholder,rgba(22,22,22,.4))
 }
 :host(c4d-card)[color-scheme=inverse]:not([disabled]):focus-within::after,
-:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]) .cds--card:focus-within::after {
+:host(c4d-card-group-item)[color-scheme=inverse]:not([disabled]):focus-within::after {
   position: absolute;
   z-index: 2;
   border: .125rem solid var(--cds-focus,#0f62fe);
@@ -12297,9 +12311,15 @@ screen and (prefers-contrast) {
 :host(c4d-card-group-item) .cds--card .cds--card__wrapper::before {
   content: revert
 }
+:host(c4d-card-group-item) .cds--card .cds--card__wrapper::after {
+  display: block;
+  aspect-ratio: 16/9;
+  content: "";
+  grid-area: 1/1/-1/-1
+}
 :host(c4d-card-group-item) .cds--card .cds--card__content {
   display: grid;
-  grid-row: span 10;
+  grid-area: 1/1/-1/-1;
   grid-template-rows: subgrid;
   row-gap: 0
 }
@@ -12877,8 +12897,7 @@ screen and (prefers-contrast) {
 }
 :host(c4d-link-list) .c4d--link-list__list--vertical,
 :host(c4d-link-list) .c4d-ce--link-list__list--end {
-  display: grid;
-  grid-auto-rows: 1fr
+  display: grid
 }
 :host(c4d-link-list) .c4d--link-list__list--vertical ::slotted(c4d-link-list-item),
 :host(c4d-link-list) .c4d--link-list__list--vertical ::slotted(c4d-link-list-item-cta),
@@ -12886,7 +12905,8 @@ screen and (prefers-contrast) {
 :host(c4d-link-list) .c4d-ce--link-list__list--end ::slotted(c4d-link-list-item-cta) {
   outline: 0
 }
-:host(c4d-link-list) .c4d--link-list__list--vertical ::slotted(c4d-link-list-item) {
+:host(c4d-link-list) .c4d--link-list__list--vertical ::slotted(c4d-link-list-item),
+:host(c4d-link-list) .c4d--link-list__list--vertical ::slotted(c4d-link-list-item-cta) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex
@@ -12895,7 +12915,9 @@ screen and (prefers-contrast) {
   display: contents
 }
 :host(c4d-link-list) .c4d-ce--link-list__list--split ::slotted(c4d-link-list-item),
-:host(c4d-link-list) .c4d-ce--link-list__list--three-columns ::slotted(c4d-link-list-item) {
+:host(c4d-link-list) .c4d-ce--link-list__list--split ::slotted(c4d-link-list-item-cta),
+:host(c4d-link-list) .c4d-ce--link-list__list--three-columns ::slotted(c4d-link-list-item),
+:host(c4d-link-list) .c4d-ce--link-list__list--three-columns ::slotted(c4d-link-list-item-cta) {
   display: grid;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -12912,10 +12934,6 @@ screen and (prefers-contrast) {
     display: grid;
     grid-column-gap: 2rem
   }
-  :host(c4d-link-list) .c4d-ce--link-list__list--split ::slotted(c4d-link-list-item),
-  :host(c4d-link-list) .c4d-ce--link-list__list--three-columns ::slotted(c4d-link-list-item) {
-    margin-inline: -1rem 0
-  }
   :host(c4d-link-list) .c4d-ce--link-list__list--split {
     grid-template-columns: 1fr 1fr
   }
@@ -12923,12 +12941,21 @@ screen and (prefers-contrast) {
     grid-template-columns: 1fr 1fr 1fr
   }
 }
-:host(c4d-link-list-item) .cds--link {
+:host(c4d-link-list-item) .cds--link,
+:host(c4d-link-list-item-cta) .cds--link {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -ms-flex-line-pack: start;
-  align-content: flex-start
+  align-content: flex-start;
+  padding: .75rem 0;
+  gap: .5rem;
+  inline-size: 100%
 }
 :host(c4d-link-list-item) .cds--link ::slotted(svg[slot=icon]),
-:host(c4d-link-list-item) .cds--link span {
+:host(c4d-link-list-item) .cds--link span,
+:host(c4d-link-list-item-cta) .cds--link ::slotted(svg[slot=icon]),
+:host(c4d-link-list-item-cta) .cds--link span {
   -ms-flex-item-align: start;
   align-self: flex-start
 }
@@ -12945,15 +12972,6 @@ screen and (prefers-contrast) {
 :host(c4d-link-list-heading) .cds--link {
   cursor: pointer
 }
-:host(c4d-link-list-item)[type=default] .cds--link,
-:host(c4d-link-list-item)[type=end] .cds--link,
-:host(c4d-link-list-item-cta)[type=default] .cds--link {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 1rem 0;
-  inline-size: 100%
-}
 .c4d--link-list__list ::slotted(c4d-link-list-item),
 .c4d--link-list__list ::slotted(c4d-link-list-item-cta) {
   display: -webkit-box;
@@ -12984,8 +13002,8 @@ screen and (prefers-contrast) {
   padding-inline-end: 2rem
 }
 .c4d--link-list__list--vertical ::slotted(*) {
-  -webkit-margin-after: 1rem;
-  margin-block-end: 1rem
+  -webkit-margin-after: 0;
+  margin-block-end: 0
 }
 :host(c4d-link-list-item) .cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
 :host(c4d-link-list-item-cta) .cds--link-with-icon__icon-left ::slotted(svg[slot=icon]) {
@@ -13008,10 +13026,6 @@ screen and (prefers-contrast) {
   .cds--content-layout--with-headlines {
     grid-template: "heading heading ." auto "body body ." auto "footer . ." auto/1fr 1fr 1fr
   }
-  .c4d-ce--link-list__list--end ::slotted(c4d-link-list-item),
-  .c4d-ce--link-list__list--end ::slotted(c4d-link-list-item-cta) {
-    margin-inline: -1rem
-  }
   :host(c4d-content-item-row) {
     padding-block: 2rem 4rem
   }
@@ -13568,6 +13582,10 @@ screen and (prefers-contrast) {
   -ms-flex: 1 0 50%;
   flex: 1 0 50%
 }
+:host(c4d-feature-card) .cds--card__image-wrapper,
+:host(c4d-feature-cta) .cds--card__image-wrapper {
+  aspect-ratio: 1/1
+}
 :host(c4d-feature-card) .cds--card__wrapper::after,
 :host(c4d-feature-card) .cds--card__wrapper::before,
 :host(c4d-feature-cta) .cds--card__wrapper::after,
@@ -13722,9 +13740,18 @@ screen and (prefers-contrast) {
 :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading) {
   color: var(--cds-icon-inverse,#fff)
 }
+:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer .c4d-ce--cta__icon,
 :host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
   fill: var(--cds-link-inverse,#78a9ff)
 }
+:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:hover .c4d-ce--cta__icon,
+:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:hover ::slotted(svg[slot=icon]) {
+  fill: var(--cds-link-inverse-hover,#a6c8ff)
+}
+:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:active .c4d-ce--cta__icon,
+:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:active ::slotted(svg[slot=icon]) {
+  fill: var(--cds-link-inverse-active,#f4f4f4)
+}
 :host(c4d-feature-card[size=large]) ::slotted(c4d-feature-card-footer) {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -38775,6 +38802,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 }
 :host(c4d-leadspace) ::slotted([slot=navigation]) {
   z-index: 1;
+  max-inline-size: 40rem;
   -webkit-padding-after: 1rem!important;
   padding-block-end: 1rem!important;
   padding-inline: 1rem!important
@@ -44651,13 +44679,33 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 cds-hr {
   margin-inline: 2rem/-2
 }
+html {
+  font-size: 100%
+}
+body {
+  font-weight: 400;
+  font-family: 'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility
+}
+code {
+  font-family: 'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace
+}
+strong {
+  font-weight: 600
+}
 .cds--nc {
   max-inline-size: 640px
 }
 .cds--nc .cds--checkbox-group,
 .cds--nc p {
   -webkit-margin-after: 1.5rem;
-  margin-block-end: 1.5rem
+  margin-block-end: 1.5rem;
+  font-size: var(--cds-legal-02-font-size,.875rem);
+  font-weight: var(--cds-legal-02-font-weight,400);
+  line-height: var(--cds-legal-02-line-height,1.28572);
+  letter-spacing: var(--cds-legal-02-letter-spacing,.16px)
 }
 .cds--nc a {
   color: var(--cds-link-primary,#0f62fe)
@@ -48651,8 +48699,7 @@ cds-hr {
 }
 .cds--tableofcontents__content {
   -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  padding-block: 1rem 3rem
+  box-sizing: border-box
 }
 .cds--tableofcontents {
   -webkit-margin-before: 2rem;