@carbon/web-components 2.62.0 → 2.63.0

package/scss/components/fluid-combo-box/fluid-combo-box.scss

@@ -11,7 +11,9 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/combo-box' as *;
 @use '@carbon/styles/scss/components/list-box' as *;
 @use '@carbon/styles/scss/utilities/layout' 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/type' as *;
 @use '@carbon/styles/scss/utilities/skeleton' as *;
@@ -27,12 +29,18 @@ $css--plex: true !default;
 
   outline: none;
 
+  @if enabled('enable-v12-release') {
+    border-radius: $border-radius-04;
+  }
+
   .#{$prefix}--list-box {
     box-sizing: border-box;
   }
 
-  .#{$prefix}--list-box--expanded {
-    border-block-end-color: $border-subtle;
+  @if not flags.enabled('enable-v12-release') {
+    .#{$prefix}--list-box--expanded {
+      border-block-end-color: $border-subtle;
+    }
   }
 
   .#{$prefix}--assistive-text {
@@ -45,9 +53,11 @@ $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;
+    }
   }
 
   .#{$prefix}--list-box--disabled {
@@ -77,7 +87,17 @@ $css--plex: true !default;
   @extend .#{$prefix}--list-box__wrapper--fluid--invalid;
   @include focus-outline('invalid');
 
-  outline-offset: 0;
+  @if not flags.enabled('enable-v12-release') {
+    outline-offset: 0;
+  }
+}
+
+@if flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-fluid-combo-box) {
+    .#{$prefix}--text-input:focus {
+      outline-offset: -1px;
+    }
+  }
 }
 
 // Direction top
@@ -209,6 +229,20 @@ $css--plex: true !default;
   .#{$prefix}--list-box__selection {
     pointer-events: none;
   }
+
+  @if flags.enabled('enable-v12-release') {
+    border-radius: $border-radius-00;
+
+    .#{$prefix}--list-box {
+      border-radius: $border-radius-00;
+      background: $field;
+      border-block-end-color: $border-subtle;
+    }
+
+    .#{$prefix}--text-input {
+      border-radius: $border-radius-00;
+    }
+  }
 }
 
 :host(#{$prefix}-fluid-combo-box[invalid]:not([disabled]):not([read-only])),
@@ -221,6 +255,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
@@ -231,6 +269,31 @@ $css--plex: true !default;
     pointer-events: none;
   }
 }
+@if flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-fluid-combo-box[warn]:not([disabled]):not([read-only])) {
+    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-combo-box[warn]:not([disabled]):not([read-only])) {
   .#{$prefix}--form__helper-text {

package/scss/components/fluid-date-picker/fluid-date-picker.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.
@@ -10,17 +10,21 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/border-radius' as *;
 @use '@carbon/styles/scss/layout' as *;
 @use '@carbon/styles/scss/utilities/convert';
 @use '@carbon/styles/scss/utilities/skeleton' as *;
 @use '@carbon/styles/scss/components/fluid-date-picker' as *;
 @use '@carbon/styles/scss/components/date-picker/index';
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 
 // ── Fluid date picker (wrapper) ──────────────────────────────────────────────
 
 :host(#{$prefix}-fluid-date-picker) {
-  @extend .#{$prefix}--date-picker--fluid;
+  @if not flags.enabled('enable-v12-release') {
+    @extend .#{$prefix}--date-picker--fluid;
+  }
   @include emit-layout-tokens();
 
   display: inline-flex;
@@ -33,7 +37,11 @@ $css--plex: true !default;
   }
 
   .#{$prefix}--date-picker__calendar.open {
-    margin-block-start: 0;
+    @if flags.enabled('enable-v12-release') {
+      margin-block-start: $spacing-02;
+    } @else {
+      margin-block-start: 0;
+    }
   }
 
   .flatpickr-next-month,
@@ -68,6 +76,10 @@ $css--plex: true !default;
       }
     }
   }
