@carbon/web-components 2.55.0-rc.0 → 2.56.0-rc.0

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

@@ -15,6 +15,7 @@
 @use '@carbon/styles/scss/components/data-table/data-table';
 @use '@carbon/styles/scss/components/data-table/action';
 @use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout';
 //
 // Table toolbar
 //
@@ -26,41 +27,21 @@
   z-index: 1;
 }
 
-:host(#{$prefix}-table-toolbar[size='xs']),
-:host(#{$prefix}-table-toolbar[size='sm']) {
-  @extend .#{$prefix}--table-toolbar--sm;
-}
-
 :host(#{$prefix}-table-toolbar-content) {
   @extend .#{$prefix}--toolbar-content;
 
   ::slotted(#{$prefix}-overflow-menu) {
     display: flex;
-    block-size: $spacing-09;
+    block-size: layout.size('height');
     cursor: pointer;
-    inline-size: $spacing-09;
+    inline-size: layout.size('height');
     transition: background-color $duration-fast-02 motion(entrance, productive);
   }
 }
 
-:host(#{$prefix}-table-toolbar-content[size='xs']),
-:host(#{$prefix}-table-toolbar-content[size='sm']) {
-  ::slotted(#{$prefix}-table-toolbar-search),
-  ::slotted(#{$prefix}-overflow-menu),
-  ::slotted(#{$prefix}-button) {
-    block-size: $spacing-07;
-    min-block-size: $spacing-07;
-  }
-
-  ::slotted(#{$prefix}-table-toolbar-search),
-  ::slotted(#{$prefix}-overflow-menu) {
-    inline-size: $spacing-07;
-  }
-}
-
 :host(#{$prefix}-table-toolbar-content[has-batch-actions]) {
   clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-  transform: translate3d(0, $spacing-09, 0);
+  transform: translate3d(0, layout.size('height'), 0);
   transition:
     transform $duration-fast-02 motion(standard, productive),
     clip-path $duration-fast-02 motion(standard, productive);
@@ -70,67 +51,13 @@
   @extend .#{$prefix}--toolbar-action;
   @extend .#{$prefix}--toolbar-search-container-expandable;
 
-  &:hover {
-    background-color: $field-hover;
-  }
-
   flex: none;
+  block-size: layout.size('height');
+  inline-size: layout.size('height');
   transition: flex 175ms $standard-easing;
 
-  .#{$prefix}--search {
-    block-size: 100%;
-    inline-size: 100%;
-
-    .#{$prefix}--search-magnifier {
-      cursor: pointer;
-      inset-inline-start: 0;
-      pointer-events: all;
-      transition: background $duration-fast-02 motion(entrance, productive);
-
-      &-icon {
-        block-size: auto;
-        inline-size: auto;
-      }
-    }
-
-    .#{$prefix}--search-input {
-      border-block-end: 0;
-    }
-
-    .#{$prefix}--search-close {
-      block-size: $spacing-09;
-      inline-size: $spacing-09;
-
-      &::before {
-        background-color: $background-hover;
-        inline-size: 0;
-      }
-
-      :hover {
-        background-color: none;
-      }
-    }
-
-    :hover {
-      background-color: none;
-    }
-  }
-
-  svg {
-    inset-inline-start: 0;
-  }
-}
-
-:host(#{$prefix}-table-toolbar-search[size='xs']),
-:host(#{$prefix}-table-toolbar-search[size='sm']) {
-  .#{$prefix}--search-close {
-    block-size: rem(32px);
-    inline-size: rem(32px);
-  }
-
-  svg {
-    padding: 0;
-    inset-inline-start: $spacing-03;
+  .#{$prefix}--search-input {
+    border-block-end: 0;
   }
 }
 
@@ -140,15 +67,8 @@
   flex: auto;
 }
 
