@carbon/web-components 2.31.0 → 2.32.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.31.0",
+  "version": "2.32.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -58,14 +58,14 @@
     "start": "yarn storybook",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
-    "test": "web-test-runner \"src/components/**/__tests__/**/*.js\" --node-resolve",
+    "test": "web-test-runner \"src/components/**/__tests__/**/*.js\" --node-resolve --concurrency=1",
     "test:updateSnapshots": "yarn test --update-snapshots",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "visual-snapshot": "yarn percy storybook:start ./storybook-static",
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/styles": "^1.83.0",
+    "@carbon/styles": "^1.84.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.5.0",
     "@lit/context": "^1.1.1",
@@ -76,9 +76,9 @@
   },
   "devDependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/icons": "^11.61.0",
-    "@carbon/layout": "^11.35.0",
-    "@carbon/motion": "^11.29.0",
+    "@carbon/icons": "^11.62.0",
+    "@carbon/layout": "^11.36.0",
+    "@carbon/motion": "^11.30.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.37.0",
     "@open-wc/testing": "^4.0.0",
@@ -90,11 +90,9 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.0.0",
     "@rollup/pluginutils": "^5.0.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/web-components": "^8.4.7",
-    "@storybook/web-components-vite": "^8.4.7",
+    "@storybook/addon-docs": "^9.0.5",
+    "@storybook/addon-links": "^9.0.5",
+    "@storybook/web-components-vite": "^9.0.5",
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^18.11.9",
     "@web/test-runner": "^0.20.0",
@@ -104,9 +102,6 @@
     "autoprefixer": "^10.4.0",
     "cssnano": "^7.0.0",
     "globby": "^14.0.2",
-    "is-port-reachable": "^3.1.0",
-    "null-loader": "^4.0.0",
-    "prop-types": "^15.8.1",
     "read-package-up": "^11.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.0",
@@ -114,9 +109,7 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-multi-input": "^1.3.1",
     "sass": "^1.51.0",
-    "storybook": "^8.4.7",
-    "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
-    "temp": "^0.9.0",
+    "storybook": "^9.0.5",
     "typescript-config-carbon": "^0.5.0",
     "vite": "^6.3.5",
     "web-component-analyzer": "2.0.0"
@@ -137,5 +130,5 @@
       }
     ]
   },
-  "gitHead": "f6debacbfe06fa5c31f70809e15762dc30096d70"
+  "gitHead": "faed0dec20f49fc7a98d7509c2c0170dff9992fc"
 }

package/scss/components/dropdown/dropdown.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 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.
@@ -16,6 +16,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include list-box;
@@ -45,6 +46,9 @@ $css--plex: true !default;
     outline: none;
   }
 }
+:host(#{$prefix}-dropdown[ai-label]) .#{$prefix}--list-box__wrapper--decorator {
+  @include ai-gradient;
+}
 
 :host(#{$prefix}-dropdown[invalid]) {
   .#{$prefix}--list-box__field {

package/scss/components/multi-select/multi-select.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 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.
@@ -34,6 +34,7 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu {
     inset-block-start: 100%;
     margin-block-start: 1px;
+    outline: none;
   }
 
   .#{$prefix}--text-input {
@@ -47,11 +48,19 @@ $css--plex: true !default;
 
   .#{$prefix}--tag--disabled {
     @extend .#{$prefix}--tag--disabled;
+
+    background-color: transparent;
+    color: $text-disabled;
   }
 
   .#{$prefix}--list-box__field:focus {
     @extend .#{$prefix}--multi-select--filterable--input-focused;
   }
+
+  /* stylelint-disable declaration-no-important */
+  .#{$prefix}--list-box__selection--multi::after {
+    display: none !important;
+  }
 }
 
 :host(#{$prefix}-multi-select[filterable])
@@ -60,8 +69,8 @@ $css--plex: true !default;
   outline-offset: -#{$spacing-01};
 }
 
-:host(#{$prefix}-multi-select[filterable])
-  .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+:host(#{$prefix}-multi-select[filterable][has-value])
+  .#{$prefix}--list-box__field
   ~ ::slotted(#{$prefix}-ai-label) {
   inset-inline-end: calc($spacing-10 + 18px);
 }
@@ -102,7 +111,7 @@ $css--plex: true !default;
 
   display: block;
 
-  .#{$prefix}--checkbox-label {
+  #{$prefix}-checkbox::part(label) {
     display: inline-block;
     overflow: hidden;
     inline-size: 100%;
@@ -125,6 +134,10 @@ $css--plex: true !default;
       flex-direction: row;
     }
   }
