@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/Tabs/tabs.scss

@@ -1,17 +1,17 @@
-// @debug $tabs; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-$pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$tabs}) {
+$pf-v6-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
+
+@include pf-root($tabs) {
   --#{$tabs}--inset: 0;
   --#{$tabs}--Width: auto;
   --#{$tabs}--before--BorderColor: var(--pf-t--global--border--color--default);
   --#{$tabs}--before--border-width--base: var(--pf-t--global--border--width--regular);
-  --#{$tabs}--before--BorderTopWidth: 0;
-  --#{$tabs}--before--BorderRightWidth: 0;
-  --#{$tabs}--before--BorderBottomWidth: var(--#{$tabs}--before--border-width--base);
-  --#{$tabs}--before--BorderLeftWidth: 0;
+  --#{$tabs}--before--BorderBlockStartWidth: 0;
+  --#{$tabs}--before--BorderInlineEndWidth: 0;
+  --#{$tabs}--before--BorderBlockEndWidth: var(--#{$tabs}--before--border-width--base);
+  --#{$tabs}--before--BorderInlineStartWidth: 0;
   --#{$tabs}--m-vertical--inset: var(--pf-t--global--spacer--sm);
 
   // Tabs, Page insets modifier
@@ -22,14 +22,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --#{$tabs}--m-vertical--MaxWidth: #{pf-size-prem(250px)};
   --#{$tabs}--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
   --#{$tabs}--m-vertical__list--before--BorderColor: var(--#{$tabs}--before--BorderColor);
-  --#{$tabs}--m-vertical__list--before--BorderTopWidth: 0;
-  --#{$tabs}--m-vertical__list--before--BorderRightWidth: 0;
-  --#{$tabs}--m-vertical__list--before--BorderBottomWidth: 0;
-  --#{$tabs}--m-vertical__list--before--BorderLeftWidth: var(--#{$tabs}--before--border-width--base);
-
-  // Tabs, Box modifier
-  --#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth: var(--#{$tabs}__link--before--border-width--base);
-  --#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
+  --#{$tabs}--m-vertical__list--before--BorderBlockStartWidth: 0;
+  --#{$tabs}--m-vertical__list--before--BorderInlineEndWidth: 0;
+  --#{$tabs}--m-vertical__list--before--BorderBlockEndWidth: 0;
+  --#{$tabs}--m-vertical__list--before--BorderInlineStartWidth: var(--#{$tabs}--before--border-width--base);
 
   // Tabs List
   --#{$tabs}__list--Display: flex;
@@ -48,25 +44,25 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --#{$tabs}--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$tabs}--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$tabs}--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
 
   // Tabs link
   --#{$tabs}__link--Color: var(--pf-t--global--text--color--subtle);
   --#{$tabs}__link--FontSize: var(--pf-t--global--font--size--sm);
   --#{$tabs}__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$tabs}__link--BorderRadius: var(--pf-t--global--border--radius--small);
-  --#{$tabs}__link--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$tabs}__link--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$tabs}__link--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$tabs}__link--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$tabs}__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$tabs}__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$tabs}__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$tabs}__link--ColumnGap: var(--pf-t--global--spacer--sm);
   --#{$tabs}__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$tabs}__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$tabs}__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$tabs}__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
   --#{$tabs}__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
-  --#{$tabs}--m-vertical__link--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$tabs}--m-vertical__link--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$tabs}--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$tabs}--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$tabs}--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$tabs}--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$tabs}--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
@@ -82,28 +78,28 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   // Link before
   --#{$tabs}__link--before--border-color--base: var(--pf-t--global--border--color--default);
   --#{$tabs}__link--before--border-width--base: var(--pf-t--global--border--width--regular);
-  --#{$tabs}__link--before--BorderTopColor: var(--#{$tabs}__link--before--border-color--base);
-  --#{$tabs}__link--before--BorderRightColor: var(--#{$tabs}__link--before--border-color--base);
-  --#{$tabs}__link--before--BorderBottomColor: var(--#{$tabs}__link--before--border-color--base);
-  --#{$tabs}__link--before--BorderLeftColor: var(--#{$tabs}__link--before--border-color--base);
-  --#{$tabs}__link--before--BorderTopWidth: 0;
-  --#{$tabs}__link--before--BorderRightWidth: 0;
-  --#{$tabs}__link--before--BorderBottomWidth: 0;
-  --#{$tabs}__link--before--BorderLeftWidth: 0;
-  --#{$tabs}__link--before--Left: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
-  --#{$tabs}__link--disabled--before--BorderRightWidth: 0;
-  --#{$tabs}__link--disabled--before--BorderBottomWidth: var(--#{$tabs}--before--border-width--base);
-  --#{$tabs}__link--disabled--before--BorderLeftWidth: 0;
+  --#{$tabs}__link--before--BorderBlockStartColor: var(--#{$tabs}__link--before--border-color--base);
+  --#{$tabs}__link--before--BorderInlineEndColor: var(--#{$tabs}__link--before--border-color--base);
+  --#{$tabs}__link--before--BorderBlockEndColor: var(--#{$tabs}__link--before--border-color--base);
+  --#{$tabs}__link--before--BorderInlineStartColor: var(--#{$tabs}__link--before--border-color--base);
+  --#{$tabs}__link--before--BorderBlockStartWidth: 0;
+  --#{$tabs}__link--before--BorderInlineEndWidth: 0;
+  --#{$tabs}__link--before--BorderBlockEndWidth: 0;
+  --#{$tabs}__link--before--BorderInlineStartWidth: 0;
+  --#{$tabs}__link--before--InsetInlineStart: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
+  --#{$tabs}__link--disabled--before--BorderInlineEndWidth: 0;
+  --#{$tabs}__link--disabled--before--BorderBlockEndWidth: var(--#{$tabs}--before--border-width--base);
+  --#{$tabs}__link--disabled--before--BorderInlineStartWidth: 0;
 
   // Link after
-  --#{$tabs}__link--after--Top: auto;
-  --#{$tabs}__link--after--Right: 0;
-  --#{$tabs}__link--after--Bottom: 0;
+  --#{$tabs}__link--after--InsetBlockStart: auto;
+  --#{$tabs}__link--after--InsetInlineEnd: 0;
+  --#{$tabs}__link--after--InsetBlockEnd: 0;
   --#{$tabs}__link--after--BorderColor: var(--pf-t--global--border--color--default);
   --#{$tabs}__link--after--BorderWidth: 0;
-  --#{$tabs}__link--after--BorderTopWidth: 0;
-  --#{$tabs}__link--after--BorderRightWidth: 0;
-  --#{$tabs}__link--after--BorderLeftWidth: 0;
+  --#{$tabs}__link--after--BorderBlockStartWidth: 0;
+  --#{$tabs}__link--after--BorderInlineEndWidth: 0;
+  --#{$tabs}__link--after--BorderInlineStartWidth: 0;
   --#{$tabs}__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --#{$tabs}__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
 
@@ -120,9 +116,9 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   // Scroll buttons before
   --#{$tabs}__scroll-button--before--BorderColor: var(--#{$tabs}--before--BorderColor);
   --#{$tabs}__scroll-button--before--border-width--base: var(--pf-t--global--border--width--regular);
-  --#{$tabs}__scroll-button--before--BorderRightWidth: 0;
-  --#{$tabs}__scroll-button--before--BorderBottomWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
-  --#{$tabs}__scroll-button--before--BorderLeftWidth: 0;
+  --#{$tabs}__scroll-button--before--BorderInlineEndWidth: 0;
+  --#{$tabs}__scroll-button--before--BorderBlockEndWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
+  --#{$tabs}__scroll-button--before--BorderInlineStartWidth: 0;
 
   // Scroll snap
   --#{$tabs}__list--ScrollSnapTypeAxis: x;
@@ -133,13 +129,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
   // Expandable
   --#{$tabs}__toggle--Display: flex;
-  --#{$tabs}__toggle-icon--Color: currentcolor;
   --#{$tabs}__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
   --#{$tabs}__toggle-icon--Rotate: 0;
-  --#{$tabs}__toggle-text--MarginLeft: 0;
-  --#{$tabs}__toggle-button__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
-  --#{$tabs}__toggle-button__toggle-text--Color: var(--pf-t--global--text--color--regular);
-  --#{$tabs}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$tabs}--m-expanded__toggle-icon--Rotate: 90deg;
   --#{$tabs}--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
   --#{$tabs}--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -150,11 +141,11 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   // Item action
   --#{$tabs}__item-action--c-button--FontSize: var(--pf-t--global--font--size--sm);
   --#{$tabs}--m-subtab__item-action--c-button--FontSize: var(--pf-t--global--font--size--xs);
-  --#{$tabs}__item-action-icon--MarginTop: #{pf-size-prem(2px)};
+  --#{$tabs}__item-action-icon--MarginBlockStart: #{pf-size-prem(2px)};
 
   // Add button
   --#{$tabs}__add--before--BorderColor: var(--#{$tabs}__link--before--border-color--base);
-  --#{$tabs}__add--before--BorderLeftWidth: var(--#{$tabs}__link--before--border-width--base);
+  --#{$tabs}__add--before--BorderInlineStartWidth: var(--#{$tabs}__link--before--border-width--base);
   --#{$tabs}__add--c-button--FontSize: var(--pf-t--global--font--size--sm);
   --#{$tabs}--m-subtab__add--c-button--FontSize: var(--pf-t--global--font--size--xs);
   --#{$tabs}__add--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -184,10 +175,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     inset-inline-start: 0;
     inset-inline-end: 0;
     border: solid var(--#{$tabs}--before--BorderColor);
-    border-block-start-width: var(--#{$tabs}--before--BorderTopWidth);
-    border-block-end-width: var(--#{$tabs}--before--BorderBottomWidth);
-    border-inline-start-width: var(--#{$tabs}--before--BorderLeftWidth);
-    border-inline-end-width: var(--#{$tabs}--before--BorderRightWidth);
+    border-block-start-width: var(--#{$tabs}--before--BorderBlockStartWidth);
+    border-block-end-width: var(--#{$tabs}--before--BorderBlockEndWidth);
+    border-inline-start-width: var(--#{$tabs}--before--BorderInlineStartWidth);
+    border-inline-end-width: var(--#{$tabs}--before--BorderInlineEndWidth);
   }
 
   // Filled style
@@ -195,16 +186,16 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     .#{$tabs}__list {
       flex-basis: 100%;
     }
-    
+
     .#{$tabs}__item {
       flex-grow: 1;
 
       &:first-child {
-        --#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth: 0;
+        --#{$tabs}--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth: 0;
       }
 
       &:last-child {
-        --#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth: 0;
+        --#{$tabs}--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth: 0;
       }
     }
 
@@ -233,15 +224,15 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   }
 
   &.pf-m-no-border-bottom {
-    --#{$tabs}--before--BorderBottomWidth: 0;
-    --#{$tabs}__link--disabled--before--BorderBottomWidth: 0;
+    --#{$tabs}--before--BorderBlockEndWidth: 0;
+    --#{$tabs}__link--disabled--before--BorderBlockEndWidth: 0;
   }
 
   // Remove bottom border for variants
   &.pf-m-box,
   &.pf-m-vertical {
     .#{$tabs}__link {
-      --#{$tabs}__link--after--BorderBottomWidth: 0;
+      --#{$tabs}__link--after--BorderBlockEndWidth: 0;
     }
   }
 
@@ -254,34 +245,25 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     --#{$tabs}__link--disabled--BackgroundColor: var(--#{$tabs}--m-box__link--disabled--BackgroundColor);
     --#{$tabs}__link--hover--BackgroundColor: var(--#{$tabs}--m-box__link--hover--BackgroundColor);
     --#{$tabs}__item--m-current__link--BackgroundColor: var(--#{$tabs}--m-box__item--m-current__link--BackgroundColor);
-    --#{$tabs}__link--before--BorderBottomWidth: var(--#{$tabs}__link--before--border-width--base);
-    --#{$tabs}__link--after--Top: 0;
-    --#{$tabs}__link--after--Bottom: auto;
+    --#{$tabs}__link--before--BorderBlockEndWidth: var(--#{$tabs}__link--before--border-width--base);
+    --#{$tabs}__link--after--InsetBlockStart: 0;
+    --#{$tabs}__link--after--InsetBlockEnd: auto;
 
     .#{$tabs}__link {
-      --#{$tabs}__link--after--BorderTopWidth: var(--#{$tabs}__link--after--BorderWidth);
+      --#{$tabs}__link--after--BorderBlockStartWidth: var(--#{$tabs}__link--after--BorderWidth);
     }
 
     // Remove border from last-child
     .#{$tabs}__item:last-child {
-      --#{$tabs}__link--before--BorderRightWidth: 0;
+      --#{$tabs}__link--before--BorderInlineEndWidth: 0;
     }
 
     .#{$tabs}__item.pf-m-current {
       --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__item--m-current__link--BackgroundColor);
-      --#{$tabs}__link--before--BorderBottomColor: var(--#{$tabs}__link--BackgroundColor);
+      --#{$tabs}__link--before--BorderBlockEndColor: var(--#{$tabs}__link--BackgroundColor);
     }
 
     // stylelint-disable
-    // Add border to first-child
-    .#{$tabs}__item.pf-m-current:first-child .#{$tabs}__link::before {
-      border-inline-start-width: var(--#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
-    }
-
-    // Add border to last-child
-    .#{$tabs}__item.pf-m-current:last-child .#{$tabs}__link::before {
-      border-inline-end-width: var(--#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth);
-    }
 
     // Collapse left border into scroll button when expanded
     &.pf-m-scrollable .#{$tabs}__item.pf-m-current:first-child .#{$tabs}__link::before {
@@ -297,7 +279,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     // stylelint-disable selector-max-class
     // Remove offset from current adjacent item
     .#{$tabs}__item.pf-m-current + .#{$tabs}__item {
-      --#{$tabs}__link--before--Left: 0;
+      --#{$tabs}__link--before--InsetInlineStart: 0;
     }
     // stylelint-enable
 
