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

package/scss/components/big-number/big-number.scss

@@ -0,0 +1,29 @@
+// 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.
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/big-number' as big-number-styles;
+
+// Emit Carbon big-number class rules at file root (not inside :host)
+@include big-number-styles.big-number;
+
+$block-class: #{$prefix}--big-number;
+
+:host(#{$prefix}-big-number) {
+  .#{$block-class}__trend {
+    margin-block-start: $spacing-03;
+    vertical-align: top;
+  }
+
+  .#{$block-class}--xl {
+    .#{$block-class}__trend {
+      margin-block-start: $spacing-04;
+    }
+  }
+}

package/scss/components/big-number/story-styles.scss

@@ -0,0 +1,48 @@
+/*
+ * 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.
+ */
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+$story-prefix: #{$prefix}--big-number-stories;
+
+#storybook-root #main-content {
+  padding: 0;
+}
+
+.#{$story-prefix}__viewport {
+  display: grid;
+  align-items: center;
+  padding: spacing.$spacing-05;
+  block-size: spacing.$spacing-13;
+}
+
+.custom-label {
+  @include type-style('label-01');
+
+  display: inline-block;
+  margin: 0;
+  color: $text-secondary;
+}
+
+.#{$prefix}--big-number--xl {
+  .custom-label {
+    @include type-style('body-compact-01');
+  }
+}
+
+.#{$story-prefix}__label-with-tooltip {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing.$spacing-03;
+}
+
+.#{$story-prefix}__tooltip {
+  display: inline-flex;
+  align-items: center;
+}

package/scss/components/coachmark/coachmark-beacon/coachmark-beacon.scss

@@ -0,0 +1,89 @@
+//
+// 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/coachmark/coachmark-beacon' as
+  coachmark-beacon-styles;
+
+@include coachmark-beacon-styles.coachmark-beacon;
+
+$block-class: #{$prefix}--coachmark-beacon;
+
+:host(#{$prefix}-coachmark-beacon) {
+  position: relative;
+}
+
+:host(.#{$prefix}--coachmark-beacon-default) {
+  .#{$block-class}__target {
+    &::before {
+      display: none;
+    }
+    // the blue dot
+    &::after {
+      position: absolute;
+      border-radius: 50%;
+      background-color: $blue-50;
+      block-size: $spacing-04;
+      content: '';
+      inline-size: $spacing-04;
+      inset-block-start: calc($spacing-01 + $spacing-03);
+      inset-inline-start: calc($spacing-01 + $spacing-03);
+    }
+
+    &:focus {
+      outline: transparent;
+
+      &::before {
+        position: absolute;
+        display: block;
+        border-radius: 100%;
+        block-size: 18px;
+        content: '';
+        inline-size: 18px;
+        inset-block-start: 7px;
+        inset-inline-start: 7px;
+        outline: $spacing-01 $focus solid;
+      }
+    }
+  }
+
+  .#{$block-class}__target {
+    display: flex;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    block-size: $spacing-07;
+    box-shadow: none;
+    cursor: pointer;
+    inline-size: $spacing-07;
+
+    &[aria-expanded='true'] {
+      circle {
+        animation: none;
+      }
+    }
+  }
+
+  .#{$block-class}__target::part(button) {
+    background-color: transparent;
+    box-shadow: none;
+    max-block-size: 0;
+    min-block-size: 0;
+    padding-inline: 0;
+
+    &:focus {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+}

package/scss/components/coachmark/coachmark-body.scss

@@ -0,0 +1,16 @@
+//
+// 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as *;
+
+:host(#{$prefix}-coachmark-body) {
+  display: block;
+  padding: 0 $spacing-05 $spacing-05;
+}

package/scss/components/coachmark/coachmark-header.scss

@@ -0,0 +1,28 @@
+//
+// 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/config' as *;
+
+:host(#{$prefix}-coachmark-header) {
+  display: flex;
+  justify-content: flex-end;
+
+  .#{$prefix}--coachmark-header-drag-handle {
+    margin-inline-end: auto;
+  }
+
+  .#{$prefix}--coachmark-header-drag-icon {
+    fill: $background;
+  }
+
+  .#{$prefix}--coachmark-header-close-icon {
+    fill: $background;
+  }
+}

package/scss/components/coachmark/coachmark-tagline/coachmark-tagline.scss

