@carbon/styles 1.114.0 → 1.115.0

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

@@ -1,13 +1,15 @@
 //
-// Copyright IBM Corp. 2016, 2025
+// Copyright IBM Corp. 2016, 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.
 //
 
 @use '../form';
+@use '../../border-radius' as *;
 @use '../../colors' as *;
 @use '../../config' as *;
+@use '../../feature-flags' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -68,6 +70,20 @@
       background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+      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;
+    }
+
     &:focus {
       @include focus-outline('outline');
     }
@@ -133,6 +149,11 @@
     background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
+
+    @if enabled('enable-v12-release') {
+      border: none;
+      background: $field;
+    }
   }
 
   .#{$prefix}--number__input-wrapper {
@@ -191,6 +212,16 @@
       color: $text-disabled;
       cursor: not-allowed;
     }
+
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+      border-radius: $border-radius-04;
+      background-clip: padding-box;
+
+      &:hover {
+        box-shadow: none;
+      }
+    }
   }
 
   // set orders to facilitate styling for rule dividers
@@ -227,6 +258,10 @@
     border-color: $focus;
     box-shadow: none;
     outline-offset: -2px;
+
+    @if enabled('enable-v12-release') {
+      border-color: transparent;
+    }
   }
 
   .#{$prefix}--number
@@ -255,16 +290,20 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn:hover,
+    .#{$prefix}--number__control-btn,
   .#{$prefix}--number
     input[type='text'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn:hover {
+    .#{$prefix}--number__control-btn {
     border-width: 2px 0;
     border-style: solid;
     border-color: $support-error;
     box-shadow: none;
     outline-offset: -2px;
+
+    @if enabled('enable-v12-release') {
+      border-color: transparent;
+    }
   }
 
   .#{$prefix}--number
@@ -288,6 +327,10 @@
     &:first-of-type {
       order: 0;
     }
+
+    @if enabled('enable-v12-release') {
+      display: none;
+    }
   }
 
   // rule divider styles
@@ -449,12 +492,20 @@
   .#{$prefix}--number--readonly input[type='text'] {
     background: transparent;
     border-block-end-color: $border-subtle;
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-00;
+    }
   }
 
   .#{$prefix}--number--readonly .#{$prefix}--number__control-btn {
     color: $icon-disabled;
     pointer-events: none;
 
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-00;
+    }
+
     &:hover {
       background-color: transparent;
       cursor: pointer;
@@ -516,6 +567,10 @@
     block-size: convert.to-rem(16px);
     content: '';
     inline-size: convert.to-rem(1px);
+
+    @if enabled('enable-v12-release') {
+      display: none;
+    }
   }
 
   .#{$prefix}--number__input-wrapper--decorator
@@ -540,6 +595,10 @@
   .#{$prefix}--number__control-btn::after {
     display: block;
     inset-inline-end: 0;
+
+    @if enabled('enable-v12-release') {
+      display: none;
+    }
   }
 
   .#{$prefix}--number__input-wrapper--decorator
@@ -650,6 +709,31 @@
     @include ai-gradient;
 
     padding-inline-end: convert.to-rem(145px);
+
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+      border-radius: $border-radius-04;
+      // 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;
+    }
   }
 
   // Skeleton State
@@ -698,11 +782,13 @@
   display: none;
 }
 
-.#{$prefix}--number__input-wrapper--decorator
-  .#{$prefix}--number__control-btn:hover,
-.#{$prefix}--number__input-wrapper--slug
-  .#{$prefix}--number__control-btn:hover {
-  box-shadow: 0 -1px 0 $ai-border-strong inset;
+@if not enabled('enable-v12-release') {
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--number__control-btn:hover {
+    box-shadow: 0 -1px 0 $ai-border-strong inset;
+  }
 }
 
 //hide dividers on button focus

package/scss/components/radio-button/_radio-button.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 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.
@@ -289,48 +289,114 @@ $radio-border-width: 1px !default;
   }
 
   // AILabel styles
