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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.0-rc.2",
+  "version": "2.16.0",
   "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": "5dc558ef59da8d102e6c4df024604832e9706a46"
+  "gitHead": "c82715f3720612dbf7f9e96d3bdaa21a4fbdcf49"
 }

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;
@@ -151,7 +157,7 @@
       }
     }
 
-    .#{$prefix}--card__copy:not([hidden]) {
+    .#{$prefix}--card__copy {
       @include type-style('body-02');
 
       margin-block-end: $spacing-07;
@@ -213,10 +219,6 @@
 
       .#{$prefix}--card__copy {
         margin-block: $spacing-07 0;
-
-        &[hidden] {
-          margin: 0;
-        }
       }
 
       svg {
@@ -248,6 +250,16 @@
           align-items: flex-start;
         }
 
+        .#{$prefix}--card__content {
+          padding-block-end: $spacing-10;
+        }
+
+        .#{$prefix}--card__pictogram-wrapper {
+          position: absolute;
+          inset-block-end: $spacing-05;
+          inset-inline-start: $spacing-05;
+        }
+
         .#{$prefix}--card__copy {
           margin-block-end: $spacing-07;
         }
@@ -280,6 +292,13 @@
       display: flex;
       flex-direction: column;
       gap: $spacing-05;
+
+      &[hidden] {
+        // Need important to force [hidden] to really mean hidden above many
+        // other variants setting display.
+        /* stylelint-disable declaration-no-important */
+        display: none !important;
+      }
     }
   }
 
@@ -555,14 +574,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

@@ -62,6 +62,7 @@
       display: grid;
       border: 0;
       grid-row: span 10;
+      grid-template-columns: subgrid;
       grid-template-rows: subgrid;
       margin-block-end: $spacing-07;
       outline: 1px solid $border-tile-01;

package/scss/components/content-group-cards/_content-group-cards.scss

@@ -38,7 +38,6 @@
 
   .#{$prefix}--content-group-cards__row {
     display: grid;
-    margin-inline: -$spacing-05;
 
     @include breakpoint(md) {
       grid-auto-rows: 1fr;

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/link-with-icon/_link-with-icon.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,7 +15,7 @@
 @use '../lightbox-media-viewer/lightbox-media-viewer';
 
 @mixin link-with-icon {
-  .#{$c4d-prefix}--link-with-icon,
+  .#{$prefix}--link-with-icon,
   :host(#{$c4d-prefix}-link-with-icon),
   :host(#{$c4d-prefix}-link-list-item),
   :host(#{$c4d-prefix}-link-list-item-cta),

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

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