@carbon/web-components 2.52.0 → 2.53.0-rc.0

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

@@ -0,0 +1,186 @@
+/**
+ * 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.
+ */
+
+$css--plex: true !default;
+@use '@carbon/styles/scss/components/fluid-multiselect/index';
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/multiselect' as *;
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/list-box/list-box';
+@use '@carbon/styles/scss/components/fluid-list-box';
+@use '@carbon/styles/scss/utilities' as *;
+
+:host(#{$prefix}-fluid-multi-select) {
+  @include emit-layout-tokens();
+
+  box-sizing: border-box;
+  outline: none;
+
+  .#{$prefix}--assistive-text {
+    inset-block-start: -100%;
+    inset-inline-start: -100%;
+  }
+
+  .#{$prefix}--list-box__menu {
+    inset-block-start: 100%;
+    margin-block-start: 1px;
+    outline: none;
+  }
+
+  .#{$prefix}--text-input {
+    border: none;
+    outline: none;
+    padding-inline-start: 0;
+  }
+
+  .#{$prefix}--tag--disabled {
+    @extend .#{$prefix}--tag--disabled;
+
+    background-color: transparent;
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--list-box__field:focus {
+    @extend .#{$prefix}--multi-select--filterable--input-focused;
+  }
+
+  .#{$prefix}--list-box__divider {
+    display: block;
+    border: none;
+    margin: 0 1rem;
+    border-block-end: 1px solid $border-subtle;
+  }
+
+  .#{$prefix}--tag.#{$prefix}--tag--filter {
+    margin-block-start: 0;
+  }
+
+  .#{$prefix}--list-box__selection--multi::after {
+    display: none;
+  }
+}
+
+// Target multiselect items inside fluid multiselect for non-condensed height
+:host(#{$prefix}-fluid-multi-select:not([is-condensed])) {
+  ::slotted(#{$prefix}-multi-select-item) {
+    block-size: $spacing-10;
+  }
+}
+
+: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 {
+    padding: to-rem(8px) 4rem to-rem(8px) $spacing-05;
+    inline-size: auto;
+    margin-block-start: 0;
+  }
+
+  .#{$prefix}--list-box {
+    border-block-end: 1px solid transparent;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__invalid-icon--warning {
+    inset-block-start: to-rem(81px);
+    inset-inline-end: $spacing-05;
+    pointer-events: none;
+  }
+}
+
+:host(#{$prefix}-fluid-multi-select[warn]:not([disabled]):not([read-only])) {
+  .#{$prefix}--form__helper-text {
+    color: $text-primary;
+  }
+}
+
+:host(#{$prefix}-fluid-multi-select[invalid]:not([disabled]):not([read-only])) {
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
+  }
+}
+
+:host(#{$prefix}-fluid-multi-select[filterable]) {
+  .#{$prefix}--list-box__field:focus-within {
+    outline: $spacing-01 solid $focus;
+    outline-offset: -#{$spacing-01};
+  }
+  .#{$prefix}--list-box {
+    .#{$prefix}--list-box__field {
+      padding-inline-end: $spacing-01;
+    }
+  }
+  .#{$prefix}--list-box__selection {
+    inset-block-start: 66%;
+  }
+}
+:host(#{$prefix}-fluid-multi-select[filterable][has-value])
+  .#{$prefix}--list-box__field
+  ~ ::slotted(#{$prefix}-ai-label) {
+  inset-inline-end: calc($spacing-10 + 18px);
+}
+
+// Direction top
+:host(#{$prefix}-fluid-multi-select[direction='top']) {
+  @extend .#{$prefix}--list-box--up;
+
+  .#{$prefix}--list-box__menu {
+    inset-block-start: auto;
+  }
+}
+
+// AI Label styles
+:host(#{$prefix}-fluid-multi-select[ai-label]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  ::slotted(#{$prefix}-ai-label),
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 70%;
+    inset-inline-end: $spacing-09;
+  }
+
+  ::slotted(#{$prefix}-ai-label:not([revert-active])),
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-70%);
+  }
+
+  .#{$prefix}--list-box__wrapper--decorator {
+    @include ai-gradient;
+  }
+}
+// AI label dividers - always present
+:host(#{$prefix}-fluid-multi-select[ai-label]) ::slotted(#{$prefix}-ai-label) {
+  &::after {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: to-rem(16px);
+    content: '';
+    inline-size: to-rem(1px);
+    inset-inline-start: calc(#{$spacing-06} - to-rem(1px));
+  }
+}
+
+:host(#{$prefix}-fluid-multi-select[ai-label][read-only]),
+:host(#{$prefix}-fluid-multi-select[ai-label][disabled]) {
+  .#{$prefix}--list-box {
+    border-block-end-color: $ai-border-strong;
+  }
+
+  .#{$prefix}--list-box__field {
+    border-block-end: 1px solid $ai-border-strong;
+  }
+
+  ::slotted(#{$prefix}-ai-label)::before {
+    display: none;
+  }
+}

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2025
+// 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.
@@ -103,8 +103,9 @@ $css--plex: true !default;
 :host(#{$prefix}-multi-select[type='inline']) {
   @extend .#{$prefix}--list-box__wrapper--inline;
 
+  grid-gap: 0 $spacing-03;
   .#{$prefix}--form__helper-text {
-    grid-column: 2;
+    grid-column: 3;
   }
 }
 
