carbon-design-system · m4olivei · Nov 29, 2024 · Nov 26, 2024 · Nov 27, 2024 · Nov 27, 2024
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
@@ -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.
@@ -96,6 +96,8 @@
   :host(#{$c4d-prefix}-callout-with-media-video)
     ::slotted(#{$c4d-prefix}-video-player) {
     @extend :host(#{$c4d-prefix}-callout-caption);
+
+    margin-block-end: 0;
   }
 
   :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='inverse'])
@@ -159,7 +161,7 @@
   .#{$prefix}--callout-with-media
     .#{$prefix}--callout__content
     .#{$prefix}--content-block {
-    padding-block-end: $spacing-10;
+    padding-block-end: $spacing-07;
   }
 
   :host(#{$c4d-prefix}-callout-with-media-image),

diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
@@ -125,6 +125,7 @@ $feature-flags: (
     ::slotted([slot='image']),
     #{$c4d-prefix}-image {
       z-index: 0;
+      block-size: 100%;
 
       // Opacity is adjusted on hover. See above.
       &::before {

diff --git a/packages/styles/scss/components/feature-section/_feature-section.scss b/packages/styles/scss/components/feature-section/_feature-section.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.
@@ -121,6 +121,7 @@
 
     ::slotted(#{$c4d-prefix}-image) {
       overflow: hidden;
+      block-size: 100%;
 
       @include breakpoint(sm) {
         block-size: aspect-ratio(1, 1);

diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.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.
@@ -112,7 +112,7 @@
 
   :host(#{$c4d-prefix}-footer-nav-item),
   :host(#{$c4d-prefix}-legal-nav-item),
-  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div {
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
     display: list-item;
@@ -142,6 +142,12 @@
     }
   }
 
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
+    .#{$prefix}--footer__link.#{$prefix}--link {
+      cursor: pointer;
+    }
+  }
+
   :host(#{$c4d-prefix}-legal-nav) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
@@ -220,7 +226,7 @@
         @include make-container;
       }
     }
-    .#{$prefix}--adjunct-links__container--hidden {
+    .#{$c4d-prefix}--adjunct-links__container--hidden {
       display: none;
     }
   }

diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.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.
@@ -198,7 +198,7 @@
   }
 
   :host(#{$c4d-prefix}-legal-nav-item),
-  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div,
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder),
   .#{$prefix}--legal-nav__list-item {
     padding: $spacing-03 0 0 0;
     margin-inline-end: $spacing-07;

diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
@@ -401,7 +401,6 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
     }
 
     if (this._hasPictogram) {
-      this.onclick = () => window.open(this.href, '_self');
       this.setAttribute('pictogram', '');
     } else {
       this.removeAttribute('pictogram');

diff --git a/packages/web-components/src/components/content-block-segmented/content-block-segmented.scss b/packages/web-components/src/components/content-block-segmented/content-block-segmented.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.
@@ -45,7 +45,7 @@
   }
 
   ::slotted([slot='footer']) {
-    margin-block-start: $spacing-07;
+    margin-inline: 0;
   }
 }
 

diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts
@@ -321,6 +321,7 @@ class C4DFooterComposite extends MediaQueryMixin(
             slot="${slot}"
             trigger-content="${languageSelectorLabel}"
             label-text="${languageSelectorLabel}"
+            label="${languageSelectorLabel}"
             value="${selectedLanguage}"
             clear-selection-label="${clearSelectionLabel}">
             ${langList?.map(

diff --git a/packages/web-components/src/components/footer/legal-nav.ts b/packages/web-components/src/components/footer/legal-nav.ts
@@ -8,7 +8,7 @@
  */
 
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
@@ -17,7 +17,7 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
 
-const { prefix, stablePrefix: c4dPrefix } = settings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Legal nav.
@@ -37,24 +37,22 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
    */
   @property()
   size = FOOTER_SIZE.REGULAR;
+
   /**
    * Navigation label for accessibility.
    */
   @property()
   navLabel = 'Legal Navigation';
-  /**
-   * The adjunct links container
-   */
-
-  @query(`.${c4dPrefix}--adjunct-links__container`)
-  private _adjunctLinksContainer?: HTMLDivElement;
 
   /**
    * The adjunct links slot
    */
   @query('[name="adjunct-links"]')
   private _adjunctLinksSlot?: HTMLSlotElement;
 
+  @state()
+  protected _hasAdjunctLinks = false;
+
   /**
    * Returns a class-name based on the type parameter type
    */
@@ -65,16 +63,16 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
     });
   }
 
