@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/tabs/_tabs.scss

@@ -23,517 +23,170 @@
 @use '../../utilities/rotate' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/component-tokens' as *;
+@use '../../utilities/custom-property';
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
 
+$icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
+
 /// Tabs styles
 /// @access public
 /// @group tabs
 @mixin tabs {
   .#{$prefix}--tabs {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: relative;
+    display: flex;
     width: 100%;
     height: auto;
+    min-height: rem(40px);
+    max-height: 4rem;
     color: $text-primary;
-    @include breakpoint(md) {
-      min-height: rem(40px);
-      background: none;
-    }
-  }
 
-  .#{$prefix}--tabs--container {
-    @include breakpoint(md) {
+    &.#{$prefix}--tabs--contained {
       min-height: rem(48px);
     }
-  }
-
-  .#{$prefix}--tabs-trigger {
-    display: flex;
-    height: rem(40px);
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 $spacing-09 0 $spacing-05;
-    border-bottom: 1px solid $border-strong;
-    background-color: $layer;
-    color: $text-primary;
-    cursor: pointer;
-    outline: 2px solid transparent;
-
-    @include breakpoint(md) {
-      display: none;
-    }
-  }
 
-  .#{$prefix}--tabs-trigger:focus,
-  .#{$prefix}--tabs-trigger:active {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--tabs-trigger svg {
-    position: absolute;
-    right: $spacing-05;
-    fill: $border-inverse;
-    transition: transform $duration-fast-01 motion(standard, productive);
-  }
-
-  .#{$prefix}--tabs-trigger--open:focus,
-  .#{$prefix}--tabs-trigger--open:active {
-    @include focus-outline('reset');
-
-    transition: outline $duration-fast-01 motion(standard, productive);
-  }
-
-  .#{$prefix}--tabs-trigger--open {
-    background: $layer-accent;
-  }
-
-  .#{$prefix}--tabs-trigger--open svg {
-    @include rotate(-180deg, $duration-fast-01, 50% 45%);
-  }
-
-  // There is only a difference in tab color when in mobile/dropdown view
-  .#{$prefix}--tabs--light.#{$prefix}--tabs-trigger {
-    background-color: $field-02;
-  }
-
-  .#{$prefix}--tabs-trigger-text {
-    overflow: hidden;
-    padding-top: 2px;
-    color: $text-primary;
-    font-weight: 400;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .#{$prefix}--tabs-trigger-text:hover {
-    color: $text-primary;
-  }
-
-  .#{$prefix}--tabs-trigger-text:focus {
-    outline: none;
-  }
-
-  .#{$prefix}--tabs__nav {
-    @include box-shadow;
-
-    position: absolute;
-    z-index: z('dropdown');
-    display: flex;
-    width: 100%;
-    max-height: 600px;
-    flex-direction: column;
-    padding: 0;
-    margin: 0;
-    background: $layer;
-    list-style: none;
-    transition: max-height $duration-fast-01 motion(standard, productive);
-
-    @include breakpoint(md) {
-      z-index: auto;
-      width: auto;
-      flex-direction: row;
-      background: none;
-      box-shadow: none;
-      transition: inherit;
-    }
-  }
-
-  .#{$prefix}--tabs__nav--hidden {
-    overflow: hidden;
-    max-height: 0;
-    transition: max-height $duration-fast-01 motion(standard, productive);
-
-    @include breakpoint(md) {
+    .#{$prefix}--tab--list {
       display: flex;
-      max-width: 100%;
-      max-height: none;
+      width: 100%;
       overflow-x: auto;
-      transition: inherit;
-    }
-  }
-
-  //-----------------------------
-  // Item
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item {
-    @include reset;
-
-    display: flex;
-    width: 100%;
-    height: rem(40px);
-    padding: 0;
-    background-color: $layer;
-    cursor: pointer;
-    transition: background-color $duration-fast-01 motion(standard, productive);
-
-    @include breakpoint(md) {
-      height: auto;
-      background: transparent;
-
-      + .#{$prefix}--tabs__nav-item {
-        margin-left: rem(1px);
-      }
-    }
-  }
-
-  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item {
-    @include breakpoint(md) {
-      background-color: $layer-accent;
-
-      + .#{$prefix}--tabs__nav-item {
-        margin-left: 0;
-        // Draws the border without affecting the inner-content
-        box-shadow: -1px 0 0 0 $border-strong;
-      }
-
-      + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
-      &.#{$prefix}--tabs__nav-item--selected + .#{$prefix}--tabs__nav-item {
-        box-shadow: none;
-      }
-    }
-  }
-
-  .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
-    transition: color $duration-fast-01 motion(standard, productive),
-      border-bottom-color $duration-fast-01 motion(standard, productive),
-      outline $duration-fast-01 motion(standard, productive);
-  }
-
-  //-----------------------------
-  // Item Hover
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected) {
-    @include breakpoint(md) {
-      background: transparent;
-    }
-  }
-
-  .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
-    background-color: $layer-hover;
-    box-shadow: 0 -1px 0 $layer-hover;
-
-    @include breakpoint(md) {
-      background-color: transparent;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      will-change: scroll-position;
 
-      + .#{$prefix}--tabs__nav-item {
-        box-shadow: none;
+      &::-webkit-scrollbar {
+        display: none;
       }
     }
