@carbon/ibmdotcom-styles 2.13.1-rc.0 → 2.14.0-rc.0

package/dist/ibm-dotcom-styles.css

@@ -9896,9 +9896,10 @@ screen and (prefers-contrast) {
 :host(c4d-content-group-cards-item) .cds--card__heading,
 :host(c4d-region-item) .cds--link .cds--card__copy,
 :host(c4d-region-item) .cds--link .cds--card__heading {
-  inline-size: 90%;
+  color: var(--cds-text-primary,#161616);
   max-inline-size: to-rem(640px);
-  color: var(--cds-text-primary,#161616)
+  -webkit-padding-end: 10%;
+  padding-inline-end: 10%
 }
 .cds--card .cds--card__copy:not([hidden]),
 :host(c4d-card) .cds--card__copy:not([hidden]),
@@ -9983,7 +9984,8 @@ screen and (prefers-contrast) {
   :host(c4d-content-group-cards-item) .cds--card__heading,
   :host(c4d-region-item) .cds--link .cds--card__copy,
   :host(c4d-region-item) .cds--link .cds--card__heading {
-    inline-size: calc(100% - 2rem)
+    -webkit-padding-end: 2rem;
+    padding-inline-end: 2rem
   }
   :host(c4d-card) .cds--card__pictogram ::slotted(c4d-card-heading),
   :host(c4d-card-cta) .cds--card__pictogram ::slotted(c4d-card-heading),
@@ -9999,6 +10001,14 @@ screen and (prefers-contrast) {
     padding-inline-start: 0
   }
 }
+:host(c4d-card) .cds--card__pictogram-wrapper,
+:host(c4d-card-cta) .cds--card__pictogram-wrapper,
+:host(c4d-card-group-item) .cds--card__pictogram-wrapper,
+:host(c4d-card-in-card) .cds--card__pictogram-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex
+}
 :host(c4d-card)[pictogram] .cds--card ::slotted(c4d-card-heading),
 :host(c4d-card-cta)[pictogram] .cds--card ::slotted(c4d-card-heading),
 :host(c4d-card-group-item)[pictogram] .cds--card ::slotted(c4d-card-heading),
@@ -10339,6 +10349,7 @@ screen and (prefers-contrast) {
 }
 .cds--card__eyebrow,
 :host(c4d-card-eyebrow) {
+  display: block;
   inline-size: 90%;
   max-inline-size: to-rem(640px);
   font-size: var(--cds-label-02-font-size,.875rem);
@@ -10566,6 +10577,7 @@ screen and (prefers-contrast) {
 }
 :host(c4d-card-heading),
 :host(c4d-card-link-heading) {
+  display: block;
   inline-size: 90%;
   max-inline-size: to-rem(640px);
   color: var(--cds-text-primary,#161616);
@@ -11360,7 +11372,7 @@ screen and (prefers-contrast) {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #0043ce;
+  --cds-highlight: #002d9c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -11826,7 +11838,7 @@ screen and (prefers-contrast) {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -12245,11 +12257,43 @@ screen and (prefers-contrast) {
   -webkit-padding-before: 1rem;
   padding-block-start: 1rem
 }
+:host(c4d-card-group-item) {
+  display: contents
+}
 :host(c4d-card-group-item) .cds--card {
+  display: grid;
   border: 0;
+  grid-row: span 10;
+  grid-template-rows: subgrid;
+  -webkit-margin-after: 2rem;
+  margin-block-end: 2rem;
   outline: 1px solid var(--cds-border-tile-01,#c6c6c6);
   outline-offset: 0
 }
+:host(c4d-card-group-item) .cds--card .cds--card__wrapper {
+  display: grid;
+  -webkit-box-pack: revert;
+  -ms-flex-pack: revert;
+  justify-content: revert;
+  grid-row: span 10;
+  grid-template-rows: subgrid
+}
+:host(c4d-card-group-item) .cds--card .cds--card__wrapper::after,
+:host(c4d-card-group-item) .cds--card .cds--card__wrapper::before {
+  content: revert
+}
+:host(c4d-card-group-item) .cds--card .cds--card__content {
+  display: grid;
+  grid-row: span 10;
+  grid-template-rows: subgrid;
+  row-gap: 0
+}
+:host(c4d-card-group-item) .cds--card .cds--card__copy {
+  display: grid;
+  grid-row: span 2;
+  grid-template-rows: subgrid;
+  row-gap: 0
+}
 :host(c4d-card-group-item) .cds--image__img {
   block-size: to-rem(240px)
 }
@@ -12274,6 +12318,22 @@ screen and (prefers-contrast) {
 :host(c4d-card-group-item):focus-within .cds--card {
   outline-offset: -1px
 }
+:host(c4d-card-group-item)[grid-mode=narrow] .cds--card {
+  -webkit-margin-after: 1rem;
+  margin-block-end: 1rem
+}
+:host(c4d-card-group-item)[grid-mode=condensed] .cds--card {
+  -webkit-margin-after: 0;
+  margin-block-end: 0
+}
+:host(c4d-card-group-item) ::slotted(c4d-card-footer) {
+  display: revert;
+  -webkit-margin-before: revert;
+  margin-block-start: revert
+}
+:host(c4d-card-group-item) ::slotted(:not([slot]):has(cds-tag,c4d-tag)) {
+  grid-row: -1
+}
 :host(c4d-card-group-item[href=""]) .cds--card {
   outline: 0
 }
@@ -12293,12 +12353,12 @@ screen and (prefers-contrast) {
   margin-block-start: 0
 }
 :host(c4d-card-group)[grid-mode=narrow] {
-  gap: .5rem;
+  gap: 0 .5rem;
   -webkit-padding-before: .5rem;
   padding-block-start: .5rem
 }
 :host(c4d-card-group)[grid-mode=default] {
-  gap: 2rem;
+  gap: 0 2rem;
   -webkit-padding-before: .5rem;
   padding-block-start: .5rem
 }
@@ -12418,12 +12478,12 @@ screen and (prefers-contrast) {
 }
 @media (min-width:42rem) {
   :host(c4d-card-group)[grid-mode=narrow] {
-    gap: 1rem;
+    gap: 0 1rem;
     -webkit-padding-before: 1rem;
     padding-block-start: 1rem
   }
   :host(c4d-card-group)[grid-mode=default] {
-    gap: 2rem;
+    gap: 0 2rem;
     -webkit-padding-before: 1rem;
     padding-block-start: 1rem
   }
@@ -14253,7 +14313,7 @@ screen and (prefers-contrast) {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -15704,7 +15764,7 @@ div.cds--content-group-pictograms .cds--content-group__title {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #0043ce;
+  --cds-highlight: #002d9c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -16177,7 +16237,7 @@ div.cds--content-group-pictograms .cds--content-group__title {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -19811,7 +19871,7 @@ optgroup.cds--select-optgroup:disabled {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -20328,7 +20388,7 @@ optgroup.cds--select-optgroup:disabled {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -21313,7 +21373,7 @@ optgroup.cds--select-optgroup:disabled {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -21861,7 +21921,7 @@ optgroup.cds--select-optgroup:disabled {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -22748,7 +22808,7 @@ nav.cds--footer-nav__locale-button--disabled {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -23359,7 +23419,7 @@ nav.cds--footer-nav__locale-button--disabled {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -25943,7 +26003,7 @@ screen and (prefers-contrast) {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -26425,7 +26485,7 @@ screen and (prefers-contrast) {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -26908,7 +26968,7 @@ screen and (prefers-contrast) {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -27631,7 +27691,7 @@ screen and (prefers-contrast) {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -37282,6 +37342,65 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   -webkit-margin-before: 0;
   margin-block-start: 0
 }
+:host(c4d-filter-group),
+:host(cds-accordion),
+:host(cds-accordion-skeleton) {
+  --cds-layout-size-height-xs: 1.5rem;
+  --cds-layout-size-height-sm: 2rem;
+  --cds-layout-size-height-md: 2.5rem;
+  --cds-layout-size-height-lg: 3rem;
+  --cds-layout-size-height-xl: 4rem;
+  --cds-layout-size-height-2xl: 5rem;
+  --cds-layout-size-height-min: 0px;
+  --cds-layout-size-height-max: 999999999px;
+  --cds-layout-density-padding-inline-condensed: 0.5rem;
+  --cds-layout-density-padding-inline-normal: 1rem;
+  --cds-layout-density-padding-inline-min: 0px;
+  --cds-layout-density-padding-inline-max: 999999999px
+}
+:host(c4d-filter-group-item),
+:host(cds-accordion-item),
+:host(cds-accordion-item-skeleton) {
+  display: block;
+  outline: 0
+}
+:host(c4d-filter-group-item) .cds--accordion__content ::slotted(p),
+:host(cds-accordion-item) .cds--accordion__content ::slotted(p),
+:host(cds-accordion-item-skeleton) .cds--accordion__content ::slotted(p) {
+  font-size: var(--cds-body-01-font-size,.875rem);
+  font-weight: var(--cds-body-01-font-weight,400);
+  line-height: var(--cds-body-01-line-height,1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing,.16px);
+  margin: 0
+}
+:host(cds-accordion-item-skeleton[size=sm]) button,
+:host(cds-accordion-item[size=sm]) button {
+  min-block-size: var(--cds-layout-size-height-context)
+}
+:host(cds-accordion-item-skeleton[size=lg]) button,
+:host(cds-accordion-item[size=lg]) button {
+  min-block-size: var(--cds-layout-size-height-context)
+}
+:host(cds-accordion-item[open]:not([disabled])) .cds--accordion__content {
+  -webkit-padding-end: 1rem;
+  padding-inline-end: 1rem
+}
+:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--sm {
+  -webkit-padding-end: 3rem;
+  padding-inline-end: 3rem
+}
+:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--md {
+  -webkit-padding-end: 25%;
+  padding-inline-end: 25%
+}
+:host(cds-accordion-item-skeleton) .cds--accordion__heading,
+:host(cds-accordion-skeleton) .cds--accordion__heading {
+  cursor: default
+}
+:host(cds-accordion-item-skeleton) .cds--accordion__heading:hover::before,
+:host(cds-accordion-skeleton) .cds--accordion__heading:hover::before {
+  background: 0 0
+}
 :host(c4d-filter-panel-modal[open]),
 :host(cds-modal[open]) {
   opacity: 1;
@@ -37399,65 +37518,6 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 :host(cds-modal-header[close-button]) ::slotted(cds-slug) {
   inset-inline-end: 3rem
 }
-:host(c4d-filter-group),
-:host(cds-accordion),
-:host(cds-accordion-skeleton) {
-  --cds-layout-size-height-xs: 1.5rem;
-  --cds-layout-size-height-sm: 2rem;
-  --cds-layout-size-height-md: 2.5rem;
-  --cds-layout-size-height-lg: 3rem;
-  --cds-layout-size-height-xl: 4rem;
-  --cds-layout-size-height-2xl: 5rem;
-  --cds-layout-size-height-min: 0px;
-  --cds-layout-size-height-max: 999999999px;
-  --cds-layout-density-padding-inline-condensed: 0.5rem;
-  --cds-layout-density-padding-inline-normal: 1rem;
-  --cds-layout-density-padding-inline-min: 0px;
-  --cds-layout-density-padding-inline-max: 999999999px
-}
-:host(c4d-filter-group-item),
-:host(cds-accordion-item),
-:host(cds-accordion-item-skeleton) {
-  display: block;
-  outline: 0
-}
-:host(c4d-filter-group-item) .cds--accordion__content ::slotted(p),
-:host(cds-accordion-item) .cds--accordion__content ::slotted(p),
-:host(cds-accordion-item-skeleton) .cds--accordion__content ::slotted(p) {
-  font-size: var(--cds-body-01-font-size,.875rem);
-  font-weight: var(--cds-body-01-font-weight,400);
-  line-height: var(--cds-body-01-line-height,1.42857);
-  letter-spacing: var(--cds-body-01-letter-spacing,.16px);
-  margin: 0
-}
-:host(cds-accordion-item-skeleton[size=sm]) button,
-:host(cds-accordion-item[size=sm]) button {
-  min-block-size: var(--cds-layout-size-height-context)
-}
-:host(cds-accordion-item-skeleton[size=lg]) button,
-:host(cds-accordion-item[size=lg]) button {
-  min-block-size: var(--cds-layout-size-height-context)
-}
-:host(cds-accordion-item[open]:not([disabled])) .cds--accordion__content {
-  -webkit-padding-end: 1rem;
-  padding-inline-end: 1rem
-}
-:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--sm {
-  -webkit-padding-end: 3rem;
-  padding-inline-end: 3rem
-}
-:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--md {
-  -webkit-padding-end: 25%;
-  padding-inline-end: 25%
-}
-:host(cds-accordion-item-skeleton) .cds--accordion__heading,
-:host(cds-accordion-skeleton) .cds--accordion__heading {
-  cursor: default
-}
-:host(cds-accordion-item-skeleton) .cds--accordion__heading:hover::before,
-:host(cds-accordion-skeleton) .cds--accordion__heading:hover::before {
-  background: 0 0
-}
 .cds--filter__heading {
   font-size: var(--cds-heading-01-font-size,.875rem);
   font-weight: var(--cds-heading-01-font-weight,600);
@@ -38658,7 +38718,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -40023,7 +40083,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #0043ce;
+  --cds-highlight: #002d9c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -40487,7 +40547,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -42890,7 +42950,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #0043ce;
+  --cds-highlight: #002d9c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -43354,7 +43414,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -43818,7 +43878,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -44282,7 +44342,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #0043ce;
+  --cds-highlight: #002d9c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -49311,7 +49371,7 @@ cds-hr {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -50397,7 +50457,7 @@ cds-hr {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
@@ -51067,7 +51127,7 @@ cds-hr {
   --cds-focus: #ffffff;
   --cds-focus-inset: #161616;
   --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #002d9c;
+  --cds-highlight: #001d6c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
   --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;