@carbon/web-components 2.62.0 → 2.63.0-rc.0

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

@@ -10,7 +10,9 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/border-radius' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/multiselect' as *;
 @use '@carbon/styles/scss/colors';
@@ -31,9 +33,18 @@ $css--plex: true !default;
   }
 
   .#{$prefix}--list-box__menu {
-    inset-block-start: 100%;
-    margin-block-start: 1px;
     outline: none;
+
+    @if not flags.enabled('enable-v12-release') {
+      inset-block-start: 100%;
+      margin-block-start: 1px;
+    }
+  }
+
+  @if flags.enabled('enable-v12-release') {
+    .#{$prefix}--list-box__field {
+      block-size: calc(100% + 1px);
+    }
   }
 
   .#{$prefix}--text-input {
@@ -51,6 +62,10 @@ $css--plex: true !default;
 
   .#{$prefix}--list-box__field:focus {
     @extend .#{$prefix}--multi-select--filterable--input-focused;
+
+    @if flags.enabled('enable-v12-release') {
+      outline-offset: -1px;
+    }
   }
 
   .#{$prefix}--list-box__divider {
@@ -69,6 +84,13 @@ $css--plex: true !default;
   }
 }
 
+@if flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-fluid-multi-select:not([read-only]))
+    .#{$prefix}--list-box__field:focus-within {
+    border-radius: $border-radius-04;
+  }
+}
+
 // Target multiselect items inside fluid multiselect for non-condensed height
 :host(#{$prefix}-fluid-multi-select:not([is-condensed])) {
   ::slotted(#{$prefix}-multi-select-item) {
@@ -76,6 +98,17 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-fluid-multi-select[read-only]) {
+  @extend .#{$prefix}--multi-select--readonly;
+
+  @if flags.enabled('enable-v12-release') {
+    .#{$prefix}--list-box {
+      background: $field;
+      border-block-end-color: $border-subtle;
+    }
+  }
+}
+
 :host(#{$prefix}-fluid-multi-select[invalid]:not([disabled]):not([read-only])),
 :host(#{$prefix}-fluid-multi-select[warn]:not([disabled]):not([read-only])) {
   .#{$prefix}--form__helper-text {
@@ -86,6 +119,10 @@ $css--plex: true !default;
 
   .#{$prefix}--list-box {
     border-block-end: 1px solid transparent;
+
+    @if flags.enabled('enable-v12-release') {
+      background: none;
+    }
   }
 
   .#{$prefix}--list-box.#{$prefix}--list-box--warning
@@ -97,6 +134,38 @@ $css--plex: true !default;
   }
 }
 
+@if flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-fluid-multi-select[warn]:not([disabled]):not([read-only])) {
+    .#{$prefix}--form__helper-text {
+      border-radius: $border-radius-04;
+    }
+
+    .#{$prefix}--list-box__wrapper--fluid {
+      border: 1px solid transparent;
+      border-radius: $border-radius-04;
+      background:
+        linear-gradient($field, $field) padding-box,
+        linear-gradient(
+            to bottom,
+            $border-subtle calc(100% - 4px),
+            $border-strong 100%
+          )
+          border-box;
+
+      // 2px to offset the wrapper's border, keeping the field 64px.
+      .#{$prefix}--list-box {
+        border: none;
+        min-block-size: to-rem(62px);
+      }
+      .#{$prefix}--label {
+        inline-size: calc(100% - 2rem + 2px);
+        inset-block-start: to-rem(12px);
+        inset-inline-start: calc(#{$spacing-05} - 1px);
+      }
+    }
+  }
+}
+
 :host(#{$prefix}-fluid-multi-select[warn]:not([disabled]):not([read-only])) {
   .#{$prefix}--form__helper-text {
     color: $text-primary;
@@ -113,6 +182,10 @@ $css--plex: true !default;
   .#{$prefix}--list-box__field:focus-within {
     outline: $spacing-01 solid $focus;
     outline-offset: -#{$spacing-01};
+
+    @if flags.enabled('enable-v12-release') {
+      outline-offset: -1px;
+    }
   }
   .#{$prefix}--list-box {
     .#{$prefix}--list-box__field {