-:host(#{$prefix}-table-toolbar-search[size='xs'][expanded]),
-:host(#{$prefix}-table-toolbar-search[size='sm'][expanded]) {
-  svg {
-    inset-inline-start: $spacing-05;
-  }
-}
-
-:host(#{$prefix}-table-toolbar-search[persistent]:hover) {
-  .#{$prefix}--search-input {
+:host(#{$prefix}-table-toolbar-search:hover) {
+  .#{$prefix}--search {
     background-color: $field-hover;
   }
 }
@@ -157,103 +77,27 @@
   @extend .#{$prefix}--batch-actions;
 
   box-sizing: border-box;
+  block-size: layout.size('height');
+  min-block-size: layout.size('height');
   overflow-x: auto;
-}
-
-:host(#{$prefix}-table-batch-actions[active]) {
-  @extend .#{$prefix}--batch-actions--active;
-}
-
-:host(#{$prefix}-table-batch-actions[size='xs']),
-:host(#{$prefix}-table-batch-actions[size='sm']) {
-  block-size: $spacing-07;
-  min-block-size: $spacing-07;
-
-  .#{$prefix}--batch-summary {
-    block-size: $spacing-07;
-    min-block-size: $spacing-07;
-
-    &__para {
-      padding: 0;
-      margin: 0;
-      block-size: $spacing-07;
-      line-height: $spacing-07;
-    }
-  }
-
-  .#{$prefix}--action-list {
-    block-size: $spacing-07;
-  }
-
-  .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel {
-    block-size: $spacing-07;
-    min-block-size: auto;
-    padding-block: 0.375rem;
-
-    &::before {
-      inset-block-start: rem(8px);
-    }
-  }
-}
-
-:host(#{$prefix}-table-batch-actions[size='md']),
-:host(#{$prefix}-table-batch-actions[size='lg']),
-:host(#{$prefix}-table-batch-actions[size='xl']) {
-  block-size: $spacing-09;
-  min-block-size: $spacing-09;
 
   .#{$prefix}--batch-summary {
-    block-size: $spacing-09;
-    min-block-size: $spacing-09;
+    block-size: layout.size('height');
+    min-block-size: layout.size('height');
 
     &__para {
-      padding: 0;
-      margin: 0;
-      block-size: $spacing-09;
-      line-height: $spacing-09;
+      block-size: layout.size('height');
+      line-height: layout.size('height');
     }
   }
 
   .#{$prefix}--action-list {
-    block-size: $spacing-09;
+    block-size: layout.size('height');
   }
-
-  .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel {
-    block-size: $spacing-09;
-    min-block-size: auto;
-
-    &::before {
-      inset-block-start: rem(15px);
-    }
-  }
-}
-
-:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='xs']),
-:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='sm']) {
-  transform: translate3d(0, $spacing-07, 0);
 }
 
-:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='md']),
-:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='lg']),
-:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='xl']) {
-  transform: translate3d(0, $spacing-09, 0);
+:host(#{$prefix}-table-batch-actions[active]) {
+  @extend .#{$prefix}--batch-actions--active;
 }
 
-:host(#{$prefix}-table-batch-actions) {
-  .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel {
-    --divider-opacity: 1;
-
-    &::before {
-      @media (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-
-      opacity: var(--divider-opacity);
-      transition: opacity $duration-fast-02 motion(standard, productive);
-    }
-
-    &:hover::before {
-      opacity: 0;
-    }
-  }
-}
+@include emit-layout-tokens-to-shadow-host(#{$prefix}-table-toolbar);

package/scss/components/data-table/_table-sizes.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.
@@ -147,38 +147,6 @@
   }
 }
 
-// Small persistent toolbar
-:host(#{$prefix}-table-toolbar[size='xs']),
-:host(#{$prefix}-table-toolbar-content[size='xs']) {
-  &,
-  ::slotted(#{$prefix}-table-toolbar-search),
-  ::slotted(#{$prefix}-overflow-menu),
-  ::slotted(#{$prefix}-button) {
-    block-size: $spacing-07;
-    min-block-size: $spacing-07;
-  }
-  ::slotted(#{$prefix}-table-toolbar-search),
-  ::slotted(#{$prefix}-overflow-menu) {
-    inline-size: $spacing-07;
-  }
-}
-
-:host(#{$prefix}-table-toolbar[size='sm']),
-:host(#{$prefix}-table-toolbar-content[size='sm']) {
-  &,
-  ::slotted(#{$prefix}-table-toolbar-search),
-  ::slotted(#{$prefix}-overflow-menu),
-  ::slotted(#{$prefix}-button) {
-    block-size: $spacing-07;
-    min-block-size: $spacing-07;
-  }
-
-  ::slotted(#{$prefix}-table-toolbar-search),
-  ::slotted(#{$prefix}-overflow-menu) {
-    inline-size: $spacing-07;
-  }
-}
-
 //
 // "selection" and "expandable" sizes
 //

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

@@ -19,6 +19,6 @@ $css--plex: true !default;
   --cds-field: var(--cds-field-01);
 
   .#{$prefix}--form--fluid {
-    margin-inline: -$spacing-05 - $spacing-05;
+    margin-inline: -$spacing-03 - $spacing-03;
   }
 }

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

@@ -46,3 +46,8 @@ body {
 #{$prefix}-tabs[type='contained'] ~ .#{$prefix}--tab-content {
   background: $layer;
 }
+
+.#{$prefix}-ce-demo-devenv--tab-story-button {
+  display: inline-block;
+  inline-size: auto;
+}

package/scss/components/tabs/tabs.scss

@@ -20,6 +20,7 @@
 @use '@carbon/styles/scss/utilities/layout';
 @use '@carbon/styles/scss/utilities/convert';
 @use '@carbon/styles/scss/utilities/skeleton' as *;
+@use '@carbon/styles/scss/utilities/update_fields_on_layer' as *;
 
 $inset-transition: inset 110ms motion(standard, productive);
 
@@ -27,6 +28,7 @@ $inset-transition: inset 110ms motion(standard, productive);
 :host(#{$prefix}-tabs-skeleton) {
   @extend .#{$prefix}--tabs;
   @include emit-layout-tokens();
+
   .#{$prefix}--tabs-nav-content-container {
     position: relative;
     overflow: scroll;
@@ -264,6 +266,9 @@ $inset-transition: inset 110ms motion(standard, productive);
   outline: none;
 }
 
+:host(#{$prefix}-tab:not([type='contained']):not([vertical])) {
+  margin-inline-end: convert.to-rem(1px);
+}
 :host(#{$prefix}-tab:not([type='contained'])) {
   .#{$prefix}--tabs__nav-link {
     padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});
@@ -271,10 +276,19 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
+:host(#{$prefix}-tab:not([type='contained']):not([vertical]):last-of-type) {
+  margin-inline-end: 0;
+}
 :host(#{$prefix}-tab:not([type='contained']))
   + :host(#{$prefix}-tab:not([type='contained'])) {
   margin-inline-start: convert.to-rem(1px);
 }
+:host(#{$prefix}-tab[vertical]) {
+  .#{$prefix}--tabs__nav-link {
+    padding-block-end: $spacing-03;
+    padding-block-start: $spacing-03;
+  }
+}
 
 :host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))
   #{$prefix}-badge-indicator,
@@ -368,7 +382,7 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
-:host(#{$prefix}-tab:hover:not([selected])) {
+:host(#{$prefix}-tab:hover:not([selected]):not([vertical])) {
   background-color: transparent;
 
   a.#{$prefix}--tabs__nav-link {
@@ -384,7 +398,7 @@ $inset-transition: inset 110ms motion(standard, productive);
 
 :host(#{$prefix}-tabs[type='contained'])
   .#{$prefix}--tabs-nav-content-container {
-  block-size: $spacing-09;
+  block-size: layout.size('height');
 }
 
 :host(#{$prefix}-tab[type='contained']) {
@@ -392,9 +406,9 @@ $inset-transition: inset 110ms motion(standard, productive);
 
   a.#{$prefix}--tabs__nav-link {
     padding: $spacing-03 $spacing-05;
-    block-size: $spacing-09;
+    block-size: layout.size('height');
     // height - vertical padding
-    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));
+    line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));
   }
 }
 
@@ -446,7 +460,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     // Draws the border without affecting the inner-content
     box-shadow: inset 0 $spacing-01 0 0 $interactive;
     // height - vertical padding
-    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));
+    line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));
   }
 
   .#{$prefix}--tabs__nav-link:focus,
