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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.13.1-rc.0",
+  "version": "2.14.0-rc.0",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -33,11 +33,11 @@
     "@carbon/icons-react": "11.49.0",
     "@carbon/layout": "11.26.0",
     "@carbon/styles": "1.65.0",
-    "@carbon/type": "11.31.0",
+    "@carbon/type": "11.32.1",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/themes": "11.40.0",
+    "@carbon/themes": "11.41.1",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
@@ -45,8 +45,8 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.0.0",
     "require-dir": "^1.2.0",
-    "sass": "~1.78.0",
+    "sass": "~1.79.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "1c84070c126b7d9bf63a409305df2a3b72aaf332"
+  "gitHead": "7f4de6899e2cc0226529afb33763cad7b167d532"
 }

package/scss/components/callout-quote/_callout-quote.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.

package/scss/components/card/_card.scss

@@ -141,9 +141,13 @@
 
     .#{$prefix}--card__heading,
     .#{$prefix}--card__copy {
-      @include content-width;
-
       color: $text-primary;
+      max-inline-size: to-rem(640px);
+      padding-inline-end: 10%;
+
+      @include breakpoint(md) {
+        padding-inline-end: $spacing-07;
+      }
     }
 
     .#{$prefix}--card__copy:not([hidden]) {
@@ -185,6 +189,10 @@
       }
     }
 
+    .#{$prefix}--card__pictogram-wrapper {
+      display: flex;
+    }
+
     &[pictogram] .#{$prefix}--card {
       ::slotted(#{$c4d-prefix}-card-heading) {
         padding-block-start: 0;
@@ -417,6 +425,7 @@
 
   :host(#{$c4d-prefix}-card-eyebrow),
   .#{$prefix}--card__eyebrow {
+    display: block;
     @include content-width;
     @include type-style('label-02');
 
@@ -597,6 +606,7 @@
 
   :host(#{$c4d-prefix}-card-heading),
   :host(#{$c4d-prefix}-card-link-heading) {
+    display: block;
     @include content-width;
 
     color: $text-primary;

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

@@ -56,10 +56,42 @@
   }
 
   :host(#{$c4d-prefix}-card-group-item) {
+    display: contents;
+
     .#{$prefix}--card {
+      display: grid;
       border: 0;
+      grid-row: span 10;
+      grid-template-rows: subgrid;
+      margin-block-end: $spacing-07;
       outline: 1px solid $border-tile-01;
       outline-offset: 0;
+
+      .#{$prefix}--card__wrapper {
+        display: grid;
+        justify-content: revert;
+        grid-row: span 10;
+        grid-template-rows: subgrid;
+
+        &::before,
+        &::after {
+          content: revert;
+        }
+      }
+
+      .#{$prefix}--card__content {
+        display: grid;
+        grid-row: span 10;
+        grid-template-rows: subgrid;
+        row-gap: 0;
+      }
+
+      .#{$prefix}--card__copy {
+        display: grid;
+        grid-row: span 2;
+        grid-template-rows: subgrid;
+        row-gap: 0;
+      }
     }
 
     .#{$prefix}--image {
@@ -84,6 +116,30 @@
         outline-offset: -1px;
       }
     }
+
+    &[grid-mode='narrow'] {
+      .#{$prefix}--card {
+        margin-block-end: $spacing-05;
+      }
+    }
+
+    &[grid-mode='condensed'] {
+      .#{$prefix}--card {
+        margin-block-end: 0;
+      }
+    }
+
+    ::slotted(#{$c4d-prefix}-card-footer) {
+      display: revert;
+      margin-block-start: revert;
+    }
+
+    // Selects elements that contain tags which are slotted into the default
+    // slot. Note that this does not work in Chrome at time of writing.
+    // @see https://developer.chrome.com/blog/has-m105/#performance_and_limitations
+    ::slotted(:not([slot]):has(#{$prefix}-tag, #{$c4d-prefix}-tag)) {
+      grid-row: -1;
+    }
   }
 
   :host(#{$c4d-prefix}-card-group-item[href='']) {
@@ -110,24 +166,24 @@
 
   :host(#{$c4d-prefix}-card-group)[grid-mode='narrow'] {
     @include breakpoint(sm) {
-      gap: $spacing-03;
+      gap: 0 $spacing-03;
       padding-block-start: $spacing-03;
     }
 
     @include breakpoint(md) {
-      gap: $spacing-05;
+      gap: 0 $spacing-05;
       padding-block-start: $spacing-05;
     }
   }
 
   :host(#{$c4d-prefix}-card-group)[grid-mode='default'] {
     @include breakpoint(sm) {
-      gap: $spacing-07;
+      gap: 0 $spacing-07;
       padding-block-start: $spacing-03;
     }
 
     @include breakpoint(md) {
-      gap: $spacing-07;
+      gap: 0 $spacing-07;
       padding-block-start: $spacing-05;
     }
   }

package/scss/components/filter-panel/_filter-panel.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.
@@ -14,8 +14,8 @@
 @use '@carbon/styles/scss/layout' as *;
 @use '@carbon/styles/scss/components/button' as *;
 @use '@carbon/styles/scss/components/checkbox';
-@use '../../../../carbon-web-components/src/components/modal/modal';
-@use '../../../../carbon-web-components/scss/components/accordion/accordion';
+@use '@carbon/web-components/scss/components/accordion/accordion';
+@use '@carbon/web-components/scss/components/modal/modal';
 @use '../../globals/vars' as *;
 
 @mixin filter-panel {

package/scss/components/leaving-ibm/_leaving-ibm.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2023
+// Copyright IBM Corp. 2020, 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.
@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
-@use '../../../../carbon-web-components/src/components/modal/modal' as *;
+@use '@carbon/web-components/scss/components/modal/modal' as *;
 @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
 @mixin leaving-ibm {

package/scss/components/notice-choice/_notice-choice.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.

package/scss/components/quote/_quote.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.