+
+  @if flags.enabled('enable-v12-release') {
+    border: 1px solid transparent;
+  }
 }
 
 :host(#{$prefix}-fluid-date-picker[invalid]) {
@@ -78,8 +90,11 @@ $css--plex: true !default;
   @extend .#{$prefix}--date-picker--fluid--warn;
 }
 
-:host(#{$prefix}-fluid-date-picker[readonly]) {
-  @extend .#{$prefix}--date-picker--fluid--readonly;
+:host(#{$prefix}-fluid-date-picker[readonly]),
+:host(#{$prefix}-fluid-date-picker[data-input-readonly]) {
+  @if not flags.enabled('enable-v12-release') {
+    @extend .#{$prefix}--date-picker--fluid--readonly;
+  }
 }
 
 // ── Fluid date picker input ──────────────────────────────────────────────────
@@ -90,15 +105,74 @@ $css--plex: true !default;
   box-sizing: border-box;
   background: $field;
   block-size: convert.to-rem(64px);
-  border-block-end: 1px solid $border-strong;
   inline-size: 100%;
   max-inline-size: 100%;
   outline: none;
+
+  @if flags.enabled('enable-v12-release') {
+    border: 1px solid transparent;
+  } @else {
+    border-block-end: 1px solid $border-strong;
+  }
 }
 
-:host(#{$prefix}-fluid-date-picker-input[disabled]),
-:host(#{$prefix}-fluid-date-picker-input[readonly]) {
-  border-block-end: 1px solid $border-subtle;
+@if flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-fluid-date-picker-input:not([readonly])) {
+    border-radius: $border-radius-04;
+  }
+}
+
+@if not flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-fluid-date-picker-input[readonly]) {
+    border-block-end: 1px solid $border-subtle;
+  }
+}
+
+@if flags.enabled('enable-v12-release') {
+  :host(
+      #{$prefix}-fluid-date-picker:not([disabled]):not([readonly]):not(
+          [data-input-disabled]
+        ):not([data-input-readonly])
+    ) {
+    border-radius: $border-radius-04;
+    // (gray-20 → gray-50)
+    background:
+      linear-gradient($field, $field) padding-box,
+      linear-gradient(
+          to bottom,
+          $border-subtle calc(100% - 4px),
+          $border-strong 100%
+        )
+        border-box;
+  }
+
+  :host(#{$prefix}-fluid-date-picker-input[readonly]) {
+    border-block-end-color: $border-subtle;
+  }
+
+  :host(#{$prefix}-fluid-date-picker-input[kind='from']) {
+    border-end-end-radius: $border-radius-00;
+    border-inline-end: none;
+    border-start-end-radius: $border-radius-00;
+  }
+
+  :host(#{$prefix}-fluid-date-picker-input[kind='to']) {
+    border-end-start-radius: $border-radius-00;
+    border-inline-start: none;
+    border-start-start-radius: $border-radius-00;
+  }
+
+  :host(#{$prefix}-fluid-date-picker-input:focus-within) {
+    @include focus-outline('outline');
+
+    z-index: 1;
+    outline-offset: convert.to-rem(-1.5px);
+  }
+
+  :host(#{$prefix}-fluid-date-picker:focus-within)
+    ::slotted(#{$prefix}-fluid-date-picker-input[kind='to']) {
+    border-inline-start-color: transparent;
+  }
 }
 
 // When invalid or warn, allow host to grow beyond 64px for error message
@@ -111,8 +185,10 @@ $css--plex: true !default;
       )
   ) {
   block-size: auto;
-  border-block-end: none;
   min-block-size: convert.to-rem(64px);
+  @if not flags.enabled('enable-v12-release') {
+    border-block-end: none;
+  }
 }
 
 // Divider between input area and error/warn message
@@ -176,10 +252,22 @@ $css--plex: true !default;
   .#{$prefix}--date-picker__input {
     inline-size: convert.to-rem(143.5px);
   }
