@carbon/web-components 2.53.0 → 2.54.0

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

@@ -0,0 +1,252 @@
+/**
+ * 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/config' as *;
+@use '@carbon/styles/scss/components/fluid-combo-box/index';
+@use '@carbon/styles/scss/components/combo-box' as *;
+@use '@carbon/styles/scss/components/list-box' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/skeleton' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+:host(#{$prefix}-fluid-combo-box) {
+  @extend .#{$prefix}--list-box__wrapper;
+  @extend .#{$prefix}--list-box__wrapper--fluid;
+
+  @include emit-layout-tokens();
+
+  outline: none;
+
+  .#{$prefix}--list-box {
+    box-sizing: border-box;
+  }
+
+  .#{$prefix}--list-box--expanded {
+    border-block-end-color: $border-subtle;
+  }
+
+  .#{$prefix}--assistive-text {
+    inset-block-start: -100%;
+    inset-inline-start: -100%;
+  }
+
+  .#{$prefix}--label[hidden] {
+    display: none;
+  }
+
+  .#{$prefix}--list-box__menu {
+    inset-block-start: 100%;
+    margin-block-start: 1px;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box--disabled {
+    border-block-end-color: transparent;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    inset-block-start: to-rem(20px);
+  }
+
+  .#{$prefix}--list-box__divider {
+    display: block;
+    border: none;
+    margin: 0 1rem;
+    border-block-end: 1px solid $border-subtle;
+  }
+}
+
+:host(#{$prefix}-fluid-combo-box:not([is-condensed])) {
+  ::slotted(#{$prefix}-combo-box-item) {
+    block-size: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-fluid-combo-box[invalid]) {
+  @extend .#{$prefix}--list-box__wrapper--fluid--invalid;
+  @include focus-outline('invalid');
+
+  outline-offset: 0;
+}
+
+// Direction top
+:host(#{$prefix}-fluid-combo-box[direction='top']) {
+  @extend .#{$prefix}--list-box--up;
+
+  .#{$prefix}--list-box__menu {
+    inset-block-start: auto;
+  }
+}
+
+// AI Label styles
+:host(#{$prefix}-fluid-combo-box[ai-label]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  ::slotted(#{$prefix}-ai-label),
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 73%;
+    inset-inline-end: $spacing-09;
+  }
+
+  ::slotted(#{$prefix}-ai-label:not([revert-active])),
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-73%);
+  }
+
+  .#{$prefix}--list-box__wrapper--decorator {
+    @include ai-gradient;
+  }
+}
+
+// AI label dividers - always present
+:host(#{$prefix}-fluid-combo-box[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-combo-box[ai-label][read-only]),
+:host(#{$prefix}-fluid-combo-box[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;
+  }
+}
+
+// Preserve AI gradient in invalid/warn states
+:host(
+    #{$prefix}-fluid-combo-box[ai-label][invalid]:not([disabled]):not(
+        [read-only]
+      )
+  ),
+:host(
+    #{$prefix}-fluid-combo-box[ai-label][warn]:not([disabled]):not([read-only])
+  ) {
+  .#{$prefix}--list-box__wrapper--decorator {
+    @include ai-gradient;
+  }
+}
+
+// AI label - adjust position when clear button is visible
+:host(#{$prefix}-fluid-combo-box[ai-label][isClosable]) {
+  ::slotted(#{$prefix}-ai-label),
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: calc($spacing-10 + 18px);
+  }
+}
+
+// Condensed styles
+:host(#{$prefix}-fluid-combo-box[is-condensed]) {
+  @extend .#{$prefix}--list-box__wrapper--fluid--condensed;
+
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    inset-block-start: auto;
+  }
+
+  ::slotted(#{$prefix}-combo-box-item) {
+    block-size: auto;
+  }
+}
+
+// Disabled state
+:host(#{$prefix}-fluid-combo-box[disabled]) {
+  .#{$prefix}--list-box {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--list-box__menu-icon svg {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__selection {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--list-box__field:focus,
+  .#{$prefix}--list-box__selection:focus {
+    outline: none;
+  }
+
+  .#{$prefix}--label {
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+}
+
+:host(#{$prefix}-fluid-combo-box[read-only]) {
+  @extend .#{$prefix}--dropdown--readonly;
+
+  .#{$prefix}--text-input {
+    border-block-end-color: $border-subtle;
+  }
+
+  .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__selection {
+    pointer-events: none;
+  }
+}
+
+:host(#{$prefix}-fluid-combo-box[invalid]:not([disabled]):not([read-only])),
+:host(#{$prefix}-fluid-combo-box[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-combo-box[warn]:not([disabled]):not([read-only])) {
+  .#{$prefix}--form__helper-text {
+    color: $text-primary;
+  }
+}
+
+:host(#{$prefix}-fluid-combo-box[invalid]:not([disabled]):not([read-only])) {
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
+  }
+}
+
+// Skeleton
+:host(#{$prefix}-fluid-combo-box-skeleton) {
+  @extend .#{$prefix}--list-box__wrapper--fluid;
+
+  display: block;
+}

package/scss/components/fluid-form/fluid-form.scss

@@ -0,0 +1,24 @@
+//
+// 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/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/form';
+
+:host(#{$prefix}-fluid-form) {
+  @include form.form;
+}
+
+:host(#{$prefix}-fluid-form[in-modal]) {
+  --cds-field: var(--cds-field-01);
+
+  .#{$prefix}--form--fluid {
+    margin-inline: -$spacing-05 - $spacing-05;
+  }
+}

package/scss/components/fluid-number-input/fluid-number-input.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.
@@ -18,6 +18,8 @@ $css--plex: true !default;
 
 :host(#{$prefix}-fluid-number-input) {
   @include emit-layout-tokens();
+
+  flex: 1 1 auto;
 }
 
 :host(#{$prefix}-fluid-number-input-skeleton) {

package/scss/components/fluid-password-input/fluid-password-input.scss

@@ -21,9 +21,9 @@ $css--plex: true !default;
 :host(#{$prefix}-fluid-password-input) {
   @include emit-layout-tokens();
 
+  flex: 1 1 auto;
   inline-size: 100%;
   outline: none;
-  padding-inline-end: $spacing-08;
   .#{$prefix}--text-input__invalid-icon {
     inset-inline-end: $spacing-08;
   }
@@ -47,22 +47,7 @@ $css--plex: true !default;
     inline-size: 100%;
   }
 
-  .#{$prefix}--btn--icon-only {
-    border: none;
-    background-color: transparent;
-    block-size: 100%;
-    cursor: pointer;
-    inline-size: 100%;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
   .#{$prefix}--text-input--password__visibility__toggle svg {
     pointer-events: none;
   }
-  .#{$prefix}--toggle-password-tooltip {
-    block-size: 100%;
-  }
 }

package/scss/components/fluid-select/fluid-select.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.
@@ -24,6 +24,8 @@ $divider-width: 1px;
 
   @include emit-layout-tokens();
 
+  flex: 1 1 auto;
+
   // Position the AI label and slug
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {

package/scss/components/fluid-text-input/fluid-text-input.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.
@@ -16,6 +16,8 @@ $css--plex: true !default;
 
 :host(#{$prefix}-fluid-text-input) {
   @include emit-layout-tokens();
+
+  flex: 1 1 auto;
 }
 
 :host(#{$prefix}-fluid-text-input-skeleton) {

package/scss/components/fluid-textarea/fluid-textarea.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.
@@ -13,4 +13,6 @@ $css--plex: true !default;
 
 :host(#{$prefix}-fluid-textarea) {
   @include emit-layout-tokens();
+
+  flex: 1 1 auto;
 }

package/scss/components/grid/grid.scss

@@ -35,6 +35,14 @@ $css-grid: #{$prefix}--css-grid;
   @extend .#{$css-grid}--full-width;
 }
 
+:host(#{$prefix}-grid[with-row-gap]) [grid] {
+  row-gap: var(--cds-grid-gutter);
+}
+
+:host(#{$prefix}-grid[narrow][with-row-gap]) [grid] {
+  row-gap: calc(var(--cds-grid-gutter) / 2);
+}
+
 /* sub grid styles */
 $sub-grid: #{$prefix}--subgrid;
 :host(#{$prefix}-grid) [subgrid] {
@@ -55,5 +63,17 @@ $sub-grid: #{$prefix}--subgrid;
   @extend .#{$sub-grid}--narrow;
 }
 