+  // make the checkbox element transparent to mouse events so it doesn't interfere
+  #{$prefix}-checkbox {
+    pointer-events: none;
+  }
 }
 
 :host(#{$prefix}-multi-select-item:hover) {
@@ -152,8 +165,11 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-multi-select-item[disabled]) {
-  color: $text-disabled;
-  text-decoration: none;
+  cursor: not-allowed;
+  .#{$prefix}--list-box__menu-item__option {
+    color: $text-disabled;
+    text-decoration: none;
+  }
 }
 
 :host(#{$prefix}-multi-select-item[highlighted]) {
@@ -162,7 +178,6 @@ $css--plex: true !default;
 
 :host(#{$prefix}-multi-select-item[selected]) {
   @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
 
   .#{$prefix}--list-box__menu-item__option {
     color: $text-primary;
@@ -210,3 +225,58 @@ $css--plex: true !default;
     inset-inline-end: $spacing-10;
   }
 }
+
+// When select all is turned on, the first item in the listbox
+// is always the "Select all" option and gets special border
+// treatment
+:host(#{$prefix}-multi-select-item[is-select-all]) {
+  .#{$prefix}--list-box__menu-item__option {
+    padding: 0.6875rem $spacing-05;
+    margin: 0;
+    border-block-end: 1px solid $border-subtle-01;
+  }
+}
+
+// When select all is turned on, the second item in the list
+// has special treatment to look correct against the "Select all"
+// border treatment, this second item (index=1) gets a `flush-top` attribute
+// so that we can remove its top border.
+:host(#{$prefix}-multi-select-item[flush-top])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start: none;
+}
+
+// remove focus outline for when the label is out of focus
+:host(#{$prefix}-multi-select)
+  .#{$prefix}--list-box__field.no-focus-style:focus,
+:host(#{$prefix}-multi-select)
+  .#{$prefix}--list-box__field.no-focus-style:focus-within {
+  outline: none;
+}
+
+:host(#{$prefix}-multi-select[ai-label])
+  .#{$prefix}--list-box__wrapper--decorator {
+  @include ai-gradient;
+}
+
+:host(#{$prefix}-multi-select[item-clicked]) .#{$prefix}--list-box__field {
+  outline: 1px solid $focus !important;
+  outline-offset: -1px !important;
+}
+
+:host(#{$prefix}-multi-select[warn]) {
+  .#{$prefix}--form__helper-text {
+    color: $text-primary;
+  }
+}
+
+:host(#{$prefix}-multi-select[disabled]) {
+  .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__selection {
+    pointer-events: none;
+  }
+  .#{$prefix}--list-box__field:focus,
+  .#{$prefix}--list-box__selection:focus {
+    outline: none !important;
+  }
+}

package/scss/components/page-header/page-header.scss