package/scss/components/fluid-number-input/fluid-number-input.scss

@@ -7,13 +7,15 @@
 
 $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 @use '@carbon/styles/scss/components/fluid-number-input/index';
 @use '@carbon/styles/scss/components/fluid-text-input' as *;
 @use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/skeleton' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/number-input/index' as *;
 
 :host(#{$prefix}-fluid-number-input) {
@@ -27,3 +29,32 @@ $css--plex: true !default;
 
   display: block;
 }
+
+:host(#{$prefix}-fluid-number-input[ai-label])
+  .#{$prefix}--number-input--fluid {
+  @include ai-gradient;
+
+  @if flags.enabled('enable-v12-release') {
+    background:
+      linear-gradient(
+          0deg,
+          $ai-aura-start-sm 0%,
+          15%,
+          $ai-aura-end 50%,
+          transparent 100%
+        )
+        padding-box,
+      linear-gradient($field, $field) padding-box,
+      linear-gradient(
+          to bottom,
+          $ai-border-start calc(100% - 4px),
+          $ai-border-strong 100%
+        )
+        border-box;
+    border-block-end-color: transparent;
+  }
+}
+
+:host(#{$prefix}-fluid-number-input[ai-label]) input {
+  background: transparent;
+}

package/scss/components/fluid-search/fluid-search.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp.2025
+ * Copyright IBM Corp. 2025, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,6 +7,7 @@
 
 $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 @use '@carbon/styles/scss/components/fluid-search/index';
 @use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -49,7 +50,9 @@ $css--plex: true !default;
     cursor: not-allowed;
   }
 
-  .#{$prefix}--search-input[disabled] {
-    border-block-end: 1px solid $border-subtle;
+  @if not flags.enabled('enable-v12-release') {
+    .#{$prefix}--search-input[disabled] {
+      border-block-end: 1px solid $border-subtle;
+    }
   }
 }

package/scss/components/menu/menu-item.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024
+// Copyright IBM Corp. 2024, 2026
 //
 // 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,6 +17,8 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/menu' as *;
 @use '@carbon/styles/scss/utilities/component-reset';
+@use '@carbon/styles/scss/border-radius' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 
 :host(#{$prefix}-menu-item) {
   @include type-style('body-short-01');
@@ -34,7 +36,13 @@ $css--plex: true !default;
   svg {
     color: $icon-secondary;
   }
+
+  @if flags.enabled('enable-v12-release') {
+    border-radius: $border-radius-04;
+    padding-inline: $spacing-04;
+  }
 }
+
 :host(#{$prefix}-menu-item:focus) {
   @include focus-outline('outline');
 }

package/scss/components/menu/menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024
+// Copyright IBM Corp. 2024, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -13,6 +13,8 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/menu' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
+@use '@carbon/styles/scss/utilities/convert';
 @use './menu-variables' as *;
 
 :host(#{$prefix}-menu) {
@@ -27,6 +29,7 @@ $css--plex: true !default;
     pointer-events: none;
   }
 }
+
 .#{$prefix}--menu--with-icons {
   --grid-template: #{$spacing-05} 1fr max-content;
   --display-icon-item: flex;
@@ -93,3 +96,31 @@ $css--plex: true !default;
 .#{$prefix}--menu--lg {
   --block-size-value: 3rem;
 }
+
+// A submenu is spaced away from its parent menu item, so the pointer has to cross a
+// gap belonging to neither. This causes `mouseleave` to fire, closing the submenu prematurely
+//
+// This spans exactly that gap, stopping at the item's edge, so it covers only the
+// space in between.
+//
+// Visually, everything looks the same, but functionally, the submenu stays open since
+// the cursor technically never left it.
+:host(#{$prefix}-menu[ischild]) .#{$prefix}--menu {
+  &::before {
+    position: absolute;
+    content: '';
+    cursor: auto;
+    inline-size: $spacing-01;
+    inset-block: 0;
+    inset-inline-start: -$spacing-01;
+
+    @if flags.enabled('enable-v12-release') {
+      inline-size: convert.to-rem(6px);
+      inset-inline-start: calc(-1 * convert.to-rem(6px));
+    }
+  }
+
+  &--shown {
+    overflow: visible;
+  }
+}

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2026
+// Copyright IBM Corp. 2019, 2026
 //
 // 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 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
