Release catchup (#12148)

* #12146
* #12144
* #12145
* #12127
* #12143
* #12140
* #12128
* #12141
* #12139
* #12130
* #12132

.github/workflows/e2e-integration.yml

@@ -2,7 +2,7 @@ name: e2e-integration
 
 on:
   push:
-    branches: [ main, release/v2*, feat/masthead-v2, feat/masthead-v2-dev ]
+    branches: [ main, release/v2* ]
   schedule:
     - cron: '0 20 * * 1-5'
 

packages/styles/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;
       }

packages/styles/scss/components/card/_card.scss

@@ -281,12 +281,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 {

packages/styles/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']) {

packages/styles/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;

packages/styles/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 {

packages/styles/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 {

packages/styles/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;

packages/web-components/.storybook/container.scss

@@ -1,7 +1,7 @@
 //
 // @license
 //
-// Copyright IBM Corp. 2020, 2021
+// 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.
@@ -25,28 +25,28 @@
 @include grid.flex-grid();
 
 :root {
-  @include theme($white, true);
+  @include theme($white);
 
-  height: 100%;
+  block-size: 100%;
 }
 
 :root[storybook-carbon-theme='g10'] {
-  @include theme($g10, true);
+  @include theme($g10);
 }
 
 :root[storybook-carbon-theme='g90'] {
-  @include theme($g90, true);
+  @include theme($g90);
 }
 
 :root[storybook-carbon-theme='g100'] {
-  @include theme($g100, true);
+  @include theme($g100);
 }
 
 body {
   // `@include css-body` has `font-family: inherit` via `@include type-style('body-short-01')`,
   // which kills `font-family` from `@include carbon--type-reset`
-  color: $text-primary;
   background-color: $background;
+  color: $text-primary;
   line-height: 1;
 }
 
@@ -71,6 +71,5 @@ html {
 }
 
 .c4d-story-padding {
-  padding-top: $spacing-05;
-  padding-bottom: $spacing-05;
+  padding-block: $spacing-05;
 }

packages/web-components/src/components/button/button.ts

@@ -7,16 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './button.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
-import CTAMixin from '../../component-mixins/cta/cta';
+import CTAMixin, { ariaLabels, icons } from '../../component-mixins/cta/cta';
 import CDSButton from '@carbon/web-components/es/components/button/button.js';
+import { CTA_TYPE } from '../cta/defs';
 
-import { ariaLabels, icons } from '../../component-mixins/cta/cta';
 const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
@@ -89,7 +89,11 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
    */
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleVideoTitleUpdate = async (event) => {
-    if (event) {
+    if (
+      event &&
+      this.ctaType === CTA_TYPE.VIDEO &&
+      this.href === event.detail?.videoId
+    ) {
       const { videoDuration, videoName } = event.detail as any;
       const { formatVideoDuration, formatVideoCaption } = this;
       const formattedVideoDuration = formatVideoDuration({

packages/web-components/src/components/card/card.ts

@@ -340,7 +340,9 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
         formatVideoCaption: formatVideoCaptionInEffect,
         formatVideoDuration: formatVideoDurationInEffect,
       } = this;
-      const footer = this.querySelector(`${c4dPrefix}-card-footer`);
+      const footer = this.querySelector(
+        (this.constructor as typeof C4DCard).selectorFooter
+      );
 
       const headingText = this.querySelector(
         `${c4dPrefix}-card-heading`