@@ -0,0 +1,42 @@
+//
+// Copyright IBM Corp. 2026, 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/coachmark/coachmark-tagline' as
+  coachmark-tagline-styles;
+
+@include coachmark-tagline-styles.coachmark-tagline;
+
+$block-class: #{$prefix}--coachmark-tagline;
+
+.#{$block-class} {
+  &--open {
+    background: $white-0;
+    opacity: 0;
+
+    .#{$block-class}__cta {
+      opacity: 0;
+    }
+
+    .#{$block-class}--close-btn {
+      display: none;
+    }
+
+    &::before {
+      background: $white-0;
+    }
+  }
+
+  &__cta {
+    svg {
+      justify-self: center;
+    }
+  }
+}

package/scss/components/coachmark/coachmark.scss

@@ -0,0 +1,42 @@
+//
+// 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/config' as *;
+
+$block-class: #{$prefix}--coachmark;
+
+:host {
+  display: inline-block;
+}
+
+.#{$prefix}--visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  visibility: inherit;
+  white-space: nowrap;
+}
+
+.#{$block-class}--popover {
+  position: fixed;
+
+  cds-popover-content.#{$block-class}--is-dragging::part(content) {
+    border-radius: 0;
+    box-shadow:
+      0 0 0 $spacing-01 $icon-inverse,
+      0 0 0 $spacing-02 $background-inverse;
+  }
+}

package/scss/components/coachmark/story-styles.scss

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+.coachmark-body {
+  display: flex;
+  flex-direction: column;
+  inline-size: 290px;
+
+  h2 {
+    @include type.type-style('productive-heading-02');
+
+    margin: 0 0 $spacing-03;
+  }
+
+  p {
+    @include type.type-style('body-long-01');
+
+    margin: 0 0 $spacing-03;
+  }
+
+  cds-button {
+    display: flex;
+    align-self: flex-end;
+    margin-block-start: $spacing-03;
+  }
+}
+
+.trigger-btn {
+  margin: $spacing-03;
+}

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

@@ -8,7 +8,9 @@
 $css--plex: true !default;
 
 @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/utilities' as *;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
@@ -36,15 +38,34 @@ $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;
   }
 }
 
-:host(#{$prefix}-combo-box) .#{$prefix}--text-input--highlighted-outline {
-  outline: 1px solid $focus;
-  outline-offset: -1px;
+@if flags.enabled('enable-v12-release') {
+  // v12 focus outline needs to go on the combo-box itself instead of the text-input
+  :host(#{$prefix}-combo-box) {
+    .#{$prefix}--text-input:focus,
+    .#{$prefix}--text-input:active {
+      @include focus-outline('reset');
+    }
+
+    .#{$prefix}--list-box:focus-within {
+      @include focus-outline('outline');
+    }
+
+    .#{$prefix}--list-box--expanded:has(
+        input[aria-activedescendant]:not([aria-activedescendant=''])
+      ) {
+      outline-offset: to-rem(-1px);
+      outline-width: to-rem(1px);
+    }
+  }
 }
 
 :host(#{$prefix}-combo-box[disabled]),
@@ -72,6 +93,14 @@ $css--plex: true !default;
     background-color: transparent;
   }
 
+  .#{$prefix}--list-box {
+    @if flags.enabled('enable-v12-release') {
+      border-radius: $border-radius-00;
+      background: none;
+      border-block-end-color: $border-subtle;
+    }
+  }
+
   .#{$prefix}--text-input {
     border-block-end-color: $border-subtle;
   }
@@ -113,12 +142,17 @@ $css--plex: true !default;
     position: absolute;
     border: 2px solid $focus;
     block-size: 100%;
-    border-block-start: 1px solid $focus;
     content: '';
     inline-size: 100%;
     inset-block-start: 0;
     inset-inline-start: 0;
     pointer-events: none;
+
+    @if not flags.enabled('enable-v12-release') {
+      border-block-start: 1px solid $focus;
+    } @else {
+      border-radius: $border-radius-04;
+    }
   }
 }
 
@@ -210,6 +244,29 @@ $css--plex: true !default;
 
   .#{$prefix}--list-box__wrapper--decorator {
     @include ai-gradient;
+
+    @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;
+    }
   }
 
   .#{$prefix}--list-box__field {

package/scss/components/data-table/_table-action.scss

@@ -66,9 +66,11 @@
   flex: auto;
 }
 
-:host(#{$prefix}-table-toolbar-search:hover) {
-  .#{$prefix}--search {
-    background-color: $field-hover;
+@media (any-hover: hover) {
+  :host(#{$prefix}-table-toolbar-search:hover) {
+    .#{$prefix}--search {
+      background-color: $field-hover;
+    }
   }
 }
 