-  }
-
-  .#{$prefix}--tabs--container
-    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
-    @include breakpoint(md) {
-      background-color: $layer-selected-hover;
-    }
-  }
-
-  //---------------------------------------------
-  // Item Disabled
-  //---------------------------------------------
-  .#{$prefix}--tabs__nav-item--disabled,
-  .#{$prefix}--tabs__nav-item--disabled:hover {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .#{$prefix}--tabs--container
-    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
-  .#{$prefix}--tabs--container
-    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
-    @include breakpoint(md) {
-      background-color: button.$button-disabled;
-    }
-  }
 
-  .#{$prefix}--tabs--container
-    .#{$prefix}--tabs__nav-item--disabled
-    .#{$prefix}--tabs__nav-link {
-    @include breakpoint(md) {
-      border-bottom: none;
-      color: $text-on-color-disabled;
-    }
-  }
-
-  //-----------------------------
-  // Item Selected
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
-    display: none;
-    border: none;
-    transition: color $duration-fast-01 motion(standard, productive);
-
-    @include breakpoint(md) {
+    .#{$prefix}--tabs__nav {
       display: flex;
-      .#{$prefix}--tabs__nav-link,
-      .#{$prefix}--tabs__nav-link:focus,
-      .#{$prefix}--tabs__nav-link:active {
-        @include type-style('productive-heading-01');
-
-        border-bottom: 2px solid $border-interactive;
-        color: $text-primary;
-      }
     }
-  }
 
-  .#{$prefix}--tabs--container
-    .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled),
-  .#{$prefix}--tabs--container
-    .#{$prefix}--tabs__nav-item--selected:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
-    @include breakpoint(md) {
-      background-color: $layer;
+    //-----------------------------
+    // Overflow Nav Buttons
+    //-----------------------------
+    .#{$prefix}--tab--overflow-nav-button {
+      @include button-reset.reset;
 
-      .#{$prefix}--tabs__nav-link {
-        padding: $spacing-03 $spacing-05;
-        border-bottom: none;
-        box-shadow: inset 0 2px 0 0 $border-interactive;
-        // height - vertical padding
-        // Draws the border without affecting the inner-content
-        line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-      }
+      display: flex;
+      width: $spacing-08;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      background-color: $background;
 
-      .#{$prefix}--tabs__nav-link:focus,
-      .#{$prefix}--tabs__nav-link:active {
-        box-shadow: none;
+      &:focus {
+        @include focus-outline('outline');
       }
     }
-  }
 
-  //-----------------------------
-  // Link
-  //-----------------------------
-  a.#{$prefix}--tabs__nav-link {
-    @include focus-outline('reset');
-
-    display: inline-block;
-    overflow: hidden;
-    width: calc(100% - 32px);
-    height: rem(40px);
-    padding: $spacing-04 0;
-    border-bottom: 1px solid $border-subtle;
-    margin: 0 $spacing-05;
-    color: $text-secondary;
-    font-weight: 400;
-    line-height: 1rem;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    transition: border $duration-fast-01 motion(standard, productive),
-      outline $duration-fast-01 motion(standard, productive);
-    white-space: nowrap;
-
-    &:focus,
-    &:active {
-      @include focus-outline('outline');
-
-      width: 100%;
-      padding-left: 16px;
-      margin: 0;
+    .#{$prefix}--tab--overflow-nav-button--hidden {
+      display: none;
     }
 
