@carbon/ibmdotcom-styles 2.24.0 → 2.26.0-rc.0

package/dist/ibm-dotcom-styles.css

@@ -5798,6 +5798,10 @@ screen and (prefers-contrast) {
     -webkit-padding-before: 1rem;
     padding-block-start: 1rem
   }
+  .cds--content-layout--with-complementary.cds--content-layout--with-footer ::slotted([slot=complementary]) {
+    -webkit-padding-before: 2rem;
+    padding-block-start: 2rem
+  }
 }
 .c4d--lightbox-media-viewer__container .c4d--lightbox-media-viewer__content__desc,
 :host(c4d-lightbox-media-viewer-body) .c4d--lightbox-media-viewer__content__desc {
@@ -6597,12 +6601,6 @@ screen and (prefers-contrast) {
 .cds--content-layout--with-complementary ::slotted([slot=complementary]) {
   margin-inline: 1rem
 }
-@media (max-width:65.98rem) {
-  .cds--content-layout--with-complementary.cds--content-layout--with-footer ::slotted([slot=complementary]) {
-    -webkit-padding-before: 2rem;
-    padding-block-start: 2rem
-  }
-}
 .cds--content-layout--with-children .c4d--content-block-footer {
   -webkit-padding-before: 2rem;
   padding-block-start: 2rem
@@ -6945,8 +6943,7 @@ screen and (prefers-contrast) {
 }
 :host(c4d-image)[heading] {
   display: block;
-  margin-block: 2rem;
-  max-inline-size: 40rem
+  margin-block: 2rem
 }
 .c4d--image-with-caption__image {
   position: relative;
@@ -7008,7 +7005,8 @@ screen and (prefers-contrast) {
   letter-spacing: var(--cds-body-01-letter-spacing,.16px);
   color: var(--cds-text-helper,#6f6f6f);
   -webkit-margin-before: .5rem;
-  margin-block-start: .5rem
+  margin-block-start: .5rem;
+  max-inline-size: 40rem
 }
 :host(c4d-image[lightbox-contrast=dark]) .c4d--image-with-caption__zoom-button {
   background-color: rgba(255,255,255,.85)
@@ -13003,6 +13001,13 @@ screen and (prefers-contrast) {
     padding-block-start: 2rem
   }
 }
+:host(:dir(rtl)) ::slotted([slot=heading]) {
+  margin-right: 1rem
+}
+:host(:dir(rtl)) ::slotted([slot=action]) {
+  display: block!important;
+  margin-right: 1rem!important
+}
 @media print {
   .cds--card-section-offset__content,
   :host(c4d-card-section-offset) {
@@ -13376,7 +13381,7 @@ screen and (prefers-contrast) {
   display: flex;
   -ms-flex-line-pack: start;
   align-content: flex-start;
-  padding: .75rem 0;
+  padding: .5rem 0;
   gap: .5rem;
   inline-size: 100%
 }
@@ -47383,12 +47388,6 @@ strong {
 .cds--row--narrow .cds--quote__source {
   padding-inline: 0 1rem
 }
-@media (max-width:41.98rem) {
-  .cds--quote__source {
-    -webkit-padding-after: 1rem;
-    padding-block-end: 1rem
-  }
-}
 :host(c4d-quote-source-bottom-copy),
 :host(c4d-quote-source-copy),
 :host(c4d-quote-source-heading) {
@@ -47464,50 +47463,49 @@ strong {
 :host(c4d-quote-link-with-icon) {
   display: inline-block
 }
-.cds-bubble-quote {
-  position: relative;
-  padding: 2.5rem;
-  border: 1px solid #8d8d8d;
-  border-radius: .25rem;
-  background: #f4f4f4;
-  -webkit-margin-after: 3.81rem;
-  margin-block-end: 3.81rem;
-  margin-inline: 0
-}
 .cds-bubble-quote .bubble-pointer {
-  --fill: #f4f4f4;
-  --stroke: #8d8d8d;
-  position: absolute;
-  inset-block-start: 100%;
-  inset-inline-start: 2rem
-}
-.cds-bubble-quote .bubble-pointer-fill {
-  fill: var(--fill)
-}
-.cds-bubble-quote .bubble-pointer-stroke {
-  stroke: var(--stroke)
-}
-:host([mark-type=bubble-quote]) span.cds--quote__mark[part~=mark--opening] {
-  z-index: 1;
-  inset-block-start: 2.5rem;
-  inset-inline-start: .875rem
-}
-@media (max-width:65.98rem) {
-  :host([mark-type=bubble-quote]) span.cds--quote__mark[part~=mark--opening] {
-    inset-inline-start: 1.25rem
-  }
+  display: none
 }
 @media (max-width:41.98rem) {
+  .cds--quote__source {
+    -webkit-padding-after: 1rem;
+    padding-block-end: 1rem
+  }
   .cds-bubble-quote {
+    position: relative;
+    padding: 2.5rem;
+    border: 1px solid #8d8d8d;
+    border-radius: .25rem;
+    background: #f4f4f4;
+    -webkit-margin-after: 3.81rem;
+    margin-block-end: 3.81rem;
     margin-inline: 16px;
     max-inline-size: calc(100% - 32px)
   }
   .cds-bubble-quote .bubble-pointer {
-    inset-block-start: calc(100% - 1px)
+    --fill: #f4f4f4;
+    --stroke: #8d8d8d;
+    position: absolute;
+    display: block;
+    inset-block-start: 100%;
+    inset-inline-start: 2rem
+  }
+  .cds-bubble-quote .bubble-pointer-fill {
+    fill: var(--fill)
+  }
+  .cds-bubble-quote .bubble-pointer-stroke {
+    stroke: var(--stroke)
   }
-  :host([mark-type=bubble-quote]) span.cds--quote__mark[part~=mark--opening] {
+  :host([appearance=bubble-quote]) span.cds--quote__mark[part~=mark--opening],
+  :host([appearance=card]) span.cds--quote__mark[part~=mark--opening] {
+    z-index: 1;
+    inset-block-start: 2.5rem;
     inset-inline-start: 2.8rem
   }
+  :host([appearance=bubble-quote])[mark-type=corner-bracket] span.cds--quote__mark[part~=mark--opening],
+  :host([appearance=card])[mark-type=corner-bracket] span.cds--quote__mark[part~=mark--opening] {
+    inset-inline-start: 2.2rem
+  }
 }
 :host([lang=ar]) .cds-bubble-quote .bubble-pointer {
   inset-inline: auto 2rem;
@@ -47521,6 +47519,10 @@ strong {
   padding-inline: 1rem
 }
 @media (min-width:42rem) {
+  :host([appearance=bubble-quote])[mark-type=corner-bracket] span.cds--quote__mark[part~=mark--opening],
+  :host([appearance=card])[mark-type=corner-bracket] span.cds--quote__mark[part~=mark--opening] {
+    inset-inline-start: -1.125rem
+  }
   .cds--grid,
   :host(c4d-table-of-contents) {
     padding-inline: 2rem