@@ -0,0 +1,176 @@
+//
+// Copyright IBM Corp. 2025, 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 'sass:math';
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/grid';
+@use '@carbon/styles/scss/components/page-header/index' as *;
+
+:host(#{$prefix}-page-header) {
+  @extend .#{$prefix}--page-header;
+
+  display: block;
+}
+
+:host(#{$prefix}-page-header-breadcrumb),
+:host(#{$prefix}-page-header-content),
+:host(#{$prefix}-page-header-tabs) {
+  @include grid.css-grid();
+
+  display: block;
+}
+
+:host(#{$prefix}-page-header-breadcrumb) {
+  @extend .#{$prefix}--page-header__breadcrumb-bar;
+
+  ::slotted([slot='icon']) {
+    @extend .#{$prefix}--page-header__breadcrumb__icon;
+  }
+}
+
+:host(#{$prefix}-page-header-breadcrumb:not([content-actions-flush]))
+  ::slotted([slot='content-actions']) {
+  //stylelint-disable declaration-no-important
+  margin-inline-end: $spacing-04 !important;
+}
+
+:host(#{$prefix}-page-header-breadcrumb[page-actions-flush]) {
+  .#{$prefix}--css-grid {
+    margin-inline-end: 0;
+    padding-inline-end: 0;
+  }
+
+  .#{$prefix}--css-grid-column {
+    margin-inline-end: 0;
+  }
+}
+
+:host(#{$prefix}-page-header-breadcrumb[border='true']) {
+  @extend .#{$prefix}--page-header__breadcrumb-bar-border;
+}
+
+:host(#{$prefix}-page-header-content) {
+  @extend .#{$prefix}--page-header__content;
+
+  .#{$prefix}--page-header__content__title {
+    @extend .#{$prefix}--page-header__content__title;
+
+    margin: 0;
+  }
+
+  .#{$prefix}--page-header__content__title-wrapper {
+    // overriding until the responsive behavior is implemented
+    grid-template-columns: auto minmax(auto, auto);
+  }
+
+  ::slotted([slot='icon']) {
+    @extend .#{$prefix}--page-header__content__icon;
+  }
+
+  ::slotted([slot='contextual-actions']) {
+    @extend .#{$prefix}--page-header__content__contextual-actions;
+  }
+}
+
+:host(#{$prefix}-page-header-content[contextual-actions]) {
+  .#{$prefix}--page-header__content__title {
+    -webkit-line-clamp: 1;
+  }
+}
+
+:host(#{$prefix}-page-header-content[contextual-actions]) {
+  .#{$prefix}--page-header__content__title {
+    -webkit-line-clamp: 1;
+  }
+}
+
+:host(#{$prefix}-page-header-content-text) {
+  @extend .#{$prefix}--page-header__content__body;
+
+  display: block;
+  margin-block-start: $spacing-05;
+
+  .#{$prefix}--page-header__content__subtitle {
+    margin-block-start: 0;
+  }
+}
+
+:host(#{$prefix}-page-header-hero-image) {
+  @extend .#{$prefix}--page-header__hero-image;
+
+  position: relative;
+}
+
+:host(#{$prefix}-page-header-hero-image)::before {
+  block-size: 0;
+  content: '';
+  float: inline-start;
+  inline-size: 1px;
+  margin-inline-start: -1px;
+
+  padding-block-start: math.percentage(math.div(2, 3));
+
+  @include grid.breakpoint-up('lg') {
+    padding-block-start: math.percentage(math.div(1, 2));
+  }
+}
+
+:host(#{$prefix}-page-header-hero-image)::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+:host(#{$prefix}-page-header-tabs) {
+  @extend .#{$prefix}--page-header__tab-bar;
+}
+
+:host(#{$prefix}-page-header-tabs) .#{$prefix}--page-header__tab-bar--tablist {
+  display: flex;
+  justify-content: space-between;
+  inline-size: 100%;
+
+  // TODO: remove once responsive logic for tags is implemented
+  @include breakpoint-down(md) {
+    flex-direction: column-reverse;
+    grid-gap: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-page-header-tabs) ::slotted([slot='tags']) {
+  @extend .#{$prefix}--page-header__tags;
+
+  inline-size: 100%;
+
+  // TODO: remove once responsive logic for tags is implemented
+  @include breakpoint-down(md) {
+    justify-content: left;
+  }
+}
+
+:host(#{$prefix}-page-header-breadcrumb),
+:host(#{$prefix}-page-header-content),
+:host(#{$prefix}-page-header-tabs) {
+  .#{$prefix}--css-grid {
+    inline-size: initial;
+  }
+}
+
+#{$prefix}-definition-tooltip::part(definition-term) {
+  border: none;
+}
+
+:host(#{$prefix}-page-header-tabs) ::slotted(cds-tabs) {
+  --tabs-overflow-button-background: $layer-01;
+}

package/scss/components/select/select-story.scss

@@ -0,0 +1,102 @@
+/**
+*
+* Copyright IBM Corp. 2025, 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/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/config' as *;
+
+p {
+  @include type-style('body-compact-01');
+}
+
+.bold {
+  font-weight: 600;
+}
+
+.secondary {
+  color: $text-secondary;
+}
+
+h1 {
+  margin-block-end: $spacing-05;
+}
+
+hr {
+  border: 0;
+  background: $border-subtle;
+  block-size: 1px;
+  margin-block: $spacing-07;
+}
+
+div #{$prefix}-selectable-tile::-moz-list-bullet {
+  margin-block-end: $spacing-05;
+}
+
+.ai-label-tile-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  #{$prefix}-expandable-tile,
+  #{$prefix}-selectable-tile,
+  #{$prefix}-clickable-tile,
+  #{$prefix}-tile {
+    margin-block-end: $spacing-09;
+    margin-inline-end: $spacing-09;
+    max-inline-size: 320px;
+  }
+
+  #{$prefix}-expandable-tile,
+  #{$prefix}-selectable-tile .tile-container,
+  #{$prefix}-clickable-tile .tile-container,
+  #{$prefix}-tile {
+    padding-block-end: 90px;
+  }
+}
+
+.ai-label-tile-container h4 {
+  margin-block-end: $spacing-05;
+}
+
+.ai-label-tile-container .ai-data {
+  display: flex;
+  padding: $spacing-05 0;
+  margin-block-start: $spacing-05;
+}
+
+.ai-label-tile-container .data-container {
+  inline-size: 126px;
+}
+
+.ai-label-tile-container .data-container:first-of-type {
+  margin-inline-end: $spacing-05;
+}
+
+.ai-label-tile-container p {
+  @include type-style('body-01');
+}
+
+.ai-label-tile-container .data-container p {
+  @include type-style('label-02');
+}
+
+.ai-label-tile-container #{$prefix}-tile-below-the-fold-content {
+  padding-block-start: $spacing-05;
+}
+
+.ai-label-tile-container #{$prefix}-tile-below-the-fold-content p {
+  @include type-style('label-01');
+
+  margin: $spacing-03 0 50px;
+}
+
+#{$prefix}-radio-button-group:not(:first-of-type),
+#{$prefix}-checkbox-group:not(:first-of-type) {
+  margin-block-start: $spacing-07;
+}

package/scss/components/select/select.scss

@@ -11,6 +11,10 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/select';
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+$divider-width: 1px;
 
 :host(#{$prefix}-select) {
   @extend .#{$prefix}--select;
@@ -21,13 +25,34 @@ $css--plex: true !default;
   ::slotted(#{$prefix}-slug) {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: $spacing-08;
+    inset-inline-end: $spacing-09;
   }
 
   ::slotted(#{$prefix}-ai-label:not([revert-active])),
   ::slotted(#{$prefix}-slug:not([revert-active])) {
     transform: translateY(-50%);
   }
+
+  ::slotted(#{$prefix}-ai-label) {
+    &::before,
+    &::after {
+      position: absolute;
+      background-color: $border-subtle-01;
+      block-size: to-rem(16px);
+      content: '';
+      inline-size: to-rem(1px);
+      inset-inline-start: calc(#{$spacing-06} - #{$divider-width});
+    }
+
+    &::before {
+      display: var(--#{$prefix}-show-before);
+      inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});
+    }
+  }
+}
+
+:host(#{$prefix}-select[inline]) {
+  @extend .#{$prefix}--select--inline;
 }
 
 :host(#{$prefix}-select[disabled]) {
@@ -38,24 +63,16 @@ $css--plex: true !default;
   @extend .#{$prefix}--select--invalid;
 }
 
-:host(#{$prefix}-select[readonly]) select {
-  pointer-events: none;
+:host(#{$prefix}-select[warn]) {
+  @extend .#{$prefix}--select--warning;
 }
 
-:host(#{$prefix}-select[inline][warn]) {
-  .#{$prefix}--form__helper-text,
-  .#{$prefix}--label {
-    align-self: flex-start;
-    margin-block-start: 0.8125rem;
-  }
-
-  select {
-    padding-inline-end: 3.5rem;
-  }
+:host(#{$prefix}-select[slug]) {
+  @extend .#{$prefix}--select--slug;
+}
 
-  .#{$prefix}--select__invalid-icon--warning {
-    inset-inline-end: $spacing-07;
-  }
+:host(#{$prefix}-select[readonly]) select {
+  pointer-events: none;
 }
 
 :host(#{$prefix}-select[pagination]) {
@@ -87,6 +104,6 @@ $css--plex: true !default;
 :host(#{$prefix}-select[invalid]) {
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
-    inset-inline-end: $spacing-10;
+    inset-inline-end: $spacing-09;
   }
 }

package/scss/components/tabs/tabs.scss

@@ -52,6 +52,10 @@ $inset-transition: inset 110ms motion(standard, productive);
   .#{$prefix}--tab--overflow-nav-button {
     z-index: 1;
   }
+
+  .#{$prefix}--tab--overflow-nav-button {
+    background-color: var(--tabs-overflow-button-background, $background);
+  }
 }
 
 :host(#{$prefix}-tabs) {

package/scss/components/text-input/text-input.scss

@@ -13,6 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/text-input/index';
 @use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
 
 :host(#{$prefix}-text-input) {
   @include emit-layout-tokens();
@@ -46,7 +47,7 @@ $css--plex: true !default;
 
 :host(#{$prefix}-text-input[warn]),
 :host(#{$prefix}-text-input[invalid]) {
-  .#{$prefix}--text-input__field-wrapper--slug {
+  .#{$prefix}--text-input__field-wrapper--decorator {
     .#{$prefix}--text-input {
       padding-inline-end: $spacing-10;
     }
@@ -57,3 +58,8 @@ $css--plex: true !default;
     inset-inline-end: $spacing-08;
   }
 }
+
+:host(#{$prefix}-text-input[ai-label])
+  .#{$prefix}--text-input__field-wrapper--decorator {
+  @include ai-gradient;
+}