@@ -316,17 +298,17 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   &.pf-m-vertical {
     --#{$tabs}--Width: var(--#{$tabs}--m-vertical--Width);
     --#{$tabs}--inset: var(--#{$tabs}--m-vertical--inset);
-    --#{$tabs}--before--BorderBottomWidth: 0;
+    --#{$tabs}--before--BorderBlockEndWidth: 0;
     --#{$tabs}__item--PaddingInlineStart: var(--#{$tabs}--m-vertical__item--PaddingInlineStart);
     --#{$tabs}__item--PaddingInlineEnd: var(--#{$tabs}--m-vertical__item--PaddingInlineEnd);
-    --#{$tabs}__link--PaddingLeft: var(--#{$tabs}--m-vertical__link--PaddingLeft);
-    --#{$tabs}__link--PaddingRight: var(--#{$tabs}--m-vertical__link--PaddingRight);
-    --#{$tabs}__link--before--Left: 0;
-    --#{$tabs}__link--disabled--before--BorderBottomWidth: 0;
-    --#{$tabs}__link--disabled--before--BorderLeftWidth: var(--#{$tabs}--before--border-width--base);
-    --#{$tabs}__link--after--Top: 0;
-    --#{$tabs}__link--after--Bottom: 0;
-    --#{$tabs}__link--after--Right: auto;
+    --#{$tabs}__link--PaddingInlineStart: var(--#{$tabs}--m-vertical__link--PaddingInlineStart);
+    --#{$tabs}__link--PaddingInlineEnd: var(--#{$tabs}--m-vertical__link--PaddingInlineEnd);
+    --#{$tabs}__link--before--InsetInlineStart: 0;
+    --#{$tabs}__link--disabled--before--BorderBlockEndWidth: 0;
+    --#{$tabs}__link--disabled--before--BorderInlineStartWidth: var(--#{$tabs}--before--border-width--base);
+    --#{$tabs}__link--after--InsetBlockStart: 0;
+    --#{$tabs}__link--after--InsetBlockEnd: 0;
+    --#{$tabs}__link--after--InsetInlineEnd: auto;
     --#{$tabs}__list--ScrollSnapTypeAxis: var(--#{$tabs}--m-vertical__list--ScrollSnapTypeAxis);
 
     display: inline-flex;
@@ -345,10 +327,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
         position: absolute;
         inset-inline-end: auto;
         border: solid var(--#{$tabs}--m-vertical__list--before--BorderColor);
-        border-block-start-width: var(--#{$tabs}--m-vertical__list--before--BorderTopWidth);
-        border-block-end-width: var(--#{$tabs}--m-vertical__list--before--BorderBottomWidth);
-        border-inline-start-width: var(--#{$tabs}--m-vertical__list--before--BorderLeftWidth);
-        border-inline-end-width: var(--#{$tabs}--m-vertical__list--before--BorderRightWidth);
+        border-block-start-width: var(--#{$tabs}--m-vertical__list--before--BorderBlockStartWidth);
+        border-block-end-width: var(--#{$tabs}--m-vertical__list--before--BorderBlockEndWidth);
+        border-inline-start-width: var(--#{$tabs}--m-vertical__list--before--BorderInlineStartWidth);
+        border-inline-end-width: var(--#{$tabs}--m-vertical__list--before--BorderInlineEndWidth);
       }
     }
 
@@ -362,8 +344,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     }
 
     .#{$tabs}__link {
-      --#{$tabs}__link--after--BorderTopWidth: 0;
-      --#{$tabs}__link--after--BorderLeftWidth: var(--#{$tabs}__link--after--BorderWidth);
+      --#{$tabs}__link--after--BorderBlockStartWidth: 0;
+      --#{$tabs}__link--after--BorderInlineStartWidth: var(--#{$tabs}__link--after--BorderWidth);
 
       max-width: 100%;
       text-align: start;
@@ -374,10 +356,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       overflow-wrap: break-word;
     }
 
-    @each $breakpoint, $breakpoint-value in $pf-v5-c-tabs--breakpoint-map {
+    @each $breakpoint, $breakpoint-value in $pf-v6-c-tabs--breakpoint-map {
       $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-      @include pf-v5-apply-breakpoint($breakpoint) {
+      @include pf-v6-apply-breakpoint($breakpoint) {
         // stylelint-disable max-nesting-depth
         &.pf-m-expandable#{$breakpoint-name} {
           --#{$tabs}__list--Display: none;
@@ -402,7 +384,6 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
     &.pf-m-expanded {
       --#{$tabs}__list--Display: flex;
-      --#{$tabs}__toggle-icon--Color: var(--#{$tabs}--m-expanded__toggle-icon--Color);
       --#{$tabs}__toggle-icon--Rotate: var(--#{$tabs}--m-expanded__toggle-icon--Rotate);
     }
   }
@@ -410,12 +391,12 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   // Box, vertical
   &.pf-m-box.pf-m-vertical {
     --#{$tabs}--inset: var(--#{$tabs}--m-vertical--m-box--inset);
-    --#{$tabs}--m-vertical__list--before--BorderLeftWidth: 0;
-    --#{$tabs}--m-vertical__list--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
-    --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
-    --#{$tabs}__link--disabled--before--BorderRightWidth: var(--#{$tabs}--before--border-width--base);
-    --#{$tabs}__link--disabled--before--BorderBottomWidth: var(--#{$tabs}--before--border-width--base);
-    --#{$tabs}__link--disabled--before--BorderLeftWidth: 0;
+    --#{$tabs}--m-vertical__list--before--BorderInlineStartWidth: 0;
+    --#{$tabs}--m-vertical__list--before--BorderInlineEndWidth: var(--#{$tabs}--before--border-width--base);
+    --#{$tabs}__link--before--BorderInlineEndWidth: var(--#{$tabs}__link--before--border-width--base);
+    --#{$tabs}__link--disabled--before--BorderInlineEndWidth: var(--#{$tabs}--before--border-width--base);
+    --#{$tabs}__link--disabled--before--BorderBlockEndWidth: var(--#{$tabs}--before--border-width--base);
+    --#{$tabs}__link--disabled--before--BorderInlineStartWidth: 0;
 
     .#{$tabs}__list::before {
       inset-inline-start: auto;
@@ -424,21 +405,21 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
     // stylelint-disable selector-max-class
     .#{$tabs}__item:last-child {
-      --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--before--border-width--base);
+      --#{$tabs}__link--before--BorderInlineEndWidth: var(--#{$tabs}__link--before--border-width--base);
     }
     .#{$tabs}__item:first-child {
-      --#{$tabs}__link--before--BorderTopWidth: var(--#{$tabs}__link--before--border-width--base);
+      --#{$tabs}__link--before--BorderBlockStartWidth: var(--#{$tabs}__link--before--border-width--base);
     }
 
     // Add border right color and weight
     .#{$tabs}__item.pf-m-current {
-      --#{$tabs}__link--before--BorderRightColor: var(--#{$tabs}__item--m-current__link--BackgroundColor);
-      --#{$tabs}__link--before--BorderBottomColor: var(--#{$tabs}__link--before--border-color--base);
+      --#{$tabs}__link--before--BorderInlineEndColor: var(--#{$tabs}__item--m-current__link--BackgroundColor);
+      --#{$tabs}__link--before--BorderBlockEndColor: var(--#{$tabs}__link--before--border-color--base);
     }
 
     // Add border right color and weight
     .#{$tabs}__item:first-child.pf-m-current {
-      --#{$tabs}__link--before--BorderTopWidth: var(--#{$tabs}__link--before--border-width--base);
+      --#{$tabs}__link--before--BorderBlockStartWidth: var(--#{$tabs}__link--before--border-width--base);
     }
 
     // Offset vertical border to overlap horizontal border
@@ -479,34 +460,23 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__toggle-button {
-  --#{$tabs}__toggle-text--MarginLeft: var(--#{$tabs}__toggle-button__toggle-text--MarginLeft);
-  --#{$tabs}__toggle-text--Color: var(--#{$tabs}__toggle-button__toggle-text--Color);
-
   .#{$button} {
-    display: flex;
-    text-align: start;
+    justify-content: start;
     white-space: normal;
   }
 }
 
 .#{$tabs}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  color: var(--#{$tabs}__toggle-icon--Color);
   transition: var(--#{$tabs}__toggle-icon--Transition);
   transform: rotate(var(--#{$tabs}__toggle-icon--Rotate));
 }
 
-.#{$tabs}__toggle-text {
-  margin-inline-start: var(--#{$tabs}__toggle-text--MarginLeft);
-  color: var(--#{$tabs}__toggle-text--Color, inherit);
-}
-
-
 // Tab list
 .#{$tabs}__list {
-  @include pf-v5-overflow-hide-scroll;
+  @include pf-v6-overflow-hide-scroll;
 
   position: relative;
   display: var(--#{$tabs}__list--Display);
@@ -590,50 +560,50 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 .#{$tabs}__link {
   @at-root .#{$tabs}__item.pf-m-action,
   & {
-    --#{$tabs}__link--after--BorderBottomWidth: var(--#{$tabs}__link--after--BorderWidth); // Set default border target
+    --#{$tabs}__link--after--BorderBlockEndWidth: var(--#{$tabs}__link--after--BorderWidth); // Set default border target
   }
-  
+
   display: flex;
   flex: 1;
   column-gap: var(--#{$tabs}__link--ColumnGap);
   align-items: center;
-  padding-block-start: var(--#{$tabs}__link--PaddingTop);
-  padding-block-end: var(--#{$tabs}__link--PaddingBottom);
-  padding-inline-start: var(--#{$tabs}__link--PaddingLeft);
-  padding-inline-end: var(--#{$tabs}__link--PaddingRight);
+  padding-block-start: var(--#{$tabs}__link--PaddingBlockStart);
+  padding-block-end: var(--#{$tabs}__link--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tabs}__link--PaddingInlineStart);
+  padding-inline-end: var(--#{$tabs}__link--PaddingInlineEnd);
   font-size: var(--#{$tabs}__link--FontSize);
   color: var(--#{$tabs}__link--Color);
   text-decoration: none;
   background-color: var(--#{$tabs}__link--BackgroundColor);
   border-radius: var(--#{$tabs}__link--BorderRadius);
-  
+
   @at-root .#{$tabs}__item.pf-m-action,
   & {
     &::before {
       pointer-events: none;
-      border-block-start-color: var(--#{$tabs}__link--before--BorderTopColor);
-      border-block-start-width: var(--#{$tabs}__link--before--BorderTopWidth);
-      border-block-end-color: var(--#{$tabs}__link--before--BorderBottomColor);
-      border-block-end-width: var(--#{$tabs}__link--before--BorderBottomWidth);
-      border-inline-start-color: var(--#{$tabs}__link--before--BorderLeftColor);
-      border-inline-start-width: var(--#{$tabs}__link--before--BorderLeftWidth);
-      border-inline-end-color: var(--#{$tabs}__link--before--BorderRightColor);
-      border-inline-end-width: var(--#{$tabs}__link--before--BorderRightWidth);
+      border-block-start-color: var(--#{$tabs}__link--before--BorderBlockStartColor);
+      border-block-start-width: var(--#{$tabs}__link--before--BorderBlockStartWidth);
+      border-block-end-color: var(--#{$tabs}__link--before--BorderBlockEndColor);
+      border-block-end-width: var(--#{$tabs}__link--before--BorderBlockEndWidth);
+      border-inline-start-color: var(--#{$tabs}__link--before--BorderInlineStartColor);
+      border-inline-start-width: var(--#{$tabs}__link--before--BorderInlineStartWidth);
+      border-inline-end-color: var(--#{$tabs}__link--before--BorderInlineEndColor);
+      border-inline-end-width: var(--#{$tabs}__link--before--BorderInlineEndWidth);
     }
   }
 
   @at-root .#{$tabs}__item.pf-m-action,
   & {
     &::after {
-      inset-block-start: var(--#{$tabs}__link--after--Top);
-      inset-block-end: var(--#{$tabs}__link--after--Bottom);
-      inset-inline-start: var(--#{$tabs}__link--before--Left); // use the ::before Left value to offset the top border / overlap left border
-      inset-inline-end: var(--#{$tabs}__link--after--Right);
+      inset-block-start: var(--#{$tabs}__link--after--InsetBlockStart);
+      inset-block-end: var(--#{$tabs}__link--after--InsetBlockEnd);
+      inset-inline-start: var(--#{$tabs}__link--before--InsetInlineStart); // use the ::before Left value to offset the top border / overlap left border
+      inset-inline-end: var(--#{$tabs}__link--after--InsetInlineEnd);
       border-color: var(--#{$tabs}__link--after--BorderColor);
-      border-block-start-width: var(--#{$tabs}__link--after--BorderTopWidth);
-      border-block-end-width: var(--#{$tabs}__link--after--BorderBottomWidth);
-      border-inline-start-width: var(--#{$tabs}__link--after--BorderLeftWidth);
-      border-inline-end-width: var(--#{$tabs}__link--after--BorderRightWidth);
+      border-block-start-width: var(--#{$tabs}__link--after--BorderBlockStartWidth);
+      border-block-end-width: var(--#{$tabs}__link--after--BorderBlockEndWidth);
+      border-inline-start-width: var(--#{$tabs}__link--after--BorderInlineStartWidth);
+      border-inline-end-width: var(--#{$tabs}__link--after--BorderInlineEndWidth);
     }
   }
 
@@ -651,15 +621,13 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   &.pf-m-disabled,
   &.pf-m-aria-disabled {
     --#{$tabs}__link--Color: var(--#{$tabs}__link--disabled--Color);
-    --#{$tabs}__link--before--BorderRightWidth: var(--#{$tabs}__link--disabled--before--BorderRightWidth);
-    --#{$tabs}__link--before--BorderBottomWidth: var(--#{$tabs}__link--disabled--before--BorderBottomWidth);
-    --#{$tabs}__link--before--BorderLeftWidth: var(--#{$tabs}__link--disabled--before--BorderLeftWidth);
+    --#{$tabs}__link--before--BorderInlineEndWidth: var(--#{$tabs}__link--disabled--before--BorderInlineEndWidth);
+    --#{$tabs}__link--before--BorderBlockEndWidth: var(--#{$tabs}__link--disabled--before--BorderBlockEndWidth);
+    --#{$tabs}__link--before--BorderInlineStartWidth: var(--#{$tabs}__link--disabled--before--BorderInlineStartWidth);
     --#{$tabs}__link--after--BorderWidth: 0;
   }
 
-  &:disabled,
-  &.pf-m-disabled,
-  &.pf-m-aria-disabled {
+  &:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled) {
     --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--disabled--BackgroundColor);
   }
 
@@ -677,7 +645,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__link-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   align-self: end;
   font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
@@ -696,7 +664,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
 .#{$tabs}__item-action-icon {
   display: inline-block;
-  margin-block-start: var(--#{$tabs}__item-action-icon--MarginTop);
+  margin-block-start: var(--#{$tabs}__item-action-icon--MarginBlockStart);
 }
 
 // Scroll buttons
@@ -707,24 +675,24 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   padding-inline-end: var(--#{$tabs}__scroll-button--PaddingInlineEnd);
   opacity: 0;
   transition: margin var(--#{$tabs}__scroll-button--TransitionDuration--margin), transform var(--#{$tabs}__scroll-button--TransitionDuration--transform), opacity var(--#{$tabs}__scroll-button--TransitionDuration--opacity);
-  
+
     &::before {
     border-color: var(--#{$tabs}__scroll-button--before--BorderColor);
     border-block-start-width: 0;
-    border-block-end-width: var(--#{$tabs}__scroll-button--before--BorderBottomWidth);
-    border-inline-start-width: var(--#{$tabs}__scroll-button--before--BorderLeftWidth);
-    border-inline-end-width: var(--#{$tabs}__scroll-button--before--BorderRightWidth);
+    border-block-end-width: var(--#{$tabs}__scroll-button--before--BorderBlockEndWidth);
+    border-inline-start-width: var(--#{$tabs}__scroll-button--before--BorderInlineStartWidth);
+    border-inline-end-width: var(--#{$tabs}__scroll-button--before--BorderInlineEndWidth);
   }
 
   &:nth-of-type(1) {
-    --#{$tabs}__scroll-button--before--BorderRightWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
+    --#{$tabs}__scroll-button--before--BorderInlineEndWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
 
     margin-inline-end: calc(var(--#{$tabs}__scroll-button--Width) * -1);
     transform: translateX(-100%);
   }
 
   &:nth-of-type(2) {
-    --#{$tabs}__scroll-button--before--BorderLeftWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
+    --#{$tabs}__scroll-button--before--BorderInlineStartWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
 
     margin-inline-start: calc(var(--#{$tabs}__scroll-button--Width) * -1);
     transform: translateX(100%);
@@ -740,7 +708,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   padding-inline-end: var(--#{$tabs}__add--PaddingInlineEnd);
 
   &::before {
-    border-inline-start: var(--#{$tabs}__add--before--BorderLeftWidth) solid var(--#{$tabs}__add--before--BorderColor);
+    border-inline-start: var(--#{$tabs}__add--before--BorderInlineStartWidth) solid var(--#{$tabs}__add--before--BorderColor);
   }
 
   .#{$button} {
@@ -750,11 +718,11 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
 // stylelint-disable no-duplicate-selectors, max-nesting-depth
 .#{$tabs} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-tabs--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-tabs--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      @each $spacer, $spacer-value in $pf-v5-c-tabs--spacer-map {
+    @include pf-v6-apply-breakpoint($breakpoint) {
+      @each $spacer, $spacer-value in $pf-v6-c-tabs--spacer-map {
         &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
           --#{$tabs}--inset: #{$spacer-value};
           --#{$tabs}--m-vertical--inset: #{$spacer-value};