package/scss/components/date-picker/date-picker.scss

@@ -12,6 +12,8 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/border-radius' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/date-picker/date-picker' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
@@ -29,7 +31,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,
@@ -132,6 +138,24 @@ $css--plex: true !default;
   }
 }
 
+@if flags.enabled('enable-v12-release') {
+  :host(#{$prefix}-date-picker-input[kind='from']) {
+    .#{$prefix}--date-picker__input {
+      border-end-end-radius: $border-radius-00;
+      border-inline-end: none;
+      border-start-end-radius: $border-radius-00;
+    }
+  }
+
+  :host(#{$prefix}-date-picker-input[kind='to']) {
+    .#{$prefix}--date-picker__input {
+      border-end-start-radius: $border-radius-00;
+      border-inline-start: none;
+      border-start-start-radius: $border-radius-00;
+    }
+  }
+}
+
 :host(#{$prefix}-date-picker-input) {
   .#{$prefix}--date-picker__icon {
     @extend .#{$prefix}--date-picker__icon;
@@ -159,7 +183,12 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-date-picker-input-skeleton) {
-  display: inline-block;
+  @if flags.enabled('enable-v12-release') {
+    display: inline-flex;
+    flex-direction: row;
+  } @else {
+    display: inline-block;
+  }
 
   .#{$prefix}--label {
     @include skeleton;
@@ -182,11 +211,50 @@ $css--plex: true !default;
       inline-size: rem(143.5px);
     }
   }
+
+  @if flags.enabled('enable-v12-release') {
+    column-gap: rem(1px);
+
+    .#{$prefix}--date-picker-input-skeleton-container:first-of-type
+      .#{$prefix}--date-picker__input {
+      border-end-end-radius: $border-radius-00;
+      border-start-end-radius: $border-radius-00;
+    }
+
+    .#{$prefix}--date-picker-input-skeleton-container:last-of-type
+      .#{$prefix}--date-picker__input {
+      border-end-start-radius: $border-radius-00;
+      border-start-start-radius: $border-radius-00;
+    }
+  }
 }
 
 :host(#{$prefix}-date-picker-input[ai-label])
   .#{$prefix}--date-picker__input--decorator {
   @include ai-gradient;
+
+  @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;
+  }
 }
 
 .#{$prefix}--form-requirement {

package/scss/components/date-picker/next/components/date-picker.scss

@@ -12,6 +12,8 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
+@use '@carbon/styles/scss/border-radius' as *;
 
 @include date-picker;
 @include date-picker-next.date-picker-next-rules;
@@ -58,10 +60,13 @@
 }
 
 :host(#{$prefix}-preview-date-picker-input[kind='from']),
+:host(#{$prefix}-preview-date-picker-input-skeleton[kind='from']) {
+  @extend .#{$prefix}--date-picker-container--from;
+}
+
 :host(#{$prefix}-preview-date-picker-input[kind='to']),
-:host(#{$prefix}-preview-date-picker-input-skeleton[kind='from']),
 :host(#{$prefix}-preview-date-picker-input-skeleton[kind='to']) {
-  @extend .#{$prefix}--date-picker-container--from;
+  @extend .#{$prefix}--date-picker-container--to;
 }
 
 :host(#{$prefix}-preview-date-picker-input) {
@@ -93,10 +98,31 @@
 
 :host(#{$prefix}-preview-date-picker-input-skeleton) {
   @extend .#{$prefix}--date-picker-input-skeleton;
+
+  @if flags.enabled('enable-v12-release') {
+    display: inline-flex;
+    flex-direction: row;
+  }
 }
 
 :host(#{$prefix}-preview-date-picker-input-skeleton[range]) {
   @extend .#{$prefix}--date-picker-input-skeleton--range;
+
+  @if flags.enabled('enable-v12-release') {
+    column-gap: rem(1px);
+
+    .#{$prefix}--date-picker-input-skeleton-container:first-of-type
+      .#{$prefix}--date-picker__input {
+      border-end-end-radius: $border-radius-00;
+      border-start-end-radius: $border-radius-00;
+    }
+
+    .#{$prefix}--date-picker-input-skeleton-container:last-of-type
+      .#{$prefix}--date-picker__input {
+      border-end-start-radius: $border-radius-00;
+      border-start-start-radius: $border-radius-00;
+    }
+  }
 }
 
 :host(#{$prefix}-preview-date-picker-input[ai-label]) {