@@ -36,11 +37,20 @@ $css--plex: true !default;
   }
 
   .#{$prefix}--list-box__menu {
-    inset-block-start: 100%;
-    margin-block-start: 1px;
+    @if not flags.enabled('enable-v12-release') {
+      inset-block-start: 100%;
+      margin-block-start: 1px;
+    }
+
     outline: none;
   }
 
+  @if flags.enabled('enable-v12-release') {
+    .#{$prefix}--list-box__field {
+      block-size: calc(100% + 1px);
+    }
+  }
+
   .#{$prefix}--text-input {
     border: none;
     padding-inline-start: 0;
@@ -57,20 +67,19 @@ $css--plex: true !default;
     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;
+  @if not flags.enabled('enable-v12-release') {
+    .#{$prefix}--list-box__field:focus {
+      @extend .#{$prefix}--multi-select--filterable--input-focused;
+    }
   }
 }
 
 :host(#{$prefix}-multi-select[filterable]) {
-  .#{$prefix}--list-box__field:focus-within {
-    outline: $spacing-01 solid $focus;
-    outline-offset: -#{$spacing-01};
+  @if not flags.enabled('enable-v12-release') {
+    .#{$prefix}--list-box__field:focus-within {
+      outline: $spacing-01 solid $focus;
+      outline-offset: -#{$spacing-01};
+    }
   }
   .#{$prefix}--list-box {
     .#{$prefix}--list-box__field {
@@ -78,6 +87,52 @@ $css--plex: true !default;
     }
   }
 }
+@if flags.enabled('enable-v12-release') {
+  // Default: full outline on trigger, none when navigating items, thin
+  // when something is selected
+  :host(#{$prefix}-multi-select:not([filterable]):not([item-clicked])) {
+    .#{$prefix}--list-box:focus-within:not(
+        :has([aria-activedescendant]:not([aria-activedescendant='']))
+      ):not(
+        .#{$prefix}--list-box--expanded.#{$prefix}--multi-select--selected
+      ) {
+      @include focus-outline('outline');
+    }
+  }
+
+  :host(#{$prefix}-multi-select:not([filterable])) {
+    .#{$prefix}--list-box--expanded.#{$prefix}--multi-select--selected:focus-within {
+      @include focus-outline('outline');
+
+      outline-offset: rem(-1px);
+      outline-width: rem(1px);
+    }
+  }
+
+  // Filterable: full outline on trigger, thin whenever an option is
+  // active or anything is selected
+  :host(#{$prefix}-multi-select[filterable]) {
+    .#{$prefix}--list-box:focus-within {
+      @include focus-outline('outline');
+    }
+
+    .#{$prefix}--list-box:focus-within:has(
+        [aria-activedescendant]:not([aria-activedescendant=''])
+      ),
+    .#{$prefix}--list-box.#{$prefix}--multi-select--selected:focus-within {
+      outline-offset: rem(-1px);
+      outline-width: rem(1px);
+    }
+  }
+
+  :host(#{$prefix}-multi-select[filterable][item-clicked]) {
+    .#{$prefix}--list-box:focus-within {
+      outline-offset: rem(-1px);
+      outline-width: rem(1px);
+    }
+  }
+}
+
 :host(#{$prefix}-multi-select[filterable][has-value])
   .#{$prefix}--list-box__field
   ~ ::slotted(#{$prefix}-ai-label) {
@@ -439,14 +494,33 @@ $css--plex: true !default;
   }
 }
 
-// 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;
+@if flags.enabled('enable-v12-release') {
+  // When select all is turned on, the "Select all" option is separated from
+  // the rest of the options by a divider
+  :host(#{$prefix}-multi-select-item[is-select-all]) {
+    position: relative;
+
+    // spacing-02 margin * 2 + 1px divider
+    margin-block-end: calc(#{$spacing-02} * 2 + 1px);
+
+    .#{$prefix}--list-box__menu-divider {
+      position: absolute;
+      background-color: $border-subtle;
+      block-size: convert.to-rem(1px);
+      inset-block-start: calc(100% + #{$spacing-02});
+      inset-inline: -$spacing-02;
+    }
+  }
+} @else {
+  // 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;
+    }
   }
 }
 