-    @include breakpoint(md) {
-      width: rem(160px);
-      padding: $spacing-04 $spacing-05 $spacing-03;
-      border-bottom: $tab-underline-color;
+    &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
+      width: $spacing-09;
       margin: 0;
-      line-height: inherit;
-
-      &:focus,
-      &:active {
-        width: rem(160px);
-        border-bottom: 2px;
-      }
-    }
-  }
-
-  .#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link {
-    @include breakpoint(md) {
-      height: rem(48px);
-      padding: $spacing-03 $spacing-05;
-      border-bottom: none;
-      // Height - vertical padding
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+      background-color: $layer-accent;
     }
-  }
 
-  //-----------------------------
-  //  Link Hover
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
-    .#{$prefix}--tabs__nav-link {
-    color: $text-primary;
-    @include breakpoint(md) {
-      border-bottom: $tab-underline-color-hover;
-      color: $text-primary;
+    .#{$prefix}--tab--overflow-nav-button svg {
+      fill: $icon-primary;
     }
-  }
 
-  .#{$prefix}--tabs--container
-    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
-    .#{$prefix}--tabs__nav-link {
-    @include breakpoint(md) {
-      border-bottom: none;
+    .#{$prefix}--tab--overflow-nav-button--next {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
     }
-  }
-
-  //-----------------------------
-  //  Link Disabled
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
-    border-bottom: $tab-underline-disabled;
-    color: $tab-text-disabled;
-    pointer-events: none;
-  }
-
-  .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link {
-    border-bottom: $tab-underline-disabled;
-    cursor: no-drop;
-  }
 
-  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:focus,
-  .#{$prefix}--tabs__nav-item--disabled a.#{$prefix}--tabs__nav-link:active {
-    border-bottom: $tab-underline-disabled;
-    outline: none;
-  }
-
-  //-----------------------------
-  //  Link Focus
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected)
-    .#{$prefix}--tabs__nav-link:focus,
-  .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected)
-    a.#{$prefix}--tabs__nav-link:active {
-    color: $text-secondary;
-  }
-
-  //-----------------------------
-  //  Tab Content Container
-  //-----------------------------
-  .#{$prefix}--tab-content {
-    padding: $spacing-05;
-
-    &:focus {
-      @include focus-outline('outline');
+    .#{$prefix}--tab--overflow-nav-button--next::before {
+      position: absolute;
+      z-index: 1;
+      left: -$spacing-03;
+      width: $spacing-03;
+      height: 100%;
+      background: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $background
+      );
+      content: '';
     }
-  }
-
-  //-----------------------------
-  // Skeleton state
-  //-----------------------------
-  .#{$prefix}--tabs.#{$prefix}--skeleton {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  .#{$prefix}--skeleton.#{$prefix}--tabs--scrollable:not(.#{$prefix}--tabs--scrollable--container)
-    .#{$prefix}--tabs--scrollable__nav-item {
-    border-bottom: 2px solid $skeleton-element;
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
-    display: flex;
-    width: 10rem;
-    height: 100%;
-    align-items: center;
-    padding: 0 1rem;
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link span {
-    @include skeleton;
-
-    display: block;
-    width: 100%;
-    height: rem(14px);
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
-    @include skeleton;
-
-    width: rem(100px);
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
-    @include visually-hidden;
-  }
-
-  // TODO: remove namespace and suffix in next major release
-  .#{$prefix}--tabs--scrollable {
-    @include reset;
-    @include type-style('body-short-01');
-
-    display: flex;
-    width: 100%;
-    height: auto;
-    min-height: rem(40px);
-    color: $text-primary;
 
-    &.#{$prefix}--tabs--scrollable--container {
-      min-height: rem(48px);
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tab--overflow-nav-button--next::before {
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
-    .#{$prefix}--tabs--scrollable__nav {
-      display: flex;
-      overflow: auto hidden;
-      width: auto;
-      max-width: 100%;
-      flex-direction: row;
-      padding: 0;
-      margin: 0;
-      list-style: none;
-      outline: 0;
-      // hide scrollbars
-      scrollbar-width: none;
-      transition: max-height $duration-fast-01 motion(standard, productive);
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
+    .#{$prefix}--tab--overflow-nav-button--previous {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
     }
 
-    //-----------------------------
-    // Overflow Nav Buttons
-    //-----------------------------
-    .#{$prefix}--tabs__overflow-indicator--left,
-    .#{$prefix}--tabs__overflow-indicator--right {
+    .#{$prefix}--tab--overflow-nav-button--previous::before {
+      position: absolute;
       z-index: 1;
+      right: -$spacing-03;
       width: $spacing-03;