+:host(#{$prefix}-grid) [subgrid][with-row-gap] {
+  row-gap: calc(var(--cds-grid-gutter-start) + var(--cds-grid-gutter-end));
+}
+
+:host(#{$prefix}-grid) [subgrid][mode='narrow'][with-row-gap] {
+  row-gap: var(--cds-grid-gutter-end);
+}
+
+:host(#{$prefix}-grid) [subgrid][mode='condensed'][with-row-gap] {
+  row-gap: var(--cds-grid-gutter-start);
+}
+
 // Column styles
 @include grid-columns(#{$prefix}-grid);

package/scss/components/menu/menu-item.scss

@@ -71,11 +71,15 @@ $css--plex: true !default;
   display: var(--child-icon-property, none);
 }
 
-:host([aria-disabled='true']) * {
+:host([aria-disabled='true']) {
   color: $text-disabled;
   cursor: not-allowed;
 }
 
+:host([aria-disabled='true']) :where(*) {
+  color: inherit;
+}
+
 :host([aria-disabled='true']:hover),
 :host([aria-disabled='true'].#{$prefix}--menu-item--danger:hover) {
   background-color: $layer;

package/scss/components/modal/modal.scss

@@ -28,6 +28,7 @@
   visibility: inherit;
 
   .#{$prefix}--modal-container {
+    overflow: hidden;
     transform: translate3d(0, 0, 0);
     transition: transform $duration-moderate-02 motion(entrance, expressive);
   }

package/scss/components/pagination/pagination.scss

@@ -14,9 +14,11 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/components/pagination' as *;
 @use '@carbon/styles/scss/utilities/visually-hidden' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 :host(#{$prefix}-pagination) {
   @extend .#{$prefix}--pagination;
+  @include emit-layout-tokens();
 
   position: relative;
   outline: none;
@@ -40,10 +42,4 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-pagination[size='sm']) {
-  @extend .#{$prefix}--pagination--sm;
-}
-
-:host(#{$prefix}-pagination[size='lg']) {
-  @extend .#{$prefix}--pagination--lg;
-}
+@include emit-layout-tokens-to-shadow-host('#{$prefix}-pagination');

package/scss/components/password-input/password-input.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.
@@ -20,10 +20,6 @@ $css--plex: true !default;
 
   inline-size: 100%;
   outline: none;
-  padding-inline-end: $spacing-08;
-  .#{$prefix}--text-input__invalid-icon {
-    inset-inline-end: $spacing-08;
-  }
   .#{$prefix}--icon-visibility-on,
   .#{$prefix}--icon-visibility-off {
     vertical-align: middle;