+
+  @if flags.enabled('enable-v12-release') {
+    min-inline-size: 0;
+
+    .#{$prefix}--date-picker__input {
+      inline-size: 100%;
+    }
+  }
 }
 
 :host(#{$prefix}-fluid-date-picker-input[kind='to']) {
   border-inline-start: 1px solid $border-strong;
+
+  @if flags.enabled('enable-v12-release') {
+    border-inline-start-color: $border-subtle;
+  }
 }
 
 :host(#{$prefix}-fluid-date-picker-input[kind='to'][disabled]),
@@ -192,6 +280,10 @@ $css--plex: true !default;
   ) {
   @extend .#{$prefix}--date-picker--fluid--invalid;
   @include focus-outline('invalid');
+
+  @if flags.enabled('enable-v12-release') {
+    outline-offset: convert.to-rem(-0.5px);
+  }
 }
 
 :host(#{$prefix}-fluid-date-picker-input[warn]:not([invalid])) {
@@ -225,8 +317,13 @@ $css--plex: true !default;
   padding-block-start: convert.to-rem(32px);
   padding-inline: $spacing-05;
 
-  &:focus {
-    @include focus-outline('outline');
+  @if flags.enabled('enable-v12-release') {
+    // outline is drawn on the host instead
+    @include focus-outline('reset');
+  } @else {
+    &:focus {
+      @include focus-outline('outline');
+    }
   }
 }
 

package/scss/components/fluid-dropdown/fluid-dropdown.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp.2026
+ * Copyright IBM Corp. 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.
@@ -11,7 +11,9 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/dropdown' as *;
 @use '@carbon/styles/scss/components/list-box' as *;
 @use '@carbon/styles/scss/utilities/layout' 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/type' as *;
 @use '@carbon/styles/scss/utilities/skeleton' as *;
@@ -31,8 +33,10 @@ $css--plex: true !default;
     box-sizing: border-box;
   }
 
-  .#{$prefix}--list-box--expanded {
-    border-block-end-color: $border-subtle;
+  @if not flags.enabled('enable-v12-release') {
+    .#{$prefix}--list-box--expanded {
+      border-block-end-color: $border-subtle;
+    }
   }
 
   .#{$prefix}--assistive-text {
@@ -46,9 +50,11 @@ $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;
+    }
   }
 
   .#{$prefix}--list-box--disabled {
@@ -80,7 +86,9 @@ $css--plex: true !default;
   @extend .#{$prefix}--list-box__wrapper--fluid--invalid;
   @include focus-outline('invalid');
 
-  outline-offset: 0;
+  @if not flags.enabled('enable-v12-release') {
+    outline-offset: 0;
+  }
 }
 
 // Direction top
@@ -191,6 +199,15 @@ $css--plex: true !default;
   .#{$prefix}--list-box__selection {
     pointer-events: none;
   }
+  @if flags.enabled('enable-v12-release') {
+    border-radius: $border-radius-00;
+
+    .#{$prefix}--list-box {
+      border-radius: $border-radius-00;
+      background: $field;
+      border-block-end-color: $border-subtle;
+    }
+  }
 }
 
 :host(#{$prefix}-fluid-dropdown[invalid]:not([disabled]):not([read-only])),
@@ -203,6 +220,9 @@ $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
@@ -214,6 +234,36 @@ $css--plex: true !default;
   }
 }
 
+@if flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-fluid-dropdown[warn]:not([disabled]):not([read-only])) {
+    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);
+    }
+
+    .#{$prefix}--dropdown:has(.#{$prefix}--list-box__field:focus) {
+      outline-offset: -1px;
+    }
+  }
+}
+
 :host(#{$prefix}-fluid-dropdown[warn]:not([disabled]):not([read-only])) {
   .#{$prefix}--form__helper-text {
     color: $text-primary;

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');
 }