From 96d66e5cd7ebf42495c956f6fb111051d74ddcf1 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 4 Dec 2024 14:28:09 -0500
Subject: [PATCH 01/21] fix(storybook): incorrect use of theme mixin (#12145)

### Related Ticket(s)

No ticket. Just quick clean up that I couldn't unsee.

### Description

The use of the `theme.theme` mixin from the `@carbon/styles` package (which is forwarded from `@carbon/themes`) was incorrect. The [second argument is meant to be a map of component tokens](https://github.com/carbon-design-system/carbon/blob/main/packages/themes/scss/_theme.scss#L28). We [already add the set of component tokens we want as includes](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/.storybook/container.scss#L20-L22), and therefore don't need the second argument at all. As it was it produced a `--cds-true:;` CSS variable that was useless in the compiled CSS:

![image](https://github.com/user-attachments/assets/72f0342c-b10a-42f5-a183-019d6964a059)


### Changelog

**Changed**

- Fixed incorrect use of `theme.theme` mixin from `@carbon/styles` package

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../web-components/.storybook/container.scss    | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
index e36c24b5abf..a6eafe14351 100644
--- a/packages/web-components/.storybook/container.scss
+++ b/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;
 }

From 5e52b771b54fcff284222f7d04e6e0f5c19cdc1a Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 4 Dec 2024 14:48:51 -0500
Subject: [PATCH 02/21] fix(toc): remove implicit top and bottom padding for
 TOC (#12144)

### Related Ticket(s)

[ADCMS-7171](https://jsw.ibm.com/browse/ADCMS-7171)

### Description

Removes the top and bottom implicit padding on the TOC contents in the shadow root.

### Changelog

**Changed**

- Removes the internal top and bottom padding from TOC contents to leave to adopter as in v1

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../scss/components/tableofcontents/_table-of-contents.scss   | 1 -
 .../__stories__/table-of-contents.stories.scss                | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
index a212ac2ac2c..b3ee02bd4a8 100644
--- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
+++ b/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 {
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
index 356781345dc..3d254ff34f0 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
+++ b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.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/ibmdotcom-styles/scss/globals/vars' as *;
 
 .#{$c4d-prefix}-ce-demo--table-of-contents {
-  padding: 0 $spacing-05;
+  padding: $spacing-05;
 
   h3 {
     padding-block: $spacing-07;

From 888d642de7502eb4abfb215403ef9aec8835994e Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 4 Dec 2024 15:32:22 -0500
Subject: [PATCH 03/21] fix(feature-card): inverse styles and cta-type="video"
 (#12146)

### Related Ticket(s)

[ADCMS-7128](https://jsw.ibm.com/browse/ADCMS-7128)

### Description

Fixes some inverse styles for Feature card component. Also adds cta type knobs to the Storybook story and fixes support in `<c4d-feature-card>` component for `cta-type="video"`.

### Changelog

**New**

- Support for `cta-type="video"` in Feature card

**Changed**

- Fixed inverse styles for Feature card component

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../feature-card/_feature-card.scss           |  29 ++++-
 .../src/components/card/card.ts               |   4 +-
 .../__stories__/feature-card.stories.ts       | 113 +++++++++---------
 3 files changed, 87 insertions(+), 59 deletions(-)

diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
index fc9e93262bb..7862c995bda 100644
--- a/packages/styles/scss/components/feature-card/_feature-card.scss
+++ b/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']) {
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index f1c14c7d56a..2a1f42a695e 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/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`
diff --git a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
index 886f9160955..46771634acd 100644
--- a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
+++ b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
@@ -21,11 +21,13 @@ import imgLg1x1 from '../../../../.storybook/storybook-images/assets/720/fpo--1x
 import imgXlg1x1 from '../../../../.storybook/storybook-images/assets/1312/fpo--1x1--1312x1312--002.jpg';
 import imgMax1x1 from '../../../../.storybook/storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { typeOptions, types } from '../../cta/__stories__/ctaTypeConfig';
 
 const { stablePrefix: c4dPrefix, prefix } = settings;
 
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
 
 const colorSchemeMap = {
   Regular: BASIC_COLOR_SCHEME.REGULAR,
@@ -33,41 +35,35 @@ const colorSchemeMap = {
 };
 
 export const Medium = (args) => {
-  const { heading, href, colorScheme } =
+  const { heading, href, colorScheme, ctaType } =
     args?.[`${c4dPrefix}-feature-card`] ?? {};
   return html`
-    <c4d-feature-card
-      href=${ifDefined(href || undefined)}
-      color-scheme=${colorSchemeMap[colorScheme]}
-      cta-type="local">
-      <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
-        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
-        </c4d-image-item>
-      </c4d-image>
-      <c4d-card-heading>${heading}</c4d-card-heading>
-      <c4d-feature-card-footer></c4d-feature-card-footer>
-    </c4d-feature-card>
+    <c4d-video-cta-container>
+      <c4d-feature-card
+        href=${ifDefined(href || undefined)}
+        color-scheme=${colorSchemeMap[colorScheme]}
+        cta-type=${ctaType}>
+        <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-heading>${heading}</c4d-card-heading>
+        <c4d-feature-card-footer></c4d-feature-card-footer>
+      </c4d-feature-card>
+    </c4d-video-cta-container>
   `;
 };
 
-Medium.story = {
-  parameters: {
-    percy: {
-      skip: true,
-    },
-  },
-};
-
 export const Large = (args) => {
-  const { eyebrow, heading, copy, href, colorScheme } =
+  const { eyebrow, heading, copy, href, colorScheme, ctaType } =
     args?.[`${c4dPrefix}-feature-card`] ?? {};
 
   const copyComponent = document
@@ -77,36 +73,35 @@ export const Large = (args) => {
     copyComponent!.innerHTML = copy;
   }
   return html`
-    <c4d-feature-card
-      size="large"
-      href=${ifDefined(href || undefined)}
-      color-scheme=${colorSchemeMap[colorScheme]}
-      cta-type="local">
-      <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
-        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
-        </c4d-image-item>
-      </c4d-image>
-      <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
-      <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html`<p>${copy}</p>` : ''}
-      <c4d-feature-card-footer> </c4d-feature-card-footer>
-    </c4d-feature-card>
+    <c4d-video-cta-container>
+      <c4d-feature-card
+        size="large"
+        href=${ifDefined(href || undefined)}
+        color-scheme=${colorSchemeMap[colorScheme]}
+        cta-type=${ctaType}>
+        <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+        <c4d-card-heading>${heading}</c4d-card-heading>
+        ${copy ? html`<p>${copy}</p>` : ''}
+        <c4d-feature-card-footer> </c4d-feature-card-footer>
+      </c4d-feature-card>
+    </c4d-video-cta-container>
   `;
 };
 
 Large.story = {
   parameters: {
-    percy: {
-      skip: true,
-    },
     storyGrid: `${prefix}--col-lg-12`,
     knobs: {
       [`${c4dPrefix}-feature-card`]: () => ({
@@ -124,6 +119,11 @@ Large.story = {
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
         colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
+        ctaType: select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        ),
       }),
     },
     propsSet: {
@@ -164,6 +164,11 @@ export default {
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
         colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
+        ctaType: select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        ),
       }),
     },
     propsSet: {

From 9fd006f813493d56b4ef6fac78d9b0b234091c91 Mon Sep 17 00:00:00 2001
From: Andy Blum <andy.blum.01@gmail.com>
Date: Wed, 4 Dec 2024 21:00:34 -0500
Subject: [PATCH 04/21] Release catchup (#12148)

* #12146
* #12144
* #12145
* #12127
* #12143
* #12140
* #12128
* #12141
* #12139
* #12130
* #12132
---
 .github/workflows/automerge-mastheadv2.yml    |  29 ---
 .github/workflows/e2e-integration.yml         |   2 +-
 .../components/card-group/_card-group.scss    |   9 +-
 .../styles/scss/components/card/_card.scss    |   6 -
 .../feature-card/_feature-card.scss           |  29 ++-
 .../scss/components/leadspace/_leadspace.scss |   1 +
 .../notice-choice/_notice-choice.scss         |   4 +
 .../tableofcontents/_table-of-contents.scss   |   1 -
 .../content-block/_content-block.scss         |   1 +
 .../web-components/.storybook/container.scss  |  17 +-
 .../src/components/button/button.ts           |  12 +-
 .../src/components/card/card.ts               |   4 +-
 .../__stories__/feature-card.stories.ts       | 113 ++++-----
 .../__stories__/README.stories.mdx            |   5 +-
 .../__stories__/notice-choice.stories.ts      |  24 +-
 .../components/notice-choice/notice-choice.ts | 227 +++++++++++++++++-
 .../src/components/notice-choice/services.ts  |  10 +-
 .../src/components/notice-choice/utils.ts     |   3 +
 .../table-of-contents.stories.scss            |   4 +-
 .../button-group/button-group.e2e.js          |  79 ++++++
 .../feature-card/feature-card.e2e.js          |  15 +-
 21 files changed, 466 insertions(+), 129 deletions(-)
 delete mode 100644 .github/workflows/automerge-mastheadv2.yml
 create mode 100644 packages/web-components/tests/e2e-storybook/cypress/integration/button-group/button-group.e2e.js

diff --git a/.github/workflows/automerge-mastheadv2.yml b/.github/workflows/automerge-mastheadv2.yml
deleted file mode 100644
index 5db50dfa20a..00000000000
--- a/.github/workflows/automerge-mastheadv2.yml
+++ /dev/null
@@ -1,29 +0,0 @@
-name: automerge-mastheadv2
-on:
-  push:
-    branches:
-      - 'main'
-
-concurrency:
-  group: automerge-mastheadv2-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  automerge-mastheadv2:
-    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
-    runs-on: ubuntu-20.04
-    env:
-      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-    steps:
-      - uses: actions/checkout@v4
-      - name: Merge to feat/masthead-v2-dev
-        uses: devmasx/merge-branch@1.4.0
-        with:
-          type: now
-          target_branch: 'feat/masthead-v2-dev'
-        env:
-          GITHUB_TOKEN: ${{secrets.MERGE_ACTION}}
-      - uses: act10ns/slack@v2
-        with:
-          status: ${{ job.status }}
-        if: failure()
diff --git a/.github/workflows/e2e-integration.yml b/.github/workflows/e2e-integration.yml
index 3d0b951c377..4d715d291e6 100644
--- a/.github/workflows/e2e-integration.yml
+++ b/.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'
 
diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
index 07b5e161088..4097a15cfad 100644
--- a/packages/styles/scss/components/card-group/_card-group.scss
+++ b/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;
       }
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 5a83ccbd2a3..0f0cafc7eca 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/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 {
diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
index fc9e93262bb..7862c995bda 100644
--- a/packages/styles/scss/components/feature-card/_feature-card.scss
+++ b/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']) {
diff --git a/packages/styles/scss/components/leadspace/_leadspace.scss b/packages/styles/scss/components/leadspace/_leadspace.scss
index ada884f65d1..61f4c7b02ae 100644
--- a/packages/styles/scss/components/leadspace/_leadspace.scss
+++ b/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;
diff --git a/packages/styles/scss/components/notice-choice/_notice-choice.scss b/packages/styles/scss/components/notice-choice/_notice-choice.scss
index 5a80d29e5ae..9a2cad8820b 100644
--- a/packages/styles/scss/components/notice-choice/_notice-choice.scss
+++ b/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 {
diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
index a212ac2ac2c..b3ee02bd4a8 100644
--- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
+++ b/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 {
diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss
index 0bc91c9e8f7..c2071965851 100644
--- a/packages/styles/scss/internal/content-block/_content-block.scss
+++ b/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;
diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
index e36c24b5abf..a6eafe14351 100644
--- a/packages/web-components/.storybook/container.scss
+++ b/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;
 }
diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
index a89e4300bb1..f0fc96070f7 100644
--- a/packages/web-components/src/components/button/button.ts
+++ b/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({
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index f1c14c7d56a..2a1f42a695e 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/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`
diff --git a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
index be5d9aebde6..46771634acd 100644
--- a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
+++ b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
@@ -21,11 +21,13 @@ import imgLg1x1 from '../../../../.storybook/storybook-images/assets/720/fpo--1x
 import imgXlg1x1 from '../../../../.storybook/storybook-images/assets/1312/fpo--1x1--1312x1312--002.jpg';
 import imgMax1x1 from '../../../../.storybook/storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { typeOptions, types } from '../../cta/__stories__/ctaTypeConfig';
 
 const { stablePrefix: c4dPrefix, prefix } = settings;
 
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
 
 const colorSchemeMap = {
   Regular: BASIC_COLOR_SCHEME.REGULAR,
@@ -33,41 +35,35 @@ const colorSchemeMap = {
 };
 
 export const Medium = (args) => {
-  const { heading, href, colorScheme } =
+  const { heading, href, colorScheme, ctaType } =
     args?.[`${c4dPrefix}-feature-card`] ?? {};
   return html`
-    <c4d-feature-card
-      href=${ifDefined(href || undefined)}
-      color-scheme=${colorSchemeMap[colorScheme]}
-      cta-type="local">
-      <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
-        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
-        </c4d-image-item>
-      </c4d-image>
-      <c4d-card-heading>${heading}</c4d-card-heading>
-      <c4d-feature-card-footer></c4d-feature-card-footer>
-    </c4d-feature-card>
+    <c4d-video-cta-container>
+      <c4d-feature-card
+        href=${ifDefined(href || undefined)}
+        color-scheme=${colorSchemeMap[colorScheme]}
+        cta-type=${ctaType}>
+        <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-heading>${heading}</c4d-card-heading>
+        <c4d-feature-card-footer></c4d-feature-card-footer>
+      </c4d-feature-card>
+    </c4d-video-cta-container>
   `;
 };
 
-Medium.story = {
-  parameters: {
-    percy: {
-      skip: true,
-    },
-  },
-};
-
 export const Large = (args) => {
-  const { eyebrow, heading, copy, href, colorScheme } =
+  const { eyebrow, heading, copy, href, colorScheme, ctaType } =
     args?.[`${c4dPrefix}-feature-card`] ?? {};
 
   const copyComponent = document
@@ -77,36 +73,35 @@ export const Large = (args) => {
     copyComponent!.innerHTML = copy;
   }
   return html`
-    <c4d-feature-card
-      size="large"
-      href=${ifDefined(href || undefined)}
-      color-scheme=${colorSchemeMap[colorScheme]}
-      cta-type="local">
-      <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
-        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
-        </c4d-image-item>
-      </c4d-image>
-      <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
-      <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy && html`<p></p>`}
-      <c4d-feature-card-footer> </c4d-feature-card-footer>
-    </c4d-feature-card>
+    <c4d-video-cta-container>
+      <c4d-feature-card
+        size="large"
+        href=${ifDefined(href || undefined)}
+        color-scheme=${colorSchemeMap[colorScheme]}
+        cta-type=${ctaType}>
+        <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+        <c4d-card-heading>${heading}</c4d-card-heading>
+        ${copy ? html`<p>${copy}</p>` : ''}
+        <c4d-feature-card-footer> </c4d-feature-card-footer>
+      </c4d-feature-card>
+    </c4d-video-cta-container>
   `;
 };
 
 Large.story = {
   parameters: {
-    percy: {
-      skip: true,
-    },
     storyGrid: `${prefix}--col-lg-12`,
     knobs: {
       [`${c4dPrefix}-feature-card`]: () => ({
@@ -124,6 +119,11 @@ Large.story = {
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
         colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
+        ctaType: select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        ),
       }),
     },
     propsSet: {
@@ -164,6 +164,11 @@ export default {
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
         colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
+        ctaType: select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        ),
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx b/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
index d2074f16cd0..46c3c2ff64b 100644
--- a/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
@@ -39,7 +39,8 @@ import '@carbon/ibmdotcom-web-components/es/components/notice-choice/index.js';
   state="CA"
   terms-condition-link=""
   hide-error-message="false"
-  enable-all-opt-in="">
+  combine-email-phone="false"
+  >
 </c4d-notice-choice>
 ```
 
@@ -65,6 +66,8 @@ document.addEventListener('cds-notice-choice-change', (event) => {
 | language             | form based on the country and language                                                      | en      |
 | terms-condition-link | Terms and conditions link appended to the end of the privacy statement - should be specific |         |
 | hide-error-message   | Hide Error Messages for PUNS statement                                                      | false   |
+| combine-email-phone  | Combine Email and Phone                                                                     | false   |
+| environment          | Set environment variable Prod or Stage                                                      | Prod    |
 
 <Props of="c4d-notice-choice" />
 
diff --git a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
index 98d8541e375..c391880c2d1 100644
--- a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
+++ b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
@@ -44,7 +44,7 @@ const languages = {
   'Ukrainian [uk]': 'uk',
 };
 const countryList = {
-  'Unites States': 'US',
+  'United States': 'US',
   Germany: 'DE',
   India: 'IN',
   China: 'CN',
@@ -87,6 +87,16 @@ const hideErrorMessages = {
   true: 'true',
   false: 'false',
 };
+
+const combineEmailPhone = {
+  true: 'true',
+  false: 'false',
+};
+
+const environment = {
+  Production: 'prod',
+  Stage: 'stage',
+};
 const onChange = (event: CustomEvent) => {
   console.log(event.detail);
 };
@@ -109,11 +119,15 @@ const props = () => {
       hideErrorMessages,
       'false'
     ),
+    combineEmailPhone: select(
+      'Combine Email Phone',
+      combineEmailPhone,
+      'false'
+    ),
+    environment: select('Environment', environment, 'prod'),
   };
 };
 
-console.log(props);
-
 export const Default = (args) => {
   const {
     language,
@@ -127,6 +141,8 @@ export const Default = (args) => {
     hiddenPhone,
     ncTeleDetail,
     ncEmailDetail,
+    combineEmailPhone,
+    environment,
   } = args?.NoticeChoice ?? {};
   return html`
     <c4d-notice-choice
@@ -141,6 +157,8 @@ export const Default = (args) => {
       .hiddenPhone="${hiddenPhone}"
       .nc-tele-detail="${ncTeleDetail}"
       .nc-email-detail="${ncEmailDetail}"
+      combine-email-phone="${combineEmailPhone}"
+      environment="${environment}"
       @c4d-notice-choice-change=${onChange}></c4d-notice-choice>
   `;
 };
diff --git a/packages/web-components/src/components/notice-choice/notice-choice.ts b/packages/web-components/src/components/notice-choice/notice-choice.ts
index e0f1ad1b51a..95aa58e32b4 100644
--- a/packages/web-components/src/components/notice-choice/notice-choice.ts
+++ b/packages/web-components/src/components/notice-choice/notice-choice.ts
@@ -56,6 +56,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   @property({ type: String, attribute: 'language' })
   language = 'en';
 
+  @property({ type: String, attribute: 'currentLanguage' })
+  currentLanguage = 'en';
+
   @property({ type: String, attribute: 'terms-condition-link' })
   termsConditionLink = html``;
 
@@ -68,6 +71,12 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   @property({ type: Boolean, attribute: 'hide-error-message' })
   hideErrorMessage = false;
 
+  @property({ type: Boolean, attribute: 'combine-email-phone' })
+  combineEmailPhone = false;
+
+  @property({ type: String, attribute: 'environment' })
+  environment = 'prod';
+
   @property({ type: Object, attribute: false })
   checkboxes = {};
 
@@ -98,6 +107,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   @property({ type: Boolean, attribute: false })
   telephonePrechecked = false;
 
+  @property({ type: Boolean, attribute: false })
+  combinedEmailPhonePrechecked = false;
+
   /**
    * End properties for passed attributes.
    */
@@ -144,6 +156,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   defaultLoadContent() {
     loadContent(
       'en',
+      this.environment,
       (ncData) => {
         this.ncData = ncData;
         this.prepareCheckboxes();
@@ -174,6 +187,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
     } else if (supportedLanguages(language)) {
       defaultLanguage = supportedLanguages(language);
     }
+
     loadSettings(
       (countryPreferencesSettings) => {
         this.countrySettings = countryPreferencesSettings;
@@ -184,6 +198,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
     );
     loadContent(
       defaultLanguage,
+      this.environment,
       (ncData) => {
         this.ncData = ncData;
         this.prepareCheckboxes();
@@ -211,7 +226,17 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
         const hiddenFieldName = `NC_HIDDEN_${key}`;
         newValues[hiddenFieldName] = option[hiddenFieldName];
 
-        this._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : 'OPT_OUT');
+        if (this.combineEmailPhone) {
+          this._onChange(
+            hiddenFieldName,
+            newValues.EMAIL ? 'OPT_IN' : 'OPT_OUT'
+          );
+        } else {
+          this._onChange(
+            hiddenFieldName,
+            newValues[key] ? 'OPT_IN' : 'OPT_OUT'
+          );
+        }
       });
       if (JSON.stringify(this.values) !== JSON.stringify(newValues)) {
         this.values = newValues;
@@ -250,6 +275,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
        * @description
        * change checkbox checked option based on new country.
        */
+
       this.setDefaultSelections();
     }
   }
@@ -266,6 +292,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   attributeChangedCallback(name, oldVal, newVal) {
     const hasValue = newVal !== null && oldVal !== null;
     super.attributeChangedCallback(name, oldVal, newVal);
+
     switch (name) {
       case 'question-choices': {
         // Reload checkbox options when questionchoices changed
@@ -275,7 +302,8 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
         }
         break;
       }
-      case 'language': {
+      case 'language':
+      case 'environment': {
         // load content when locale changed.
         const [language] = newVal.split(/[-_]/);
 
@@ -285,10 +313,11 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
         } else if (supportedLanguages(language)) {
           defaultLanguage = supportedLanguages(language);
         }
-
+        this.currentLanguage = defaultLanguage;
         if (hasValue && oldVal !== newVal) {
           loadContent(
             defaultLanguage,
+            this.environment,
             (ncData) => {
               this.ncData = ncData;
               this.prepareCheckboxes();
@@ -327,6 +356,12 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
 
         break;
       }
+      case 'combine-email-phone': {
+        if (oldVal !== newVal) {
+          this.combineEmailPhone = JSON.parse(newVal);
+        }
+        break;
+      }
     }
   }
 
@@ -565,6 +600,183 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
       return html``;
     }
   }
+
+  combinedPreTextTemplate() {
+    if (!this.ncData) {
+      return html``;
+    }
+
+    const ecmTranslateContent = this.ncData;
+    const country = this.country?.toLocaleLowerCase() || '';
+    const state = this.state?.toLocaleLowerCase() || '';
+    let preText = ecmTranslateContent.combinedConsent;
+
+    if (ecmTranslateContent.state[country]) {
+      if (country === 'us') {
+        preText =
+          state === 'ca' || state === ''
+            ? ecmTranslateContent.state[country]['ca'].noticeOnly
+            : ecmTranslateContent.noticeOnly;
+      } else {
+        preText =
+          ecmTranslateContent.state[country][state]?.combinedConsent ||
+          ecmTranslateContent.combinedConsent;
+      }
+    } else if (country === 'us') {
+      preText =
+        state === 'ca' || state === '' || typeof state === 'undefined'
+          ? ecmTranslateContent.state?.[country]?.['ca']?.noticeOnly
+            ? ecmTranslateContent.state?.[country]?.['ca']?.noticeOnly
+            : ecmTranslateContent.noticeOnly
+          : ecmTranslateContent.noticeOnly;
+    }
+
+    if (ecmTranslateContent.country?.[country]) {
+      preText = ecmTranslateContent.country[country].combinedConsent;
+    }
+
+    if (country !== 'us') {
+      const checked = this.values.EMAIL;
+      preText = preText
+        ? this.renderCheckbox(preText, checked)
+        : this.renderCheckbox(ecmTranslateContent.preText, checked);
+      return preText;
+    }
+
+    return html`${unsafeHTML(preText)}`;
+  }
+
+  checkCombineEmailPhoneBoxChange($event: any) {
+    const checked = $event.target.checked;
+    const newValues = {
+      ...this.values,
+    };
+    this.changed = true;
+
+    Object.keys(this.checkboxes).map((id) => {
+      newValues[id] = !!checked;
+      this.values = newValues;
+      console.log(this.combinedEmailPhonePrechecked);
+      const hiddenFieldName = `NC_HIDDEN_${id}`;
+      const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';
+      this.values[id] = {};
+      this.values[id]['checkBoxStatus'] = hiddenFieldStatus;
+      let statusPrechecked = '';
+      switch (id) {
+        case 'EMAIL':
+        case 'PHONE':
+          statusPrechecked =
+            this.combinedEmailPhonePrechecked && !checked
+              ? 'CU'
+              : !this.combinedEmailPhonePrechecked && checked
+              ? 'UC'
+              : this.combinedEmailPhonePrechecked && checked
+              ? 'CC'
+              : 'UU';
+
+          break;
+      }
+      this.values[id]['punsStatus'] = statusPrechecked;
+
+      this._onChange(hiddenFieldName, hiddenFieldStatus);
+      this._onChange(
+        `${hiddenFieldName}_VALUE`,
+        `NC_HIDDEN_${hiddenFieldStatus}`
+      );
+    });
+  }
+  renderCheckbox(preText, checked) {
+    const checkboxId = 'EMAIL_PHONE_CHECKBOX';
+    return html`
+      <span part="container">
+        <div
+          class="${prefix}--form-item cds--checkbox-wrapper"
+          part="checkbox-wrapper">
+          <input
+            type="checkbox"
+            class="${prefix}--checkbox"
+            part="checkbox"
+            id="${checkboxId}"
+            name="${checkboxId}"
+            ?checked="${checked}"
+            @change="${this.checkCombineEmailPhoneBoxChange}" />
+          <label
+            for="${checkboxId}"
+            class="${prefix}--checkbox-label ${prefix}--nc__checkbox-${checkboxId}"
+            part="checkbox-label">
+            <span
+              class="${prefix}--checkbox-label-text"
+              part="checkbox-label-text"
+              dir="auto">
+              ${unsafeHTML(preText)}
+            </span>
+          </label>
+        </div>
+      </span>
+    `;
+  }
+
+  renderCombinedEmailPhoneSection() {
+    const getPunsStatus = (key, checked) =>
+      this.country?.toLocaleLowerCase() === 'us'
+        ? 'NOTICE_ONLY'
+        : this.values[key]?.punsStatus || (checked ? 'CC' : 'UU');
+
+    const createHiddenInput = (id, value) =>
+      html`<input type="hidden" id=${id} name=${id} value=${value} />`;
+
+    return html`
+      <section class="${prefix}--nc" part="section">
+        <p part="ncHeading" id="ncHeading" class="${c4dPrefix}--nc__pre-text ">
+          ${this.countryBasedLegalNotice()} ${this.combinedPreTextTemplate()}
+        </p>
+        ${Object.keys(this.checkboxes).map((key) => {
+          const checked = this.values.EMAIL;
+          const punsStatus = getPunsStatus(key, checked);
+          const hiddenBox = {
+            id: `NC_HIDDEN_${key}`,
+            value: this.values[key]['checkBoxStatus']
+              ? this.values[key]['checkBoxStatus']
+              : this.values.EMAIL
+              ? 'PERMISSION'
+              : 'SUPPRESSION',
+          };
+          if (typeof checked !== 'object') {
+            this.combinedEmailPhonePrechecked = checked ? true : false;
+          }
+
+          this._onChange(
+            `NC_${key === 'PHONE' ? 'TELE' : key}_DETAIL`,
+            `${key}_${punsStatus}`
+          );
+          console.log(`${hiddenBox.id}_VALUE`, `NC_HIDDEN_${hiddenBox.value}`);
+          this._onChange(
+            `${hiddenBox.id}_VALUE`,
+            `NC_HIDDEN_${hiddenBox.value}`
+          );
+
+          if (Object.keys(this.checkboxes).length === 1) {
+            this._onChange(`NC_HIDDEN_PHONE_VALUE`, `NC_HIDDEN_PHONE_NONE`);
+          }
+
+          return createHiddenInput(hiddenBox.id, hiddenBox.value);
+        })}
+        <div part="${prefix}--nc__post-text" class="${prefix}--nc__post-text">
+          ${this.postTextTemplate()}
+        </div>
+        ${createHiddenInput(
+          'preventFormSubmission',
+          this.preventFormSubmission
+        )}
+        <input
+          type="hidden"
+          id="preventFormSubmission"
+          name="preventFormSubmission"
+          value=${this.preventFormSubmission} />
+      </section>
+    `;
+  }
+
   render() {
     if (
       this.isMandatoryCheckboxDisplayed.isDisplayed &&
@@ -582,6 +794,11 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
           ].chinaPIPLtext.mrs_field;
       this._onChange(mrsField, 'countyBasedCheckedNo');
     }
+
+    if (this.combineEmailPhone) {
+      return this.renderCombinedEmailPhoneSection();
+    }
+
     return html`<section class="${prefix}--nc" part="section">
     <p part='ncHeading' id="ncHeading" class="${c4dPrefix}--nc__pre-text">${this.countryBasedLegalNotice()} ${this.preTextTemplate()} </p>
       <div part='${prefix}--checkbox-group' class="${prefix}--checkbox-group">
@@ -724,12 +941,14 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
       PHONE_CC: 'PHONE_CC',
       PHONE_UC: 'PHONE_UC',
       PHONE_UU: 'PHONE_UU',
+      EMAIL_NOTICE_ONLY: 'EMAIL_NOTICE_ONLY',
+      PHONE_NOTICE_ONLY: 'PHONE_NOTICE_ONLY',
+      NC_HIDDEN_PHONE_NONE: 'NC_HIDDEN_PHONE_NONE',
     };
 
     if (Object.prototype.hasOwnProperty.call(pwsFieldsMap, field)) {
       field = pwsFieldsMap[field];
     }
-
     const init = {
       bubbles: true,
       detail: {
diff --git a/packages/web-components/src/components/notice-choice/services.ts b/packages/web-components/src/components/notice-choice/services.ts
index 96a3a957b8a..c2514492983 100644
--- a/packages/web-components/src/components/notice-choice/services.ts
+++ b/packages/web-components/src/components/notice-choice/services.ts
@@ -5,11 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export function loadContent(locale: string, onSuccess: any, onError: any) {
+export function loadContent(
+  locale: string,
+  env: string,
+  onSuccess: any,
+  onError: any
+) {
   const script = document.createElement('script');
+  const environment = env === 'prod' ? '1.www.s81c.com' : '1.wwwstage.s81c.com';
   script.async = false;
   script.charset = 'utf-8';
-  script.src = `https://www.ibm.com/common/translations/notice/v23/${locale.toLocaleLowerCase()}/ncContent_v23.js`; // URL for the third-party library being loaded.
+  script.src = `https://${environment}/common/translations/notice/v23/${locale.toLocaleLowerCase()}/ncContent_v23.js`; // URL for the third-party library being loaded.
   document.body.appendChild(script);
   script.onload = () => {
     try {
diff --git a/packages/web-components/src/components/notice-choice/utils.ts b/packages/web-components/src/components/notice-choice/utils.ts
index b29e554ee8c..ad7e65ac585 100644
--- a/packages/web-components/src/components/notice-choice/utils.ts
+++ b/packages/web-components/src/components/notice-choice/utils.ts
@@ -49,6 +49,9 @@ export function pwsValueMap(value) {
       PHONE_CC: 'CC',
       PHONE_UC: 'UC',
       PHONE_UU: 'UU',
+      EMAIL_NOTICE_ONLY: 'NOTICE_ONLY',
+      PHONE_NOTICE_ONLY: 'NOTICE_ONLY',
+      NC_HIDDEN_PHONE_NONE: 'N',
     }[value] || null
   );
 }
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
index 356781345dc..3d254ff34f0 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
+++ b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.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/ibmdotcom-styles/scss/globals/vars' as *;
 
 .#{$c4d-prefix}-ce-demo--table-of-contents {
-  padding: 0 $spacing-05;
+  padding: $spacing-05;
 
   h3 {
     padding-block: $spacing-07;
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/button-group/button-group.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/button-group/button-group.e2e.js
new file mode 100644
index 00000000000..5a71e024cf2
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/button-group/button-group.e2e.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+
+/**
+ * Sets the correct defaultPath for Button Group
+ *
+ * @type {string}
+ * @private
+ */
+const _defaultPath = '/iframe.html?id=components-button-group--default';
+
+/* eslint-disable cypress/no-unnecessary-waiting */
+describe('c4d-button-group | default', () => {
+  beforeEach(() => {
+    cy.visit(`/${_defaultPath}`);
+    cy.injectAxe();
+    cy.viewport(1280, 780);
+  });
+
+  it('should check a11y', () => {
+    cy.checkAxeA11y();
+  });
+
+  it('should use given labels', () => {
+    cy.visit(
+      `/${_defaultPath}&knob-Button%201=Test%20Me%20Once&knob-Button%202=Test%20Me%20Twice`
+    );
+    cy.get('c4d-button-group-item')
+      .first()
+      .should('have.text', 'Test Me Once')
+      .next()
+      .should('have.text', 'Test Me Twice');
+
+    cy.takeSnapshots();
+  });
+
+  it('should use given labels with video cta-type mixed in', () => {
+    cy.visit(
+      `/${_defaultPath}&knob-Button%201=Test%20Me%20Once&knob-Button%202=Test%20Me%20Twice&knob-CTA%20type%20(cta-type)%202=video`
+    );
+    cy.get('c4d-button-group-item')
+      .first()
+      .should('have.text', 'Test Me Once')
+      .next()
+      .should('have.text', 'Test Me Twice');
+
+    cy.takeSnapshots();
+  });
+
+  it('should use video name for a video cta-type that has no label', () => {
+    cy.visit(
+      `/${_defaultPath}&knob-Button%201=Test%20Me%20Once&knob-Button%202=%20&knob-CTA%20type%20(cta-type)%202=video`
+    );
+    cy.get('c4d-button-group-item')
+      .first()
+      .should('have.text', 'Test Me Once')
+      .next()
+      .should('not.be.empty');
+
+    cy.takeSnapshots();
+  });
+
+  it('should not use video name for buttons that are not cta-type video', () => {
+    cy.visit(
+      `/${_defaultPath}&knob-Button%201=%20&knob-Button%202=%20&knob-CTA%20type%20(cta-type)%202=video`
+    );
+    cy.get('c4d-button-group-item')
+      .first()
+      .should('contain.text', '')
+      .next()
+      .should('not.be.empty');
+
+    cy.takeSnapshots();
+  });
+});
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/feature-card/feature-card.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/feature-card/feature-card.e2e.js
index efe89a4b5c8..fdd56450121 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/feature-card/feature-card.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/feature-card/feature-card.e2e.js
@@ -62,10 +62,10 @@ describe('c4d-feature-card | medium', () => {
       });
   });
 
-  it.skip('should have image on the left and content on the right side of the card', () => {
+  it('should have image on the left and content on the right side of the card', () => {
     // image takes the left half
     cy.get('c4d-image').then(($image) => {
-      expect($image[0].getBoundingClientRect().left).to.equal(32);
+      expect($image[0].getBoundingClientRect().left).to.equal(33);
       expect($image[0].getBoundingClientRect().right).to.equal(328);
     });
 
@@ -75,7 +75,7 @@ describe('c4d-feature-card | medium', () => {
       .find('.cds--card__wrapper')
       .then(($content) => {
         expect($content[0].getBoundingClientRect().left).to.equal(328);
-        expect($content[0].getBoundingClientRect().right).to.equal(624);
+        expect($content[0].getBoundingClientRect().right).to.equal(623);
       });
   });
 
@@ -161,16 +161,17 @@ describe('c4d-feature-card | large', () => {
       });
   });
 
-  it.skip('should have eyebrow, heading, and copy content', () => {
+  it('should have eyebrow, heading, and copy content', () => {
     cy.get('c4d-card-eyebrow').invoke('text').should('not.be.empty');
     cy.get('c4d-card-heading').invoke('text').should('not.be.empty');
     cy.get('c4d-feature-card > p').invoke('text').should('not.be.empty');
   });
+  
 
-  it.skip('should have image on the left and content on the right half of the card', () => {
+  it('should have image on the left and content on the right half of the card', () => {
     // image takes the left half
     cy.get('c4d-image').then(($image) => {
-      expect($image[0].getBoundingClientRect().left).to.equal(16);
+      expect($image[0].getBoundingClientRect().left).to.equal(33);
       expect($image[0].getBoundingClientRect().right).to.equal(529);
     });
 
@@ -180,7 +181,7 @@ describe('c4d-feature-card | large', () => {
       .find('.cds--card__wrapper')
       .then(($content) => {
         expect($content[0].getBoundingClientRect().left).to.equal(529);
-        expect($content[0].getBoundingClientRect().right).to.equal(1042);
+        expect($content[0].getBoundingClientRect().right).to.equal(1025);
       });
   });
 

From 5dc558ef59da8d102e6c4df024604832e9706a46 Mon Sep 17 00:00:00 2001
From: ibmdotcom-bot <digdes@us.ibm.com>
Date: Thu, 5 Dec 2024 02:55:27 +0000
Subject: [PATCH 05/21] chore(release): publish

 - @carbon/ibmdotcom-services@2.16.0-rc.2
 - @carbon/ibmdotcom-styles@2.16.0-rc.2
 - @carbon/ibmdotcom-utilities@2.16.0-rc.2
 - @carbon/ibmdotcom-web-components@2.16.0-rc.2
---
 packages/services/CHANGELOG.md       |  8 ++++++++
 packages/services/package.json       |  4 ++--
 packages/styles/CHANGELOG.md         |  8 ++++++++
 packages/styles/package.json         |  2 +-
 packages/utilities/CHANGELOG.md      |  8 ++++++++
 packages/utilities/package.json      |  2 +-
 packages/web-components/CHANGELOG.md |  8 ++++++++
 packages/web-components/package.json |  8 ++++----
 yarn.lock                            | 14 +++++++-------
 9 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/packages/services/CHANGELOG.md b/packages/services/CHANGELOG.md
index fef0e7b0d38..e41cf841fdb 100644
--- a/packages/services/CHANGELOG.md
+++ b/packages/services/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.1...@carbon/ibmdotcom-services@2.16.0-rc.2) (2024-12-05)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services
+
+
+
+
+
 # [2.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.0...@carbon/ibmdotcom-services@2.16.0-rc.1) (2024-11-29)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services
diff --git a/packages/services/package.json b/packages/services/package.json
index 5b70b02895b..fe539f2e6ab 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services",
   "description": "Carbon for IBM.com Services",
-  "version": "2.16.0-rc.1",
+  "version": "2.16.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibmdotcom-utilities": "2.16.0-rc.1",
+    "@carbon/ibmdotcom-utilities": "2.16.0-rc.2",
     "@ibm/telemetry-js": "^1.5.0",
     "axios": "^1.6.8",
     "marked": "^4.0.10",
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index a173188381f..e041f73dd62 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.1...@carbon/ibmdotcom-styles@2.16.0-rc.2) (2024-12-05)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-styles
+
+
+
+
+
 # [2.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.0...@carbon/ibmdotcom-styles@2.16.0-rc.1) (2024-11-29)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-styles
diff --git a/packages/styles/package.json b/packages/styles/package.json
index ce8a78ff865..f70eacfb5cb 100644
--- a/packages/styles/package.json
+++ b/packages/styles/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.2",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md
index df91382ef03..391660ab66e 100644
--- a/packages/utilities/CHANGELOG.md
+++ b/packages/utilities/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.1...@carbon/ibmdotcom-utilities@2.16.0-rc.2) (2024-12-05)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
 # [2.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.0...@carbon/ibmdotcom-utilities@2.16.0-rc.1) (2024-11-29)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-utilities
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index 668eade9b17..b2a49e6223e 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "2.16.0-rc.1",
+  "version": "2.16.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
index cf304cc43e6..56308e4d0fa 100644
--- a/packages/web-components/CHANGELOG.md
+++ b/packages/web-components/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.1...@carbon/ibmdotcom-web-components@2.16.0-rc.2) (2024-12-05)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-web-components
+
+
+
+
+
 # [2.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.0...@carbon/ibmdotcom-web-components@2.16.0-rc.1) (2024-11-29)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-web-components
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index e9f97a3a01a..e76b1f8b2b2 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.16.0-rc.1",
+  "version": "2.16.0-rc.2",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -92,9 +92,9 @@
     "cypress:verify": "cypress verify"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "2.16.0-rc.1",
-    "@carbon/ibmdotcom-styles": "2.16.0-rc.1",
-    "@carbon/ibmdotcom-utilities": "2.16.0-rc.1",
+    "@carbon/ibmdotcom-services": "2.16.0-rc.2",
+    "@carbon/ibmdotcom-styles": "2.16.0-rc.2",
+    "@carbon/ibmdotcom-utilities": "2.16.0-rc.2",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.22.0",
     "@carbon/styles": "1.65.0",
diff --git a/yarn.lock b/yarn.lock
index 2ab40fdd05c..b4f98d4819d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3350,7 +3350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-services@npm:2.16.0-rc.1, @carbon/ibmdotcom-services@workspace:packages/services":
+"@carbon/ibmdotcom-services@npm:2.16.0-rc.2, @carbon/ibmdotcom-services@workspace:packages/services":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-services@workspace:packages/services"
   dependencies:
@@ -3363,7 +3363,7 @@ __metadata:
     "@babel/plugin-transform-runtime": "npm:7.18.5"
     "@babel/preset-env": "npm:~7.23.2"
     "@babel/runtime": "npm:^7.16.3"
-    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.1"
+    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.2"
     "@ibm/telemetry-js": "npm:^1.5.0"
     "@rollup/plugin-babel": "npm:^5.3.1"
     "@rollup/plugin-commonjs": "npm:^21.0.3"
@@ -3397,7 +3397,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/ibmdotcom-styles@npm:2.16.0-rc.1, @carbon/ibmdotcom-styles@workspace:packages/styles":
+"@carbon/ibmdotcom-styles@npm:2.16.0-rc.2, @carbon/ibmdotcom-styles@workspace:packages/styles":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-styles@workspace:packages/styles"
   dependencies:
@@ -3435,7 +3435,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-utilities@npm:2.16.0-rc.1, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
+"@carbon/ibmdotcom-utilities@npm:2.16.0-rc.2, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-utilities@workspace:packages/utilities"
   dependencies:
@@ -3500,10 +3500,10 @@ __metadata:
     "@babel/preset-react": "npm:~7.12.1"
     "@babel/template": "npm:~7.12.0"
     "@babel/traverse": "npm:~7.23.7"
-    "@carbon/ibmdotcom-services": "npm:2.16.0-rc.1"
+    "@carbon/ibmdotcom-services": "npm:2.16.0-rc.2"
     "@carbon/ibmdotcom-services-store": "npm:1.53.3"
-    "@carbon/ibmdotcom-styles": "npm:2.16.0-rc.1"
-    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.1"
+    "@carbon/ibmdotcom-styles": "npm:2.16.0-rc.2"
+    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.2"
     "@carbon/icon-helpers": "npm:10.53.0"
     "@carbon/icons": "npm:10.48.5"
     "@carbon/icons-react": "npm:^11.33.0"

From ea9594ed9dffec69161c98e2522591f7d92bb39e Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Thu, 5 Dec 2024 13:18:03 -0500
Subject: [PATCH 06/21] fix(notice-choice): switch attribute to snake case
 (#12147)

### Related Ticket(s)

Follow up to https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/12127

### Description

Following convention, switch `current-language` attribute to snake case.

### Changelog

**Changed**

- Changed `currentLanguage` attribute in `<c4d-notice-choice>` component to snake case

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../src/components/notice-choice/notice-choice.ts               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/components/notice-choice/notice-choice.ts b/packages/web-components/src/components/notice-choice/notice-choice.ts
index 95aa58e32b4..5eca0c60a8c 100644
--- a/packages/web-components/src/components/notice-choice/notice-choice.ts
+++ b/packages/web-components/src/components/notice-choice/notice-choice.ts
@@ -56,7 +56,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   @property({ type: String, attribute: 'language' })
   language = 'en';
 
-  @property({ type: String, attribute: 'currentLanguage' })
+  @property({ type: String, attribute: 'current-language' })
   currentLanguage = 'en';
 
   @property({ type: String, attribute: 'terms-condition-link' })

From 32a8214c59bd72c031165460a509f0291f20a75f Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Fri, 6 Dec 2024 14:20:34 -0500
Subject: [PATCH 07/21] fix(button): fix disable state of the button (#12151)

### Related Ticket(s)

[ADCMS-6961](https://jsw.ibm.com/browse/ADCMS-6961)

### Description

Fixes some odd icon logic left in the button component. The fix allows us to consistently re-render the correct CTA type icon whenever a change in the parent component may mean a different `<slot name="icon">` element is rendered. This allows for consistency across disable/active states.

### Testing instructions

* Toggling disable knob and/or changing the `href` should maintain the expected icon and reflect the relevant state.
* Change CTA type knob state to make sure it reflects the right value

### Changelog

**Changed**

- Fixed icon issues in the button component for disable state

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../src/components/button/button.ts           | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
index f0fc96070f7..3ea0eb2a6c0 100644
--- a/packages/web-components/src/components/button/button.ts
+++ b/packages/web-components/src/components/button/button.ts
@@ -34,8 +34,8 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
   @query('a')
   _linkNode;
 
-  @property()
-  iconDiv;
+  @query(`slot[name='icon']`)
+  iconSlot?: HTMLElement;
 
   @property()
   span;
@@ -135,18 +135,26 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
 
   updated(changedProperties) {
     super.updated(changedProperties);
-
-    if (changedProperties.has('ctaType')) {
-      if (!this.iconDiv) {
-        this.iconDiv = this.shadowRoot?.querySelector("slot[name='icon']");
-      }
-
-      const { iconDiv } = this;
-
-      iconDiv.querySelector('svg')?.remove();
-      iconDiv.innerHTML = this._renderButtonIcon();
-      iconDiv
-        ?.querySelector('svg')
+    const updateIconForProperties = [
+      'ctaType',
+      'disabled',
+      'tooltipText',
+      'href',
+    ];
+    const { iconSlot } = this;
+
+    // Note that the parent may render a different <slot name="icon">
+    // based on changes to either disabled, tooltipText, or href, so we make
+    // sure to re-render the icon if any of those change, in addition to the
+    // ctaType.
+    if (
+      iconSlot &&
+      updateIconForProperties.some((prop) => changedProperties.has(prop))
+    ) {
+      iconSlot.querySelector('svg')?.remove();
+      iconSlot.innerHTML = this._renderButtonIcon();
+      iconSlot
+        .querySelector('svg')
         ?.classList.add(`${prefix}--card__cta`, `${c4dPrefix}-ce--cta__icon`);
     }
   }

From 36167197b122862c62a11a1a52e20919d3cf6e48 Mon Sep 17 00:00:00 2001
From: Valentin-Sorin-Nicolae
 <141405307+Valentin-Sorin-Nicolae@users.noreply.github.com>
Date: Sat, 7 Dec 2024 00:37:37 +0200
Subject: [PATCH 08/21] Card group item inverse color scheme (#12138)

### Related Ticket(s)

Closes [#12080](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12080)

### Description

[Figma Specs for inverse cards](https://www.figma.com/design/oip4K9G1z0v7tLNBbDZzdr/Card-specs-v2?node-id=20-4662&t=ANH9LQPEcxOGajfN-4)

Expected:
<img width="922" alt="378000813-1c06f292-1c05-4500-a1a9-891e86774515" src="https://github.com/user-attachments/assets/233a73bf-56c5-456a-a049-70069a35e826">

Actual:
<img width="920" alt="378000836-5cccfcaa-5c6b-43ac-b3dd-7fb0b0fb2be6" src="https://github.com/user-attachments/assets/edc39a81-54a9-4a47-a4a2-e12eba330952">

Component(s) impacted

c4d-card-group-item, potentially other card elements

### Changelog

Inverse color-scheme knob added to storybook.
---
 .../styles/scss/components/card/_card.scss    |   7 +-
 .../__stories__/card-group.stories.ts         | 192 ++++++++++++------
 2 files changed, 135 insertions(+), 64 deletions(-)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 0f0cafc7eca..bc1fbf4ec73 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -555,14 +555,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%);
diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
index e10e3023044..c995926af32 100644
--- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
+++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
@@ -23,6 +23,7 @@ import { GRID_MODE } from '../defs';
 import styles from './card-group.stories.scss';
 
 import readme from './README.stories.mdx';
+import { BASIC_COLOR_SCHEME } from '../../../globals/defs';
 
 let count = 0;
 const phraseArray = [
@@ -33,6 +34,11 @@ const phraseArray = [
   'Disputando lorem covallis',
 ];
 
+const colorSchemeMap = {
+  Regular: BASIC_COLOR_SCHEME.REGULAR,
+  Inverse: BASIC_COLOR_SCHEME.INVERSE,
+};
+
 const gridModes = {
   [`Condensed (1px)`]: GRID_MODE.CONDENSED,
   [`Narrow (16px)`]: GRID_MODE.NARROW,
@@ -64,11 +70,19 @@ const imageContent = html`
     default-src="${imgXlg4x3}"></c4d-image>
 `;
 
-const cardsDiffLengthPhrase = (index, tagGroup, media, cardType, addCta) => {
+const cardsDiffLengthPhrase = (
+  index,
+  tagGroup,
+  media,
+  cardType,
+  addCta,
+  colorScheme
+) => {
   const defaultCardGroupItem = html`
     <c4d-card-group-item
       cta-type=${cardType === 'Card static' ? '' : 'local'}
-      href=${cardType === 'Card static' ? '' : 'https://example.com'}>
+      href=${cardType === 'Card static' ? '' : 'https://example.com'}
+      color-scheme=${colorSchemeMap[colorScheme]}>
       ${media ? imageContent : ''}
       <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
       <c4d-card-heading
@@ -90,7 +104,10 @@ const cardsDiffLengthPhrase = (index, tagGroup, media, cardType, addCta) => {
   `;
 
   const videoCardGroupItem = (videoId = '1_9h94wo6b') => html`
-    <c4d-card-group-item cta-type="video" href="${videoId}">
+    <c4d-card-group-item
+      cta-type="video"
+      href="${videoId}"
+      color-scheme=${colorSchemeMap[colorScheme]}>
       <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
       <c4d-card-heading></c4d-card-heading>
       ${tagGroup ? tagGroupContent : ''}
@@ -107,11 +124,18 @@ const cardsDiffLengthPhrase = (index, tagGroup, media, cardType, addCta) => {
     : defaultCardGroupItem;
 };
 
-const longHeadingCardGroupItem = (tagGroup, media, cardType, addCta) => {
+const longHeadingCardGroupItem = (
+  tagGroup,
+  media,
+  cardType,
+  addCta,
+  colorScheme
+) => {
   return html`
     <c4d-card-group-item
       cta-type=${cardType === 'Card static' ? '' : 'local'}
-      href=${cardType === 'Card static' ? '' : 'https://example.com'}>
+      href=${cardType === 'Card static' ? '' : 'https://example.com'}
+      color-scheme=${colorSchemeMap[colorScheme]}>
       ${media ? imageContent : ''}
       <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
       <c4d-card-heading
@@ -133,53 +157,65 @@ const longHeadingCardGroupItem = (tagGroup, media, cardType, addCta) => {
   `;
 };
 
-const pictogramCard = () => html`
-  <c4d-card-group-item href="https://example.com" pictogram-placement="bottom">
-    <c4d-card-heading>Aerospace and defence</c4d-card-heading>
-    <p>
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud
-      exercitation.
-    </p>
-    <svg
-      slot="pictogram"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      data-autoid="c4d--card__pictogram"
-      aria-label="Pictogram description"
-      width="48"
-      height="48"
-      viewBox="0 0 32 32"
-      role="img"
-      class="cds--card__pictogram">
-      <path
-        id="desktop_1_"
-        d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
-  c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,
-  0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
-  18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
-    </svg>
-  </c4d-card-group-item>
-`;
+const pictogramCard = (colorScheme) => {
+  return html`
+    <c4d-card-group-item
+      href="https://example.com"
+      pictogram-placement="bottom"
+      color-scheme=${colorSchemeMap[colorScheme]}>
+      <c4d-card-heading>Aerospace and defence</c4d-card-heading>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis
+        nostrud exercitation.
+      </p>
+      <svg
+        slot="pictogram"
+        focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        data-autoid="c4d--card__pictogram"
+        aria-label="Pictogram description"
+        width="48"
+        height="48"
+        viewBox="0 0 32 32"
+        role="img"
+        class="cds--card__pictogram">
+        <path
+          id="desktop_1_"
+          d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
+    c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,
+    0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
+    18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
+      </svg>
+    </c4d-card-group-item>
+  `;
+};
 
-const cardLink = html`
-  <c4d-card-group-item
-    link
-    cta-type="local"
-    href="https://example.com"
-    pattern-background>
-    <c4d-card-heading>IBM Developer</c4d-card-heading>
-    <p>Learn, code and connect with your community</p>
-    <c4d-card-footer> </c4d-card-footer>
-  </c4d-card>
-`;
+const cardLink = (colorScheme) => {
+  return html`
+    <c4d-card-group-item
+      link
+      cta-type="local"
+      href="https://example.com"
+      pattern-background
+      color-scheme=${colorSchemeMap[colorScheme]}
+    >
+      <c4d-card-heading>IBM Developer</c4d-card-heading>
+      <p>Learn, code and connect with your community</p>
+      <c4d-card-footer> </c4d-card-footer>
+    </c4d-card>
+  `;
+};
 
-const cardInCardItems = (i, tagGroup, media) => {
+const cardInCardItems = (i, tagGroup, media, colorScheme) => {
   if (media) {
     return i % 2 === 0
       ? html`
-          <c4d-card-group-item cta-type="local" href="https://example.com">
+          <c4d-card-group-item
+            cta-type="local"
+            href="https://example.com"
+            color-scheme=${colorSchemeMap[colorScheme]}>
             ${imageContent}
             <c4d-card-eyebrow>Label</c4d-card-eyebrow>
             <c4d-card-heading
@@ -191,7 +227,10 @@ const cardInCardItems = (i, tagGroup, media) => {
           </c4d-card-group-item>
         `
       : html`
-          <c4d-card-group-item cta-type="video" href="0_ibuqxqbe">
+          <c4d-card-group-item
+            cta-type="video"
+            href="0_ibuqxqbe"
+            color-scheme=${colorSchemeMap[colorScheme]}>
             <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
             ${tagGroup ? tagGroupContent : ''}
             <c4d-card-footer cta-type="video" slot="footer" href="0_ibuqxqbe">
@@ -200,7 +239,10 @@ const cardInCardItems = (i, tagGroup, media) => {
         `;
   }
   return html`
-    <c4d-card-group-item cta-type="local" href="https://example.com">
+    <c4d-card-group-item
+      cta-type="local"
+      href="https://example.com"
+      color-scheme=${colorSchemeMap[colorScheme]}>
       <c4d-card-eyebrow>Label</c4d-card-eyebrow>
       <c4d-card-heading
         >The United Nations Environment Program works with IBM to reduce marine
@@ -213,22 +255,35 @@ const cardInCardItems = (i, tagGroup, media) => {
 };
 
 export const Default = (args) => {
-  const { cards, cardType, media, tagGroup, gridMode, cta, addCta } =
-    args?.CardGroup ?? {};
+  const {
+    cards,
+    cardType,
+    media,
+    tagGroup,
+    gridMode,
+    cta,
+    addCta,
+    colorScheme,
+  } = args?.CardGroup ?? {};
 
   const allCards: object[] = [];
 
   if (cardType === 'Card - default') {
-    allCards.push(longHeadingCardGroupItem(tagGroup, media, cardType, addCta));
+    allCards.push(
+      longHeadingCardGroupItem(tagGroup, media, cardType, addCta, colorScheme)
+    );
     for (let i = 1; i < cards; i++) {
       allCards.push(
-        cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta)
+        cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta, colorScheme)
       );
     }
     if (cta) {
       allCards.push(
         html`
-          <c4d-card-group-item cta-type="local" href="https://example.com">
+          <c4d-card-group-item
+            cta-type="local"
+            href="https://example.com"
+            color-scheme=${colorSchemeMap[colorScheme]}>
             <c4d-card-heading>Top level card link</c4d-card-heading>
             <c4d-card-footer> </c4d-card-footer>
           </c4d-card-group-item>
@@ -239,21 +294,26 @@ export const Default = (args) => {
 
   if (cardType === 'Card - pictogram') {
     for (let i = 0; i < cards; i++) {
-      allCards.push(pictogramCard());
+      allCards.push(pictogramCard(colorScheme));
     }
   }
 
   if (cardType === 'Card static') {
-    allCards.push(longHeadingCardGroupItem(tagGroup, media, cardType, addCta));
+    allCards.push(
+      longHeadingCardGroupItem(tagGroup, media, cardType, addCta, colorScheme)
+    );
     for (let i = 1; i < cards; i++) {
       allCards.push(
-        cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta)
+        cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta, colorScheme)
       );
     }
     if (cta) {
       allCards.push(
         html`
-          <c4d-card-group-item cta-type="local" href="https://example.com">
+          <c4d-card-group-item
+            cta-type="local"
+            href="https://example.com"
+            color-scheme=${colorSchemeMap[colorScheme]}>
             <c4d-card-heading>Top level card link</c4d-card-heading>
             <c4d-card-footer> </c4d-card-footer>
           </c4d-card-group-item>
@@ -264,7 +324,7 @@ export const Default = (args) => {
 
   if (cardType === 'Card link') {
     for (let i = 0; i < cards; i++) {
-      allCards.push(cardLink);
+      allCards.push(cardLink(colorScheme));
     }
   }
 
@@ -278,10 +338,11 @@ export const Default = (args) => {
 };
 
 export const withCardInCard = (args) => {
-  const { cards, tagGroup, media, gridMode } = args?.CardGroup ?? {};
+  const { cards, tagGroup, media, gridMode, colorScheme } =
+    args?.CardGroup ?? {};
   const allCards: object[] = [];
   for (let i = 0; i < cards; i++) {
-    allCards.push(cardInCardItems(i, tagGroup, media));
+    allCards.push(cardInCardItems(i, tagGroup, media, colorScheme));
   }
   return html`
     <c4d-video-cta-container>
@@ -328,6 +389,7 @@ withCardInCard.story = {
         tagGroup: boolean('Add tags:', false),
         gridMode: select('Grid mode:', gridModes, GRID_MODE.NARROW),
         cards: number('Number of cards', 5, { min: 2, max: 6 }),
+        colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
       }),
     },
     propsSet: {
@@ -337,6 +399,7 @@ withCardInCard.story = {
           tagGroup: false,
           gridMode: 'narrow',
           cards: 5,
+          colorScheme: BASIC_COLOR_SCHEME.REGULAR,
         },
       },
     },
@@ -392,6 +455,11 @@ export default {
               )
             : select('Grid mode:', gridModes, gridModes['Default (32px)']);
         const cta = media ? '' : boolean('Add CTA card:', false);
+        const colorScheme = select(
+          'Color scheme:',
+          ['Regular', 'Inverse'],
+          'Regular'
+        );
         return {
           cardType,
           media,
@@ -400,6 +468,7 @@ export default {
           cards,
           gridMode,
           cta,
+          colorScheme,
         };
       },
     },
@@ -413,6 +482,7 @@ export default {
           cards: 5,
           gridMode: 'collapsed',
           cta: false,
+          colorScheme: BASIC_COLOR_SCHEME.REGULAR,
         },
       },
     },

From a68e9ba3e78deced9ff0fd1d9553741de8a56136 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Fri, 6 Dec 2024 18:00:07 -0500
Subject: [PATCH 09/21] feat(video-player): enable autoplay & load as muted
 (#12150)

### Related Ticket(s)

[ADCMS-7129](https://jsw.ibm.com/browse/ADCMS-7129)

### Description

Ports a couple of v1 player fixes to v2 that got missed to fix auto-play while maintaining background-video mode:

Work that I've cherry-picked for this PR:
[ADCMS-6363](https://jsw.ibm.com/browse/ADCMS-6363)
https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/12070 (3d98787c5c7b6ec26d1a4a10762f212dc1d2b23e)
https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/12081 (863dfdc3690b98a44a1c862877bd1fa106cef12b)

### Changelog

**New**

- Adds `muted` attribute to `video-player-container`
- Adds storybook examples for `auto-play` and `muted` video player usage

**Changed**

- Fixes `auto-play` attribute on `video-player-container`
- Make `background-video` a reflected boolean attribute all the time.
- Fix a regression with auto-play video.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../video-player/_video-player.scss           |  4 +-
 .../__stories__/README.stories.mdx            |  2 +-
 .../__stories__/background-media.stories.ts   |  2 +-
 .../leadspace/__stories__/README.stories.mdx  |  2 +-
 .../__stories__/leadspace.stories.ts          | 10 +-
 .../__stories__/video-player.stories.ts       | 94 ++++++++++++++++++-
 .../video-player/video-player-composite.ts    | 10 +-
 .../video-player/video-player-container.ts    | 89 ++++++++++--------
 .../components/video-player/video-player.ts   | 16 +++-
 9 files changed, 174 insertions(+), 55 deletions(-)

diff --git a/packages/styles/scss/components/video-player/_video-player.scss b/packages/styles/scss/components/video-player/_video-player.scss
index ef367a215ad..2ce8da05989 100644
--- a/packages/styles/scss/components/video-player/_video-player.scss
+++ b/packages/styles/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%;
diff --git a/packages/web-components/src/components/background-media/__stories__/README.stories.mdx b/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
index ef2a8303ce8..dcd52ac423f 100644
--- a/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
@@ -69,7 +69,7 @@ import '@carbon/ibmdotcom-web-components/es/components/background-media/index.js
   <c4d-video-player-container
     playing-mode="inline"
     video-id="0_ibuqxqbe"
-    background-mode="true">
+    background-mode>
   </c4d-video-player-container>
 </c4d-background-media>
 ```
diff --git a/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts b/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
index 55c83f31d64..99fb2a33d23 100644
--- a/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
+++ b/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
@@ -56,7 +56,7 @@ export const WithVideo = (args) => {
         opacity="${ifDefined(backgroundOpacity)}">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </div>
   `;
diff --git a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
index f0f0a3882a7..acd4f68f7c4 100644
--- a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
@@ -87,7 +87,7 @@ such:
   <c4d-background-media slot="image" opacity="100">
     <c4d-video-player-container
       video-id="1_9h94wo6b"
-      background-mode="true"></c4d-video-player-container>
+      background-mode></c4d-video-player-container>
   </c4d-background-media>
 </c4d-leadspace>
 ```
diff --git a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
index c61fa9c8b52..a7e32479e50 100644
--- a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
+++ b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
@@ -190,7 +190,7 @@ export const SuperWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
@@ -335,7 +335,7 @@ export const TallWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
@@ -480,7 +480,7 @@ export const MediumWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
@@ -635,7 +635,7 @@ export const ShortWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
@@ -754,7 +754,7 @@ export const CenteredWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
diff --git a/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts b/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts
index 521036ddb05..2c04e1a1904 100644
--- a/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts
+++ b/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * 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.
@@ -82,6 +82,42 @@ export const withLightboxMediaViewer = (args) => {
   `;
 };
 
+export const autoplay = (args) => {
+  const { aspectRatio, caption, hideCaption, thumbnail, videoId } =
+    args?.VideoPlayer ?? {};
+  return html`
+    <c4d-video-player-container
+      auto-play
+      playing-mode="inline"
+      video-id=${videoId}
+      aspect-ratio=${aspectRatio}
+      caption=${caption}
+      ?hide-caption=${hideCaption}
+      thumbnail=${thumbnail}></c4d-video-player-container>
+  `;
+};
+
+export const autoplayMuted = (args) => {
+  const { caption, hideCaption, thumbnail, videoId } = args?.VideoPlayer ?? {};
+  return html`
+    <style>
+      c4d-video-player-container[background-mode] {
+        display: block;
+        aspect-ratio: 16/9;
+        outline: 2px solid red;
+      }
+    </style>
+    <c4d-video-player-container
+      auto-play
+      muted
+      playing-mode="inline"
+      video-id=${videoId}
+      caption=${caption}
+      ?hide-caption=${hideCaption}
+      thumbnail=${thumbnail}></c4d-video-player-container>
+  `;
+};
+
 aspectRatio4x3.story = {
   name: 'Aspect ratio 4:3',
   parameters: {
@@ -171,6 +207,62 @@ withLightboxMediaViewer.story = {
   },
 };
 
+autoplay.story = {
+  name: 'Autoplay',
+  parameters: {
+    knobs: {
+      VideoPlayer: () => {
+        return {
+          aspectRatio: '4x3',
+          caption: text('Custom caption (caption):', ''),
+          hideCaption: boolean('Hide caption (hideCaption):', false),
+          thumbnail: text('Custom thumbnail (thumbnail):', ''),
+          videoId: '0_ibuqxqbe',
+        };
+      },
+    },
+    propsSet: {
+      default: {
+        VideoPlayer: {
+          aspectRatio: '4x3',
+          caption: '',
+          hideCaption: false,
+          thumbnail: '',
+          videoId: '0_ibuqxqbe',
+        },
+      },
+    },
+  },
+};
+
+autoplayMuted.story = {
+  name: 'Autoplay muted',
+  parameters: {
+    knobs: {
+      VideoPlayer: () => {
+        return {
+          aspectRatio: '4x3',
+          caption: text('Custom caption (caption):', ''),
+          hideCaption: boolean('Hide caption (hideCaption):', false),
+          thumbnail: text('Custom thumbnail (thumbnail):', ''),
+          videoId: '0_ibuqxqbe',
+        };
+      },
+    },
+    propsSet: {
+      default: {
+        VideoPlayer: {
+          aspectRatio: '4x3',
+          caption: '',
+          hideCaption: false,
+          thumbnail: '',
+          videoId: '0_ibuqxqbe',
+        },
+      },
+    },
+  },
+};
+
 export default {
   title: 'Components/Video player',
   decorators: [
diff --git a/packages/web-components/src/components/video-player/video-player-composite.ts b/packages/web-components/src/components/video-player/video-player-composite.ts
index a7fd888a819..5ada0cbdaeb 100644
--- a/packages/web-components/src/components/video-player/video-player-composite.ts
+++ b/packages/web-components/src/components/video-player/video-player-composite.ts
@@ -143,6 +143,12 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
   @property({ type: Boolean, attribute: 'auto-play' })
   autoPlay = false;
 
+  /**
+   * `true` load videos with sound muted.
+   */
+  @property({ type: Boolean, attribute: 'muted' })
+  muted = false;
+
   /**
    * The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.
    */
@@ -190,7 +196,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
   /**
    * `true` to autoplay, mute, and hide player UI.
    */
-  @property({ type: Boolean, attribute: 'background-mode' })
+  @property({ type: Boolean, attribute: 'background-mode', reflect: true })
   backgroundMode = false;
 
   /**
@@ -214,7 +220,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
   /**
    * The current playback state
    */
-  @property()
+  @property({ type: Boolean })
   isPlaying = false;
 
   /**
diff --git a/packages/web-components/src/components/video-player/video-player-container.ts b/packages/web-components/src/components/video-player/video-player-container.ts
index 6ac26b6a0b9..d725b49bbac 100644
--- a/packages/web-components/src/components/video-player/video-player-container.ts
+++ b/packages/web-components/src/components/video-player/video-player-container.ts
@@ -168,45 +168,54 @@ export const C4DVideoPlayerContainerMixin = <
       const storedValue = localStorage.getItem(
         `${this.prefersAutoplayStorageKey}`
       );
-      const returnValue =
-        storedValue === null ? null : Boolean(parseInt(storedValue, 10));
-      return returnValue;
+
+      if (storedValue === null) {
+        return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      } else {
+        return Boolean(parseInt(storedValue, 10));
+      }
     }
 
-    _getPlayerOptions(backgroundMode = false) {
+    _getPlayerOptions() {
+      const { backgroundMode, autoPlay, muted } =
+        this as unknown as C4DVideoPlayerComposite;
       let playerOptions = {};
-
-      if (backgroundMode) {
-        const storedMotionPreference: boolean | null =
-          this._getAutoplayPreference();
-
-        let autoplayPreference: boolean | undefined;
-
-        if (storedMotionPreference === null) {
-          autoplayPreference = !window.matchMedia(
-            '(prefers-reduced-motion: reduce)'
-          ).matches;
-        } else {
-          autoplayPreference = storedMotionPreference;
-        }
-        playerOptions = {
-          'topBarContainer.plugin': false,
-          'controlBarContainer.plugin': false,
-          'largePlayBtn.plugin': false,
-          'loadingSpinner.plugin': false,
-          'unMuteOverlayButton.plugin': false,
-          'EmbedPlayer.DisableVideoTagSupport': false,
-          loop: true,
-          autoMute: true,
-          autoPlay: autoplayPreference,
-          // Turn off CTA's including mid-roll card and end cards.
-          'ibm.callToActions': false,
-          // Turn off captions display, background/ambient videos have no
-          // audio.
-          closedCaptions: {
-            plugin: false,
-          },
-        };
+      const autoplayPreference = this._getAutoplayPreference();
+
+      switch (true) {
+        case autoPlay:
+          playerOptions = {
+            autoMute: muted,
+            autoPlay: autoplayPreference,
+          };
+          break;
+
+        case backgroundMode:
+          playerOptions = {
+            'topBarContainer.plugin': false,
+            'controlBarContainer.plugin': false,
+            'largePlayBtn.plugin': false,
+            'loadingSpinner.plugin': false,
+            'unMuteOverlayButton.plugin': false,
+            'EmbedPlayer.DisableVideoTagSupport': false,
+            loop: true,
+            autoMute: true,
+            autoPlay: autoplayPreference,
+            // Turn off CTA's including mid-roll card and end cards.
+            'ibm.callToActions': false,
+            // Turn off captions display, background/ambient videos have no
+            // audio.
+            closedCaptions: {
+              plugin: false,
+            },
+          };
+          break;
+
+        default:
+          playerOptions = {
+            autoMute: muted,
+          };
+          break;
       }
 
       return playerOptions;
@@ -219,7 +228,7 @@ export const C4DVideoPlayerContainerMixin = <
      * @private
      */
     // Not using TypeScript `private` due to: microsoft/TypeScript#17744
-    async _embedVideoImpl(videoId: string, backgroundMode = false) {
+    async _embedVideoImpl(videoId: string) {
       const doc = Object.prototype.hasOwnProperty.call(this, 'getRootNode')
         ? (this.getRootNode() as Document | ShadowRoot)
         : this.ownerDocument;
@@ -240,7 +249,7 @@ export const C4DVideoPlayerContainerMixin = <
       const embedVideoHandle = await KalturaPlayerAPI.embedMedia(
         videoId,
         playerId,
-        this._getPlayerOptions(backgroundMode)
+        this._getPlayerOptions()
       );
       const { width, height } = await KalturaPlayerAPI.api(videoId);
       videoPlayer.style.setProperty('--native-file-width', `${width}px`);
@@ -264,7 +273,7 @@ export const C4DVideoPlayerContainerMixin = <
      * @param videoId The video ID.
      * @internal
      */
-    _embedMedia = async (videoId: string, backgroundMode = false) => {
+    _embedMedia = async (videoId: string) => {
       const { _requestsEmbedVideo: requestsEmbedVideo } = this;
       const requestEmbedVideo = requestsEmbedVideo[videoId];
 
@@ -272,7 +281,7 @@ export const C4DVideoPlayerContainerMixin = <
         return requestEmbedVideo;
       }
 
-      const promiseEmbedVideo = this._embedVideoImpl(videoId, backgroundMode);
+      const promiseEmbedVideo = this._embedVideoImpl(videoId);
 
       this._setRequestEmbedVideoInProgress(videoId, promiseEmbedVideo);
       try {
diff --git a/packages/web-components/src/components/video-player/video-player.ts b/packages/web-components/src/components/video-player/video-player.ts
index 7926516f724..e4790a1062c 100644
--- a/packages/web-components/src/components/video-player/video-player.ts
+++ b/packages/web-components/src/components/video-player/video-player.ts
@@ -80,7 +80,8 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) {
   private _renderContent() {
     const { contentState, name, thumbnailUrl, backgroundMode } = this;
     return contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL &&
-      !backgroundMode
+      !backgroundMode &&
+      !this.autoplay
       ? html`
           <div class="${c4dPrefix}--video-player__video" part="video">
             <button
@@ -184,9 +185,15 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) {
   /**
    * `true` to autoplay, mute video, and hide UI
    */
-  @property({ attribute: 'background-mode', reflect: true })
+  @property({ attribute: 'background-mode', reflect: true, type: Boolean })
   backgroundMode = false;
 
+  /**
+   * `true` to autoplay
+   */
+  @property({ attribute: 'auto-play', reflect: true, type: Boolean })
+  autoplay = false;
+
   /**
    * Custom video description. This property should only be set when using `playing-mode="lightbox"`
    */
@@ -285,7 +292,12 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) {
       (this.parentElement as C4DVideoPlayerContainer)?.backgroundMode
     );
 
+    const parentIsAutoplay = Boolean(
+      (this.parentElement as C4DVideoPlayerContainer)?.autoPlay
+    );
+
     this.backgroundMode = parentIsBackground;
+    this.autoplay = parentIsAutoplay;
   }
 
   /**

From e817962c042db7b49f25db44cbaed3d7c23b4a8f Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Fri, 6 Dec 2024 22:00:04 -0500
Subject: [PATCH 10/21] fix(card): push the footer to the bottom of the card
 consistently (#12137)

### Related Ticket(s)

[ADCMS-7121](https://jsw.ibm.com/browse/ADCMS-7121)
[ADCMS-7158](https://jsw.ibm.com/browse/ADCMS-7158)

### Description

Under certain conditions, the footer of a card, especially within a group, might not stick to the end of the card as intended. This fixes it so that the card footer is always at the end of the card.

### Changelog

**Changed**

- Force the footer of cards to be at the end, corrects an issue with Content Group Cards

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 packages/styles/scss/components/card/_card.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index bc1fbf4ec73..9c926c7c0f3 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/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;

From b4000916f8743c6fcb9c3b7f8042d0fd93e55ed8 Mon Sep 17 00:00:00 2001
From: Andy Blum <andy.blum.01@gmail.com>
Date: Fri, 6 Dec 2024 23:07:04 -0500
Subject: [PATCH 11/21] fix(link-list): v2 style regressions (#12125)

* fix(link-list): v2 style regressions

* feat(link-list): yarn format

* fix(link-list): undo temp styles change

* fix(link-list): mirror link-list-item styles to link-list-item-cta

* fix(link-list): simplify stories

* yarn format

* fix(link-list): update expected icon in tests

* fix(link-list): fix spacing

* fix(link-list): yarn format

* fix(link-list): testing failures

* fix(link-list): skip e2e test covered by percy

---------

Co-authored-by: Matthew Oliveira <m4olivei@gmail.com>
---
 .../scss/components/link-list/_link-list.scss |  35 +-
 .../__stories__/link-list.stories.ts          | 337 ++++++++----------
 .../integration/link-list/default.e2e.js      |   2 +-
 .../integration/link-list/horizontal.e2e.js   |   4 +-
 .../integration/link-list/vertical.e2e.js     |   2 +-
 5 files changed, 159 insertions(+), 221 deletions(-)

diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss
index 4ee0b5878e2..14080518bb9 100644
--- a/packages/styles/scss/components/link-list/_link-list.scss
+++ b/packages/styles/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;
     }
   }
 
diff --git a/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts b/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
index 2a657d94e69..724be4d0e2b 100644
--- a/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
+++ b/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { select } from '@storybook/addon-knobs';
+import { select, number } from '@storybook/addon-knobs';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import { CTA_TYPE } from '../../cta/defs';
 import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
@@ -46,80 +46,58 @@ const types = {
   [`Video (${CTA_TYPE.VIDEO})`]: CTA_TYPE.VIDEO,
 };
 
+const placements = {
+  [`Left (${ICON_PLACEMENT.LEFT})`]: ICON_PLACEMENT.LEFT,
+  [`Right (${ICON_PLACEMENT.RIGHT})`]: ICON_PLACEMENT.RIGHT,
+};
+
+const lipsums = [
+  'Consectetur voluptate ea proident officia',
+  'Duis esse aliqua proident esse officia qui ullamco commodo laborum',
+  'Sunt mollit officia est irure laboris',
+  'Exercitation Lorem dolor dolore velit',
+  'Esse ut do velit voluptate irure officia',
+  'In sint sit adipisicing cupidatat tempor ullamco',
+  'Do nisi adipisicing voluptate fugiat culpa elit',
+];
+
+const getDummyText = (i) => lipsums[i % lipsums.length];
+
+const makeLinkListItem = (args) => {
+  console.log(args);
+
+  const { href, ctaType, download, text, placement } = args;
+  return html`
+    <c4d-link-list-item
+      href="${href || 'https://example.com'}"
+      cta-type="${ifDefined(ctaType)}"
+      download="${ifDefined(download)}"
+      icon-placement="${placement}">
+      ${ctaType !== CTA_TYPE.VIDEO ? html`${text}` : null}
+    </c4d-link-list-item>
+  `;
+};
+
 export const Default = (args) => {
-  const { ctaType, download, href } = args?.LinkListItem ?? {};
-  return !ctaType
-    ? html`
-        <c4d-link-list type="default">
-          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
-          <c4d-link-list-item href="https://example.com" cta-type="local">
-            Learn more about Kubernetes
-          </c4d-link-list-item>
-          <c4d-link-list-item href="https://example.com" cta-type="local">
-            Containerization A Complete Guide
-          </c4d-link-list-item>
-          <c4d-link-list-item href="https://example.com" cta-type="local">
-            Microservices and containers
-          </c4d-link-list-item>
-        </c4d-link-list>
-      `
-    : html`
-        <c4d-link-list type="default">
-          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
-          <c4d-link-list-item-cta
-            href="${ifDefined(href)}"
-            cta-type="${ifDefined(ctaType)}"
-            download="${ifDefined(download)}"
-            type="default">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Learn more about Kubernetes `
-              : null}
-          </c4d-link-list-item-cta>
-          <c4d-link-list-item-cta
-            href="${ifDefined(href)}"
-            cta-type="${ifDefined(ctaType)}"
-            download="${ifDefined(download)}"
-            type="default">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Containerization A Complete Guide `
-              : null}
-          </c4d-link-list-item-cta>
-          <c4d-link-list-item-cta
-            href="${ifDefined(href)}"
-            cta-type="${ifDefined(ctaType)}"
-            download="${ifDefined(download)}"
-            type="default">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Microservices and containers `
-              : null}
-          </c4d-link-list-item-cta>
-        </c4d-link-list>
-      `;
+  const knobs = args?.LinkListItem ?? {};
+  const { count } = knobs;
+
+  return html`
+    <c4d-link-list type="default">
+      <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+      ${[...new Array(count)].map((_item, i) =>
+        makeLinkListItem({
+          text: getDummyText(i),
+          ...knobs,
+        })
+      )}
+    </c4d-link-list>
+  `;
 };
 
 Default.story = {
   parameters: {
     colLgClass: 'cds--col-lg-6',
-    knobs: {
-      LinkListItem: () => {
-        const ctaType = select('CTA type (cta-type)', types, null);
-        const download =
-          ctaType !== CTA_TYPE.DOWNLOAD
-            ? undefined
-            : textNullable(
-                'Download target (download)',
-                'IBM_Annual_Report_2019.pdf'
-              );
-        return {
-          ctaType,
-          download,
-          href: textNullable(
-            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
-            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
-          ),
-        };
-      },
-    },
     propsSet: {
       default: {
         LinkListItem: {
@@ -133,82 +111,25 @@ Default.story = {
 };
 
 export const Horizontal = (args) => {
-  const {
-    ctaType,
-    download,
-    href,
-    iconPlacement = ICON_PLACEMENT.RIGHT,
-  } = args?.LinkListItem ?? {};
-  return !ctaType
-    ? html`
-        <c4d-link-list type="horizontal">
-          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
-          <c4d-link-list-item
-            icon-placement="${iconPlacement}"
-            href="https://example.com"
-            type="horizontal"
-            cta-type="local">
-            Learn more about Kubernetes
-          </c4d-link-list-item>
-          <c4d-link-list-item
-            icon-placement="${iconPlacement}"
-            href="https://example.com"
-            type="horizontal"
-            cta-type="local">
-            Containerization A Complete Guide
-          </c4d-link-list-item>
-        </c4d-link-list>
-      `
-    : html`
-        <c4d-link-list type="horizontal">
-          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
-          <c4d-link-list-item-cta
-            icon-placement="${iconPlacement}"
-            href="${ifDefined(href)}"
-            cta-type="${ifDefined(ctaType)}"
-            download="${ifDefined(download)}"
-            type="horizontal">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Learn more about Kubernetes `
-              : null}
-          </c4d-link-list-item-cta>
-          <c4d-link-list-item-cta
-            icon-placement="${iconPlacement}"
-            href="${ifDefined(href)}"
-            cta-type="${ifDefined(ctaType)}"
-            download="${ifDefined(download)}"
-            type="horizontal">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Containerization A Complete Guide `
-              : null}
-          </c4d-link-list-item-cta>
-        </c4d-link-list>
-      `;
+  const knobs = args?.LinkListItem ?? {};
+  const { count } = knobs;
+
+  return html`
+    <c4d-link-list type="horizontal">
+      <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+      ${[...new Array(count)].map((_item, i) =>
+        makeLinkListItem({
+          text: getDummyText(i),
+          ...knobs,
+        })
+      )}
+    </c4d-link-list>
+  `;
 };
 
 Horizontal.story = {
   parameters: {
-    colLgClass: 'cds--col-lg-10',
-    knobs: {
-      LinkListItem: () => {
-        const ctaType = select('CTA type (cta-type)', types, null);
-        const download =
-          ctaType !== CTA_TYPE.DOWNLOAD
-            ? undefined
-            : textNullable(
-                'Download target (download)',
-                'IBM_Annual_Report_2019.pdf'
-              );
-        return {
-          ctaType,
-          download,
-          href: textNullable(
-            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
-            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
-          ),
-        };
-      },
-    },
+    colLgClass: 'cds--col-lg-16',
     propsSet: {
       default: {
         LinkListItem: {
@@ -222,63 +143,57 @@ Horizontal.story = {
 };
 
 export const Vertical = (args) => {
-  const {
-    ctaType,
-    download,
-    href,
-    iconPlacement = ICON_PLACEMENT.RIGHT,
-  } = args?.LinkListItem ?? {};
-  return !ctaType
-    ? html`
-        <c4d-link-list type="vertical">
-          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
-          <c4d-link-list-item
-            icon-placement="${iconPlacement}"
-            href="https://example.com"
-            type="horizontal"
-            cta-type="local">
-            Learn more about Kubernetes
-          </c4d-link-list-item>
-          <c4d-link-list-item
-            icon-placement="${iconPlacement}"
-            href="https://example.com"
-            type="horizontal"
-            cta-type="local">
-            Containerization A Complete Guide
-          </c4d-link-list-item>
-        </c4d-link-list>
-      `
-    : html`
-        <c4d-link-list type="vertical">
-          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
-          <c4d-link-list-item-cta
-            icon-placement="${iconPlacement}"
-            href="${ifDefined(href)}"
-            cta-type="${ifDefined(ctaType)}"
-            download="${ifDefined(download)}"
-            type="horizontal">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Learn more about Kubernetes `
-              : null}
-          </c4d-link-list-item-cta>
-          <c4d-link-list-item-cta
-            icon-placement="${iconPlacement}"
-            href="${ifDefined(href)}"
-            cta-type="${ifDefined(ctaType)}"
-            download="${ifDefined(download)}"
-            type="horizontal">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Containerization A Complete Guide `
-              : null}
-          </c4d-link-list-item-cta>
-        </c4d-link-list>
-      `;
+  const knobs = args?.LinkListItem ?? {};
+  const { count } = knobs;
+
+  return html`
+    <c4d-link-list type="vertical">
+      <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+      ${[...new Array(count)].map((_item, i) =>
+        makeLinkListItem({
+          text: getDummyText(i),
+          ...knobs,
+        })
+      )}
+    </c4d-link-list>
+  `;
 };
 
 Vertical.story = {
   parameters: {
-    colLgClass: 'cds--col-lg-4',
-    knobs: Horizontal.story.parameters.knobs,
+    colLgClass: 'cds--col-lg-6',
+    propsSet: {
+      default: {
+        LinkListItem: {
+          ctaType: null,
+          download: undefined,
+          href: 'https://www.example.com',
+        },
+      },
+    },
+  },
+};
+
+export const End = (args) => {
+  const knobs = args?.LinkListItem ?? {};
+  const { count } = knobs;
+
+  return html`
+    <c4d-link-list type="end">
+      <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+      ${[...new Array(count)].map((_item, i) =>
+        makeLinkListItem({
+          text: getDummyText(i),
+          ...knobs,
+        })
+      )}
+    </c4d-link-list>
+  `;
+};
+
+End.story = {
+  parameters: {
+    colLgClass: 'cds--col-lg-16',
     propsSet: {
       default: {
         LinkListItem: {
@@ -296,9 +211,43 @@ export default {
   parameters: {
     ...readme.parameters,
     hasStoryPadding: true,
+    knobs: {
+      LinkListItem: () => {
+        const count = number('Number of Links', 3);
+        const ctaType = select(
+          'CTA type (cta-type)',
+          types,
+          types['Local (local)']
+        );
+        const placement = select(
+          'Icon Placement (icon-placement)',
+          placements,
+          ICON_PLACEMENT.RIGHT
+        );
+        const download =
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : textNullable(
+                'Download target (download)',
+                'IBM_Annual_Report_2019.pdf'
+              );
+        return {
+          count,
+          ctaType,
+          download,
+          placement,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+        };
+      },
+    },
   },
   decorators: [
     (story, { parameters }) => {
+      console.log(parameters);
+
       const { colLgClass } = parameters;
       return html`
         <c4d-video-cta-container class="cds--grid">
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/default.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/default.e2e.js
index f4a8473fdef..7ed79c9035e 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/default.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/default.e2e.js
@@ -103,7 +103,7 @@ const _tests = {
       download:
         'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
       video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
+        'M7,28a1,1,0,0,1-1-1V5a1,1,0,0,1,1.4819-.8763l20,11a1,1,0,0,1,0,1.7525l-20,11A1.0005,1.0005,0,0,1,7,28Z',
     };
 
     Object.keys(types).forEach((type) => {
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/horizontal.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/horizontal.e2e.js
index 73ae17937b9..63f6cfe7d47 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/horizontal.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/horizontal.e2e.js
@@ -110,7 +110,7 @@ const _tests = {
       download:
         'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
       video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
+        'M7,28a1,1,0,0,1-1-1V5a1,1,0,0,1,1.4819-.8763l20,11a1,1,0,0,1,0,1.7525l-20,11A1.0005,1.0005,0,0,1,7,28Z',
     };
 
     Object.keys(types).forEach((type) => {
@@ -131,7 +131,7 @@ describe('c4d-link-list | default (desktop)', () => {
   });
 
   it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a horizontal layout', _tests.checkHorizontalAlignment);
+  it.skip('should have a horizontal layout', _tests.checkHorizontalAlignment);
   it('should check a11y', _tests.checkA11y);
   _tests.checkCTATypes();
 });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/vertical.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/vertical.e2e.js
index 5b5e5dc0b0d..ae009259a72 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/vertical.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/vertical.e2e.js
@@ -87,7 +87,7 @@ const _tests = {
       download:
         'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
       video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
+        'M7,28a1,1,0,0,1-1-1V5a1,1,0,0,1,1.4819-.8763l20,11a1,1,0,0,1,0,1.7525l-20,11A1.0005,1.0005,0,0,1,7,28Z',
     };
 
     Object.keys(types).forEach((type) => {

From f35ac6b645aebca2cf92e2d39c91d4bf77cdf3af Mon Sep 17 00:00:00 2001
From: ibmdotcom-bot <digdes@us.ibm.com>
Date: Sat, 7 Dec 2024 04:30:30 +0000
Subject: [PATCH 12/21] chore(release): publish

 - @carbon/ibmdotcom-services@2.16.0-rc.3
 - @carbon/ibmdotcom-styles@2.16.0-rc.3
 - @carbon/ibmdotcom-utilities@2.16.0-rc.3
 - @carbon/ibmdotcom-web-components@2.16.0-rc.3
---
 packages/services/CHANGELOG.md       |  8 ++++++++
 packages/services/package.json       |  4 ++--
 packages/styles/CHANGELOG.md         | 17 +++++++++++++++++
 packages/styles/package.json         |  2 +-
 packages/utilities/CHANGELOG.md      |  8 ++++++++
 packages/utilities/package.json      |  2 +-
 packages/web-components/CHANGELOG.md | 18 ++++++++++++++++++
 packages/web-components/package.json |  8 ++++----
 yarn.lock                            | 14 +++++++-------
 9 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/packages/services/CHANGELOG.md b/packages/services/CHANGELOG.md
index e41cf841fdb..958d87b7ceb 100644
--- a/packages/services/CHANGELOG.md
+++ b/packages/services/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.2...@carbon/ibmdotcom-services@2.16.0-rc.3) (2024-12-07)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services
+
+
+
+
+
 # [2.16.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.1...@carbon/ibmdotcom-services@2.16.0-rc.2) (2024-12-05)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services
diff --git a/packages/services/package.json b/packages/services/package.json
index fe539f2e6ab..be1bae0f8cc 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services",
   "description": "Carbon for IBM.com Services",
-  "version": "2.16.0-rc.2",
+  "version": "2.16.0-rc.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibmdotcom-utilities": "2.16.0-rc.2",
+    "@carbon/ibmdotcom-utilities": "2.16.0-rc.3",
     "@ibm/telemetry-js": "^1.5.0",
     "axios": "^1.6.8",
     "marked": "^4.0.10",
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index e041f73dd62..557def4fed2 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.2...@carbon/ibmdotcom-styles@2.16.0-rc.3) (2024-12-07)
+
+
+### Bug Fixes
+
+* **card:** push the footer to the bottom of the card consistently ([#12137](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12137)) ([e817962](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e817962c042db7b49f25db44cbaed3d7c23b4a8f))
+* **link-list:** v2 style regressions ([#12125](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12125)) ([b400091](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b4000916f8743c6fcb9c3b7f8042d0fd93e55ed8))
+
+
+### Features
+
+* **video-player:** enable autoplay & load as muted ([#12150](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12150)) ([a68e9ba](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a68e9ba3e78deced9ff0fd1d9553741de8a56136))
+
+
+
+
+
 # [2.16.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.1...@carbon/ibmdotcom-styles@2.16.0-rc.2) (2024-12-05)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-styles
diff --git a/packages/styles/package.json b/packages/styles/package.json
index f70eacfb5cb..5fd747941ed 100644
--- a/packages/styles/package.json
+++ b/packages/styles/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-rc.3",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md
index 391660ab66e..558e18d09dc 100644
--- a/packages/utilities/CHANGELOG.md
+++ b/packages/utilities/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.2...@carbon/ibmdotcom-utilities@2.16.0-rc.3) (2024-12-07)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
 # [2.16.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.1...@carbon/ibmdotcom-utilities@2.16.0-rc.2) (2024-12-05)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-utilities
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index b2a49e6223e..75ec3e54b72 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "2.16.0-rc.2",
+  "version": "2.16.0-rc.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
index 56308e4d0fa..f8780b0c90d 100644
--- a/packages/web-components/CHANGELOG.md
+++ b/packages/web-components/CHANGELOG.md
@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.2...@carbon/ibmdotcom-web-components@2.16.0-rc.3) (2024-12-07)
+
+
+### Bug Fixes
+
+* **button:** fix disable state of the button ([#12151](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12151)) ([32a8214](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/32a8214c59bd72c031165460a509f0291f20a75f))
+* **link-list:** v2 style regressions ([#12125](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12125)) ([b400091](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b4000916f8743c6fcb9c3b7f8042d0fd93e55ed8))
+* **notice-choice:** switch attribute to snake case ([#12147](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12147)) ([ea9594e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ea9594ed9dffec69161c98e2522591f7d92bb39e))
+
+
+### Features
+
+* **video-player:** enable autoplay & load as muted ([#12150](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12150)) ([a68e9ba](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a68e9ba3e78deced9ff0fd1d9553741de8a56136))
+
+
+
+
+
 # [2.16.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.1...@carbon/ibmdotcom-web-components@2.16.0-rc.2) (2024-12-05)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-web-components
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index e76b1f8b2b2..a57727b974b 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.16.0-rc.2",
+  "version": "2.16.0-rc.3",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -92,9 +92,9 @@
     "cypress:verify": "cypress verify"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "2.16.0-rc.2",
-    "@carbon/ibmdotcom-styles": "2.16.0-rc.2",
-    "@carbon/ibmdotcom-utilities": "2.16.0-rc.2",
+    "@carbon/ibmdotcom-services": "2.16.0-rc.3",
+    "@carbon/ibmdotcom-styles": "2.16.0-rc.3",
+    "@carbon/ibmdotcom-utilities": "2.16.0-rc.3",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.22.0",
     "@carbon/styles": "1.65.0",
diff --git a/yarn.lock b/yarn.lock
index b4f98d4819d..d61de207d30 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3350,7 +3350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-services@npm:2.16.0-rc.2, @carbon/ibmdotcom-services@workspace:packages/services":
+"@carbon/ibmdotcom-services@npm:2.16.0-rc.3, @carbon/ibmdotcom-services@workspace:packages/services":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-services@workspace:packages/services"
   dependencies:
@@ -3363,7 +3363,7 @@ __metadata:
     "@babel/plugin-transform-runtime": "npm:7.18.5"
     "@babel/preset-env": "npm:~7.23.2"
     "@babel/runtime": "npm:^7.16.3"
-    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.2"
+    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.3"
     "@ibm/telemetry-js": "npm:^1.5.0"
     "@rollup/plugin-babel": "npm:^5.3.1"
     "@rollup/plugin-commonjs": "npm:^21.0.3"
@@ -3397,7 +3397,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/ibmdotcom-styles@npm:2.16.0-rc.2, @carbon/ibmdotcom-styles@workspace:packages/styles":
+"@carbon/ibmdotcom-styles@npm:2.16.0-rc.3, @carbon/ibmdotcom-styles@workspace:packages/styles":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-styles@workspace:packages/styles"
   dependencies:
@@ -3435,7 +3435,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-utilities@npm:2.16.0-rc.2, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
+"@carbon/ibmdotcom-utilities@npm:2.16.0-rc.3, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-utilities@workspace:packages/utilities"
   dependencies:
@@ -3500,10 +3500,10 @@ __metadata:
     "@babel/preset-react": "npm:~7.12.1"
     "@babel/template": "npm:~7.12.0"
     "@babel/traverse": "npm:~7.23.7"
-    "@carbon/ibmdotcom-services": "npm:2.16.0-rc.2"
+    "@carbon/ibmdotcom-services": "npm:2.16.0-rc.3"
     "@carbon/ibmdotcom-services-store": "npm:1.53.3"
-    "@carbon/ibmdotcom-styles": "npm:2.16.0-rc.2"
-    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.2"
+    "@carbon/ibmdotcom-styles": "npm:2.16.0-rc.3"
+    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.3"
     "@carbon/icon-helpers": "npm:10.53.0"
     "@carbon/icons": "npm:10.48.5"
     "@carbon/icons-react": "npm:^11.33.0"

From bb9ae8cba94b1cfc5db4802d3ad483b79851ea9e Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Mon, 9 Dec 2024 07:45:28 -0500
Subject: [PATCH 13/21] chore(styles): properly handle to-rem func calls
 (#12152)

### Related Ticket(s)

None. Noticed in a Slack conversation.

### Description

There are many instances of using the `to-rem` utliity funcation that don't include the correct module import, hence `to-rem` makes it into compiled CSS, which invalidates the style rule.

### Changelog

**Changed**

- Corrects `to-rem` usage by `@use` the appropriate module.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../styles/scss/components/button-group/_button-group.scss     | 1 +
 .../components/callout-with-media/_callout-with-media.scss     | 1 +
 packages/styles/scss/components/card-group/_card-group.scss    | 1 +
 .../styles/scss/components/card-in-card/_card-in-card.scss     | 1 +
 .../components/card-section-offset/_card-section-offset.scss   | 3 ++-
 .../components/content-block-media/_content-block-media.scss   | 3 ++-
 .../components/content-block-mixed/_content-block-mixed.scss   | 1 +
 .../components/content-block-simple/_content-block-simple.scss | 3 ++-
 .../content-item-row-media/_content-item-row-media.scss        | 3 ++-
 .../scss/components/content-item-row/_content-item-row.scss    | 3 ++-
 packages/styles/scss/components/cta-block/_cta-block.scss      | 1 +
 .../scss/components/expressive-modal/_expressive-modal.scss    | 3 ++-
 .../styles/scss/components/filter-panel/_filter-panel.scss     | 1 +
 packages/styles/scss/components/footer/_footer.scss            | 2 +-
 packages/styles/scss/components/footer/_language-selector.scss | 1 +
 .../styles/scss/components/global-banner/_global-banner.scss   | 3 ++-
 packages/styles/scss/components/image/_image.scss              | 1 +
 .../scss/components/leadspace-block/_leadspace-block.scss      | 1 +
 .../leadspace-with-search/_leadspace-with-search.scss          | 3 ++-
 packages/styles/scss/components/leadspace/_leadspace.scss      | 1 +
 .../search-with-typeahead/_search-with-typeahead.scss          | 1 +
 .../scss/components/tableofcontents/_table-of-contents.scss    | 1 +
 .../styles/scss/components/tabs-extended/_tabs-extended.scss   | 1 +
 packages/styles/scss/components/tag-link/_tag-link.scss        | 3 ++-
 packages/styles/scss/globals/utils/_content-width.scss         | 1 +
 .../scss/patterns/blocks/callout-data/_callout-data.scss       | 2 ++
 .../scss/patterns/blocks/leadspace-block/_leadspace-block.scss | 1 +
 .../styles/scss/patterns/sections/leadspace/_leadspace.scss    | 1 +
 28 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/styles/scss/components/button-group/_button-group.scss b/packages/styles/scss/components/button-group/_button-group.scss
index 4626f27742f..c47e63d728a 100644
--- a/packages/styles/scss/components/button-group/_button-group.scss
+++ b/packages/styles/scss/components/button-group/_button-group.scss
@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 @use '../../globals/vars' as *;
 @use '../lightbox-media-viewer';
diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
index 5f29a6e72f0..078c71b64a9 100644
--- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
+++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/callout/callout' as *;
 @use '../../internal/content-block';
diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
index 4097a15cfad..3b5b9da7d12 100644
--- a/packages/styles/scss/components/card-group/_card-group.scss
+++ b/packages/styles/scss/components/card-group/_card-group.scss
@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/ratio-base' as *;
diff --git a/packages/styles/scss/components/card-in-card/_card-in-card.scss b/packages/styles/scss/components/card-in-card/_card-in-card.scss
index 1f71350a120..cd972825e7c 100644
--- a/packages/styles/scss/components/card-in-card/_card-in-card.scss
+++ b/packages/styles/scss/components/card-in-card/_card-in-card.scss
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/aspect-ratio';
 @use '../../globals/utils/ratio-base' as *;
diff --git a/packages/styles/scss/components/card-section-offset/_card-section-offset.scss b/packages/styles/scss/components/card-section-offset/_card-section-offset.scss
index 387fea632d7..8e89d7a6e05 100644
--- a/packages/styles/scss/components/card-section-offset/_card-section-offset.scss
+++ b/packages/styles/scss/components/card-section-offset/_card-section-offset.scss
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * 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.
@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../card-group/card-group';
 
diff --git a/packages/styles/scss/components/content-block-media/_content-block-media.scss b/packages/styles/scss/components/content-block-media/_content-block-media.scss
index 2373848f2d3..5f6fc2f0521 100644
--- a/packages/styles/scss/components/content-block-media/_content-block-media.scss
+++ b/packages/styles/scss/components/content-block-media/_content-block-media.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.
@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
 @use '../../internal/content-group';
diff --git a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
index 4134da59b7f..bcec8956f82 100644
--- a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
+++ b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
diff --git a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
index 4dd4e2c5c18..e7b76c2d7ac 100644
--- a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
+++ b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
@@ -1,11 +1,12 @@
 /**
- * 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.
  */
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
 @use '../../internal/content-item/content-item';
diff --git a/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
index aa7c2f80057..cbacc59c294 100644
--- a/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
+++ b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.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.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';
 
diff --git a/packages/styles/scss/components/content-item-row/_content-item-row.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss
index a7f5375457a..bb28123afd8 100644
--- a/packages/styles/scss/components/content-item-row/_content-item-row.scss
+++ b/packages/styles/scss/components/content-item-row/_content-item-row.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.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';
diff --git a/packages/styles/scss/components/cta-block/_cta-block.scss b/packages/styles/scss/components/cta-block/_cta-block.scss
index b423f4f287e..a8b7368c485 100644
--- a/packages/styles/scss/components/cta-block/_cta-block.scss
+++ b/packages/styles/scss/components/cta-block/_cta-block.scss
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
diff --git a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
index 8e70caa0624..89d2a8f8d9f 100644
--- a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
+++ b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
@@ -14,6 +14,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/modal' as *;
 
@@ -31,7 +32,7 @@
     .#{$prefix}--modal-container {
       padding: $spacing-05;
       grid-template-rows: 1fr;
-      min-block-size: $spacing-10 + to-rem($icon-size);
+      min-block-size: $spacing-10 + $icon-size;
 
       @include breakpoint(md) {
         padding: $spacing-07;
diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss
index 1b77fdd6789..74d2bc21b8c 100644
--- a/packages/styles/scss/components/filter-panel/_filter-panel.scss
+++ b/packages/styles/scss/components/filter-panel/_filter-panel.scss
@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/layout' as *;
diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss
index 5fefa9a188f..d6f85ad334f 100644
--- a/packages/styles/scss/components/footer/_footer.scss
+++ b/packages/styles/scss/components/footer/_footer.scss
@@ -487,7 +487,7 @@
     }
 
     .#{$prefix}--list-box__menu {
-      inset-block-end: to-rem($spacing-09);
+      inset-block-end: $spacing-09;
     }
 
     .#{$prefix}--dropdown,
diff --git a/packages/styles/scss/components/footer/_language-selector.scss b/packages/styles/scss/components/footer/_language-selector.scss
index d8dfb2fddd3..6733f18901d 100644
--- a/packages/styles/scss/components/footer/_language-selector.scss
+++ b/packages/styles/scss/components/footer/_language-selector.scss
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/combo-box/combo-box' as *;
 @use '@carbon/styles/scss/components/list-box/list-box' as *;
 @use '@carbon/styles/scss/components/select/select' as *;
diff --git a/packages/styles/scss/components/global-banner/_global-banner.scss b/packages/styles/scss/components/global-banner/_global-banner.scss
index 6f4615e2766..8803450fc41 100644
--- a/packages/styles/scss/components/global-banner/_global-banner.scss
+++ b/packages/styles/scss/components/global-banner/_global-banner.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 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.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../image/index';
diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss
index 8b39b1cf507..0e6b6929379 100644
--- a/packages/styles/scss/components/image/_image.scss
+++ b/packages/styles/scss/components/image/_image.scss
@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/colors' as *;
 @use '../lightbox-media-viewer/lightbox-media-viewer';
 
diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
index c7873fbeafc..3e7249a1dfb 100644
--- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
+++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/hang' as *;
diff --git a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss
index 87b9c206e74..a0a735be0e5 100644
--- a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss
+++ b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.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.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
diff --git a/packages/styles/scss/components/leadspace/_leadspace.scss b/packages/styles/scss/components/leadspace/_leadspace.scss
index 61f4c7b02ae..40262815af4 100644
--- a/packages/styles/scss/components/leadspace/_leadspace.scss
+++ b/packages/styles/scss/components/leadspace/_leadspace.scss
@@ -15,6 +15,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/utils/ratio-base' as *;
diff --git a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
index f884e8dd9f3..d41c0b07f68 100644
--- a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
+++ b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/ui-shell/header';
 @use '@carbon/styles/scss/components/ui-shell/side-nav';
 @use '@carbon/styles/scss/components/dropdown';
diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
index b3ee02bd4a8..d63c6cd9cf5 100644
--- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
+++ b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/carbon-grid' as *;
 @use '../../globals/vars' as *;
diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss
index 990bc80a769..915bc63e9f7 100644
--- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss
+++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss
@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/button' as *;
 @use '../../globals/vars' as *;
 @use '@carbon/styles/scss/components/tabs/vars' as *;
diff --git a/packages/styles/scss/components/tag-link/_tag-link.scss b/packages/styles/scss/components/tag-link/_tag-link.scss
index e1b3e5b4ff6..8f37160bfde 100644
--- a/packages/styles/scss/components/tag-link/_tag-link.scss
+++ b/packages/styles/scss/components/tag-link/_tag-link.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 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,6 +9,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 
 @mixin tag-link {
diff --git a/packages/styles/scss/globals/utils/_content-width.scss b/packages/styles/scss/globals/utils/_content-width.scss
index 3ad67bd02ba..49f6875c526 100644
--- a/packages/styles/scss/globals/utils/_content-width.scss
+++ b/packages/styles/scss/globals/utils/_content-width.scss
@@ -7,6 +7,7 @@
 
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 // Sets the Width and Max-Width of the Card to 90% / 640px.
 @mixin content-width {
diff --git a/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss b/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss
index 6bf53dd65ad..f0976e640f9 100644
--- a/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss
+++ b/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/utilities/convert' as *;
+
 @mixin callout-data {
   .#{$prefix}--callout-data {
     .#{$prefix}--callout {
diff --git a/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss b/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss
index 6b926b89ca3..888a54c49be 100644
--- a/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss
+++ b/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss
@@ -8,6 +8,7 @@
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block"
 @warn 'Deprecated scss import for `leadspace-block`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block`';
 @use '../../../components/leadspace-block';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 @mixin leadspace-block {
   .#{$prefix}--leadspace-block {
diff --git a/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss b/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss
index 6e52d3e491a..13256529c51 100644
--- a/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss
+++ b/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss
@@ -7,6 +7,7 @@
 
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace"
 @warn 'Deprecated scss import for `leadspace`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace`';
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../../components/leadspace';
 

From 3e7bcc980c3a9cc1e1dde230610bbd57bf1f4f60 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Tue, 10 Dec 2024 15:26:47 -0500
Subject: [PATCH 14/21] fix(card): pictogram related style adjustments (#12155)

### Related Ticket(s)

[ADCMS-6840](https://jsw.ibm.com/browse/ADCMS-6840)
[ADCMS-7238](https://jsw.ibm.com/browse/ADCMS-7238)

### Description

Fixes some pictogram related card styling issues.

### Testing instructions

* Review and pay particular attention to Card and Card Group stories, looking for regressions
* Use the Card Group story, with a "Card type" of "Card - pictogram". Then check the "Hide description" checkbox and ensure that the cards are [matching spec](https://www.figma.com/design/oip4K9G1z0v7tLNBbDZzdr/Card-specs-v2?node-id=19-3434&node-type=canvas&t=lwI58ey8t4c8MTqo-0).

### Changelog

**Changed**

- Visual fixes for pictogram cards when there is no card description.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../components/card-group/_card-group.scss    |  1 +
 .../styles/scss/components/card/_card.scss    | 23 +++++++++++++++----
 .../__stories__/card-group.stories.ts         | 22 ++++++++++++------
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
index 4097a15cfad..dfd0e0b48f4 100644
--- a/packages/styles/scss/components/card-group/_card-group.scss
+++ b/packages/styles/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;
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 9c926c7c0f3..143836fdf3f 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -157,7 +157,7 @@
       }
     }
 
-    .#{$prefix}--card__copy:not([hidden]) {
+    .#{$prefix}--card__copy {
       @include type-style('body-02');
 
       margin-block-end: $spacing-07;
@@ -219,10 +219,6 @@
 
       .#{$prefix}--card__copy {
         margin-block: $spacing-07 0;
-
-        &[hidden] {
-          margin: 0;
-        }
       }
 
       svg {
@@ -254,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;
         }
@@ -286,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;
+      }
     }
   }
 
diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
index c995926af32..826187b5168 100644
--- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
+++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
@@ -157,18 +157,20 @@ const longHeadingCardGroupItem = (
   `;
 };
 
-const pictogramCard = (colorScheme) => {
+const pictogramCard = (colorScheme, hideDescription = false) => {
   return html`
     <c4d-card-group-item
       href="https://example.com"
       pictogram-placement="bottom"
       color-scheme=${colorSchemeMap[colorScheme]}>
       <c4d-card-heading>Aerospace and defence</c4d-card-heading>
-      <p>
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
-        ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis
-        nostrud exercitation.
-      </p>
+      ${hideDescription
+        ? ''
+        : html` <p>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam,
+            quis nostrud exercitation.
+          </p>`}
       <svg
         slot="pictogram"
         focusable="false"
@@ -264,6 +266,7 @@ export const Default = (args) => {
     cta,
     addCta,
     colorScheme,
+    hideDescription,
   } = args?.CardGroup ?? {};
 
   const allCards: object[] = [];
@@ -294,7 +297,7 @@ export const Default = (args) => {
 
   if (cardType === 'Card - pictogram') {
     for (let i = 0; i < cards; i++) {
-      allCards.push(pictogramCard(colorScheme));
+      allCards.push(pictogramCard(colorScheme, hideDescription));
     }
   }
 
@@ -460,6 +463,10 @@ export default {
           ['Regular', 'Inverse'],
           'Regular'
         );
+        const hideDescription =
+          cardType === 'Card - pictogram'
+            ? boolean('Hide description', false)
+            : false;
         return {
           cardType,
           media,
@@ -469,6 +476,7 @@ export default {
           gridMode,
           cta,
           colorScheme,
+          hideDescription,
         };
       },
     },

From 8459cc79f407083861c33867c58ac9edfc61a818 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 11 Dec 2024 15:30:02 -0500
Subject: [PATCH 15/21] fix(link-with-icon): fix icon placement (#12159)

### Related Ticket(s)

[ADCMS-7258](https://jsw.ibm.com/browse/ADCMS-7258)

### Description

This corrects a bad prefix conversion from v1 to v2 that meant that the necessary styles required to correctly reflect the `icon-placement="left"` on a `<c4d-link-with-icon>` component were not present. Note that the way Storybook knobs work was hiding this issue in the Link with Icon story. The bug can be reproduced by going to the [Link with icon story in the v2 Storybook](https://carbon-design-system.github.io/carbon-for-ibm-dotcom/next/web-components/?path=/story/components-link-with-icon--default), setting "Icon Position" to left, then opening in a new tab. Test in the deploy preview in the same way to ensure the bug is fixed.

### Testing instructions

* Open the Link with Icon > Default story
* Set the "Icon Position" knob to left
* Open in a new tab
* Icon should now appear as expected
* Also go through the Footer and Locale Modal stories to check the reported link icon is in the right spot.

### Changelog

**Changed**

- Fixed left icon placement in Link with icon component

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../scss/components/link-with-icon/_link-with-icon.scss       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
index 43efdb358c8..37cabfe29c9 100644
--- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
+++ b/packages/styles/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),

From 19e9b4fa1339aa2c817ad66fd1ebafe5eadabb06 Mon Sep 17 00:00:00 2001
From: Andy Blum <andy.blum.01@gmail.com>
Date: Wed, 11 Dec 2024 19:24:59 -0500
Subject: [PATCH 16/21] fix(content-group-cards): fix alignment (#12160)

### Related Ticket(s)

Closes #
https://jsw.ibm.com/browse/ADCMS-7030

### Description

In medium resolution, the cards are having an undesired horizontal overflow that was causing a scroll bar to appear.
I made a fix that will make them span full width, that's the behavior we have in the [v2 builds I found](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11248/index.html?path=/story/overview-getting-started--page) for example, that came [from this issue](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/11248)

Fixed as per this PR:
![image](https://github.com/user-attachments/assets/5e61977f-e88b-4416-9d74-7c0594cd20a4)


### Changelog

**New**

setting `margin-inline-start` to be 0 in resolutions lower than LG.
---
 .../components/content-group-cards/_content-group-cards.scss     | 1 -
 packages/styles/scss/internal/content-block/_content-block.scss  | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss
index 3502194b6f1..76fe8147c90 100644
--- a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss
+++ b/packages/styles/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;
diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss
index c2071965851..c805c0feb7d 100644
--- a/packages/styles/scss/internal/content-block/_content-block.scss
+++ b/packages/styles/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;

From 55224e3c99120845d1e07d573f5759c007b563cb Mon Sep 17 00:00:00 2001
From: Andy Blum <andy.blum.01@gmail.com>
Date: Wed, 11 Dec 2024 19:50:32 -0500
Subject: [PATCH 17/21] fix(background-media): avoid potential VPC setup race
 (#12158)

### Related Ticket(s)

https://jsw.ibm.com/browse/ADCMS-7249

### Description

Modifies component logic to avoid a possible race condition. Previously we assumed the background media component was setting up after the video player container had created its video player child.

### Changelog

**Changed**

- avoid possible race condition in with background videos
---
 .../background-media/background-media.ts      | 65 ++++++++-----------
 .../video-player/video-player-composite.ts    |  2 +
 2 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/packages/web-components/src/components/background-media/background-media.ts b/packages/web-components/src/components/background-media/background-media.ts
index f8b79794f98..de0f9a87429 100644
--- a/packages/web-components/src/components/background-media/background-media.ts
+++ b/packages/web-components/src/components/background-media/background-media.ts
@@ -16,7 +16,6 @@ import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings
 import styles from './background-media.scss';
 import { GRADIENT_DIRECTION, MOBILE_POSITION } from './defs';
 import C4DImage from '../image/image';
-import C4DVideoPlayer from '../video-player/video-player';
 import C4DVideoPlayerContainer from '../video-player/video-player-container';
 import C4DLeadSpace from '../leadspace/leadspace';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
@@ -50,13 +49,14 @@ class C4DBackgroundMedia extends C4DImage {
    * Returns a class-name based on the Mobile Position type
    */
   protected _getMobilePositionClass() {
+    const { videoPlayerContainer: video } = this;
     return classMap({
       [`${prefix}--background-media--container`]: true,
       [`${prefix}--background-media--mobile-position`]: true,
       [`${prefix}--background-media--mobile-position--${this.mobilePosition}`]:
         this.mobilePosition,
-      [`${prefix}--background-media--image`]: this.videoPlayer === null,
-      [`${prefix}--background-media--video`]: this.videoPlayer !== null,
+      [`${prefix}--background-media--image`]: video === null,
+      [`${prefix}--background-media--video`]: video !== null,
     });
   }
 
@@ -93,22 +93,13 @@ class C4DBackgroundMedia extends C4DImage {
   mobilePosition = MOBILE_POSITION.BOTTOM;
 
   /**
-   * Internal storage of the video ID
+   * Query selector to get the child video player container
    */
-  @property()
-  videoId: string | null = null;
-
-  /**
-   * Current state of video playback
-   */
-  @property()
-  videoIsPlaying = false;
-
-  /**
-   * Internal storage of the video player comonent
-   */
-  @property()
-  videoPlayer: C4DVideoPlayer | null = null;
+  protected get videoPlayerContainer() {
+    return this.querySelector(
+      `${c4dPrefix}-video-player-container`
+    ) as C4DVideoPlayerContainer | null;
+  }
 
   /**
    * Conditionally runs super.render() if all children are `c4d-image-item`
@@ -122,40 +113,38 @@ class C4DBackgroundMedia extends C4DImage {
     );
     const assignedVideos = assignedElements.filter(
       (el) => el.tagName === `${c4dPrefix}-video-player-container`.toUpperCase()
-    );
+    ) as C4DVideoPlayerContainer[];
 
-    if (
-      assignedElements.length === assignedImages.length &&
-      !assignedVideos.length
-    ) {
+    if (assignedImages.length && !assignedVideos.length) {
       this.containsOnlyImages = true;
     }
-
-    if (assignedVideos.length) {
-      const [video] = assignedVideos;
-      this.videoId = video.getAttribute('video-id');
-      this.videoPlayer = video.querySelector(`${c4dPrefix}-video-player`);
-      this.videoIsPlaying = (video as C4DVideoPlayerContainer).isPlaying;
-    }
   }
 
   toggleVideoState() {
-    this.videoPlayer?.userInitiatedTogglePlaybackState();
-    this.videoIsPlaying = !this.videoIsPlaying;
+    const { videoPlayerContainer: video } = this;
+
+    if (video?.isPlaying) {
+      video.pauseAllVideos();
+    } else {
+      video?.playAllVideos();
+    }
+
+    this.requestUpdate();
   }
 
   renderVideoControls() {
-    const { toggleVideoState, videoIsPlaying } = this;
+    const { toggleVideoState, videoPlayerContainer } = this;
+    const { isPlaying } = videoPlayerContainer ?? {};
 
     return html`
       <button
         part="controls"
         @click=${toggleVideoState}
         class="${prefix}--video-player__controls"
-        aria-pressed="${!videoIsPlaying}"
-        aria-label="${videoIsPlaying ? 'Pause the video' : 'Play the video'}"
+        aria-pressed="${!isPlaying}"
+        aria-label="${isPlaying ? 'Pause the video' : 'Play the video'}"
         hasTooltip>
-        ${videoIsPlaying ? pauseIcon() : playIcon()}
+        ${isPlaying ? pauseIcon() : playIcon()}
       </button>
     `;
   }
@@ -186,7 +175,7 @@ class C4DBackgroundMedia extends C4DImage {
       this.gradientHidden = true;
     }
 
-    if (this.hasAttribute('default-src') && !this.videoId) {
+    if (this.hasAttribute('default-src') && !this.videoPlayerContainer) {
       this.containsOnlyImages = true;
     }
   }
@@ -203,7 +192,7 @@ class C4DBackgroundMedia extends C4DImage {
           <slot @slotchange="${this._handleBackgroundMedia}"></slot>
         </div>
       </div>
-      ${this.videoId ? this.renderVideoControls() : ''}
+      ${this.videoPlayerContainer ? this.renderVideoControls() : ''}
     `;
   }
 
diff --git a/packages/web-components/src/components/video-player/video-player-composite.ts b/packages/web-components/src/components/video-player/video-player-composite.ts
index 5ada0cbdaeb..a6f3fa1e61a 100644
--- a/packages/web-components/src/components/video-player/video-player-composite.ts
+++ b/packages/web-components/src/components/video-player/video-player-composite.ts
@@ -126,6 +126,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
       embeddedVideos[videoId].sendNotification('doPause');
     });
     this.isPlaying = false;
+    this._setAutoplayPreference(false);
   }
 
   playAllVideos() {
@@ -135,6 +136,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
       embeddedVideos[videoId].sendNotification('doPlay');
     });
     this.isPlaying = true;
+    this._setAutoplayPreference(true);
   }
 
   /**

From c82715f3720612dbf7f9e96d3bdaa21a4fbdcf49 Mon Sep 17 00:00:00 2001
From: ibmdotcom-bot <digdes@us.ibm.com>
Date: Thu, 12 Dec 2024 01:30:02 +0000
Subject: [PATCH 18/21] chore(release): publish

 - @carbon/ibmdotcom-services@2.16.0
 - @carbon/ibmdotcom-styles@2.16.0
 - @carbon/ibmdotcom-utilities@2.16.0
 - @carbon/ibmdotcom-web-components@2.16.0
---
 packages/services/CHANGELOG.md       |  8 ++++++++
 packages/services/package.json       |  4 ++--
 packages/styles/CHANGELOG.md         | 13 +++++++++++++
 packages/styles/package.json         |  2 +-
 packages/utilities/CHANGELOG.md      |  8 ++++++++
 packages/utilities/package.json      |  2 +-
 packages/web-components/CHANGELOG.md | 12 ++++++++++++
 packages/web-components/package.json |  8 ++++----
 yarn.lock                            | 14 +++++++-------
 9 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/packages/services/CHANGELOG.md b/packages/services/CHANGELOG.md
index 958d87b7ceb..3ff0cb64417 100644
--- a/packages/services/CHANGELOG.md
+++ b/packages/services/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.3...@carbon/ibmdotcom-services@2.16.0) (2024-12-12)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services
+
+
+
+
+
 # [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.2...@carbon/ibmdotcom-services@2.16.0-rc.3) (2024-12-07)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services
diff --git a/packages/services/package.json b/packages/services/package.json
index be1bae0f8cc..6ce517702d0 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services",
   "description": "Carbon for IBM.com Services",
-  "version": "2.16.0-rc.3",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibmdotcom-utilities": "2.16.0-rc.3",
+    "@carbon/ibmdotcom-utilities": "2.16.0",
     "@ibm/telemetry-js": "^1.5.0",
     "axios": "^1.6.8",
     "marked": "^4.0.10",
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 557def4fed2..827673ae280 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.3...@carbon/ibmdotcom-styles@2.16.0) (2024-12-12)
+
+
+### Bug Fixes
+
+* **card:** pictogram related style adjustments ([#12155](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12155)) ([3e7bcc9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3e7bcc980c3a9cc1e1dde230610bbd57bf1f4f60))
+* **content-group-cards:** fix alignment ([#12160](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12160)) ([19e9b4f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/19e9b4fa1339aa2c817ad66fd1ebafe5eadabb06))
+* **link-with-icon:** fix icon placement ([#12159](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12159)) ([8459cc7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8459cc79f407083861c33867c58ac9edfc61a818))
+
+
+
+
+
 # [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.2...@carbon/ibmdotcom-styles@2.16.0-rc.3) (2024-12-07)
 
 
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 5fd747941ed..d15d7b165fb 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.0-rc.3",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md
index 558e18d09dc..8b46b3028ee 100644
--- a/packages/utilities/CHANGELOG.md
+++ b/packages/utilities/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.3...@carbon/ibmdotcom-utilities@2.16.0) (2024-12-12)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
 # [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.2...@carbon/ibmdotcom-utilities@2.16.0-rc.3) (2024-12-07)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-utilities
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index 75ec3e54b72..5bb4840be0e 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "2.16.0-rc.3",
+  "version": "2.16.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
index f8780b0c90d..45fce1e25e9 100644
--- a/packages/web-components/CHANGELOG.md
+++ b/packages/web-components/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.3...@carbon/ibmdotcom-web-components@2.16.0) (2024-12-12)
+
+
+### Bug Fixes
+
+* **background-media:** avoid potential VPC setup race ([#12158](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12158)) ([55224e3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/55224e3c99120845d1e07d573f5759c007b563cb))
+* **card:** pictogram related style adjustments ([#12155](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12155)) ([3e7bcc9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3e7bcc980c3a9cc1e1dde230610bbd57bf1f4f60))
+
+
+
+
+
 # [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.2...@carbon/ibmdotcom-web-components@2.16.0-rc.3) (2024-12-07)
 
 
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index a57727b974b..8f54c2be314 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.16.0-rc.3",
+  "version": "2.16.0",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -92,9 +92,9 @@
     "cypress:verify": "cypress verify"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "2.16.0-rc.3",
-    "@carbon/ibmdotcom-styles": "2.16.0-rc.3",
-    "@carbon/ibmdotcom-utilities": "2.16.0-rc.3",
+    "@carbon/ibmdotcom-services": "2.16.0",
+    "@carbon/ibmdotcom-styles": "2.16.0",
+    "@carbon/ibmdotcom-utilities": "2.16.0",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.22.0",
     "@carbon/styles": "1.65.0",
diff --git a/yarn.lock b/yarn.lock
index d61de207d30..4ca60711f62 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3350,7 +3350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-services@npm:2.16.0-rc.3, @carbon/ibmdotcom-services@workspace:packages/services":
+"@carbon/ibmdotcom-services@npm:2.16.0, @carbon/ibmdotcom-services@workspace:packages/services":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-services@workspace:packages/services"
   dependencies:
@@ -3363,7 +3363,7 @@ __metadata:
     "@babel/plugin-transform-runtime": "npm:7.18.5"
     "@babel/preset-env": "npm:~7.23.2"
     "@babel/runtime": "npm:^7.16.3"
-    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.3"
+    "@carbon/ibmdotcom-utilities": "npm:2.16.0"
     "@ibm/telemetry-js": "npm:^1.5.0"
     "@rollup/plugin-babel": "npm:^5.3.1"
     "@rollup/plugin-commonjs": "npm:^21.0.3"
@@ -3397,7 +3397,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/ibmdotcom-styles@npm:2.16.0-rc.3, @carbon/ibmdotcom-styles@workspace:packages/styles":
+"@carbon/ibmdotcom-styles@npm:2.16.0, @carbon/ibmdotcom-styles@workspace:packages/styles":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-styles@workspace:packages/styles"
   dependencies:
@@ -3435,7 +3435,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-utilities@npm:2.16.0-rc.3, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
+"@carbon/ibmdotcom-utilities@npm:2.16.0, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-utilities@workspace:packages/utilities"
   dependencies:
@@ -3500,10 +3500,10 @@ __metadata:
     "@babel/preset-react": "npm:~7.12.1"
     "@babel/template": "npm:~7.12.0"
     "@babel/traverse": "npm:~7.23.7"
-    "@carbon/ibmdotcom-services": "npm:2.16.0-rc.3"
+    "@carbon/ibmdotcom-services": "npm:2.16.0"
     "@carbon/ibmdotcom-services-store": "npm:1.53.3"
-    "@carbon/ibmdotcom-styles": "npm:2.16.0-rc.3"
-    "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.3"
+    "@carbon/ibmdotcom-styles": "npm:2.16.0"
+    "@carbon/ibmdotcom-utilities": "npm:2.16.0"
     "@carbon/icon-helpers": "npm:10.53.0"
     "@carbon/icons": "npm:10.48.5"
     "@carbon/icons-react": "npm:^11.33.0"

From be2e9564cd8d1532720d07de365408b9b19395c5 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Thu, 12 Dec 2024 17:18:57 -0500
Subject: [PATCH 19/21] fix(callout-quote): fix horizontal scroll for callout
 quote (#12164)

* fix(callout-quote): fix horizontal scroll for callout quote

* fix(callout-with-media): box-sizing

* fix(callout-with-media): prevent img overflow

* formatting

---------

Co-authored-by: Andy Blum <andy.blum.01@gmail.com>
---
 .../scss/components/callout-quote/_callout-quote.scss | 11 ++++++-----
 .../callout-with-media/_callout-with-media.scss       |  6 +++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss
index f731e717b69..703ac65c6f8 100644
--- a/packages/styles/scss/components/callout-quote/_callout-quote.scss
+++ b/packages/styles/scss/components/callout-quote/_callout-quote.scss
@@ -20,6 +20,10 @@
 @include quote;
 
 @mixin callout-quote {
+  * {
+    box-sizing: border-box;
+  }
+
   :host(#{$c4d-prefix}-callout-quote) {
     @extend :host(#{$c4d-prefix}-callout);
     @extend :host(#{$c4d-prefix}-callout-text);
@@ -99,12 +103,9 @@
   }
 
   :host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr {
-    margin: $spacing-05;
+    margin: $spacing-05 $spacing-07;
     @include breakpoint(md) {
-      margin: $spacing-05 0;
-    }
-    @include breakpoint(lg) {
-      margin: $spacing-05 $spacing-03;
+      margin: $spacing-05;
     }
   }
 }
diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
index 078c71b64a9..428484df9a4 100644
--- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
+++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
@@ -22,6 +22,10 @@
 @include callout;
 
 @mixin callout-with-media {
+  * {
+    box-sizing: border-box;
+  }
+
   :host(#{$c4d-prefix}-callout-with-media) {
     @extend :host(#{$c4d-prefix}-callout);
 
@@ -179,7 +183,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__img {
+  :host(#{$c4d-prefix}-callout-with-media-image) .#{$c4d-prefix}--image__img {
     max-inline-size: 100%;
   }
 }

From 6e9ef920cf569df7e050f86add3d7443b46714ca Mon Sep 17 00:00:00 2001
From: ibmdotcom-bot <digdes@us.ibm.com>
Date: Thu, 12 Dec 2024 22:22:34 +0000
Subject: [PATCH 20/21] chore(settings): update settings to v2.16.1

---
 packages/utilities/src/utilities/settings/settings.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/utilities/src/utilities/settings/settings.js b/packages/utilities/src/utilities/settings/settings.js
index 26b1c8c964c..0a704ca2fc2 100644
--- a/packages/utilities/src/utilities/settings/settings.js
+++ b/packages/utilities/src/utilities/settings/settings.js
@@ -12,10 +12,10 @@
  * @type {object} Settings object
  * @property {string} [stablePrefix=c4d] stable prefix
  * @property {string} [prefix=cds] core Carbon prefix
- * Carbon for IBM.com v2.16.0',
+ * Carbon for IBM.com v2.16.1',
  */
 const settings = {
-  version: 'Carbon for IBM.com v2.16.0',
+  version: 'Carbon for IBM.com v2.16.1',
   stablePrefix: 'c4d',
   prefix: 'cds',
 };

From 5bef17f6bbbb85e82faaed49e585958166208e9b Mon Sep 17 00:00:00 2001
From: ibmdotcom-bot <digdes@us.ibm.com>
Date: Thu, 12 Dec 2024 23:49:56 +0000
Subject: [PATCH 21/21] chore(release): publish

 - @carbon/ibmdotcom-services-store@1.53.4
 - @carbon/ibmdotcom-services@2.16.1
 - @carbon/storybook-addon-theme@1.44.4
 - @carbon/ibmdotcom-styles@2.16.1
 - @carbon/ibmdotcom-utilities@2.16.1
 - @carbon/ibmdotcom-web-components@2.16.1
---
 packages/services-store/CHANGELOG.md        |  8 ++++++++
 packages/services-store/package.json        |  2 +-
 packages/services/CHANGELOG.md              |  8 ++++++++
 packages/services/package.json              |  4 ++--
 packages/storybook-addon-theme/CHANGELOG.md |  8 ++++++++
 packages/storybook-addon-theme/package.json |  2 +-
 packages/styles/CHANGELOG.md                | 21 +++++++++++++++++++++
 packages/styles/package.json                |  2 +-
 packages/utilities/CHANGELOG.md             |  8 ++++++++
 packages/utilities/package.json             |  2 +-
 packages/web-components/CHANGELOG.md        |  8 ++++++++
 packages/web-components/package.json        | 10 +++++-----
 yarn.lock                                   | 18 +++++++++---------
 13 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/packages/services-store/CHANGELOG.md b/packages/services-store/CHANGELOG.md
index 50b2a62ae9e..058309a4adf 100644
--- a/packages/services-store/CHANGELOG.md
+++ b/packages/services-store/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.53.4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services-store@1.53.3...@carbon/ibmdotcom-services-store@1.53.4) (2024-12-12)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services-store
+
+
+
+
+
 ## [1.53.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services-store@1.53.2...@carbon/ibmdotcom-services-store@1.53.3) (2024-11-13)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services-store
diff --git a/packages/services-store/package.json b/packages/services-store/package.json
index d9648062a3a..2b144de6ae5 100644
--- a/packages/services-store/package.json
+++ b/packages/services-store/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services-store",
   "private": true,
-  "version": "1.53.3",
+  "version": "1.53.4",
   "description": "Redux store for Carbon for IBM.com Services",
   "license": "Apache-2.0",
   "main": "lib/store.js",
diff --git a/packages/services/CHANGELOG.md b/packages/services/CHANGELOG.md
index 3ff0cb64417..c2b051a3336 100644
--- a/packages/services/CHANGELOG.md
+++ b/packages/services/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0...@carbon/ibmdotcom-services@2.16.1) (2024-12-12)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services
+
+
+
+
+
 # [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.3...@carbon/ibmdotcom-services@2.16.0) (2024-12-12)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services
diff --git a/packages/services/package.json b/packages/services/package.json
index 6ce517702d0..a3a530bb529 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services",
   "description": "Carbon for IBM.com Services",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibmdotcom-utilities": "2.16.0",
+    "@carbon/ibmdotcom-utilities": "2.16.1",
     "@ibm/telemetry-js": "^1.5.0",
     "axios": "^1.6.8",
     "marked": "^4.0.10",
diff --git a/packages/storybook-addon-theme/CHANGELOG.md b/packages/storybook-addon-theme/CHANGELOG.md
index 6a1171f249e..18bcb6760a7 100644
--- a/packages/storybook-addon-theme/CHANGELOG.md
+++ b/packages/storybook-addon-theme/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.44.4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/storybook-addon-theme@1.44.3...@carbon/storybook-addon-theme@1.44.4) (2024-12-12)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
 ## [1.44.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/storybook-addon-theme@1.44.2...@carbon/storybook-addon-theme@1.44.3) (2024-11-13)
 
 **Note:** Version bump only for package @carbon/storybook-addon-theme
diff --git a/packages/storybook-addon-theme/package.json b/packages/storybook-addon-theme/package.json
index 329a64f6da6..ada9ca59dc2 100644
--- a/packages/storybook-addon-theme/package.json
+++ b/packages/storybook-addon-theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/storybook-addon-theme",
   "private": true,
-  "version": "1.44.3",
+  "version": "1.44.4",
   "description": "Storybook add-on for Carbon theme chooser",
   "license": "Apache-2.0",
   "main": "es/index.js",
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 827673ae280..14e930992f7 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0...@carbon/ibmdotcom-styles@2.16.1) (2024-12-12)
+
+
+### Bug Fixes
+
+* **callout-quote:** fix horizontal scroll for callout quote ([#12164](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12164)) ([be2e956](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/be2e9564cd8d1532720d07de365408b9b19395c5))
+* **callout-with-media:** spacing adjustments ([#12124](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12124)) ([4a7c1d1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4a7c1d1d982f2fa508a5b475d4229152bd28c384))
+* **card-group:** set min height to content ([#12128](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12128)) ([8dc1099](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8dc109929b6807a2fad759f41c8051d238b0c4f5))
+* **card:** remove bad styles ([#12141](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12141)) ([13fd7a5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/13fd7a5cb0bb56e345cb78bd684b8c93e09ef55b))
+* **cta-block:** adjust cta-block-item-row inline margin ([#12140](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12140)) ([b5ee952](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b5ee952f7ceee190df1cff0204b0dc6252b0feaf))
+* **feature-card:** inverse styles and cta-type="video" ([#12146](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12146)) ([888d642](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/888d642de7502eb4abfb215403ef9aec8835994e))
+* **feature-section:** stretch image if needed ([#12126](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12126)) ([8bc634a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8bc634af30b40e0b2884963c29781ef610431737))
+* **footer:** adjustments to adjunct links visibility ([#12136](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12136)) ([30b1ce7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/30b1ce7d18c665f9665cb3f13d308b74b1ab9842))
+* **footer:** adjustments to style for color and positioning ([#12135](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12135)) ([8036383](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/80363830f4aa617fd5c24612b4ab9164309fdd3a))
+* **leadspace-breadcrumb:** leadspace breadcrumb was missing a max-width ([#12139](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12139)) ([3ee263d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3ee263d35f3746689f2cd4fae27194e467a3d852))
+* **toc:** remove implicit top and bottom padding for TOC ([#12144](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12144)) ([5e52b77](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5e52b771b54fcff284222f7d04e6e0f5c19cdc1a))
+
+
+
+
+
 # [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.3...@carbon/ibmdotcom-styles@2.16.0) (2024-12-12)
 
 
diff --git a/packages/styles/package.json b/packages/styles/package.json
index d15d7b165fb..2a00f0ac229 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md
index 8b46b3028ee..68e2934a698 100644
--- a/packages/utilities/CHANGELOG.md
+++ b/packages/utilities/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0...@carbon/ibmdotcom-utilities@2.16.1) (2024-12-12)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
 # [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.3...@carbon/ibmdotcom-utilities@2.16.0) (2024-12-12)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-utilities
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index 5bb4840be0e..5bb0338a218 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
index 45fce1e25e9..ce94ba83489 100644
--- a/packages/web-components/CHANGELOG.md
+++ b/packages/web-components/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0...@carbon/ibmdotcom-web-components@2.16.1) (2024-12-12)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-web-components
+
+
+
+
+
 # [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.3...@carbon/ibmdotcom-web-components@2.16.0) (2024-12-12)
 
 
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 8f54c2be314..7f6c8ed0143 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -92,9 +92,9 @@
     "cypress:verify": "cypress verify"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "2.16.0",
-    "@carbon/ibmdotcom-styles": "2.16.0",
-    "@carbon/ibmdotcom-utilities": "2.16.0",
+    "@carbon/ibmdotcom-services": "2.16.1",
+    "@carbon/ibmdotcom-styles": "2.16.1",
+    "@carbon/ibmdotcom-utilities": "2.16.1",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.22.0",
     "@carbon/styles": "1.65.0",
@@ -131,7 +131,7 @@
     "@babel/preset-react": "~7.12.1",
     "@babel/template": "~7.12.0",
     "@babel/traverse": "~7.23.7",
-    "@carbon/ibmdotcom-services-store": "1.53.3",
+    "@carbon/ibmdotcom-services-store": "1.53.4",
     "@carbon/icon-helpers": "10.53.0",
     "@carbon/icons": "10.48.5",
     "@carbon/icons-react": "^11.33.0",
diff --git a/yarn.lock b/yarn.lock
index 4ca60711f62..9ab96a5c8ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3300,7 +3300,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-services-store@npm:1.53.3, @carbon/ibmdotcom-services-store@workspace:packages/services-store":
+"@carbon/ibmdotcom-services-store@npm:1.53.4, @carbon/ibmdotcom-services-store@workspace:packages/services-store":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-services-store@workspace:packages/services-store"
   dependencies:
@@ -3350,7 +3350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-services@npm:2.16.0, @carbon/ibmdotcom-services@workspace:packages/services":
+"@carbon/ibmdotcom-services@npm:2.16.1, @carbon/ibmdotcom-services@workspace:packages/services":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-services@workspace:packages/services"
   dependencies:
@@ -3363,7 +3363,7 @@ __metadata:
     "@babel/plugin-transform-runtime": "npm:7.18.5"
     "@babel/preset-env": "npm:~7.23.2"
     "@babel/runtime": "npm:^7.16.3"
-    "@carbon/ibmdotcom-utilities": "npm:2.16.0"
+    "@carbon/ibmdotcom-utilities": "npm:2.16.1"
     "@ibm/telemetry-js": "npm:^1.5.0"
     "@rollup/plugin-babel": "npm:^5.3.1"
     "@rollup/plugin-commonjs": "npm:^21.0.3"
@@ -3397,7 +3397,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/ibmdotcom-styles@npm:2.16.0, @carbon/ibmdotcom-styles@workspace:packages/styles":
+"@carbon/ibmdotcom-styles@npm:2.16.1, @carbon/ibmdotcom-styles@workspace:packages/styles":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-styles@workspace:packages/styles"
   dependencies:
@@ -3435,7 +3435,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-utilities@npm:2.16.0, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
+"@carbon/ibmdotcom-utilities@npm:2.16.1, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-utilities@workspace:packages/utilities"
   dependencies:
@@ -3500,10 +3500,10 @@ __metadata:
     "@babel/preset-react": "npm:~7.12.1"
     "@babel/template": "npm:~7.12.0"
     "@babel/traverse": "npm:~7.23.7"
-    "@carbon/ibmdotcom-services": "npm:2.16.0"
-    "@carbon/ibmdotcom-services-store": "npm:1.53.3"
-    "@carbon/ibmdotcom-styles": "npm:2.16.0"
-    "@carbon/ibmdotcom-utilities": "npm:2.16.0"
+    "@carbon/ibmdotcom-services": "npm:2.16.1"
+    "@carbon/ibmdotcom-services-store": "npm:1.53.4"
+    "@carbon/ibmdotcom-styles": "npm:2.16.1"
+    "@carbon/ibmdotcom-utilities": "npm:2.16.1"
     "@carbon/icon-helpers": "npm:10.53.0"
     "@carbon/icons": "npm:10.48.5"
     "@carbon/icons-react": "npm:^11.33.0"