@@ -44,18 +40,6 @@ $css--plex: true !default;
     inline-size: 100%;
   }
 
-  .#{$prefix}--btn--icon-only {
-    border: none;
-    background-color: transparent;
-    block-size: 100%;
-    cursor: pointer;
-    inline-size: 100%;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
   .#{$prefix}--text-input--password__visibility__toggle svg {
     pointer-events: none;
   }

package/scss/components/search/search.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// 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.
@@ -13,11 +13,13 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/search' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include search;
 
 :host(#{$prefix}-search) {
+  @include emit-layout-tokens();
   @extend .#{$prefix}--search;
 
   outline: none;
@@ -39,27 +41,6 @@ $css--plex: true !default;
   outline: none;
 }
 
-:host(#{$prefix}-search[expandable][size='sm']) {
-  .#{$prefix}--search-magnifier {
-    block-size: $spacing-07;
-    inline-size: $spacing-07;
-  }
-}
-
-:host(#{$prefix}-search[expandable][size='md']) {
-  .#{$prefix}--search-magnifier {
-    block-size: $spacing-08;
-    inline-size: $spacing-08;
-  }
-}
-
-:host(#{$prefix}-search[expandable][size='lg']) {
-  .#{$prefix}--search-magnifier {
-    block-size: $spacing-09;
-    inline-size: $spacing-09;
-  }
-}
-
 :host(#{$prefix}-search[expandable][expanded]) {
   @extend .#{$prefix}--search--expanded;
 
@@ -75,32 +56,15 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-search[expandable][expanded][size='sm']) {
-  .#{$prefix}--search-input {
-    padding: 0 $spacing-07;
-  }
-}
+:host(#{$prefix}-search[disabled]) {
+  @extend .#{$prefix}--search--disabled;
 
-:host(#{$prefix}-search[expandable][expanded][size='md']) {
-  .#{$prefix}--search-input {
-    padding: 0 $spacing-08;
+  svg {
+    fill: $icon-on-color-disabled;
   }
-}
 
-:host(#{$prefix}-search[expandable][expanded][size='lg']) {
   .#{$prefix}--search-input {
-    padding: 0 $spacing-09;
-  }
-
-  ::slotted(.#{$prefix}--search-magnifier) {
-    block-size: rem(48px);
-    inline-size: rem(48px);
-  }
-}
-
-:host(#{$prefix}-search[disabled]) {
-  svg {
-    fill: $icon-on-color-disabled;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--search-close {
@@ -114,6 +78,8 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-search-skeleton) {
+  @include emit-layout-tokens();
+
   inline-size: 100%;
 
   .#{$prefix}--search-input {
@@ -127,19 +93,20 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-search[size='sm']),
-:host(#{$prefix}-search-skeleton[size='sm']) {
-  @extend .#{$prefix}--search--sm;
+:host(#{$prefix}-search[size='xs']) {
+  @extend .#{$prefix}--layout--size-xs;
+}
+
+:host(#{$prefix}-search[size='sm']) {
+  @extend .#{$prefix}--layout--size-sm;
 }
 
-:host(#{$prefix}-search[size='md']),
-:host(#{$prefix}-search-skeleton[size='md']) {
-  @extend .#{$prefix}--search--md;
+:host(#{$prefix}-search[size='md']) {
+  @extend .#{$prefix}--layout--size-md;
 }
 
-:host(#{$prefix}-search[size='lg']),
-:host(#{$prefix}-search-skeleton[size='lg']) {
-  @extend .#{$prefix}--search--lg;
+:host(#{$prefix}-search[size='lg']) {
+  @extend .#{$prefix}--layout--size-lg;
 }
 :host(#{$prefix}-search) {
   .#{$prefix}--search-input {

package/scss/components/select/select.scss

@@ -15,11 +15,13 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/fluid-select' as *;
 @use '@carbon/styles/scss/utilities/visually-hidden' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 $divider-width: 1px;
 
 :host(#{$prefix}-select) {
   @extend .#{$prefix}--select;
+  @include emit-layout-tokens();
 
   outline: none;
 
@@ -109,3 +111,5 @@ $divider-width: 1px;
     inset-inline-end: $spacing-09;
   }
 }
+
+@include emit-layout-tokens-to-shadow-host('#{$prefix}-select');

package/scss/components/tabs/tabs-story.scss

@@ -8,15 +8,33 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/utilities/layout';
 @use '@carbon/styles/scss/components/form/form' as form;
 
 @include form.form;
 
+body {
+  @include layout.use('density', $default: 'normal');
+}
 .#{$prefix}-ce-demo-devenv--tab-panels {
   flex: 1;
   align-self: stretch;
-  padding: $spacing-05;
+}
+
+//-----------------------------
+// Tab Panel Styles
+//-----------------------------
+[role='tabpanel'] {
+  padding: layout.density('padding-inline');
+
+  &:focus {
+    @include focus-outline('outline');
+  }
+}
+// Contained tabs background for panels (using descendant selector to handle wrapper div)
+#{$prefix}-tabs[type='contained'] ~ * [role='tabpanel'] {
+  background: $layer;
 }
 
 .#{$prefix}--tab-content {