@@ -559,6 +573,155 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
+:host(#{$prefix}-tab[vertical]) .#{$prefix}--tabs__nav-link {
+  display: flex;
+  align-items: center;
+  border-block-end: 1px solid $border-subtle;
+}
+
+:host(#{$prefix}-tab[vertical][selected]) .#{$prefix}--tabs__nav-link {
+  border-block-end: 1px solid $border-subtle;
+}
+
+:host(#{$prefix}-tab[vertical][disabled]) .#{$prefix}--tabs__nav-link {
+  border-block-end: 1px solid $border-subtle;
+}
+
+//-----------------------------
+// Vertical Tabs Wrapper
+//-----------------------------
+
+:host(#{$prefix}-tabs-vertical) {
+  @include emit-layout-tokens();
+  @include layout.use('density', $default: 'normal');
+
+  grid-column: span 2;
+  max-block-size: none;
+
+  &.#{$prefix}--css-grid {
+    box-shadow: inset -1px 0 $border-subtle;
+  }
+
+  ::slotted(#{$prefix}-tabs) {
+    grid-column: span 2;
+
+    @include breakpoint(lg) {
+      grid-column: span 4;
+    }
+  }
+
+  // Shadow-DOM wrapper for the panel slot — styled directly (no ::slotted needed)
+  .#{$prefix}-panel-container {
+    @include update_fields_on_layer;
+
+    background: $layer;
+    grid-column: 3 / -1;
+    overflow-y: auto;
+
+    @include breakpoint(lg) {
+      grid-column: 5 / -1;
+    }
+  }
+}
+
+// Slotted tab panel divs — match React's cds--tab-content styles
+:host(#{$prefix}-tabs-vertical) ::slotted([role='tabpanel']) {
+  // stylelint-disable-next-line declaration-no-important
+  padding: layout.density('padding-inline') !important;
+  outline: none;
+}
+
+:host(#{$prefix}-tabs-vertical)
+  .panel-container
+  ::slotted([role='tabpanel']:focus) {
+  @include focus-outline('outline');
+}
+
+// cds-tabs when slotted inside cds-tabs-vertical (slot="tabs")
+:host(#{$prefix}-tabs-vertical) ::slotted(#{$prefix}-tabs) {
+  background: $layer;
+  box-shadow: inset -1px 0 $border-subtle;
+  max-block-size: none;
+}
+
+// Internal styles for cds-tabs when inside cds-tabs-vertical
+// These are applied via a CSS custom property / attribute set by the wrapper
+:host(#{$prefix}-tabs[vertical]) {
+  .#{$prefix}--tabs-nav-content-container {
+    block-size: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .#{$prefix}--tabs-nav-content {
+    position: relative;
+    block-size: 100%;
+  }
+
+  .#{$prefix}--tabs-nav {
+    position: relative;
+  }
+
+  .#{$prefix}--tab--list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$prefix}--tab--overflow-nav-button {
+    display: none;
+  }
+
+  .#{$prefix}--tabs__nav-item-label {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: var(--cds-body-compact-01-line-height);
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+}
+
+:host(#{$prefix}-tab[vertical]) {
+  flex: none;
+  background-color: $layer-01;
+  block-size: $spacing-10;
+  border-inline-end: 1px solid $border-subtle;
+  box-shadow: inset 3px 0 0 0 $border-subtle;
+  inline-size: 100%;
+
+  .#{$prefix}--tabs__nav-item-label {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: var(--cds-body-compact-01-line-height);
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+}
+
+:host(#{$prefix}-tab[vertical][disabled]) {
+  border-inline-end: 1px solid $border-subtle;
+  box-shadow: inset 3px 0 0 0 $border-subtle;
+}
+
+:host(#{$prefix}-tab[vertical]:hover),
+:host(#{$prefix}-tab[vertical][disabled]:hover) {
+  .#{$prefix}--tabs__nav-link {
+    border-block-end: 1px solid $border-subtle;
+  }
+}
+
+:host(#{$prefix}-tab[vertical][selected]) {
+  border-inline: none;
+  box-shadow: inset 3px 0 0 0 $border-interactive;
+}
+
+:host(#{$prefix}-tab[vertical]:not([selected]):not([disabled]):hover) {
+  background-color: $layer-hover;
+  box-shadow: inset 3px 0 0 0 $border-strong;
+}
 :host(#{$prefix}-tab) {
   .#{$prefix}--tabs__nav-link--dismissable {
     display: flex;

package/telemetry.yml

@@ -551,6 +551,8 @@ collect:
         - oncds-tabs-selected
         - selected-item-assistive-text
         - selecting-items-assistive-text
+        # cds-tabs-vertical
+        - custom-height
         # cds-tearsheet
         - has-close-icon
         - influencer-placement