+  .#{$prefix}--radio-button-group--decorator,
+  .#{$prefix}--radio-button-group--slug {
+    display: block;
+  }
+
+  .#{$prefix}--radio-button-group--decorator::after,
+  .#{$prefix}--radio-button-group--slug::after {
+    display: block;
+    clear: both;
+    content: '';
+  }
+
+  .#{$prefix}--radio-button-wrapper--decorator,
+  .#{$prefix}--radio-button-wrapper--slug {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .#{$prefix}--radio-button-wrapper--decorator .#{$prefix}--radio-button__label,
+  .#{$prefix}--radio-button-wrapper--slug .#{$prefix}--radio-button__label {
+    margin-inline-end: 0;
+  }
+
+  .#{$prefix}--radio-button-group--decorator legend.#{$prefix}--label,
+  .#{$prefix}--radio-button-group--slug legend.#{$prefix}--label {
+    float: inline-start;
+  }
+
+  .#{$prefix}--radio-button-group--decorator
+    > .#{$prefix}--radio-button-group-inner--decorator,
+  .#{$prefix}--radio-button-group--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--radio-button-group--slug > .#{$prefix}--slug {
+    float: inline-start;
+  }
+
+  .#{$prefix}--radio-button-group--decorator:not(
+      .#{$prefix}--radio-button-group--vertical
+    )
+    > .#{$prefix}--radio-button-wrapper,
+  .#{$prefix}--radio-button-group--slug:not(
+      .#{$prefix}--radio-button-group--vertical
+    )
+    > .#{$prefix}--radio-button-wrapper {
+    float: inline-start;
+  }
+
+  .#{$prefix}--radio-button-group--decorator
+    > .#{$prefix}--radio-button-group-inner--decorator
+    + .#{$prefix}--radio-button-wrapper,
+  .#{$prefix}--radio-button-group--slug
+    > .#{$prefix}--ai-label
+    + .#{$prefix}--radio-button-wrapper,
+  .#{$prefix}--radio-button-group--slug
+    > .#{$prefix}--slug
+    + .#{$prefix}--radio-button-wrapper,
+  .#{$prefix}--radio-button-group--vertical.#{$prefix}--radio-button-group--decorator
+    > .#{$prefix}--radio-button-wrapper,
+  .#{$prefix}--radio-button-group--vertical.#{$prefix}--radio-button-group--slug
+    > .#{$prefix}--radio-button-wrapper {
+    clear: both;
+  }
+
   .#{$prefix}--radio-button-group--decorator legend.#{$prefix}--label,
   .#{$prefix}--radio-button-wrapper--decorator
     .#{$prefix}--radio-button__label-text,
+  .#{$prefix}--radio-button-group--decorator
+    > .#{$prefix}--radio-button-group-inner--decorator,
   .#{$prefix}--radio-button-group--slug legend.#{$prefix}--label,
-  .#{$prefix}--radio-button-wrapper--slug
-    .#{$prefix}--radio-button__label-text {
-    display: flex;
+  .#{$prefix}--radio-button-wrapper--slug .#{$prefix}--radio-button__label-text,
+  .#{$prefix}--radio-button-group--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--radio-button-group--slug > .#{$prefix}--slug {
+    display: inline-flex;
   }
 
   .#{$prefix}--radio-button-group--decorator
-    legend.#{$prefix}--label
-    .#{$prefix}--radio-button-group-inner--decorator
+    > .#{$prefix}--radio-button-group-inner--decorator
     > *,
   .#{$prefix}--radio-button-wrapper--decorator
-    .#{$prefix}--radio-button__label-text
-    .#{$prefix}--radio-button-wrapper-inner--decorator
+    > .#{$prefix}--radio-button-wrapper-inner--decorator
     > *,