-  protected _handleAdjunctLinksVisibility() {
-    const {
-      _adjunctLinksContainer: adjunctLinksContainer,
-      _adjunctLinksSlot: adjunctLinksSlot,
-    } = this;
+  /**
+   * Handles slot change event of adjunct-links slot to track if there are any.
+   */
+  protected _handleAdjunctLinksVisibility = () => {
+    const { _adjunctLinksSlot: adjunctLinksSlot } = this;
+
+    this._hasAdjunctLinks =
+      (adjunctLinksSlot?.assignedNodes().length || 0) !== 0;
+  };
 
-    const hiddenClass = `${prefix}--adjunct-links__container--hidden`;
-    const isEmpty = (adjunctLinksSlot?.assignedNodes().length || 0) === 0;
-    adjunctLinksContainer?.classList.toggle(hiddenClass, isEmpty);
-  }
   /**
    * The shadow slot this legal nav should be in.
    */
@@ -88,8 +86,14 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
     super.connectedCallback();
   }
 
+  firstUpdated() {
+    const { _adjunctLinksSlot: adjunctLinksSlot } = this;
+    this._hasAdjunctLinks =
+      (adjunctLinksSlot?.assignedNodes().length || 0) !== 0;
+  }
+
   render() {
-    const { navLabel } = this;
+    const { navLabel, _hasAdjunctLinks: hasAdjunctLinks } = this;
     return this.size !== FOOTER_SIZE.MICRO
       ? html`
           <nav
@@ -106,8 +110,10 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
             </div>
             <div
               part="adjunct-links-container"
-              class="${c4dPrefix}--adjunct-links__container">
-              <ul part="adjunct-links-list">
+              class="${c4dPrefix}--adjunct-links__container${hasAdjunctLinks
+                ? ''
+                : ` ${c4dPrefix}--adjunct-links__container--hidden`}">
+              <ul part="adjunct-links-list adjunct-links-list">
                 <slot
                   name="adjunct-links"
                   @slotchange="${this._handleAdjunctLinksVisibility}"></slot>

diff --git a/packages/web-components/src/components/table-of-contents/table-of-contents.ts b/packages/web-components/src/components/table-of-contents/table-of-contents.ts
@@ -80,7 +80,7 @@ function findLastIndex<T>(
 @customElement(`${c4dPrefix}-table-of-contents`)
 class C4DTableOfContents extends MediaQueryMixin(
   HostListenerMixin(StableSelectorMixin(LitElement)),
-  { [MQBreakpoints.LG]: MQDirs.MAX }
+  { [MQBreakpoints.LG]: MQDirs.MIN }
 ) {
   /**
    * Defines TOC type, "" for default, `horizontal` for horizontal variant.
@@ -157,7 +157,7 @@ class C4DTableOfContents extends MediaQueryMixin(
    * Whether we're viewing smaller or larger window.
    */
   @state()
-  _isMobile = this.carbonBreakpoints.lg.matches;
+  _isMobile = !this.carbonBreakpoints.lg.matches;
 
   /**
    * The target elements matching `[name]` harvested from the document.
@@ -625,8 +625,8 @@ class C4DTableOfContents extends MediaQueryMixin(
     }
   }
 
-  mediaQueryCallbackMaxLG() {
-    this._isMobile = this.carbonBreakpoints.lg.matches;
+  mediaQueryCallbackLG() {
+    this._isMobile = !this.carbonBreakpoints.lg.matches;
   }
 
   /**