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

package/dist/ibm-dotcom-styles.css

@@ -5613,12 +5613,10 @@ screen and (prefers-contrast) {
   -webkit-margin-start: .5rem;
   margin-inline-start: .5rem
 }
-.c4d--link-with-icon span,
-:host(c4d-callout-link-with-icon) span,
+.cds--link-with-icon span,
 :host(c4d-link-list-item) span,
 :host(c4d-link-list-item-cta) span,
 :host(c4d-link-with-icon) span,
-:host(c4d-quote-link-with-icon) span,
 :host(c4d-text-cta) span {
   -webkit-box-flex: 1;
   -ms-flex: 1;
@@ -5627,18 +5625,14 @@ screen and (prefers-contrast) {
   align-self: center;
   vertical-align: middle
 }
-.c4d--link-with-icon ::slotted(svg[slot=icon]),
-.c4d--link-with-icon svg,
-:host(c4d-callout-link-with-icon) ::slotted(svg[slot=icon]),
-:host(c4d-callout-link-with-icon) svg,
+.cds--link-with-icon ::slotted(svg[slot=icon]),
+.cds--link-with-icon svg,
 :host(c4d-link-list-item) ::slotted(svg[slot=icon]),
 :host(c4d-link-list-item) svg,
 :host(c4d-link-list-item-cta) ::slotted(svg[slot=icon]),
 :host(c4d-link-list-item-cta) svg,
 :host(c4d-link-with-icon) ::slotted(svg[slot=icon]),
 :host(c4d-link-with-icon) svg,
-:host(c4d-quote-link-with-icon) ::slotted(svg[slot=icon]),
-:host(c4d-quote-link-with-icon) svg,
 :host(c4d-text-cta) ::slotted(svg[slot=icon]),
 :host(c4d-text-cta) svg {
   display: inline;
@@ -5648,14 +5642,14 @@ screen and (prefers-contrast) {
   -webkit-margin-start: .5rem;
   margin-inline-start: .5rem
 }
-.c4d--link-with-icon.cds--link--visited,
+.cds--link-with-icon.cds--link--visited,
 :host(c4d-link-list-item).cds--link--visited,
 :host(c4d-link-list-item-cta).cds--link--visited,
 :host(c4d-link-with-icon).cds--link--visited,
 :host(c4d-text-cta).cds--link--visited {
   color: var(--cds-link-visited,#8a3ffc)
 }
-.c4d--link-with-icon.cds--link--disabled:hover,
+.cds--link-with-icon.cds--link--disabled:hover,
 :host(c4d-link-list-item).cds--link--disabled:hover,
 :host(c4d-link-list-item-cta).cds--link--disabled:hover,
 :host(c4d-link-with-icon).cds--link--disabled:hover,
@@ -5665,25 +5659,21 @@ screen and (prefers-contrast) {
   line-height: var(--cds-body-compact-02-line-height,1.375);
   letter-spacing: var(--cds-body-compact-02-letter-spacing,0)
 }
-.c4d--link-with-icon .cds--link--disabled,
-:host(c4d-callout-link-with-icon) .cds--link--disabled,
+.cds--link-with-icon .cds--link--disabled,
 :host(c4d-link-list-item) .cds--link--disabled,
 :host(c4d-link-list-item-cta) .cds--link--disabled,
 :host(c4d-link-with-icon) .cds--link--disabled,
-:host(c4d-quote-link-with-icon) .cds--link--disabled,
 :host(c4d-text-cta) .cds--link--disabled {
   color: var(--cds-text-disabled,rgba(22,22,22,.25))
 }
-.c4d--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
-.c4d--link-with-icon.cds--link-with-icon__icon-left,
-:host(c4d-callout-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
+.cds--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
+.cds--link-with-icon.cds--link-with-icon__icon-left,
 :host(c4d-link-list-item) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-link-list-item).cds--link-with-icon__icon-left,
 :host(c4d-link-list-item-cta) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-link-list-item-cta).cds--link-with-icon__icon-left,
 :host(c4d-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-link-with-icon).cds--link-with-icon__icon-left,
-:host(c4d-quote-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-text-cta) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-text-cta).cds--link-with-icon__icon-left {
   display: -webkit-box;
@@ -5697,12 +5687,10 @@ screen and (prefers-contrast) {
   -ms-flex-pack: end;
   justify-content: flex-end
 }
-.c4d--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
-.c4d--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
-.c4d--link-with-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
-.c4d--link-with-icon.cds--link-with-icon__icon-left svg,
-:host(c4d-callout-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
-:host(c4d-callout-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
+.cds--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
+.cds--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
+.cds--link-with-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
+.cds--link-with-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-link-list-item) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
 :host(c4d-link-list-item) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-link-list-item).cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
@@ -5715,8 +5703,6 @@ screen and (prefers-contrast) {
 :host(c4d-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-link-with-icon).cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
 :host(c4d-link-with-icon).cds--link-with-icon__icon-left svg,
-:host(c4d-quote-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
-:host(c4d-quote-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-text-cta) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
 :host(c4d-text-cta) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-text-cta).cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
@@ -6087,6 +6073,7 @@ 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-cards-item: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;
@@ -9927,15 +9914,15 @@ screen and (prefers-contrast) {
   -webkit-padding-end: 10%;
   padding-inline-end: 10%
 }
-.cds--card .cds--card__copy:not([hidden]),
-:host(c4d-card) .cds--card__copy:not([hidden]),
-:host(c4d-card-cta) .cds--card__copy:not([hidden]),
-:host(c4d-card-group-item) .cds--card .cds--card__copy:not([hidden]),
-:host(c4d-card-group-item) .cds--card__copy:not([hidden]),
-:host(c4d-card-in-card) .cds--card__copy:not([hidden]),
-:host(c4d-content-group-cards-item) .cds--card .cds--card__copy:not([hidden]),
-:host(c4d-content-group-cards-item) .cds--card__copy:not([hidden]),
-:host(c4d-region-item) .cds--link .cds--card__copy:not([hidden]) {
+.cds--card .cds--card__copy,
+:host(c4d-card) .cds--card__copy,
+:host(c4d-card-cta) .cds--card__copy,
+:host(c4d-card-group-item) .cds--card .cds--card__copy,
+:host(c4d-card-group-item) .cds--card__copy,
+:host(c4d-card-in-card) .cds--card__copy,
+:host(c4d-content-group-cards-item) .cds--card .cds--card__copy,
+:host(c4d-content-group-cards-item) .cds--card__copy,
+:host(c4d-region-item) .cds--link .cds--card__copy {
   font-size: var(--cds-body-02-font-size,1rem);
   font-weight: var(--cds-body-02-font-weight,400);
   line-height: var(--cds-body-02-line-height,1.5);
@@ -10073,12 +10060,6 @@ screen and (prefers-contrast) {
 :host(c4d-card-in-card)[pictogram] .cds--card .cds--card__copy {
   margin-block: 2rem 0
 }
-:host(c4d-card)[pictogram] .cds--card .cds--card__copy[hidden],
-:host(c4d-card-cta)[pictogram] .cds--card .cds--card__copy[hidden],
-:host(c4d-card-group-item)[pictogram] .cds--card .cds--card__copy[hidden],
-:host(c4d-card-in-card)[pictogram] .cds--card .cds--card__copy[hidden] {
-  margin: 0
-}
 :host(c4d-card)[pictogram] .cds--card svg,
 :host(c4d-card-cta)[pictogram] .cds--card svg,
 :host(c4d-card-group-item)[pictogram] .cds--card svg,
@@ -10119,6 +10100,21 @@ screen and (prefers-contrast) {
   -ms-flex-align: start;
   align-items: flex-start
 }
+:host(c4d-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__content,
+:host(c4d-card-cta)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__content,
+:host(c4d-card-group-item)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__content,
+:host(c4d-card-in-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__content {
+  -webkit-padding-after: 4rem;
+  padding-block-end: 4rem
+}
+:host(c4d-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__pictogram-wrapper,
+:host(c4d-card-cta)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__pictogram-wrapper,
+:host(c4d-card-group-item)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__pictogram-wrapper,
+:host(c4d-card-in-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__pictogram-wrapper {
+  position: absolute;
+  inset-block-end: 1rem;
+  inset-inline-start: 1rem
+}
 :host(c4d-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__copy,
 :host(c4d-card-cta)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__copy,
 :host(c4d-card-group-item)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__copy,
@@ -10176,6 +10172,12 @@ screen and (prefers-contrast) {
   flex-direction: column;
   gap: 1rem
 }
+:host(c4d-card) .cds--card__copy[hidden],
+:host(c4d-card-cta) .cds--card__copy[hidden],
+:host(c4d-card-group-item) .cds--card__copy[hidden],
+:host(c4d-card-in-card) .cds--card__copy[hidden] {
+  display: none!important
+}
 :host(c4d-card[aspect-ratio="1:1"]) .cds--card__wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -12273,6 +12275,11 @@ screen and (prefers-contrast) {
     grid-template-columns: repeat(2,1fr)
   }
 }
+@media (min-width:66rem) {
+  :host(c4d-card-group) {
+    grid-template-columns: repeat(var(--c4d--card-group--cards-in-row),1fr)
+  }
+}
 :host(c4d-card-group[with-card-in-card][grid-mode]) {
   -webkit-padding-before: 0;
   padding-block-start: 0;
@@ -12293,6 +12300,7 @@ screen and (prefers-contrast) {
   display: grid;
   border: 0;
   grid-row: span 10;
+  grid-template-columns: subgrid;
   grid-template-rows: subgrid;
   -webkit-margin-after: 2rem;
   margin-block-end: 2rem;
@@ -12333,9 +12341,6 @@ screen and (prefers-contrast) {
   block-size: to-rem(240px)
 }
 @media (min-width:66rem) {
-  :host(c4d-card-group) {
-    grid-template-columns: repeat(var(--c4d--card-group--cards-in-row),1fr)
-  }
   :host(c4d-card-group-item) .cds--image {
     position: relative;
     overflow: hidden;
@@ -14311,8 +14316,7 @@ screen and (prefers-contrast) {
   margin-block-end: 3rem
 }
 .cds--content-group-cards__row {
-  display: grid;
-  margin-inline: -1rem
+  display: grid
 }
 .cds--content-group-cards-item__col,
 :host(c4d-content-group-cards-item) {