@carbon/styles 0.9.0 → 0.10.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.9.0",
+  "version": "0.10.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -33,5 +33,5 @@
     "@carbon/test-utils": "^10.20.0",
     "css": "^3.0.0"
   },
-  "gitHead": "1836ce1cac8d9a08314b62058a5ed258798901a8"
+  "gitHead": "919fcfc3b4e247d057c6112f8cacf8aec33fe234"
 }

package/scss/components/button/_button.scss

@@ -15,7 +15,6 @@
 @use '../../utilities/focus-outline';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
-@use '../../utilities/tooltip' as *;
 @use '../../utilities/visually-hidden' as *;
 @use 'tokens' as *;
 
@@ -145,118 +144,9 @@
     &.#{$prefix}--btn--md {
       padding: $button-padding-ghost-field;
     }
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
-    @include tooltip--trigger('icon', 'bottom');
-
-    svg,
-    &:hover svg,
-    &:focus svg {
-      fill: currentColor;
-    }
-
-    &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::before,
-    &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::after,
-    &.#{$prefix}--btn--disabled .#{$prefix}--assistive-text {
-      overflow: hidden;
-      margin: -1px;
-      clip: rect(0, 0, 0, 0);
-      opacity: 0;
-    }
-  }
-
-  // Allow pointer events on tooltip when tooltip is visible
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only:not(.#{$prefix}--tooltip--hidden)
-    .#{$prefix}--assistive-text {
-    pointer-events: all;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
-    border-color: $focus;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:active:not([disabled]) {
-    border-color: transparent;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
-    svg {
-    outline-color: transparent;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:hover,
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:focus,
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:active {
-    cursor: not-allowed;
-    fill: $icon-on-color-disabled;
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--top {
-    @include tooltip--trigger('icon', 'top');
-    @include tooltip--placement('icon', 'top', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'top', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'top', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'top', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--right {
-    @include tooltip--trigger('icon', 'right');
-    @include tooltip--placement('icon', 'right', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'right', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'right', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'right', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--bottom {
-    @include tooltip--trigger('icon', 'bottom');
-    @include tooltip--placement('icon', 'bottom', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'bottom', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'bottom', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'bottom', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--left {
-    @include tooltip--trigger('icon', 'left');
-    @include tooltip--placement('icon', 'left', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'left', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'left', 'center');
-    }
 
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'left', 'end');
+    &:not([disabled]) svg {
+      fill: $icon-primary;
     }
   }
 

package/scss/components/button/_tokens.scss

@@ -62,11 +62,11 @@ $button-secondary: (
     ),
     (
       theme: themes.$g10,
-      value: #6f6f6f,
+      value: #393939,
     ),
     (
       theme: themes.$g90,
-      value: #393939,
+      value: #6f6f6f,
     ),
     (
       theme: themes.$g100,

package/scss/components/checkbox/_checkbox.scss

@@ -41,6 +41,9 @@
   // to match the specs.
   .#{$prefix}--checkbox {
     @include visually-hidden;
+    //even though its hidden, positioning is for native validation to be aligned to checkbox
+    top: 1.25rem;
+    left: 0.7rem;
   }
 
   // The label corresponds to the content inside of the `label` tag. Since we're

package/scss/components/form/_form.scss

@@ -50,16 +50,19 @@ $input-label-weight: 400 !default;
     @include type-style('label-01');
 
     display: inline-block;
-    @if not enabled('enable-v11-release') {
-      margin-bottom: $spacing-03;
-    }
-
+    margin-bottom: $spacing-03;
     color: $text-secondary;
     font-weight: $input-label-weight;
     line-height: 1rem;
     vertical-align: baseline;
   }
 
+  @if enabled('enable-v11-release') {
+    .#{$prefix}--label--no-margin {
+      margin-bottom: 0;
+    }
+  }
+
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {
     // When tooltip trigger is put in form label the trigger button should fit in the size of label
     // https://github.com/IBM/carbon-components-react/issues/115

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -16,6 +16,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/z-index' as *;
 
 /// Overflow menu styles
 /// @access public

package/scss/components/popover/_popover.scss

@@ -61,6 +61,15 @@ $popover-text-color: custom-property.get-var(
 // stylelint-disable-next-line length-zero-no-unit
 $popover-offset: custom-property.get-var('popover-offset', 0rem);
 
+// Customize the dimensions of the caret by specifying its width or height.
+// These values will be flipped in left or right directions to have the
+// correct dimensions
+$popover-caret-width: custom-property.get-var('popover-caret-width', rem(12px));
+$popover-caret-height: custom-property.get-var(
+  'popover-caret-height',
+  rem(6px)
+);
+
 @mixin popover {
   // Container
   .#{$prefix}--popover-container {
@@ -202,8 +211,8 @@ $popover-offset: custom-property.get-var('popover-offset', 0rem);
   .#{$prefix}--popover--bottom-right .#{$prefix}--popover-caret {
     bottom: 0;
     left: 50%;
-    width: rem(12px);
-    height: rem(6px);
+    width: $popover-caret-width;
+    height: $popover-caret-height;
     clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
     transform: translate(-50%, $popover-offset);
   }
@@ -248,8 +257,8 @@ $popover-offset: custom-property.get-var('popover-offset', 0rem);
   .#{$prefix}--popover--top-right .#{$prefix}--popover-caret {
     top: 0;
     left: 50%;
-    width: rem(12px);
-    height: rem(6px);
+    width: $popover-caret-width;
+    height: $popover-caret-height;
     clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
     transform: translate(-50%, calc(-1 * $popover-offset));
   }
@@ -296,8 +305,8 @@ $popover-offset: custom-property.get-var('popover-offset', 0rem);
   .#{$prefix}--popover--right-bottom .#{$prefix}--popover-caret {
     top: 50%;
     left: 100%;
-    width: rem(6px);
-    height: rem(12px);
+    width: $popover-caret-height;
+    height: $popover-caret-width;
     clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
     transform: translate(calc($popover-offset - 100%), -50%);
   }
@@ -348,8 +357,8 @@ $popover-offset: custom-property.get-var('popover-offset', 0rem);
   .#{$prefix}--popover--left-bottom .#{$prefix}--popover-caret {
     top: 50%;
     right: 100%;
-    width: rem(6px);
-    height: rem(12px);
+    width: $popover-caret-height;
+    height: $popover-caret-width;
     clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
     transform: translate(calc(-1 * $popover-offset + 100%), -50%);
   }

package/scss/components/tabs/_tabs.scss

@@ -33,437 +33,8 @@
 /// @access public
 /// @group tabs
 @mixin tabs {
-  .#{$prefix}--tabs {
-    @include reset;
-    @include type-style('body-short-01');
-
-    position: relative;
-    width: 100%;
-    height: auto;
-    color: $text-primary;
-    @include breakpoint(md) {
-      min-height: rem(40px);
-      background: none;
-    }
-  }
-
-  .#{$prefix}--tabs--container {
-    @include breakpoint(md) {
-      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) {
-      display: flex;
-      max-width: 100%;
-      max-height: none;
-      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;
-
-      + .#{$prefix}--tabs__nav-item {
-        box-shadow: 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) {
-      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;
-
-      .#{$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));
-      }
-
-      .#{$prefix}--tabs__nav-link:focus,
-      .#{$prefix}--tabs__nav-link:active {
-        box-shadow: none;
-      }
-    }
-  }
-
-  //-----------------------------
-  // 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;
-    }
-
-    @include breakpoint(md) {
-      width: rem(160px);
-      padding: $spacing-04 $spacing-05 $spacing-03;
-      border-bottom: $tab-underline-color;
-      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));
-    }
-  }
-
-  //-----------------------------
-  //  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}--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;
-    }
-  }
-
-  //-----------------------------
-  //  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');
-    }
-  }
-
-  //-----------------------------
-  // 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 {
+  .#{$prefix}--tabs {
     @include reset;
     @include type-style('body-short-01');
 