-      flex: 1 0 auto;
+      height: 100%;
+      background: linear-gradient(to left, rgba(255, 255, 255, 0), $background);
+      content: '';
     }
 
-    .#{$prefix}--tabs__overflow-indicator--left {
-      margin-right: -$spacing-03;
-      background-image: linear-gradient(to left, transparent, $background);
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tab--overflow-nav-button--previous::before {
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
-    .#{$prefix}--tabs__overflow-indicator--right {
-      margin-left: -$spacing-03;
-      background-image: linear-gradient(to right, transparent, $background);
+    .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left {
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer
+      );
     }
 
-    .#{$prefix}--tabs--scrollable--light
-      .#{$prefix}--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, transparent, $layer);
+    .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--right {
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer
+      );
     }
 
-    .#{$prefix}--tabs--scrollable--light
-      .#{$prefix}--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, transparent, $layer);
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--left {
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, transparent, $layer-accent);
-    }
-
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, transparent, $layer-accent);
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--right {
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
     // Safari-only media query
@@ -557,7 +210,7 @@
           );
         }
 
-        &.#{$prefix}--tabs--scrollable--container
+        &.#{$prefix}--tabs--contained
           .#{$prefix}--tabs__overflow-indicator--left {
           background-image: linear-gradient(
             to left,
@@ -566,7 +219,7 @@
           );
         }
 
-        &.#{$prefix}--tabs--scrollable--container
+        &.#{$prefix}--tabs--contained
           .#{$prefix}--tabs__overflow-indicator--right {
           background-image: linear-gradient(
             to right,
@@ -577,168 +230,59 @@
       }
     }
 
-    .#{$prefix}--tab--overflow-nav-button {
-      @include button-reset.reset;
-
-      display: flex;
-      width: $spacing-08;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-
-      &:focus {
-        @include focus-outline('outline');
-      }
-    }
-
-    .#{$prefix}--tab--overflow-nav-button--hidden {
-      display: none;
-    }
-
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tab--overflow-nav-button {
-      width: $spacing-09;
-      margin: 0;
-      background-color: $layer-accent;
-    }
-
-    .#{$prefix}--tab--overflow-nav-button svg {
-      fill: $icon-primary;
-    }
-
     //-----------------------------
     // Item
     //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-item {
+    .#{$prefix}--tabs__nav-item {
       @include reset;
 
       display: flex;
+      flex: 1 0 auto;
       padding: 0;
       cursor: pointer;
       transition: background-color $duration-fast-01
         motion(standard, productive);
     }
 
-    .#{$prefix}--tabs--scrollable__nav-item
-      + .#{$prefix}--tabs--scrollable__nav-item {
+    .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item {
       margin-left: rem(1px);
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item {
       background-color: $layer-accent;
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item
-      + .#{$prefix}--tabs--scrollable__nav-item {
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item
+      + .#{$prefix}--tabs__nav-item {
       margin-left: 0;
       // Draws the border without affecting the inner-content
       box-shadow: rem(-1px) 0 0 0 $border-strong;
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item
-      + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--selected,
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--selected
-      + .#{$prefix}--tabs--scrollable__nav-item {
-      box-shadow: none;
-    }
-
-    .#{$prefix}--tabs--scrollable__nav-item
-      .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
       transition: color $duration-fast-01 motion(standard, productive),
         border-bottom-color $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
     }
 
-    //-----------------------------
-    // Item Hover
-    //-----------------------------
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item:hover {
-      background-color: $layer-selected-hover;
-    }
-
-    //---------------------------------------------
-    // Item Disabled
-    //---------------------------------------------
-    .#{$prefix}--tabs--scrollable__nav-item--disabled,
-    .#{$prefix}--tabs--scrollable__nav-item--disabled:hover {
-      background-color: transparent;
-      cursor: not-allowed;
-      outline: none;
-    }
-
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled,
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled:hover {
-      background-color: button.$button-disabled;
-    }
-
-    //-----------------------------
-    // Item Selected
-    //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-item--selected {
-      transition: color $duration-fast-01 motion(standard, productive);
-    }
-
-    .#{$prefix}--tabs--scrollable__nav-item--selected
-      .#{$prefix}--tabs--scrollable__nav-link,
-    .#{$prefix}--tabs--scrollable__nav-item--selected
-      .#{$prefix}--tabs--scrollable__nav-link:focus,
-    .#{$prefix}--tabs--scrollable__nav-item--selected
-      .#{$prefix}--tabs--scrollable__nav-link:active {
-      @include type-style('productive-heading-01');
-
-      border-bottom: 2px solid $border-interactive;
-      color: $text-primary;
-    }
-
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item--selected,
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item--selected:hover {
-      background-color: $layer;
-
-      .#{$prefix}--tabs--scrollable__nav-link:focus,
-      .#{$prefix}--tabs--scrollable__nav-link:active {
-        box-shadow: none;
-      }
-    }
-
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item--selected
-      .#{$prefix}--tabs--scrollable__nav-link {
-      // Draws the border without affecting the inner-content
-      box-shadow: inset 0 2px 0 0 $border-interactive;
-      // height - vertical padding
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-    }
-
-    &.#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item--selected,
-    &.#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item--selected:hover {
-      background-color: $background;
-    }
-
     //-----------------------------
     // Link
     //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs__nav-link {
       @include button-reset.reset($width: false);
       @include focus-outline('reset');
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
+
+      @if not feature-flag-enabled('enable-v11-release') {
+        width: rem(160px);
+      }
 
       overflow: hidden;