-  .#{$prefix}--radio-button-group--slug
-    legend.#{$prefix}--label
-    .#{$prefix}--ai-label,
-  .#{$prefix}--radio-button-wrapper--slug
-    .#{$prefix}--radio-button__label-text
-    .#{$prefix}--ai-label,
-  .#{$prefix}--radio-button-group--slug
-    legend.#{$prefix}--label
-    .#{$prefix}--slug,
-  .#{$prefix}--radio-button-wrapper--slug
-    .#{$prefix}--radio-button__label-text
-    .#{$prefix}--slug {
+  .#{$prefix}--radio-button-group--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--radio-button-group--slug > .#{$prefix}--slug,
+  .#{$prefix}--radio-button-wrapper--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--radio-button-wrapper--slug > .#{$prefix}--slug {
     margin-inline-start: $spacing-03;
   }
 
   .#{$prefix}--radio-button-wrapper--decorator
-    .#{$prefix}--radio-button__label-text
-    .#{$prefix}--ai-label__button--inline,
-  .#{$prefix}--radio-button-wrapper--slug
-    .#{$prefix}--radio-button__label-text
+    > .#{$prefix}--radio-button-wrapper-inner--decorator,
+  .#{$prefix}--radio-button-wrapper--slug > .#{$prefix}--ai-label,
+  .#{$prefix}--radio-button-wrapper--slug > .#{$prefix}--slug {
+    margin-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--radio-button-wrapper--decorator
+    > .#{$prefix}--radio-button-wrapper-inner--decorator
     .#{$prefix}--ai-label__button--inline,
-  .#{$prefix}--radio-button-wrapper--slug
-    .#{$prefix}--radio-button__label-text
-    .#{$prefix}--slug__button--inline {
+  .#{$prefix}--radio-button-wrapper--slug .#{$prefix}--ai-label__button--inline,
+  .#{$prefix}--radio-button-wrapper--slug .#{$prefix}--slug__button--inline {
     line-height: inherit;
     margin-block-start: convert.to-rem(-1px);
   }
+
+  .#{$prefix}--radio-button-wrapper--decorator
+    > .#{$prefix}--radio-button__validation-msg,
+  .#{$prefix}--radio-button-wrapper--slug
+    > .#{$prefix}--radio-button__validation-msg {
+    inline-size: 100%;
+  }
 }

package/scss/components/search/_search.scss

@@ -10,6 +10,8 @@
 //-----------------------------
 
 @use '../text-input';
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 @use '../../theme' as *;
 @use '../../config' as *;
 @use '../../type';
@@ -64,7 +66,7 @@
     padding: 0 layout.size('height');
     border: none;
     appearance: none;
-    background-color: $field;
+    background: $field;
     block-size: layout.size('height');
     border-block-end: 1px solid $border-strong;
     color: $text-primary;
@@ -75,6 +77,20 @@
       background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive);
 
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+      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;
+    }
+
     &:focus {
       @include focus-outline('outline');
     }
@@ -98,7 +114,7 @@
   }
 
   .#{$prefix}--search-input[disabled] {
-    background-color: $field;
+    background: $field;
     border-block-end: 1px solid transparent;
     color: $text-disabled;
     cursor: not-allowed;
@@ -135,12 +151,9 @@
     @include focus-outline('reset');
 
     position: absolute;
+    background-clip: padding-box;
     inset-block-start: 0;
     inset-inline-end: 0;
-
-    &:hover {
-      border-block-end: 1px solid $border-strong;
-    }
   }
 
   .#{$prefix}--search-button {
@@ -168,7 +181,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-width: 0 0 1px;
+    border-width: 1px;
     border-style: solid;
     border-color: transparent;
     block-size: layout.size('height');
@@ -178,6 +191,10 @@
     opacity: 1;
     visibility: inherit;
 
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
+
     &:hover {
       background-color: $field-hover;
     }
@@ -252,6 +269,12 @@
     inline-size: 100%;
   }
 
+  .#{$prefix}--search--expandable:not(.#{$prefix}--search--expanded)
+    .#{$prefix}--search-input {
+    border: 0;
+    background: none;
+  }
+
   .#{$prefix}--search--expandable .#{$prefix}--search-input {
     padding: 0;
     inline-size: 0;
@@ -283,8 +306,12 @@
     position: absolute;
     cursor: pointer;
 
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
+
     &:focus {
-      outline: 2px solid $focus;
+      @include focus-outline('outline');
     }
   }
 