@@ -473,11 +44,11 @@
     min-height: rem(40px);
     color: $text-primary;
 
-    &.#{$prefix}--tabs--scrollable--container {
+    &.#{$prefix}--tabs--container {
       min-height: rem(48px);
     }
 
-    .#{$prefix}--tabs--scrollable__nav {
+    .#{$prefix}--tabs__nav {
       display: flex;
       overflow: auto hidden;
       width: auto;
@@ -516,23 +87,19 @@
       background-image: linear-gradient(to right, transparent, $background);
     }
 
-    .#{$prefix}--tabs--scrollable--light
-      .#{$prefix}--tabs__overflow-indicator--left {
+    .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left {
       background-image: linear-gradient(to left, transparent, $layer);
     }
 
-    .#{$prefix}--tabs--scrollable--light
-      .#{$prefix}--tabs__overflow-indicator--right {
+    .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--right {
       background-image: linear-gradient(to right, transparent, $layer);
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs__overflow-indicator--left {
+    &.#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left {
       background-image: linear-gradient(to left, transparent, $layer-accent);
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs__overflow-indicator--right {
+    &.#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--right {
       background-image: linear-gradient(to right, transparent, $layer-accent);
     }
 
@@ -557,7 +124,7 @@
           );
         }
 
-        &.#{$prefix}--tabs--scrollable--container
+        &.#{$prefix}--tabs--container
           .#{$prefix}--tabs__overflow-indicator--left {
           background-image: linear-gradient(
             to left,
@@ -566,7 +133,7 @@
           );
         }
 