-      width: rem(160px);
+      max-width: 10rem;
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;
-      text-align: left;
       text-decoration: none;
       text-overflow: ellipsis;
       transition: border $duration-fast-01 motion(standard, productive),
@@ -751,128 +295,205 @@
       }
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-link {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link {
       height: rem(48px);
       padding: $spacing-03 $spacing-05;
       border-bottom: 0;
       // height - vertical padding
       line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+      text-align: left;
     }
 
     //-----------------------------
-    //  Link Hover
+    // Icon Item
     //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-item:hover
-      .#{$prefix}--tabs--scrollable__nav-link {
-      border-bottom: $tab-underline-color-hover;
+
+    .#{$prefix}--tabs__nav-item--icon,
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
+      display: flex;
+      width: $icon-tab-size;
+      height: $icon-tab-size;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+
+    &.#{$prefix}--tabs__icon--lg {
+      @include custom-property.declaration('icon-tab-size', rem(48px));
+    }
+
+    //-----------------------------
+    // Item Hover
+    //-----------------------------
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item:hover {
+      background-color: $layer-selected-hover;
+    }
+
+    //-----------------------------
+    // Item Selected
+    //-----------------------------
+    .#{$prefix}--tabs__nav-item--selected {
+      border-bottom: 2px solid $border-interactive;
+      transition: color $duration-fast-01 motion(standard, productive);
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected
+      + .#{$prefix}--tabs__nav-item {
+      box-shadow: none;
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected {
+      // Draws the border without affecting the inner-content
+      box-shadow: inset 0 2px 0 0 $border-interactive;
+    }
+
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
+    .#{$prefix}--tabs__nav-item--selected,
+    .#{$prefix}--tabs__nav-item--selected:focus
+      .#{$prefix}--tabs__nav-link:focus,
+    .#{$prefix}--tabs__nav-item--selected:active
+      .#{$prefix}--tabs__nav-link:active {
+      @include type-style('heading-compact-01');
+
       color: $text-primary;
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item
-      .#{$prefix}--tabs--scrollable__nav-link {
-      border-bottom: none;
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected:hover {
+      background-color: $layer;
+      // height - vertical padding
+      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+
+      .#{$prefix}--tabs__nav-link:focus,
+      .#{$prefix}--tabs__nav-link:active {
+        box-shadow: none;
+      }
+    }
+
+    &.#{$prefix}--tabs--light.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--light.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item--selected:hover {
+      background-color: $background;
     }
 
     //-----------------------------
-    //  Link Disabled
+    //  Link Hover
     //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-item--disabled
-      .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link {
+      border-bottom: $tab-underline-color-hover;
+      color: $text-primary;
+    }
+
+    //-----------------------------
+    //  Item Disabled
+    //-----------------------------
+
+    .#{$prefix}--tabs__nav-item--disabled {
       border-bottom: $tab-underline-disabled;
+      background-color: transparent;
       color: $tab-text-disabled;
+      outline: none;
     }
 
-    .#{$prefix}--tabs--scrollable__nav-item--disabled:hover
-      .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs__nav-item--disabled:hover {
       border-bottom: $tab-underline-disabled;
       color: $tab-text-disabled;
       cursor: not-allowed;
-      pointer-events: none;
     }
 
