@carbon/styles 1.114.0 → 1.115.0

package/scss/components/guidebanner/_guidebanner.scss

@@ -0,0 +1,322 @@
+//
+// Copyright IBM Corp. 2023, 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.
+//
+
+// Standard imports.
+@use '../../config' as *;
+@use '../../colors' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../themes';
+@use '../../type' as *;
+@use '../../utilities';
+@use '@carbon/layout/scss/convert' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{$prefix}--guidebanner;
+
+@mixin when-collapsed($selector: '&') {
+  .#{$prefix}--guidebanner__collapsible-collapsed #{$selector} {
+    @content;
+  }
+}
+
+$horizontal-margin: to-rem(52px);
+
+// Guidebanner-specific colors.
+$purple-1: #9b63ff;
+$purple-2: #7f3ae7;
+$purple-3: #7433e3;
+
+@mixin guidebanner {
+  // ---------------------------------------------------------------------------
+  // Scroll container styles (inlined from Carousel; previously a separate @use)
+  // ---------------------------------------------------------------------------
+
+  .#{$prefix}--guidebanner__carousel {
+    position: relative;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--guidebanner__carousel-elements-container {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .#{$prefix}--guidebanner__carousel-elements-container--scrolled,
+  .#{$prefix}--guidebanner__carousel-elements-container--scroll-max {
+    position: absolute;
+    z-index: 1;
+    inline-size: $spacing-07;
+    inset-block: 0;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--guidebanner__carousel-elements-container--scrolled {
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--guidebanner__carousel-elements-container--scroll-max {
+    inset-inline-end: 0;
+  }
+
+  .#{$prefix}--guidebanner__carousel-elements {
+    display: flex;
+    overflow: scroll;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    -webkit-touch-callout: none;
+    user-select: none;
+
+    &:focus {
+      @include utilities.focus-outline('outline');
+    }
+
+    @media (prefers-reduced-motion) {
+      scroll-behavior: auto;
+    }
+  }
+
+  .#{$prefix}--guidebanner__carousel-elements::-webkit-scrollbar {
+    display: none;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Guidebanner component styles
+  // ---------------------------------------------------------------------------
+
+  .#{$block-class} {
+    // Due to the Guidebanner's dark background,
+    // apply dark theme by default for all elements:
+    // i.e. light text, icons, tooltips, etc.
+    @include theme(themes.$g100, true);
+
+    position: relative;
+    background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+    background-color: $blue-90;
+  }
+
+  .#{$block-class}__icon-idea {
+    position: absolute;
+    color: $gray-10;
+    inset-block-start: $spacing-05;
+    inset-inline-start: $spacing-05;
+  }
+
+  .#{$block-class}__title {
+    @include type-style('heading-compact-02');
+
+    padding: $spacing-05 to-rem(175px) 0 $horizontal-margin;
+    color: $gray-10;
+  }
+
+  .#{$block-class}__close-button {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+
+  .#{$block-class}__close-button button {
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+    min-block-size: $spacing-07;
+    padding-block-start: 6px;
+
+    &:active,
+    &:hover {
+      background-color: $purple-3;
+    }
+
+    path {
+      fill: $white-0;
+    }
+  }
+
+  // Specify carousel look and feel.
+  .#{$block-class}__carousel {
+    padding: 0 0 $spacing-05;
+    color: $gray-10;
+
+    @include when-collapsed() {
+      margin-block-end: 0;
+    }
+  }
+
+  // All carousel items are 400px wide, except the last one (see below).
+  .#{$block-class}__carousel .#{$block-class}__item .#{$block-class}__element {
+    display: flex;
+    flex-flow: column;
+    flex-shrink: 0;
+    margin: $spacing-05 0 0;
+    // 25rem
+    inline-size: to-rem(400px);
+    // 32rem
+    max-block-size: to-rem(512px);
+    opacity: 1;
+    padding-inline-start: $horizontal-margin;
+    scroll-snap-align: start;
+    transition:
+      max-height 50ms motion(exit, productive),
+      margin-top 50ms motion(exit, productive),
+      opacity 300ms motion(exit, productive);
+
+    @include when-collapsed() {
+      margin-block-start: 0;
+      max-block-size: $spacing-03;
+      opacity: 0;
+    }
+  }
+
+  // The last carousel item is wider to provide more space at the right edge.
+  .#{$block-class}__carousel
+    .#{$block-class}__item:last-child
+    .#{$block-class}__element {
+    // 28rem
+    inline-size: to-rem(448px);
+    padding-inline-end: $horizontal-margin;
+  }
+
+  .#{$block-class}__carousel
+    .#{$block-class}__item
+    .#{$block-class}__element-title {
+    @include type-style('heading-compact-01');
+
+    margin: $spacing-05 0 0;
+  }
+
+  .#{$block-class}__carousel .#{$block-class}__element-content {
+    @include type-style('body-01');
+
+    margin-block-end: $spacing-05;
+  }
+
+  // Button with crossroads icon
+  .#{$block-class}__carousel .#{$prefix}--btn--tertiary {
+    border-color: $white-0;
+    color: $white-0;
+
+    &:active,
+    &:hover {
+      border-color: $white-0;
+      background-color: $white-0;
+      color: $gray-100;
+    }
+
+    // The "render icon" CSS — position icon to the right of content.
+    svg {
+      position: absolute;
+      flex-shrink: 0;
+      block-size: 1rem;
+      inline-size: 1rem;
+      inset-inline-end: $spacing-05;
+    }
+  }
+
+  .#{$block-class}__carousel .#{$prefix}--btn--ghost {
+    color: $blue-30;
+    margin-inline-start: calc(-1 * $spacing-05);
+
+    &:active,
+    &:hover {
+      background-color: $purple-2;
+      color: $gray-10;
+    }
+  }
+
+  .#{$block-class}__carousel .#{$block-class}__element-link {
+    color: $blue-30;
+
+    &:visited {
+      color: $blue-30;
+    }
+
+    &:active,
+    &:hover {
+      color: $blue-20;
+    }
+  }
+
+  .#{$block-class}__navigation {
+    display: flex;
+    border-block-start: to-rem(1px) solid $purple-60;
+
+    @include when-collapsed() {
+      border-block-start: none;
+    }
+  }
+
+  .#{$block-class}__navigation .#{$block-class}__toggle-button {
+    color: $blue-30;
+    margin-inline-start: calc($horizontal-margin - to-rem(18px));
+
+    &:active,
+    &:hover {
+      background-color: $purple-3;
+      color: $gray-10;
+    }
+  }
+
+  // Push navigation buttons to the right.
+  .#{$block-class}__navigation .#{$block-class}__back-button {
+    margin-inline-start: auto;
+  }
+
+  // Hide navigation buttons when collapsed.
+  .#{$block-class}__navigation .#{$block-class}__back-button,
+  .#{$block-class}__navigation .#{$block-class}__next-button {
+    @include when-collapsed() {
+      display: none;
+    }
+  }
+
+  .#{$block-class}__navigation .#{$block-class}__back-button button,
+  .#{$block-class}__navigation .#{$block-class}__next-button button {
+    &:active,
+    &:hover {
+      background-color: $purple-3;
+    }
+
+    path {
+      fill: $white-0;
+    }
+
+    &[disabled] path {
+      fill: $purple-1;
+    }
+  }
+
+  // Exception handling.
+  // If "withLeftGutter", insert 1 rem of extra space on the left.
+  .#{$block-class}__with-left-gutter .#{$block-class}__icon-idea {
+    inset-inline-start: $spacing-07;
+  }
+
+  .#{$block-class}__with-left-gutter .#{$block-class}__title {
+    padding-inline-start: calc($horizontal-margin + $spacing-05);
+  }
+
+  .#{$block-class}__with-left-gutter .#{$block-class}__navigation {
+    padding-inline-start: $spacing-05;
+  }
+
+  // Override carousel settings — insert 1 rem of extra space on the left.
+  .#{$block-class}__with-left-gutter
+    .#{$prefix}--guidebanner__carousel-elements-container {
+    padding-inline-start: $spacing-05;
+  }
+
+  // Expand "fade" to cover more of the left side of the carousel.
+  .#{$block-class}__with-left-gutter
+    .#{$prefix}--guidebanner__carousel-elements-container--scrolled {
+    inline-size: $spacing-10;
+  }
+}

