@carbon/ibmdotcom-styles 2.22.0 → 2.24.0

package/dist/ibm-dotcom-styles.css

@@ -5798,10 +5798,6 @@ 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 {
@@ -6601,6 +6597,12 @@ 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
@@ -12641,19 +12643,16 @@ screen and (prefers-contrast) {
     grid-template-columns: repeat(var(--c4d--card-group--cards-in-row),1fr)
   }
 }
+@media (max-width:41.98rem) {
+  :host(c4d-card-group):not(.is-full-width-template) {
+    padding-inline: 1rem
+  }
+}
 :host(c4d-card-group[with-card-in-card][grid-mode]) {
   -webkit-padding-before: 0;
   padding-block-start: 0;
   padding-inline: 1px
 }
-@media (max-width:41.98rem) {
-  :host(c4d-card-group) {
-    padding-inline: 1rem
-  }
-  :host(c4d-card-group[with-card-in-card][grid-mode]) {
-    padding-inline: 1rem
-  }
-}
 :host(c4d-card-group[with-card-in-card][grid-mode=default]) {
   -webkit-padding-before: 2rem;
   padding-block-start: 2rem
@@ -12780,6 +12779,22 @@ screen and (prefers-contrast) {
   -webkit-padding-before: .5rem;
   padding-block-start: .5rem
 }
+@media (min-width:42rem) {
+  :host(c4d-card-group)[grid-mode=narrow] {
+    gap: 0 1rem;
+    -webkit-padding-before: 1rem;
+    padding-block-start: 1rem
+  }
+  :host(c4d-card-group)[grid-mode=default] {
+    gap: 0 2rem;
+    -webkit-padding-before: 1rem;
+    padding-block-start: 1rem
+  }
+  :host(c4d-card-group)[grid-mode=condensed] {
+    -webkit-padding-before: 1rem;
+    padding-block-start: 1rem
+  }
+}
 :host(c4d-card-group-item)[cta-type=video]:focus-within .cds--tile {
   position: relative;
   outline: 0
@@ -12793,6 +12808,55 @@ screen and (prefers-contrast) {
   inset: 0;
   pointer-events: none
 }
+@media (max-width:41.98rem) {
+  :host(c4d-card-group[with-card-in-card][grid-mode]) {
+    padding-inline: 1rem
+  }
+  :host(c4d-card-group).inside-block-cards:not(.media-type-block-cards__logo) {
+    overflow: scroll hidden;
+    inline-size: 100%;
+    max-inline-size: 100vw;
+    overscroll-behavior-x: contain;
+    padding-block: 4px 1rem;
+    -ms-scroll-snap-type: x mandatory;
+    scroll-snap-type: x mandatory;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    gap: 1rem;
+    padding-inline: 1rem
+  }
+  :host(c4d-card-group).inside-block-cards:not(.media-type-block-cards__logo) > ::slotted(a) {
+    display: grid!important;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -ms-flex-preferred-size: clamp(220px,65vw,400px);
+    flex-basis: clamp(220px,65vw,400px);
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    -ms-flex-line-pack: start;
+    align-content: start;
+    block-size: auto;
+    padding-inline: 0;
+    scroll-margin: 1rem;
+    scroll-snap-align: start
+  }
+  :host(c4d-card-group).inside-block-cards:not(.media-type-block-cards__logo) > ::slotted(c4d-card-group-item) {
+    display: grid;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -ms-flex-preferred-size: clamp(220px,65vw,400px);
+    flex-basis: clamp(220px,65vw,400px);
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    -ms-flex-line-pack: start;
+    align-content: start;
+    block-size: auto;
+    padding-inline: 0;
+    scroll-margin: 1rem;
+    scroll-snap-align: start
+  }
+}
 @media print and (min-width:42rem) {
   :host(c4d-card-group-card-link-item)[empty],
   :host(c4d-card-group-item)[empty] {
@@ -12890,20 +12954,6 @@ screen and (prefers-contrast) {
   max-inline-size: 40rem
 }
 @media (min-width:42rem) {
-  :host(c4d-card-group)[grid-mode=narrow] {
-    gap: 0 1rem;
-    -webkit-padding-before: 1rem;
-    padding-block-start: 1rem
-  }
-  :host(c4d-card-group)[grid-mode=default] {
-    gap: 0 2rem;
-    -webkit-padding-before: 1rem;
-    padding-block-start: 1rem
-  }
-  :host(c4d-card-group)[grid-mode=condensed] {
-    -webkit-padding-before: 1rem;
-    padding-block-start: 1rem
-  }
   :host(c4d-card-section-offset) ::slotted(c4d-background-media) {
     position: absolute;
     aspect-ratio: auto;
@@ -33932,7 +33982,8 @@ button.cds--header__search--close.cds--header__action[part=close-button] svg {
   }
   .cds--masthead__l1-dropdown.is-open {
     -webkit-box-shadow: 0 2px 6px 0 var(--cds-shadow,rgba(0,0,0,.3));
-    box-shadow: 0 2px 6px 0 var(--cds-shadow,rgba(0,0,0,.3))
+    box-shadow: 0 2px 6px 0 var(--cds-shadow,rgba(0,0,0,.3));
+    inline-size: 100vw!important
   }
   .cds--masthead__l1-dropdown:not(.is-open) {
     display: none
@@ -45851,15 +45902,6 @@ strong {
   border-block-end: 1px solid var(--cds-layer-accent-01,#e0e0e0);
   color: var(--cds-text-primary,#161616)
 }
-@media (max-width:41.98rem) {
-  .cds--pricing-table-group tr,
-  .cds--structured-list-group tr,
-  :host(c4d-pricing-table-group) tr,
-  :host(c4d-structured-list-group) tr {
-    -webkit-box-shadow: 50vw 0 var(--cds-layer-accent-01,#e0e0e0),100vw 0 var(--cds-layer-accent-01,#e0e0e0),150vw 0 var(--cds-layer-accent-01,#e0e0e0),200vw 0 var(--cds-layer-accent-01,#e0e0e0),250vw 0 var(--cds-layer-accent-01,#e0e0e0),300vw 0 var(--cds-layer-accent-01,#e0e0e0),350vw 0 var(--cds-layer-accent-01,#e0e0e0),400vw 0 var(--cds-layer-accent-01,#e0e0e0),450vw 0 var(--cds-layer-accent-01,#e0e0e0),500vw 0 var(--cds-layer-accent-01,#e0e0e0),550vw 0 var(--cds-layer-accent-01,#e0e0e0),600vw 0 var(--cds-layer-accent-01,#e0e0e0),650vw 0 var(--cds-layer-accent-01,#e0e0e0),700vw 0 var(--cds-layer-accent-01,#e0e0e0),750vw 0 var(--cds-layer-accent-01,#e0e0e0),800vw 0 var(--cds-layer-accent-01,#e0e0e0),850vw 0 var(--cds-layer-accent-01,#e0e0e0),900vw 0 var(--cds-layer-accent-01,#e0e0e0),950vw 0 var(--cds-layer-accent-01,#e0e0e0),1000vw 0 var(--cds-layer-accent-01,#e0e0e0);
-    box-shadow: 50vw 0 var(--cds-layer-accent-01,#e0e0e0),100vw 0 var(--cds-layer-accent-01,#e0e0e0),150vw 0 var(--cds-layer-accent-01,#e0e0e0),200vw 0 var(--cds-layer-accent-01,#e0e0e0),250vw 0 var(--cds-layer-accent-01,#e0e0e0),300vw 0 var(--cds-layer-accent-01,#e0e0e0),350vw 0 var(--cds-layer-accent-01,#e0e0e0),400vw 0 var(--cds-layer-accent-01,#e0e0e0),450vw 0 var(--cds-layer-accent-01,#e0e0e0),500vw 0 var(--cds-layer-accent-01,#e0e0e0),550vw 0 var(--cds-layer-accent-01,#e0e0e0),600vw 0 var(--cds-layer-accent-01,#e0e0e0),650vw 0 var(--cds-layer-accent-01,#e0e0e0),700vw 0 var(--cds-layer-accent-01,#e0e0e0),750vw 0 var(--cds-layer-accent-01,#e0e0e0),800vw 0 var(--cds-layer-accent-01,#e0e0e0),850vw 0 var(--cds-layer-accent-01,#e0e0e0),900vw 0 var(--cds-layer-accent-01,#e0e0e0),950vw 0 var(--cds-layer-accent-01,#e0e0e0),1000vw 0 var(--cds-layer-accent-01,#e0e0e0)
-  }
-}
 .cds--pricing-table-group th,
 .cds--structured-list-group th,
 :host(c4d-pricing-table-group) th,
@@ -46363,6 +46405,127 @@ strong {
   flex: 0 0 var(--width);
   max-inline-size: var(--width)
 }
+@media (max-width:41.98rem) {
+  .cds--pricing-table-group tr,
+  .cds--structured-list-group tr,
+  :host(c4d-pricing-table-group) tr,
+  :host(c4d-structured-list-group) tr {
+    -webkit-box-shadow: 50vw 0 var(--cds-layer-accent-01,#e0e0e0),100vw 0 var(--cds-layer-accent-01,#e0e0e0),150vw 0 var(--cds-layer-accent-01,#e0e0e0),200vw 0 var(--cds-layer-accent-01,#e0e0e0),250vw 0 var(--cds-layer-accent-01,#e0e0e0),300vw 0 var(--cds-layer-accent-01,#e0e0e0),350vw 0 var(--cds-layer-accent-01,#e0e0e0),400vw 0 var(--cds-layer-accent-01,#e0e0e0),450vw 0 var(--cds-layer-accent-01,#e0e0e0),500vw 0 var(--cds-layer-accent-01,#e0e0e0),550vw 0 var(--cds-layer-accent-01,#e0e0e0),600vw 0 var(--cds-layer-accent-01,#e0e0e0),650vw 0 var(--cds-layer-accent-01,#e0e0e0),700vw 0 var(--cds-layer-accent-01,#e0e0e0),750vw 0 var(--cds-layer-accent-01,#e0e0e0),800vw 0 var(--cds-layer-accent-01,#e0e0e0),850vw 0 var(--cds-layer-accent-01,#e0e0e0),900vw 0 var(--cds-layer-accent-01,#e0e0e0),950vw 0 var(--cds-layer-accent-01,#e0e0e0),1000vw 0 var(--cds-layer-accent-01,#e0e0e0);
+    box-shadow: 50vw 0 var(--cds-layer-accent-01,#e0e0e0),100vw 0 var(--cds-layer-accent-01,#e0e0e0),150vw 0 var(--cds-layer-accent-01,#e0e0e0),200vw 0 var(--cds-layer-accent-01,#e0e0e0),250vw 0 var(--cds-layer-accent-01,#e0e0e0),300vw 0 var(--cds-layer-accent-01,#e0e0e0),350vw 0 var(--cds-layer-accent-01,#e0e0e0),400vw 0 var(--cds-layer-accent-01,#e0e0e0),450vw 0 var(--cds-layer-accent-01,#e0e0e0),500vw 0 var(--cds-layer-accent-01,#e0e0e0),550vw 0 var(--cds-layer-accent-01,#e0e0e0),600vw 0 var(--cds-layer-accent-01,#e0e0e0),650vw 0 var(--cds-layer-accent-01,#e0e0e0),700vw 0 var(--cds-layer-accent-01,#e0e0e0),750vw 0 var(--cds-layer-accent-01,#e0e0e0),800vw 0 var(--cds-layer-accent-01,#e0e0e0),850vw 0 var(--cds-layer-accent-01,#e0e0e0),900vw 0 var(--cds-layer-accent-01,#e0e0e0),950vw 0 var(--cds-layer-accent-01,#e0e0e0),1000vw 0 var(--cds-layer-accent-01,#e0e0e0)
+  }
+  .cds--pricing-table-group tr ::slotted(:nth-child(1)),
+  .cds--pricing-table-header-row ::slotted(:nth-child(1)),
+  .cds--pricing-table-row ::slotted(:nth-child(1)),
+  .cds--structured-list-all-rows ::slotted(:nth-child(1)),
+  :host(c4d-pricing-table-group) tr ::slotted(:nth-child(1)),
+  :host(c4d-pricing-table-header-row) ::slotted(:nth-child(1)),
+  :host(c4d-pricing-table-row) ::slotted(:nth-child(1)),
+  :host(c4d-structured-list-group) tr ::slotted(:nth-child(1)),
+  :host(c4d-structured-list-header-row) ::slotted(:nth-child(1)),
+  :host(c4d-structured-list-row) ::slotted(:nth-child(1)) {
+    --width: calc(
+      (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+    )
+  }
+  .cds--pricing-table-group tr ::slotted(:nth-child(2)),
+  .cds--pricing-table-header-row ::slotted(:nth-child(2)),
+  .cds--pricing-table-row ::slotted(:nth-child(2)),
+  .cds--structured-list-all-rows ::slotted(:nth-child(2)),
+  :host(c4d-pricing-table-group) tr ::slotted(:nth-child(2)),
+  :host(c4d-pricing-table-header-row) ::slotted(:nth-child(2)),
+  :host(c4d-pricing-table-row) ::slotted(:nth-child(2)),
+  :host(c4d-structured-list-group) tr ::slotted(:nth-child(2)),
+  :host(c4d-structured-list-header-row) ::slotted(:nth-child(2)),
+  :host(c4d-structured-list-row) ::slotted(:nth-child(2)) {
+    --width: calc(
+      (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+    )
+  }
+  .cds--pricing-table-group tr ::slotted(:nth-child(3)),
+  .cds--pricing-table-header-row ::slotted(:nth-child(3)),
+  .cds--pricing-table-row ::slotted(:nth-child(3)),
+  .cds--structured-list-all-rows ::slotted(:nth-child(3)),
+  :host(c4d-pricing-table-group) tr ::slotted(:nth-child(3)),
+  :host(c4d-pricing-table-header-row) ::slotted(:nth-child(3)),
+  :host(c4d-pricing-table-row) ::slotted(:nth-child(3)),
+  :host(c4d-structured-list-group) tr ::slotted(:nth-child(3)),
+  :host(c4d-structured-list-header-row) ::slotted(:nth-child(3)),
+  :host(c4d-structured-list-row) ::slotted(:nth-child(3)) {
+    --width: calc(
+      (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+    )
+  }
+  .cds--pricing-table-group tr ::slotted(:nth-child(4)),
+  .cds--pricing-table-header-row ::slotted(:nth-child(4)),
+  .cds--pricing-table-row ::slotted(:nth-child(4)),
+  .cds--structured-list-all-rows ::slotted(:nth-child(4)),
+  :host(c4d-pricing-table-group) tr ::slotted(:nth-child(4)),
+  :host(c4d-pricing-table-header-row) ::slotted(:nth-child(4)),
+  :host(c4d-pricing-table-row) ::slotted(:nth-child(4)),
+  :host(c4d-structured-list-group) tr ::slotted(:nth-child(4)),
+  :host(c4d-structured-list-header-row) ::slotted(:nth-child(4)),
+  :host(c4d-structured-list-row) ::slotted(:nth-child(4)) {
+    --width: calc(
+      (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+    )
+  }
+  .cds--pricing-table-group tr ::slotted(:nth-child(5)),
+  .cds--pricing-table-header-row ::slotted(:nth-child(5)),
+  .cds--pricing-table-row ::slotted(:nth-child(5)),
+  .cds--structured-list-all-rows ::slotted(:nth-child(5)),
+  :host(c4d-pricing-table-group) tr ::slotted(:nth-child(5)),
+  :host(c4d-pricing-table-header-row) ::slotted(:nth-child(5)),
+  :host(c4d-pricing-table-row) ::slotted(:nth-child(5)),
+  :host(c4d-structured-list-group) tr ::slotted(:nth-child(5)),
+  :host(c4d-structured-list-header-row) ::slotted(:nth-child(5)),
+  :host(c4d-structured-list-row) ::slotted(:nth-child(5)) {
+    --width: calc(
+      (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+    )
+  }
+  .cds--pricing-table-group tr ::slotted(:nth-child(6)),
+  .cds--pricing-table-header-row ::slotted(:nth-child(6)),
+  .cds--pricing-table-row ::slotted(:nth-child(6)),
+  .cds--structured-list-all-rows ::slotted(:nth-child(6)),
+  :host(c4d-pricing-table-group) tr ::slotted(:nth-child(6)),
+  :host(c4d-pricing-table-header-row) ::slotted(:nth-child(6)),
+  :host(c4d-pricing-table-row) ::slotted(:nth-child(6)),
+  :host(c4d-structured-list-group) tr ::slotted(:nth-child(6)),
+  :host(c4d-structured-list-header-row) ::slotted(:nth-child(6)),
+  :host(c4d-structured-list-row) ::slotted(:nth-child(6)) {
+    --width: calc(
+      (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+    )
+  }
+  .cds--pricing-table-group tr ::slotted(:nth-child(7)),
+  .cds--pricing-table-header-row ::slotted(:nth-child(7)),
+  .cds--pricing-table-row ::slotted(:nth-child(7)),
+  .cds--structured-list-all-rows ::slotted(:nth-child(7)),
+  :host(c4d-pricing-table-group) tr ::slotted(:nth-child(7)),
+  :host(c4d-pricing-table-header-row) ::slotted(:nth-child(7)),
+  :host(c4d-pricing-table-row) ::slotted(:nth-child(7)),
+  :host(c4d-structured-list-group) tr ::slotted(:nth-child(7)),
+  :host(c4d-structured-list-header-row) ::slotted(:nth-child(7)),
+  :host(c4d-structured-list-row) ::slotted(:nth-child(7)) {
+    --width: calc(
+      (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+    )
+  }
+  .cds--pricing-table-group tr ::slotted(:nth-child(8)),
+  .cds--pricing-table-header-row ::slotted(:nth-child(8)),
+  .cds--pricing-table-row ::slotted(:nth-child(8)),
+  .cds--structured-list-all-rows ::slotted(:nth-child(8)),
+  :host(c4d-pricing-table-group) tr ::slotted(:nth-child(8)),
+  :host(c4d-pricing-table-header-row) ::slotted(:nth-child(8)),
+  :host(c4d-pricing-table-row) ::slotted(:nth-child(8)),
+  :host(c4d-structured-list-group) tr ::slotted(:nth-child(8)),
+  :host(c4d-structured-list-header-row) ::slotted(:nth-child(8)),
+  :host(c4d-structured-list-row) ::slotted(:nth-child(8)) {
+    --width: calc(
+      (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+    )
+  }
+}
 @media (min-width:42rem) {
   .cds--pricing-table-group tr ::slotted(:nth-child(8)),
   .cds--pricing-table-header-row ::slotted(:nth-child(8)),
@@ -47195,6 +47358,16 @@ strong {
     inset-inline-start: calc(-1 * .5rem)
   }
 }
+@media (min-width:66rem) {
+  .cds--quote__mark-corner-bracket {
+    inset-inline-start: calc(-1 * 1rem)
+  }
+}
+@media (min-width:99rem) {
+  .cds--quote__mark-corner-bracket {
+    inset-inline-start: calc(-1 * 2rem)
+  }
+}
 .cds--quote__source {
   inline-size: 100%;
   padding-inline: 1rem;
@@ -47284,9 +47457,6 @@ strong {
   }
 }
 @media (min-width:66rem) {
-  .cds--quote__mark-corner-bracket {
-    inset-inline-start: calc(-1 * 1rem)
-  }
   :host(c4d-quote) c4d-hr {
     margin: 1rem .5rem
   }
@@ -47294,6 +47464,56 @@ 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
+  }
+}
+@media (max-width:41.98rem) {
+  .cds-bubble-quote {
+    margin-inline: 16px;
+    max-inline-size: calc(100% - 32px)
+  }
+  .cds-bubble-quote .bubble-pointer {
+    inset-block-start: calc(100% - 1px)
+  }
+  :host([mark-type=bubble-quote]) span.cds--quote__mark[part~=mark--opening] {
+    inset-inline-start: 2.8rem
+  }
+}
+:host([lang=ar]) .cds-bubble-quote .bubble-pointer {
+  inset-inline: auto 2rem;
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1)
+}
 .cds--grid,
 :host(c4d-table-of-contents) {
   margin-inline: auto;
@@ -47307,9 +47527,6 @@ strong {
   }
 }
 @media (min-width:99rem) {
-  .cds--quote__mark-corner-bracket {
-    inset-inline-start: calc(-1 * 2rem)
-  }
   .cds--grid,
   :host(c4d-table-of-contents) {
     padding-inline: 2.5rem