@carbon/ibmdotcom-web-components 2.30.0 → 2.31.0

package/lib/internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js

@@ -18,10 +18,10 @@ exports.default = void 0;
  * @type {object} Settings object
  * @property {string} [stablePrefix=c4d] stable prefix
  * @property {string} [prefix=cds] core Carbon prefix
- * Carbon for IBM.com v2.30.0',
+ * Carbon for IBM.com v2.31.0',
  */
 var settings = {
-  version: 'Carbon for IBM.com v2.30.0',
+  version: 'Carbon for IBM.com v2.31.0',
   stablePrefix: 'c4d',
   prefix: 'cds'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.30.0",
+  "version": "2.31.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.30.0",
-    "@carbon/ibmdotcom-styles": "2.30.0",
-    "@carbon/ibmdotcom-utilities": "2.30.0",
+    "@carbon/ibmdotcom-services": "2.31.0",
+    "@carbon/ibmdotcom-styles": "2.31.0",
+    "@carbon/ibmdotcom-utilities": "2.31.0",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.24.0",
     "@carbon/styles": "1.65.0",
@@ -243,5 +243,5 @@
     "web-component-analyzer": "1.2.0-next.0",
     "webpack": "^4.46.0"
   },
-  "gitHead": "dc75154dea800f26a4d04808a49dbd5b4167f0b5"
+  "gitHead": "ccaa448c12148a6767feb9943d5e1a4981302b46"
 }

package/scss/components/content-block-simple/content-block-simple.scss

@@ -43,8 +43,45 @@
 
   ::slotted(#{$c4d-prefix}-card) {
     @include breakpoint('md') {
-      inline-size: 34%;
       margin-inline-start: -$spacing-05;
     }
   }
+
+  /* TOC template (anything that's not FW) */
+  &:not(.cds--content-block--full-width-template) {
+    ::slotted(#{$c4d-prefix}-card[slot='footer']) {
+      /* sm and down */
+      @include breakpoint-down(md) {
+        inline-size: 100%;
+        max-inline-size: 100%;
+      }
+
+      /* md and larger */
+      @include breakpoint('md') {
+        inline-size: calc(50% + 1rem);
+        max-inline-size: 100vw;
+      }
+    }
+  }
+}
+
+:host(
+    #{$c4d-prefix}-content-block-simple.cds--content-block--full-width-template
+  ) {
+  ::slotted(#{$c4d-prefix}-card[slot='footer']) {
+    /* default for lg, xlg, max */
+    inline-size: 34%;
+
+    /* sm and down */
+    @include breakpoint-down(md) {
+      inline-size: 100%;
+      max-inline-size: 100%;
+    }
+
+    /* md only */
+    @media (width >= 672px) and (width <= 1055.98px) {
+      inline-size: calc(50% + 1rem);
+      max-inline-size: 100vw;
+    }
+  }
 }

package/scss/components/masthead/masthead.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2024
+// Copyright IBM Corp. 2020, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -17,8 +17,7 @@
 @use '@carbon/styles/scss/components/tooltip/tooltip' as *;
 @use '@carbon/styles/scss/components/ui-shell/header' as *;
 @use '@carbon/styles/scss/components/ui-shell/side-nav' as *;
-// @use '@carbon/ibmdotcom-styles/scss/components/masthead' as *;
-@use '../../../../styles/scss/components/masthead' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/masthead' as *;
 @use '@carbon/ibmdotcom-styles/scss/components/search-with-typeahead/' as *;
 @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 @use '@carbon/web-components/scss/components/tooltip/tooltip' as *;

package/scss/components/masthead/megamenu-language-selector.scss

@@ -0,0 +1,170 @@
+//
+// Copyright IBM Corp. 2020, 2025
+//
+// 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/utilities/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/compat/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/type' as *;
+
+:host {
+  position: relative;
+  display: block;
+}
+
+.earth-language-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  color: $icon-secondary;
+  cursor: pointer;
+  padding-block-end: 14px;
+
+  svg {
+    margin-block-start: -2px;
+  }
+
+  &:hover {
+    background: $background-hover;
+    color: $icon-primary;
+  }
+
+  &:active {
+    background: $background-hover;
+    color: $icon-primary;
+    outline: 2px solid var(--cds-button-primary, #0f62fe);
+    outline-offset: -2px;
+  }
+
+  &:focus {
+    outline: 2px solid var(--cds-button-primary, #0f62fe);
+    outline-offset: -2px;
+  }
+
+  &[aria-expanded='true'] {
+    color: $icon-secondary;
+    outline: 2px solid $focus;
+
+    &:hover {
+      background-color: $background-selected;
+      color: $icon-primary;
+    }
+  }
+}
+
+#countrySwitcher {
+  position: absolute;
+  z-index: 1000;
+  inset-block-start: 0.2vh;
+  inset-inline: auto 0;
+}
+
+#countryDropdown {
+  overflow: hidden auto;
+  border-radius: 4px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  inline-size: 320px;
+  margin-block-start: calc(var(--c4d-masthead-l0-bottom-edge, 3rem) + 1px);
+  max-block-size: calc(
+    100vh - var(--cds-spacing-09, 3rem) - var(--cds-layout-05, 4rem)
+  );
+
+  &.hidden {
+    display: none;
+  }
+
+  @include breakpoint-between(320px, 671px) {
+    position: fixed;
+    z-index: 8000;
+    block-size: calc(100% - 1px - 3rem);
+    inline-size: 100vw;
+    inset-block: 0;
+    inset-inline-start: 0;
+    max-inline-size: 100vw;
+    will-change: inline-size;
+  }
+}
+
+.current-region-container {
+  background: $background-inverse;
+
+  .current-region-label {
+    padding: 15px 16px;
+    border-block-end-width: 1px;
+    @include type-style('label-01');
+
+    color: $text-on-color;
+  }
+
+  .current-region-value {
+    padding: 0 16px 15px;
+    border-block-end-width: 1px;
+    color: $text-on-color;
+    @include type-style('body-compact-01');
+  }
+}
+
+.region-selection {
+  @include type-style('label-01');
+
+  padding: 15px 16px;
+  background: $background;
+  border-block-end: 1px solid $border-subtle-01;
+  color: $text-primary;
+}
+
+.region-list-container {
+  padding: 0;
+  margin: 0;
+  background: #ffffff;
+  list-style: none;
+
+  li {
+    padding: 15px 16px;
+    background: $background;
+    border-block-end: 1px solid $border-subtle-01;
+    cursor: pointer;
+    font-size: 14px;
+
+    &:hover {
+      background: $background-hover;
+    }
+
+    &:focus {
+      outline: 2px solid var(--cds-button-primary, #0f62fe);
+      outline-offset: -2px;
+    }
+
+    &:active {
+      background: $background-selected;
+      color: $text-primary;
+      outline: 2px solid var(--cds-button-primary, #0f62fe);
+      outline-offset: -2px;
+      @include type-style('body-compact-01');
+    }
+  }
+}
+
+@include breakpoint-between(320px, 799px) {
+  // Stylelint here complains that the tags for the selector are not valid, but they're web component's tags
+  /* stylelint-disable selector-type-no-unknown */
+  :host-context(c4d-masthead-container) {
+    c4d-masthead {
+      c4d-masthead-global-bar {
+        c4d-masthead-contact {
+          /* stylelint-disable-next-line declaration-no-important */
+          display: none !important;
+        }
+      }
+    }
+  }
+}