package/scss/components/guidebanner/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2023, 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.
+//
+
+@forward 'guidebanner';
+@use 'guidebanner';
+
+@include guidebanner.guidebanner;

package/scss/components/list-box/_list-box.scss

@@ -9,6 +9,8 @@
 @use '../text-input';
 @use '../tag';
 @use '../tag/mixins' as *;
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 @use '../../config' as *;
 @use '../../colors' as *;
 @use '../../theme' as *;
@@ -99,22 +101,65 @@ $list-box-menu-width: convert.to-rem(300px);
     &:hover {
       background-color: $field-hover;
     }
+
+    @if enabled('enable-v12-release') {
+      border: 1px solid transparent;
+      border-radius: $border-radius-04;
+      transition: background $duration-fast-01 motion(standard, productive);
+
+      &:not(
+          .#{$prefix}--list-box--inline,
+          .#{$prefix}--dropdown--inline,
+          .#{$prefix}--multi-select--inline,
+          .#{$prefix}--list-box--disabled,
+          .#{$prefix}--dropdown--disabled,
+          .#{$prefix}--dropdown--readonly,
+          .#{$prefix}--combo-box--readonly,
+          .#{$prefix}--multi-select--readonly
+        ) {
+        // (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;
+      }
+    }
+  }
+
+  @if enabled('enable-v12-release') {
+    .#{$prefix}--combo-box--readonly,
+    .#{$prefix}--multi-select--readonly,
+    .#{$prefix}--dropdown--readonly {
+      border-radius: $border-radius-00;
+      border-block-end-color: $border-subtle;
+    }
+
+    .#{$prefix}--combo-box--readonly .#{$prefix}--text-input,
+    .#{$prefix}--multi-select--readonly .#{$prefix}--text-input {
+      border-radius: $border-radius-00;
+    }
   }
 
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly.#{$prefix}--list-box {
     cursor: default;
   }
 