package/scss/components/select/_select.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 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 @@
 @use '../../type' as *;
 @use '../../breakpoint' as *;
 @use '../../theme' as *;
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
@@ -52,7 +54,7 @@
     border: none;
     border-radius: 0;
     appearance: none;
-    background-color: $field;
+    background: $field;
     block-size: layout.size('height');
     border-block-end: 1px solid $border-strong;
     color: $text-primary;
@@ -68,8 +70,33 @@
     // Do not transition on background-color (see: https://github.com/carbon-design-system/carbon/issues/4464)
     transition: outline $duration-fast-01 motion(standard, productive);
 
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+      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;
+    }
+
     &:hover {
       background-color: $field-hover;
+
+      @if enabled('enable-v12-release') {
+        background:
+          linear-gradient($field-hover, $field-hover) padding-box,
+          linear-gradient(
+              to bottom,
+              $border-subtle calc(100% - 4px),
+              $border-strong 100%
+            )
+            border-box;
+      }
     }
 
     // Hide default select arrow in IE10+
@@ -99,7 +126,7 @@
 
     &:disabled,
     &:hover:disabled {
-      background-color: $field;
+      background: $field;
       border-block-end-color: transparent;
       color: $text-disabled;
       cursor: not-allowed;
@@ -213,6 +240,12 @@
     inline-size: 100%;
     padding-inline: $spacing-03 $spacing-09;
 
+    @if enabled('enable-v12-release') {
+      // Restore the bottom border width removed above so the border-box
+      // gradient renders on all four sides, matching inline text input.
+      border-block-end: 1px solid transparent;
+    }
+
     &:hover {
       background-color: $field-hover;
     }
@@ -262,9 +295,13 @@
 
   // readonly
   .#{$prefix}--select--readonly .#{$prefix}--select-input {
-    background-color: transparent;
+    background: transparent;
     border-block-end-color: $border-subtle;
     cursor: default;
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-00;
+    }
   }
 
   .#{$prefix}--select--readonly .#{$prefix}--select__arrow {
@@ -273,7 +310,7 @@
 
   .#{$prefix}--select--readonly.#{$prefix}--select--inline
     .#{$prefix}--select-input:hover {
-    background-color: transparent;
+    background: transparent;
   }
 
   // Skeleton State
@@ -419,6 +456,29 @@
     ),
   .#{$prefix}--select-input-has--ai-label {
     @include ai-gradient;
+
+    @if 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;
+    }
   }
 
   .#{$prefix}--select--decorator:has(.#{$prefix}--select__invalid-icon)

package/scss/components/tabs/_tabs.scss

@@ -550,7 +550,8 @@
       }
     }
 
-    .#{$prefix}--tabs__nav-item--icon-only:not(
+    &.#{$prefix}--layout--size-sm
+      .#{$prefix}--tabs__nav-item--icon-only:not(
         .#{$prefix}--tabs__nav-item--icon-only__20
       )
       .#{$prefix}--badge-indicator {

package/scss/components/tag/_mixins.scss

@@ -12,11 +12,17 @@
   $bg-color,
   $text-color,
   $filter-hover-color: $bg-color,
-  $border-color: $bg-color
+  $border-color: $bg-color,
+  $outline-color: null,
+  $close-focus-color: null
 ) {
   background-color: $bg-color;
   color: $text-color;
 
+  @if $outline-color {
+    box-shadow: inset 0 0 0 1px $outline-color;
+  }
+
   &.#{$prefix}--tag--operational {
     border: 1px solid $border-color;
 
@@ -28,11 +34,23 @@
   }
 
   .#{$prefix}--tag__close-icon {
+    @if $outline-color {
+      box-sizing: border-box;
+      padding: 1px;
+      background-clip: content-box;
+    }
+
     @media (any-hover: hover) {
       &:hover {
         background-color: $filter-hover-color;
       }
     }
+
+    @if $close-focus-color {
+      &:focus {
+        box-shadow: inset 0 0 0 1px $close-focus-color;
+      }
+    }
   }
 
   .#{$prefix}--definition-term {