@@ -470,14 +544,41 @@ $css--plex: true !default;
 :host(#{$prefix}-multi-select[ai-label])
   .#{$prefix}--list-box__wrapper--decorator {
   @include ai-gradient;
-}
 
-:host(#{$prefix}-multi-select[item-clicked]),
-:host(#{$prefix}-multi-select[has-value]) {
-  .#{$prefix}--list-box__field,
-  .#{$prefix}--multi-select--invalid {
-    outline: 1px solid $focus !important;
-    outline-offset: -1px !important;
+  @if flags.enabled('enable-v12-release') {
+    // Reset the bottom-edge color override from @include ai-gradient so the
+    // border-box gradient layer controls all four sides uniformly.
+    background:
+      linear-gradient(
+          0deg,
+          $ai-aura-start-sm 0%,
+          15%,
+          $ai-aura-end 50%,
+          transparent 100%
+        )
+        padding-box,
+      linear-gradient($field, $field) padding-box,
+      // (ai-border-start → ai-border-end), mirroring the default v12 border gradient
+      linear-gradient(
+          to bottom,
+          $ai-border-start calc(100% - 4px),
+          $ai-border-strong 100%
+        )
+        border-box;
+    border-block-end-color: transparent;
+  }
+}
+
+@if not flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-multi-select[item-clicked]),
+  :host(#{$prefix}-multi-select[has-value]) {
+    .#{$prefix}--list-box__field,
+    .#{$prefix}--multi-select--invalid {
+      /* stylelint-disable-next-line declaration-no-important */
+      outline: 1px solid $focus !important;
+      /* stylelint-disable-next-line declaration-no-important */
+      outline-offset: -1px !important;
+    }
   }
 }
 
@@ -515,6 +616,7 @@ $css--plex: true !default;
   }
   .#{$prefix}--list-box__field:focus,
   .#{$prefix}--list-box__selection:focus {
+    /* stylelint-disable-next-line declaration-no-important */
     outline: none !important;
   }
 }

package/scss/components/number-input/number-input.scss

@@ -8,6 +8,7 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/utilities';
@@ -44,7 +45,11 @@ $css--plex: true !default;
 .#{$prefix}--number--readonly {
   .#{$prefix}--number__controls {
     .#{$prefix}--number__control-btn {
-      border-block-end: 0;
+      @if flags.enabled('enable-v12-release') {
+        border-block-end-color: transparent;
+      } @else {
+        border-block-end: 0;
+      }
     }
   }
 }
@@ -73,6 +78,10 @@ $css--plex: true !default;
       content: '';
       inline-size: to-rem(1px);
       inset-inline-start: -#{$spacing-05};
+
+      @if flags.enabled('enable-v12-release') {
+        display: none;
+      }
     }
   }
 }
@@ -87,6 +96,31 @@ $css--plex: true !default;
 }
 :host(#{$prefix}-number-input[ai-label]) input {
   @include ai-gradient;
+
+  padding-inline-end: to-rem(145px);
+
+  @if flags.enabled('enable-v12-release') {
+    // Reset the bottom-edge color override from @include ai-gradient so the
+    // border-box gradient layer controls all four sides uniformly.
+    background:
+      linear-gradient(
+          0deg,
+          $ai-aura-start-sm 0%,
+          15%,
+          $ai-aura-end 50%,
+          transparent 100%
+        )
+        padding-box,
+      linear-gradient($field, $field) padding-box,
+      // (ai-border-start → ai-border-end), mirroring the default v12 border gradient
+      linear-gradient(
+          to bottom,
+          $ai-border-start calc(100% - 4px),
+          $ai-border-strong 100%
+        )
+        border-box;
+    border-block-end-color: transparent;
+  }
 }
 
 :host(#{$prefix}-number-input[invalid][fluid]) {