-  .#{$prefix}--list-box--expanded {
-    border-block-end-color: $border-subtle-01;
-  }
+  @if not enabled('enable-v12-release') {
+    .#{$prefix}--list-box--expanded {
+      border-block-end-color: $border-subtle-01;
+    }
 
-  .#{$prefix}--layer-two .#{$prefix}--list-box--expanded {
-    border-block-end-color: $border-subtle-02;
-  }
+    .#{$prefix}--layer-two .#{$prefix}--list-box--expanded {
+      border-block-end-color: $border-subtle-02;
+    }
 
-  .#{$prefix}--layer-three .#{$prefix}--list-box--expanded {
-    border-block-end-color: $border-subtle-03;
+    .#{$prefix}--layer-three .#{$prefix}--list-box--expanded {
+      border-block-end-color: $border-subtle-03;
+    }
   }
 
   .#{$prefix}--list-box--expanded:hover {
@@ -317,12 +362,29 @@ $list-box-menu-width: convert.to-rem(300px);
     text-overflow: ellipsis;
     vertical-align: top;
     white-space: nowrap;
+
+    @if enabled('enable-v12-release') {
+      block-size: 100%;
+    }
   }
 
   .#{$prefix}--list-box__field:focus {
     @include focus-outline('outline');
   }
 
+  @if enabled('enable-v12-release') {
+    // v12: focus outline needs to go on the list-box component itself, instead
+    // of the text-input
+    .#{$prefix}--list-box
+      .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
+      outline: transparent;
+    }
+
+    .#{$prefix}--list-box:has(.#{$prefix}--combo-box--input--focus) {
+      @include focus-outline('outline');
+    }
+  }
+
   .#{$prefix}--list-box__field[disabled] {
     color: $text-disabled;
     outline: none;
@@ -519,6 +581,14 @@ $list-box-menu-width: convert.to-rem(300px);
     overflow-y: auto;
     transition: max-height $duration-fast-02 motion(standard, productive);
 
+    @if enabled('enable-v12-release') {
+      box-sizing: border-box;
+      padding: $spacing-02;
+      border: 1px solid $border-subtle;
+      border-radius: $border-radius-08;
+      margin-block-start: $spacing-02;
+    }
+
     &:focus {
       // remove default browser focus in firefox
       @include focus-outline('border');
@@ -562,6 +632,10 @@ $list-box-menu-width: convert.to-rem(300px);
     &:active {
       background-color: $layer-selected;
     }
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+    }
   }
 
   // V11: Possibly deprecate
@@ -667,6 +741,12 @@ $list-box-menu-width: convert.to-rem(300px);
       margin: 0;
     }
 
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+      border-block-end: none;
+      border-block-start: none;
+    }
+
     &:hover {
       border-color: transparent;
       color: $text-primary;
@@ -836,6 +916,12 @@ $list-box-menu-width: convert.to-rem(300px);
     background-color: inherit;
     min-inline-size: 0;
     text-overflow: ellipsis;
+
+    // prevent nested borders
+    @if enabled('enable-v12-release') {
+      border: 0;
+      background: none;
+    }
   }
 
   // AILabel styles
@@ -933,6 +1019,28 @@ $list-box-menu-width: convert.to-rem(300px);
       :has(.#{$prefix}--slug--revert)
     ) {
     @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;
+    }
   }
 
   .#{$prefix}--list-box__wrapper--decorator

package/scss/components/menu/_menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020
+// Copyright IBM Corp. 2020, 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 @@
 @use '../../utilities/z-index' as *;
 @use '../../utilities/convert';
 @use '../../utilities/component-reset';
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 
 /// Menu styles
 /// @access public
@@ -37,6 +39,11 @@
     opacity: 0;
     overflow-y: auto;
     visibility: hidden;
+
+    @if enabled('enable-v12-release') {
+      padding: $spacing-02;
+      border-radius: $border-radius-08;
+    }
   }
 
   .#{$prefix}--menu--border {
@@ -86,6 +93,11 @@
     &:focus {
       @include focus-outline('outline');
     }
+
+    @if enabled('enable-v12-release') {
+      border-radius: $border-radius-04;
+      padding-inline: $spacing-04;
+    }
   }
 
   .#{$prefix}--menu-item:hover {
@@ -218,5 +230,10 @@
     block-size: convert.to-rem(1px);
     inline-size: 100%;
     margin-block: $spacing-02;
+
+    @if enabled('enable-v12-release') {
+      inline-size: calc(100% + #{$spacing-02 * 2});
+      margin-inline: -$spacing-02;
+    }
   }
 }