-        &.#{$prefix}--tabs--scrollable--container
+        &.#{$prefix}--tabs--container
           .#{$prefix}--tabs__overflow-indicator--right {
           background-image: linear-gradient(
             to right,
@@ -595,8 +162,7 @@
       display: none;
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tab--overflow-nav-button {
+    &.#{$prefix}--tabs--container .#{$prefix}--tab--overflow-nav-button {
       width: $spacing-09;
       margin: 0;
       background-color: $layer-accent;
@@ -609,7 +175,7 @@
     //-----------------------------
     // Item
     //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-item {
+    .#{$prefix}--tabs__nav-item {
       @include reset;
 
       display: flex;
@@ -619,35 +185,32 @@
         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--container .#{$prefix}--tabs__nav-item {
       background-color: $layer-accent;
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item
-      + .#{$prefix}--tabs--scrollable__nav-item {
+    &.#{$prefix}--tabs--container
+      .#{$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 {
+    &.#{$prefix}--tabs--container
+      .#{$prefix}--tabs__nav-item
+      + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--container
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected
+      + .#{$prefix}--tabs__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);
@@ -656,79 +219,73 @@
     //-----------------------------
     // Item Hover
     //-----------------------------
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item:hover {
+    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover {
       background-color: $layer-selected-hover;
     }
 
     //---------------------------------------------
     // Item Disabled
     //---------------------------------------------
-    .#{$prefix}--tabs--scrollable__nav-item--disabled,
-    .#{$prefix}--tabs--scrollable__nav-item--disabled:hover {
+    .#{$prefix}--tabs__nav-item--disabled,
+    .#{$prefix}--tabs__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 {
+    &.#{$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 {
       background-color: button.$button-disabled;
     }
 
     //-----------------------------
     // Item Selected
     //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-item--selected {
+    .#{$prefix}--tabs__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 {
+    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link,
+    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:focus,
+    .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__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 {
+    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:hover {
       background-color: $layer;
 
-      .#{$prefix}--tabs--scrollable__nav-link:focus,
-      .#{$prefix}--tabs--scrollable__nav-link:active {
+      .#{$prefix}--tabs__nav-link:focus,
+      .#{$prefix}--tabs__nav-link:active {
         box-shadow: none;
       }
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item--selected
-      .#{$prefix}--tabs--scrollable__nav-link {
+    &.#{$prefix}--tabs--container
+      .#{$prefix}--tabs__nav-item--selected
+      .#{$prefix}--tabs__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 {
+    &.#{$prefix}--tabs--light.#{$prefix}--tabs--container
+      .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--light.#{$prefix}--tabs--container
+      .#{$prefix}--tabs__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');
@@ -754,8 +311,7 @@
       }
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-link {
+    &.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link {
       height: rem(48px);
       padding: $spacing-03 $spacing-05;
       border-bottom: 0;
@@ -766,116 +322,117 @@
     //-----------------------------
     //  Link Hover
     //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-item:hover
-      .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link {
       border-bottom: $tab-underline-color-hover;
       color: $text-primary;
     }
 
-    &.#{$prefix}--tabs--scrollable--container
-      .#{$prefix}--tabs--scrollable__nav-item
-      .#{$prefix}--tabs--scrollable__nav-link {
+    &.#{$prefix}--tabs--container
+      .#{$prefix}--tabs__nav-item
+      .#{$prefix}--tabs__nav-link {
       border-bottom: none;
     }
 
     //-----------------------------
     //  Link Disabled
     //-----------------------------
-    .#{$prefix}--tabs--scrollable__nav-item--disabled
-      .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
       border-bottom: $tab-underline-disabled;
       color: $tab-text-disabled;
     }
 
-    .#{$prefix}--tabs--scrollable__nav-item--disabled:hover
-      .#{$prefix}--tabs--scrollable__nav-link {
+    .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link {
       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__nav-item--disabled .#{$prefix}--tabs__nav-link:focus,
+    .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:active {
       border-bottom: $tab-underline-disabled;
       outline: 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--container
+      .#{$prefix}--tabs__nav-item--disabled
+      .#{$prefix}--tabs__nav-link {
       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--container)
+    .#{$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');
   }
 }

package/scss/components/tooltip/_index.scss

@@ -9,3 +9,4 @@
 @use 'tooltip';
 
 @include tooltip.tooltip;
+@include tooltip.icon-tooltip;

package/scss/components/tooltip/_tooltip.scss

@@ -12,6 +12,16 @@
 @use '../../utilities/custom-property';
 @use '../../utilities/convert';
 
+$tooltip-padding-block: custom-property.get-var(
+  'tooltip-padding-block',
+  spacing.$spacing-05
+);
+
+$tooltip-padding-inline: custom-property.get-var(
+  'tooltip-padding-inline',
+  spacing.$spacing-05
+);
+
 @mixin tooltip {
   .#{$prefix}--tooltip {
     @include custom-property.declaration('popover-offset', 12px);
@@ -21,7 +31,7 @@
     @include type.type-style('body-long-01');
 
     max-width: convert.rem(288px);
-    padding: spacing.$spacing-05;
+    padding: $tooltip-padding-block $tooltip-padding-inline;
 
     color: theme.$text-inverse;
   }
@@ -29,6 +39,22 @@
 
 @mixin icon-tooltip {
   .#{$prefix}--icon-tooltip {
-    padding: 3px spacing.$spacing-05;
+    @include custom-property.declaration(
+      'tooltip-padding-block',
+      convert.rem(2px)
+    );
+    @include custom-property.declaration(
+      'popover-caret-width',
+      convert.rem(8px)
+    );
+    @include custom-property.declaration(
+      'popover-caret-height',
+      convert.rem(4px)
+    );
+    @include custom-property.declaration('popover-offset', convert.rem(8px));
+  }
+
+  .#{$prefix}--icon-tooltip .#{$prefix}--tooltip-content {
+    @include type.type-style('body-short-01');
   }
 }