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

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