@patternfly/patternfly 6.0.0-alpha.120 → 6.0.0-alpha.122

package/components/Slider/slider.css

@@ -1,8 +1,8 @@
 :where(:root, .pf-v6-c-slider) {
   --pf-v6-c-slider--value: 0;
-  --pf-v6-c-slider__step--Left: 0;
-  --pf-v6-c-slider__rail--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-slider__rail--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-slider__step--InsetInlineStart: 0;
+  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-slider__rail-track--Height: 0.25rem;
   --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
@@ -10,7 +10,7 @@
   --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
   --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
-  --pf-v6-c-slider__step-tick--Top: var(--pf-t--global--spacer--md);
+  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-slider__step-tick--Width: 0.25rem;
   --pf-v6-c-slider__step-tick--Height: 0.25rem;
   --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
@@ -20,13 +20,13 @@
   --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
   --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
   --pf-v6-c-slider__step-label--TranslateX: -50%;
-  --pf-v6-c-slider__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-slider__rail-track--Height));
+  --pf-v6-c-slider__step-label--InsetBlockStart: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-slider__rail-track--Height));
   --pf-v6-c-slider__step--first-child__step-label--TranslateX: 0;
   --pf-v6-c-slider__step--last-child__step-label--TranslateX: -100%;
-  --pf-v6-c-slider__thumb--Top: calc(var(--pf-v6-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
+  --pf-v6-c-slider__thumb--InsetBlockStart: calc(var(--pf-v6-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
   --pf-v6-c-slider__thumb--Width: 1rem;
   --pf-v6-c-slider__thumb--Height: 1rem;
-  --pf-v6-c-slider__thumb--Left: var(--pf-v6-c-slider--value);
+  --pf-v6-c-slider__thumb--InsetInlineStart: var(--pf-v6-c-slider--value);
   --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-slider__thumb--TranslateX: -50%;
   --pf-v6-c-slider__thumb--TranslateY: -50%;
@@ -44,16 +44,16 @@
   --pf-v6-c-slider__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-slider__thumb--before--TranslateX: -50%;
   --pf-v6-c-slider__thumb--before--TranslateY: -50%;
-  --pf-v6-c-slider__value--MarginLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingLeft) + var(--pf-v6-c-form-control--PaddingRight) + 1.25rem);
+  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
   --pf-v6-c-slider__value--c-form-control--width-chars: 3;
   --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
   --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
   --pf-v6-c-slider__value--m-floating--TranslateY: -100%;
-  --pf-v6-c-slider__value--m-floating--Left: var(--pf-v6-c-slider--value);
+  --pf-v6-c-slider__value--m-floating--InsetInlineStart: var(--pf-v6-c-slider--value);
   --pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
-  --pf-v6-c-slider__actions--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-slider__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-slider__actions--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-slider__main--actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
@@ -86,8 +86,8 @@
 }
 
 .pf-v6-c-slider__rail {
-  padding-block-start: var(--pf-v6-c-slider__rail--PaddingTop);
-  padding-block-end: var(--pf-v6-c-slider__rail--PaddingBottom);
+  padding-block-start: var(--pf-v6-c-slider__rail--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-slider__rail--PaddingBlockEnd);
 }
 
 .pf-v6-c-slider__rail-track {
@@ -111,7 +111,7 @@
 .pf-v6-c-slider__step {
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--pf-v6-c-slider__step--Left);
+  inset-inline-start: var(--pf-v6-c-slider__step--InsetInlineStart);
   content: "";
 }
 .pf-v6-c-slider__step.pf-m-active {
@@ -129,7 +129,7 @@
 .pf-v6-c-slider__step-tick {
   transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
   position: absolute;
-  inset-block-start: var(--pf-v6-c-slider__step-tick--Top);
+  inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
   inset-inline-start: 0;
   width: var(--pf-v6-c-slider__step-tick--Width);
   height: var(--pf-v6-c-slider__step-tick--Height);
@@ -143,7 +143,7 @@
 .pf-v6-c-slider__step-label {
   transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
   position: absolute;
-  inset-block-start: var(--pf-v6-c-slider__step-label--Top);
+  inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
   word-break: normal;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
@@ -153,8 +153,8 @@
 .pf-v6-c-slider__thumb {
   transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
   position: absolute;
-  inset-block-start: var(--pf-v6-c-slider__thumb--Top);
-  inset-inline-start: var(--pf-v6-c-slider__thumb--Left);
+  inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
+  inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
   width: var(--pf-v6-c-slider__thumb--Width);
   height: var(--pf-v6-c-slider__thumb--Height);
   cursor: pointer;
@@ -192,14 +192,14 @@
 }
 
 .pf-v6-c-slider__value {
-  margin-inline-start: var(--pf-v6-c-slider__value--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-slider__value--MarginInlineStart);
 }
 .pf-v6-c-slider__value.pf-m-floating {
   transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
-  --pf-v6-c-slider__value--MarginLeft: 0;
+  --pf-v6-c-slider__value--MarginInlineStart: 0;
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--Left);
+  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
   z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
@@ -212,9 +212,9 @@
 
 .pf-v6-c-slider__actions {
   display: flex;
-  margin-inline-end: var(--pf-v6-c-slider__actions--MarginRight);
+  margin-inline-end: var(--pf-v6-c-slider__actions--MarginInlineEnd);
 }
 .pf-v6-c-slider__main ~ .pf-v6-c-slider__actions {
-  --pf-v6-c-slider__actions--MarginRight: 0;
-  margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginLeft);
+  --pf-v6-c-slider__actions--MarginInlineEnd: 0;
+  margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
 }

package/components/Slider/slider.scss

@@ -2,11 +2,11 @@
 
 :where(:root, .#{$slider}) {
   --#{$slider}--value: 0; // should always be set inline
-  --#{$slider}__step--Left: 0; // should always be set inline
+  --#{$slider}__step--InsetInlineStart: 0; // should always be set inline
 
   // rail
-  --#{$slider}__rail--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$slider}__rail--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$slider}__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$slider}__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$slider}__rail-track--Height: #{pf-size-prem(4px)};
   --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
   --#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
@@ -18,7 +18,7 @@
   --#{$slider}__steps--Height: var(--#{$slider}__steps--FontSize);
 
   // step tick
-  --#{$slider}__step-tick--Top: var(--pf-t--global--spacer--md);
+  --#{$slider}__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
   --#{$slider}__step-tick--Width: #{pf-size-prem(4px)};
   --#{$slider}__step-tick--Height: #{pf-size-prem(4px)};
   --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
@@ -30,15 +30,15 @@
 
   // step label
   --#{$slider}__step-label--TranslateX: -50%;
-  --#{$slider}__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--#{$slider}__rail-track--Height));
+  --#{$slider}__step-label--InsetBlockStart: calc(var(--pf-t--global--spacer--xl) + var(--#{$slider}__rail-track--Height));
   --#{$slider}__step--first-child__step-label--TranslateX: 0;
   --#{$slider}__step--last-child__step-label--TranslateX: -100%;
 
   // thumb
-  --#{$slider}__thumb--Top: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
+  --#{$slider}__thumb--InsetBlockStart: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
   --#{$slider}__thumb--Width: #{pf-size-prem(16px)};
   --#{$slider}__thumb--Height: #{pf-size-prem(16px)};
-  --#{$slider}__thumb--Left: var(--#{$slider}--value);
+  --#{$slider}__thumb--InsetInlineStart: var(--#{$slider}--value);
   --#{$slider}__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$slider}__thumb--TranslateX: -50%;
   --#{$slider}__thumb--TranslateY: -50%;
@@ -58,18 +58,18 @@
   --#{$slider}__thumb--before--TranslateY: -50%;
 
   // value
-  --#{$slider}__value--MarginLeft: var(--pf-t--global--spacer--md);
-  --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingLeft) + var(--#{$form-control}--PaddingRight) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
+  --#{$slider}__value--MarginInlineStart: var(--pf-t--global--spacer--md);
+  --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingInlineStart) + var(--#{$form-control}--PaddingInlineEnd) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
   --#{$slider}__value--c-form-control--width-chars: 3;
   --#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + var(--#{$slider}__value--c-form-control--width-chars) * 1ch);
   --#{$slider}__value--m-floating--TranslateX: -50%;
   --#{$slider}__value--m-floating--TranslateY: -100%;
-  --#{$slider}__value--m-floating--Left: var(--#{$slider}--value);
+  --#{$slider}__value--m-floating--InsetInlineStart: var(--#{$slider}--value);
   --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
 
   // actions
-  --#{$slider}__actions--MarginRight: var(--pf-t--global--spacer--sm);
-  --#{$slider}__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$slider}__actions--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$slider}__main--actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
 
   // disabled
   --#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
@@ -108,8 +108,8 @@
 }
 
 .#{$slider}__rail {
-  padding-block-start: var(--#{$slider}__rail--PaddingTop);
-  padding-block-end: var(--#{$slider}__rail--PaddingBottom);
+  padding-block-start: var(--#{$slider}__rail--PaddingBlockStart);
+  padding-block-end: var(--#{$slider}__rail--PaddingBlockEnd);
 }
 
 .#{$slider}__rail-track {
@@ -140,7 +140,7 @@
 .#{$slider}__step {
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--#{$slider}__step--Left); // set programmatically as an inline style
+  inset-inline-start: var(--#{$slider}__step--InsetInlineStart); // set programmatically as an inline style
   content: "";
 
   &.pf-m-active {
@@ -166,7 +166,7 @@
   );
 
   position: absolute;
-  inset-block-start: var(--#{$slider}__step-tick--Top);
+  inset-block-start: var(--#{$slider}__step-tick--InsetBlockStart);
   inset-inline-start: 0;
   width: var(--#{$slider}__step-tick--Width);
   height: var(--#{$slider}__step-tick--Height);
@@ -182,7 +182,7 @@
   );
 
   position: absolute;
-  inset-block-start: var(--#{$slider}__step-label--Top);
+  inset-block-start: var(--#{$slider}__step-label--InsetBlockStart);
   word-break: normal;
 }
 
@@ -194,8 +194,8 @@
   );
 
   position: absolute;
-  inset-block-start: var(--#{$slider}__thumb--Top);
-  inset-inline-start: var(--#{$slider}__thumb--Left);
+  inset-block-start: var(--#{$slider}__thumb--InsetBlockStart);
+  inset-inline-start: var(--#{$slider}__thumb--InsetInlineStart);
   width: var(--#{$slider}__thumb--Width);
   height: var(--#{$slider}__thumb--Height);
   cursor: pointer;
@@ -235,7 +235,7 @@
 }
 
 .#{$slider}__value {
-  margin-inline-start: var(--#{$slider}__value--MarginLeft);
+  margin-inline-start: var(--#{$slider}__value--MarginInlineStart);
 
   &.pf-m-floating {
     @include pf-v6-bidirectional-style(
@@ -244,11 +244,11 @@
       $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__value--m-floating--TranslateX))}, var(--#{$slider}__value--m-floating--TranslateY)),
     );
 
-    --#{$slider}__value--MarginLeft: 0;
+    --#{$slider}__value--MarginInlineStart: 0;
 
     position: absolute;
     inset-block-start: 0;
-    inset-inline-start: var(--#{$slider}__value--m-floating--Left);
+    inset-inline-start: var(--#{$slider}__value--m-floating--InsetInlineStart);
     z-index: var(--#{$slider}__value--m-floating--ZIndex);
   }
 
@@ -259,11 +259,11 @@
 
 .#{$slider}__actions {
   display: flex;
-  margin-inline-end: var(--#{$slider}__actions--MarginRight);
+  margin-inline-end: var(--#{$slider}__actions--MarginInlineEnd);
 
   .#{$slider}__main ~ & {
-    --#{$slider}__actions--MarginRight: 0;
+    --#{$slider}__actions--MarginInlineEnd: 0;
 
-    margin-inline-start: var(--#{$slider}__main--actions--MarginLeft);
+    margin-inline-start: var(--#{$slider}__main--actions--MarginInlineStart);
   }
 }

package/components/Switch/switch.css

@@ -3,7 +3,7 @@
   --pf-v6-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-switch__toggle-icon--FontSize: calc(var(--pf-v6-c-switch--FontSize) * .625);
   --pf-v6-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
-  --pf-v6-c-switch__toggle-icon--Left: calc(var(--pf-v6-c-switch--FontSize) * .4);
+  --pf-v6-c-switch__toggle-icon--InsetInlineStart: calc(var(--pf-v6-c-switch--FontSize) * .4);
   --pf-v6-c-switch__toggle-icon--Offset: 0.125rem;
   --pf-v6-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -28,7 +28,7 @@
   --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
   --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
-  --pf-v6-c-switch__toggle--before--Left: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
+  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
   --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
   --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
@@ -117,7 +117,7 @@
 .pf-v6-c-switch__toggle::before {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-start: var(--pf-v6-c-switch__toggle--before--Left);
+  inset-inline-start: var(--pf-v6-c-switch__toggle--before--InsetInlineStart);
   display: block;
   width: var(--pf-v6-c-switch__toggle--before--Width);
   height: var(--pf-v6-c-switch__toggle--before--Height);
@@ -139,7 +139,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-block-end: 0;
-  inset-inline-start: var(--pf-v6-c-switch__toggle-icon--Left);
+  inset-inline-start: var(--pf-v6-c-switch__toggle-icon--InsetInlineStart);
   display: flex;
   align-items: center;
   font-size: var(--pf-v6-c-switch__toggle-icon--FontSize);

package/components/Switch/switch.scss

@@ -8,7 +8,7 @@
   // Switch icon
   --#{$switch}__toggle-icon--FontSize: calc(var(--#{$switch}--FontSize) * .625); // We don't use an icon font-size here because this value allows the icon to scale relative to the switch's font-size.
   --#{$switch}__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
-  --#{$switch}__toggle-icon--Left: calc(var(--#{$switch}--FontSize) * .4);
+  --#{$switch}__toggle-icon--InsetInlineStart: calc(var(--#{$switch}--FontSize) * .4);
   --#{$switch}__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.
   --#{$switch}__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 
@@ -39,7 +39,7 @@
   --#{$switch}__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$switch}__toggle--before--Width: calc(var(--#{$switch}--FontSize) - var(--#{$switch}__toggle-icon--Offset));
   --#{$switch}__toggle--before--Height: var(--#{$switch}__toggle--before--Width);
-  --#{$switch}__toggle--before--Left: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
+  --#{$switch}__toggle--before--InsetInlineStart: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
   --#{$switch}__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$switch}__toggle--before--Transition: transform .25s ease 0s;
   --#{$switch}__toggle--Width: calc(var(--#{$switch}__toggle--Height) + var(--#{$switch}__toggle-icon--Offset) + var(--#{$switch}__toggle--before--Width));
@@ -153,7 +153,7 @@
   &::before {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-start: var(--#{$switch}__toggle--before--Left);
+    inset-inline-start: var(--#{$switch}__toggle--before--InsetInlineStart);
     display: block;
     width: var(--#{$switch}__toggle--before--Width);
     height: var(--#{$switch}__toggle--before--Height);
@@ -177,7 +177,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-block-end: 0;
-  inset-inline-start: var(--#{$switch}__toggle-icon--Left);
+  inset-inline-start: var(--#{$switch}__toggle-icon--InsetInlineStart);
   display: flex;
   align-items: center;
   font-size: var(--#{$switch}__toggle-icon--FontSize);

package/components/TabContent/tab-content.css

@@ -1,17 +1,17 @@
 :where(:root, .pf-v6-c-tab-content) {
-  --pf-v6-c-tab-content__body--PaddingTop: 0;
-  --pf-v6-c-tab-content__body--PaddingRight: 0;
-  --pf-v6-c-tab-content__body--PaddingBottom: 0;
-  --pf-v6-c-tab-content__body--PaddingLeft: 0;
+  --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
+  --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
+  --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;
+  --pf-v6-c-tab-content__body--PaddingInlineStart: 0;
   --pf-v6-c-tab-content--BackgroundColor: transparent;
-  --pf-v6-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 }
 
@@ -20,10 +20,10 @@
 }
 @media screen and (min-width: 1200px) {
   .pf-v6-c-tab-content {
-    --pf-v6-c-tab-content__body--m-padding--PaddingTop: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingTop);
-    --pf-v6-c-tab-content__body--m-padding--PaddingRight: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingRight);
-    --pf-v6-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBottom);
-    --pf-v6-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingLeft);
+    --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart);
+    --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd);
+    --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd);
+    --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart);
   }
 }
 .pf-v6-c-tab-content.pf-m-secondary {
@@ -31,14 +31,14 @@
 }
 
 .pf-v6-c-tab-content__body {
-  padding-block-start: var(--pf-v6-c-tab-content__body--PaddingTop);
-  padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingRight);
+  padding-block-start: var(--pf-v6-c-tab-content__body--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingInlineEnd);
 }
 .pf-v6-c-tab-content__body.pf-m-padding {
-  --pf-v6-c-tab-content__body--PaddingTop: var(--pf-v6-c-tab-content__body--m-padding--PaddingTop);
-  --pf-v6-c-tab-content__body--PaddingRight: var(--pf-v6-c-tab-content__body--m-padding--PaddingRight);
-  --pf-v6-c-tab-content__body--PaddingBottom: var(--pf-v6-c-tab-content__body--m-padding--PaddingBottom);
-  --pf-v6-c-tab-content__body--PaddingLeft: var(--pf-v6-c-tab-content__body--m-padding--PaddingLeft);
+  --pf-v6-c-tab-content__body--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart);
+  --pf-v6-c-tab-content__body--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd);
+  --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd);
+  --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
 }

package/components/TabContent/tab-content.scss

@@ -1,23 +1,23 @@
 @use '../../sass-utilities' as *;
 
 :where(:root, .#{$tab-content}) {
-  --#{$tab-content}__body--PaddingTop: 0;
-  --#{$tab-content}__body--PaddingRight: 0;
-  --#{$tab-content}__body--PaddingBottom: 0;
-  --#{$tab-content}__body--PaddingLeft: 0;
+  --#{$tab-content}__body--PaddingBlockStart: 0;
+  --#{$tab-content}__body--PaddingInlineEnd: 0;
+  --#{$tab-content}__body--PaddingBlockEnd: 0;
+  --#{$tab-content}__body--PaddingInlineStart: 0;
   --#{$tab-content}--BackgroundColor: transparent;
 
   // Padding
-  --#{$tab-content}__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$tab-content}__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$tab-content}__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$tab-content}__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$tab-content}__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$tab-content}__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$tab-content}__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$tab-content}__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
 
   // Match page padding
-  --#{$tab-content}__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$tab-content}__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$tab-content}__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --#{$tab-content}__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$tab-content}__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$tab-content}__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$tab-content}__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$tab-content}__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // Secondary modifier
   --#{$tab-content}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -27,10 +27,10 @@
   background-color: var(--#{$tab-content}--BackgroundColor);
 
   @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
-    --#{$tab-content}__body--m-padding--PaddingTop: var(--#{$tab-content}__body--m-padding--xl--PaddingTop);
-    --#{$tab-content}__body--m-padding--PaddingRight: var(--#{$tab-content}__body--m-padding--xl--PaddingRight);
-    --#{$tab-content}__body--m-padding--PaddingBottom: var(--#{$tab-content}__body--m-padding--xl--PaddingBottom);
-    --#{$tab-content}__body--m-padding--PaddingLeft: var(--#{$tab-content}__body--m-padding--xl--PaddingLeft);
+    --#{$tab-content}__body--m-padding--PaddingBlockStart: var(--#{$tab-content}__body--m-padding--xl--PaddingBlockStart);
+    --#{$tab-content}__body--m-padding--PaddingInlineEnd: var(--#{$tab-content}__body--m-padding--xl--PaddingInlineEnd);
+    --#{$tab-content}__body--m-padding--PaddingBlockEnd: var(--#{$tab-content}__body--m-padding--xl--PaddingBlockEnd);
+    --#{$tab-content}__body--m-padding--PaddingInlineStart: var(--#{$tab-content}__body--m-padding--xl--PaddingInlineStart);
   }
 
   &.pf-m-secondary {
@@ -40,15 +40,15 @@
 
 // Body
 .#{$tab-content}__body {
-  padding-block-start: var(--#{$tab-content}__body--PaddingTop);
-  padding-block-end: var(--#{$tab-content}__body--PaddingBottom);
-  padding-inline-start: var(--#{$tab-content}__body--PaddingLeft);
-  padding-inline-end: var(--#{$tab-content}__body--PaddingRight);
+  padding-block-start: var(--#{$tab-content}__body--PaddingBlockStart);
+  padding-block-end: var(--#{$tab-content}__body--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tab-content}__body--PaddingInlineStart);
+  padding-inline-end: var(--#{$tab-content}__body--PaddingInlineEnd);
 
   &.pf-m-padding {
-    --#{$tab-content}__body--PaddingTop: var(--#{$tab-content}__body--m-padding--PaddingTop);
-    --#{$tab-content}__body--PaddingRight: var(--#{$tab-content}__body--m-padding--PaddingRight);
-    --#{$tab-content}__body--PaddingBottom: var(--#{$tab-content}__body--m-padding--PaddingBottom);
-    --#{$tab-content}__body--PaddingLeft: var(--#{$tab-content}__body--m-padding--PaddingLeft);
+    --#{$tab-content}__body--PaddingBlockStart: var(--#{$tab-content}__body--m-padding--PaddingBlockStart);
+    --#{$tab-content}__body--PaddingInlineEnd: var(--#{$tab-content}__body--m-padding--PaddingInlineEnd);
+    --#{$tab-content}__body--PaddingBlockEnd: var(--#{$tab-content}__body--m-padding--PaddingBlockEnd);
+    --#{$tab-content}__body--PaddingInlineStart: var(--#{$tab-content}__body--m-padding--PaddingInlineStart);
   }
 }