@@ -477,7 +478,11 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-multi-select[warn]:not([disabled]):not([read-only])) {
+:host(
+    #{$prefix}-multi-select[warn]:not([invalid]):not([ai-label]):not(
+        [disabled]
+      ):not([read-only])
+  ) {
   .#{$prefix}--form__helper-text {
     color: $text-primary;
   }
@@ -488,6 +493,18 @@ $css--plex: true !default;
   }
 }
 
+:host(
+    #{$prefix}-multi-select[warn][invalid]:not([ai-label]):not([disabled]):not(
+        [read-only]
+      )
+  ) {
+  .#{$prefix}--list-box {
+    .#{$prefix}--list-box__field {
+      padding-inline-end: $spacing-10;
+    }
+  }
+}
+
 :host(#{$prefix}-multi-select[disabled]) {
   .#{$prefix}--list-box__field,
   .#{$prefix}--list-box__selection {

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2025
+// 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.
@@ -20,6 +20,8 @@ $css--plex: true !default;
 :host(#{$prefix}-number-input),
 :host(#{$prefix}-number-input-skeleton) {
   // the base text-input class has a 100% so we need to propagate it up to the host element
+  display: flex;
+  flex-direction: column;
   inline-size: 100%;
   outline: none;
 

package/scss/components/tabs/tabs.scss

@@ -77,6 +77,32 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
+:host(#{$prefix}-tabs[icon-size='default'])
+  .#{$prefix}--tabs-nav-content-container,
+:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)
+  .#{$prefix}--tabs-nav-content-container {
+  overflow: visible;
+  block-size: $spacing-08;
+}
+
+:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,
+:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)
+  .#{$prefix}--tabs-nav-content-container {
+  overflow: visible;
+  block-size: $spacing-09;
+}
+
+:host(#{$prefix}-tabs[icon-size='default']),
+:host(#{$prefix}-tabs[icon-size='lg']),
+:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),
+:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {
+  overflow: visible;
+
+  .#{$prefix}--tab--list {
+    overflow: visible;
+  }
+}
+
 :host(#{$prefix}-tab),
 :host(#{$prefix}-tab-skeleton) {
   display: flex;
@@ -88,6 +114,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     @include focus-outline('reset');
     @include type-style('body-compact-01');
 
+    position: relative;
     overflow: hidden;
 
     align-items: center;
@@ -125,6 +152,75 @@ $inset-transition: inset 110ms motion(standard, productive);
   margin-inline-end: 0;
 }
 
+:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))
+  #{$prefix}-badge-indicator,
+:host(
+    #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(
+        .#{$prefix}--tabs__nav-item--icon-only__20
+      )
+  )
+  #{$prefix}-badge-indicator {
+  margin-block-start: $spacing-02;
+  margin-inline-end: $spacing-02;
+}
+
+:host(#{$prefix}-tab[icon-only]),
+:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {
+  flex: 0 0 auto;
+  block-size: $spacing-08;
+  inline-size: $spacing-08;
+
+  .#{$prefix}--tabs__nav-item-label-wrapper {
+    display: flex;
+  }
+
+  #{$prefix}-tooltip {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+    --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};
+    --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};
+    --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};
+    --#{$prefix}-popover-offset: #{convert.to-rem(8px)};
+  }
+
+  #{$prefix}-tooltip::part(popover-container) {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--tabs__nav-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  ::slotted(svg) {
+    display: block;
+    fill: currentColor;
+  }
+}
+
+:host(#{$prefix}-tab[icon-only]:not([type='contained'])),
+:host(
+    #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])
+  ) {
+  .#{$prefix}--tabs__nav-item-label-wrapper {
+    position: relative;
+    inset-block-start: convert.to-rem(1px);
+  }
+}
+
+:host(#{$prefix}-tab[icon-only][icon-size='lg']),
+:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {
+  block-size: $spacing-09;
+  inline-size: $spacing-09;
+}
+
 :host(#{$prefix}-tab[selected]) {
   .#{$prefix}--tabs__nav-link {
     @include type-style('heading-compact-01');
@@ -148,7 +244,7 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
-:host(#{$prefix}-tab:hover) {
+:host(#{$prefix}-tab:hover:not([selected])) {
   background-color: transparent;
   box-shadow: 0 -1px 0 $background-hover;
 
@@ -158,6 +254,11 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
+:host(#{$prefix}-tab[icon-only]:hover),
+:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {
+  box-shadow: none;
+}
+
 :host(#{$prefix}-tabs[type='contained'])
   .#{$prefix}--tabs-nav-content-container {
   block-size: $spacing-09;

package/scss/components/toggle-tip/toggletip.scss

@@ -26,7 +26,22 @@
   justify-content: center;
 
   outline: none;
+}
+
+:host(#{$prefix}-toggletip[open]:not([autoalign])) {
+  // Keep the caret fill on `::after` so the container does not render as a
+  // block.
+  .#{$prefix}--popover-caret {
+    background: transparent;
 
+    &::after {
+      background-color: $background-inverse;
+    }
+  }
+}
+
+:host(#{$prefix}-toggletip[open][autoalign]) {
+  // `autoalign` uses the rotated caret container as the visible shape.
   .#{$prefix}--popover-caret {
     background-color: $background-inverse;
   }

package/telemetry.yml

@@ -14,6 +14,7 @@ collect:
         - active
         - ai-text
         - ai-text-label
+        - alert
         - align
         - alignment
         - alignment-axis-offset
@@ -39,8 +40,11 @@ collect:
         - caret
         - checked
         - checkmark-label
+        - clear-selection-description
         - clear-selection-label
+        - clear-selection-text
         - clickable
+        - close-button-label
         - close-button-label-text
         - close-icon-description
         - close-on-activation
@@ -49,6 +53,7 @@ collect:
         - color-scheme
         - cols
         - condensed
+        - container-class
         - counter-mode
         - danger-description
         - data-table
@@ -71,13 +76,17 @@ collect:
         - feedback
         - feedback-timeout
         - filter
+        - filterable
         - filtered
         - flipped
+        - format-options
         - full-width
         - has-custom-icon
         - has-focus
         - has-main-content
         - has-rounded-corners
+        - has-scrolling-content
+        - has-three-buttons
         - hasCustomIcon
         - heading
         - helper-text
@@ -94,14 +103,17 @@ collect:
         - hreflang
         - icon
         - icon-description
+        - icon-size
         - id
         - increment-button-assistive-text
         - indeterminate
         - index
         - inline
+        - input-mode
         - invalid
         - invalid-text
         - is-active
+        - is-condensed
         - is-expressive
         - is-not-child-of-header
         - is-selectable
@@ -119,6 +131,10 @@ collect:
         - legend-text
         - lineCount
         - link-role
+        - loading-description
+        - loading-icon-description
+        - loading-status
+        - loading-success-delay
         - locale
         - low-contrast
         - max
@@ -138,6 +154,12 @@ collect:
         - oncds-dropdown-selected
         - oncds-dropdown-toggled
         - oncds-header-menu-button-toggled
+        - oncds-modal-beingclosed
+        - oncds-modal-closed
+        - oncds-multi-select-beingselected
+        - oncds-multi-select-beingtoggled
+        - oncds-multi-select-selected
+        - oncds-multi-select-toggled
         - oncds-notification-beingclosed
         - oncds-notification-closed
         - oncds-number-input
@@ -170,6 +192,7 @@ collect:
         - pattern
         - ping
         - placeholder
+        - prevent-close
         - prevent-close-on-click-outside
         - previousValue
         - radio
@@ -183,15 +206,18 @@ collect:
         - revert-label
         - role
         - rows
+        - select-all
         - selected
         - selected-index
         - selectedIndex
+        - selection-feedback
         - selection-label
         - selection-mode
         - selection-name
         - selection-value
         - selector-initial-focus
         - shortcut
+        - should-submit-on-enter
         - show-password-label
         - show-password-visibility-toggle
         - showPasswordLabel
@@ -201,6 +227,7 @@ collect:
         - status
         - status-icon-description
         - step
+        - step-start-value
         - subtitle
         - tab-index
         - tabTip
@@ -299,6 +326,11 @@ collect:
         - short
         # cds-definition-tooltip
         - open-on-hover
+        # cds-dialog
+        - aria-describedby
+        - modal
+        - oncds-dialog-beingclosed
+        - oncds-dialog-closed
         # cds-dismissible-tag
         - dismiss-tooltip-alignment
         - dismiss-tooltip-label
@@ -322,8 +354,6 @@ collect:
         - error-subject
         - oncds-file-uploader-item-beingdeleted
         - oncds-file-uploader-item-deleted
-        # cds-fluid-dropdown
-        - is-condensed
         # cds-fluid-time-picker-skeleton
         - is-only-two
         # cds-form-group
@@ -375,32 +405,6 @@ collect:
         - selectedItem
         # cds-menu-item-selectable
         - renderIcon
-        # cds-modal
-        - alert
-        - container-class
-        - has-scrolling-content
-        - loading-description
-        - loading-icon-description
-        - loading-status
-        - loading-success-delay
-        - oncds-modal-beingclosed
-        - oncds-modal-closed
-        - prevent-close
-        - should-submit-on-enter
-        # cds-modal-close-button
-        - close-button-label
-        # cds-modal-footer
-        - has-three-buttons
-        # cds-multi-select
-        - clear-selection-description
-        - clear-selection-text
-        - filterable
-        - oncds-multi-select-beingselected
-        - oncds-multi-select-beingtoggled
-        - oncds-multi-select-selected
-        - oncds-multi-select-toggled
-        - select-all
-        - selection-feedback
         # cds-multi-select-item
         - is-select-all
         # cds-operational-tag
@@ -497,6 +501,8 @@ collect:
         # cds-structured-list-row
         - selection-icon-title
         # cds-tab
+        - badge-indicator
+        - icon-only
         - tabTitle
         # cds-table
         - filterRows
@@ -632,6 +638,15 @@ collect:
         - left
         - right
         - top
+        # General - input-mode
+        - decimal
+        - email
+        - none
+        - numeric
+        - search
+        - tel
+        - text
+        - url
         # General - kind
         - ""
         - caution-major
@@ -678,6 +693,11 @@ collect:
         # General - label-position
         - left
         - right
+        # General - loading-status
+        - active
+        - error
+        - finished
+        - inactive
         # General - menu-alignment
         - bottom
         - bottom-end
@@ -702,6 +722,13 @@ collect:
         # General - orientation
         - horizontal
         - vertical
+        # General - role
+        - alertdialog
+        - dialog
+        # General - selection-feedback
+        - fixed
+        - top
+        - top-after-reopen
         # General - size
         - ""
         - 2xl
@@ -770,6 +797,7 @@ collect:
         - inline
         - magenta
         - multi
+        - number
         - password
         - purple
         - red
@@ -820,15 +848,6 @@ collect:
         # cds-menu-button - menu-background-token
         - background
         - layer
-        # cds-modal - loading-status
-        - active
-        - error
-        - finished
-        - inactive
-        # cds-multi-select - selection-feedback
-        - fixed
-        - top
-        - top-after-reopen
         # cds-side-panel - placement
         - left
         - right