-    .#{$prefix}--tabs--scrollable__nav-item--disabled
-      .#{$prefix}--tabs--scrollable__nav-link:focus,
-    .#{$prefix}--tabs--scrollable__nav-item--disabled
-      .#{$prefix}--tabs--scrollable__nav-link:active {
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
+      background-color: button.$button-disabled;
+    }
+
+    .#{$prefix}--tabs__nav-item--disabled:focus,
+    .#{$prefix}--tabs__nav-item--disabled:active {
       border-bottom: $tab-underline-disabled;
       outline: none;
+      pointer-events: none;
     }
 
-    .#{$prefix}--tabs--scrollable--light
-      .#{$prefix}--tabs--scrollable__nav-item--disabled
-      .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs--light
+      .#{$prefix}--tabs__nav-item--disabled
+      .#{$prefix}--tabs__nav-link {
       border-bottom-color: $border-subtle;
     }
 
-    .#{$prefix}--tabs--scrollable--light
-      .#{$prefix}--tabs--scrollable__nav-item--disabled:hover
-      .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs--light
+      .#{$prefix}--tabs__nav-item--disabled:hover
+      .#{$prefix}--tabs__nav-link {
       border-bottom-color: $border-subtle;
     }
 
-    .#{$prefix}--tabs--scrollable--light
-      .#{$prefix}--tabs--scrollable__nav-item--disabled
-      .#{$prefix}--tabs--scrollable__nav-link:focus,
-    .#{$prefix}--tabs--scrollable--light
-      .#{$prefix}--tabs--scrollable__nav-item--disabled
-      .#{$prefix}--tabs--scrollable__nav-link:active {
+    .#{$prefix}--tabs--light
+      .#{$prefix}--tabs__nav-item--disabled
+      .#{$prefix}--tabs__nav-link:focus,
+    .#{$prefix}--tabs--light
+      .#{$prefix}--tabs__nav-item--disabled
+      .#{$prefix}--tabs__nav-link:active {
       border-bottom-color: $border-subtle;
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item--disabled
-      .#{$prefix}--tabs--scrollable__nav-link {
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--disabled {
       border-bottom: none;
       color: $text-on-color-disabled;
     }
+  }
+  //-----------------------------
+  //  Tab Content Container
+  //-----------------------------
+  .#{$prefix}--tab-content {
+    padding: $spacing-05;
 
-    //-----------------------------
-    //  Tab Content Container
-    //-----------------------------
-    .#{$prefix}--tab-content {
-      padding: $spacing-05;
-    }
-
-    //-----------------------------
-    // Skeleton state
-    //-----------------------------
-    .#{$prefix}--tabs.#{$prefix}--skeleton {
-      cursor: default;
-      pointer-events: none;
+    &:focus {
+      @include focus-outline('outline');
     }
+  }
 
-    .#{$prefix}--tabs.#{$prefix}--skeleton
-      .#{$prefix}--tabs--scrollable__nav-link {
-      @include skeleton;
+  //-----------------------------
+  // Skeleton state
+  //-----------------------------
+  .#{$prefix}--tabs.#{$prefix}--skeleton {
+    cursor: default;
+    pointer-events: none;
+  }
 
-      width: rem(75px);
-    }
+  .#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--contained)
+    .#{$prefix}--tabs__nav-link {
+    border-bottom: 2px solid $skeleton-element;
+  }
 
-    .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
-      @include skeleton;
+  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
+    display: flex;
+    width: 10rem;
+    height: 100%;
+    align-items: center;
+    padding: 0 1rem;
+  }
 
-      width: rem(75px);
-      margin-right: rem(1px);
-    }
+  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link span {
+    @include skeleton;
 
-    .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
-      @include visually-hidden;
-    }
+    display: block;
+    width: 100%;
+    height: rem(14px);
   }
 
   // Windows HCM fix
-  .#{$prefix}--tabs--scrollable__nav-item
+  .#{$prefix}--tabs__nav-item
     .#{$prefix}--tabs__nav-item--selected
-    .#{$prefix}--tabs--scrollable__nav-item--selected {
+    .#{$prefix}--tabs__nav-item--selected {
     @include high-contrast-mode('focus');
   }
 
-  // stylelint-disable-next-line no-duplicate-selectors
-  .#{$prefix}--tabs--scrollable
-    .#{$prefix}--tabs--scrollable__nav-item--disabled
-    .#{$prefix}--tabs--scrollable__nav-link {
+  .#{$prefix}--tabs
+    .#{$prefix}--tabs__nav-item--disabled
+    .#{$prefix}--tabs__nav-link {
     @include high-contrast-mode('disabled');
   }
 }