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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.0-rc.1",
+  "version": "2.16.0-rc.3",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -48,5 +48,5 @@
     "sass": "~1.79.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "a05e9bc0deab9e09d85b61ab2b79bf2319f2dbbb"
+  "gitHead": "f35ac6b645aebca2cf92e2d39c91d4bf77cdf3af"
 }

package/scss/components/card/_card.scss

@@ -117,6 +117,12 @@
       }
     }
 
+    .#{$prefix}--card {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
     .#{$prefix}--card__wrapper {
       display: flex;
       flex: 1;
@@ -281,12 +287,6 @@
       flex-direction: column;
       gap: $spacing-05;
     }
-
-    ::slotted(div) {
-      /* stylelint-disable declaration-no-important */
-      // need the !important to prevent CSS reset styles from overwritting margin for tags
-      margin-inline-start: -$spacing-02 !important;
-    }
   }
 
   :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
@@ -561,14 +561,15 @@
   }
 
   :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
-  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled])
-    .#{$prefix}--card {
+  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not(
+      [disabled]
+    ) {
     .#{$prefix}--tile {
       border-color: $background-inverse;
       background-color: $background-inverse;
 
       &:hover {
-        #{$c4d-prefix}-image,
+        .#{$c4d-prefix}-image,
         ::slotted(#{$c4d-prefix}-image),
         ::slotted(#{$c4d-prefix}-card-cta-image) {
           filter: brightness(108%);

package/scss/components/card-group/_card-group.scss

@@ -77,11 +77,18 @@
         &::after {
           content: revert;
         }
+
+        &::after {
+          display: block;
+          aspect-ratio: 16 / 9;
+          content: '';
+          grid-area: 1 / 1 / -1 / -1;
+        }
       }
 
       .#{$prefix}--card__content {
         display: grid;
-        grid-row: span 10;
+        grid-area: 1 / 1 / -1 / -1;
         grid-template-rows: subgrid;
         row-gap: 0;
       }

package/scss/components/feature-card/_feature-card.scss

@@ -86,6 +86,10 @@ $feature-flags: (
       flex: 1 0 50%;
     }
 
+    .#{$prefix}--card__image-wrapper {
+      aspect-ratio: 1 / 1;
+    }
+
     .#{$prefix}--card__wrapper {
       &::before,
       &::after {
@@ -247,10 +251,27 @@ $feature-flags: (
     }
   }
 
-  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse']
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    fill: $link-inverse;
+  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse'] {
+    .#{$c4d-prefix}-ce--card__footer {
+      .#{$c4d-prefix}-ce--cta__icon,
+      ::slotted(svg[slot='icon']) {
+        fill: $link-inverse;
+      }
+
+      &:hover {
+        .#{$c4d-prefix}-ce--cta__icon,
+        ::slotted(svg[slot='icon']) {
+          fill: $link-inverse-hover;
+        }
+      }
+
+      &:active {
+        .#{$c4d-prefix}-ce--cta__icon,
+        ::slotted(svg[slot='icon']) {
+          fill: $link-inverse-active;
+        }
+      }
+    }
   }
 
   :host(#{$c4d-prefix}-feature-card[size='large']) {

package/scss/components/leadspace/_leadspace.scss

@@ -464,6 +464,7 @@ $btn-min-width: 26;
 
   :host(#{$c4d-prefix}-leadspace) ::slotted([slot='navigation']) {
     z-index: 1;
+    max-inline-size: 40rem;
     // need the !important to prevent CSS reset styles from overwritting margin for tags
     /* stylelint-disable declaration-no-important */
     padding-block-end: $spacing-05 !important;

package/scss/components/link-list/_link-list.scss

@@ -27,7 +27,6 @@
     .#{$c4d-prefix}--link-list__list--vertical,
     .#{$c4d-prefix}-ce--link-list__list--end {
       display: grid;
-      grid-auto-rows: 1fr;
 
       ::slotted(#{$c4d-prefix}-link-list-item),
       ::slotted(#{$c4d-prefix}-link-list-item-cta) {
@@ -36,7 +35,9 @@
     }
 
     .#{$c4d-prefix}--link-list__list--vertical
-      ::slotted(#{$c4d-prefix}-link-list-item) {
+      ::slotted(#{$c4d-prefix}-link-list-item),
+    .#{$c4d-prefix}--link-list__list--vertical
+      ::slotted(#{$c4d-prefix}-link-list-item-cta) {
       display: flex;
     }
 
@@ -54,7 +55,8 @@
 
     .#{$c4d-prefix}-ce--link-list__list--split,
     .#{$c4d-prefix}-ce--link-list__list--three-columns {
-      ::slotted(#{$c4d-prefix}-link-list-item) {
+      ::slotted(#{$c4d-prefix}-link-list-item),
+      ::slotted(#{$c4d-prefix}-link-list-item-cta) {
         display: grid;
         align-items: stretch;
         // margin-right: -$spacing-05;
@@ -63,10 +65,6 @@
       @include breakpoint(md) {
         display: grid;
         grid-column-gap: $spacing-07;
-
-        ::slotted(#{$c4d-prefix}-link-list-item) {
-          margin-inline: -$spacing-05 0;
-        }
       }
     }
 
@@ -83,9 +81,14 @@
     }
   }
 
-  :host(#{$c4d-prefix}-link-list-item) {
+  :host(#{$c4d-prefix}-link-list-item),
+  :host(#{$c4d-prefix}-link-list-item-cta) {
     .#{$prefix}--link {
+      display: flex;
       align-content: flex-start;
+      padding: $spacing-04 0;
+      gap: $spacing-03;
+      inline-size: 100%;
 
       span,
       ::slotted(svg[slot='icon']) {
@@ -106,16 +109,6 @@
     @include type-style('heading-02');
   }
 
-  :host(#{$c4d-prefix}-link-list-item)[type='default'],
-  :host(#{$c4d-prefix}-link-list-item-cta)[type='default'],
-  :host(#{$c4d-prefix}-link-list-item)[type='end'] {
-    .#{$prefix}--link {
-      display: flex;
-      padding: $spacing-05 0;
-      inline-size: 100%;
-    }
-  }
-
   .#{$c4d-prefix}--link-list__list {
     ::slotted(#{$c4d-prefix}-link-list-item),
     ::slotted(#{$c4d-prefix}-link-list-item-cta) {
@@ -134,10 +127,6 @@
       border-block-end: 1px solid $border-subtle-01;
       border-block-start: 1px solid $border-subtle-01;
       margin-block-start: -1px;
-
-      @include breakpoint(lg) {
-        margin-inline: -$spacing-05;
-      }
     }
   }
 
@@ -156,7 +145,7 @@
 
   .#{$c4d-prefix}--link-list__list--vertical {
     ::slotted(*) {
-      margin-block-end: $spacing-05;
+      margin-block-end: 0;
     }
   }
 

package/scss/components/notice-choice/_notice-choice.scss

@@ -9,6 +9,9 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/convert';
+@use '@carbon/type';
+
+@include type.reset();
 
 @mixin notice-choice {
   .#{$prefix}--nc {
@@ -17,6 +20,7 @@
     p,
     .#{$prefix}--checkbox-group {
       margin-block-end: $spacing-06;
+      @include type.type-style('legal-02');
     }
 
     a {

package/scss/components/tableofcontents/_table-of-contents.scss

@@ -112,7 +112,6 @@ $hover-transition-timing: 95ms;
     @extend .#{$prefix}--col-lg-12;
 
     box-sizing: border-box;
-    padding-block: $spacing-05 $spacing-09;
   }
 
   .#{$prefix}--tableofcontents {

package/scss/components/video-player/_video-player.scss

@@ -43,8 +43,8 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     }
   }
 
-  :host(#{$c4d-prefix}-video-player[background-mode='true']),
-  .#{$c4d-prefix}--video-player[background-mode='true'] {
+  :host(#{$c4d-prefix}-video-player[background-mode]),
+  .#{$c4d-prefix}--video-player[background-mode] {
     .#{$c4d-prefix}--video-player__video-container {
       padding: 0;
       block-size: 100%;

package/scss/internal/content-block/_content-block.scss

@@ -86,6 +86,7 @@
     }
 
     ::slotted(#{$c4d-prefix}-content-group:not([slot])),
+    ::slotted(#{$c4d-prefix}-cta-block-item-row:not([slot])),
     ::slotted([data-autoid^='c4d--tabs-']:not([slot])),
     ::slotted([data-autoid^='c4d--card']:not([slot])) {
       margin-inline-start: 0;