@patternfly/patternfly 6.0.0-alpha.121 → 6.0.0-alpha.123

package/components/AppLauncher/app-launcher.scss

@@ -4,18 +4,18 @@
   // Menu
   --#{$app-launcher}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
   --#{$app-launcher}__menu--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$app-launcher}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu--Top: calc(100% + var(--#{$pf-global}--spacer--xs));
+  --#{$app-launcher}__menu--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__menu--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__menu--InsetBlockStart: calc(100% + var(--#{$pf-global}--spacer--xs));
   --#{$app-launcher}__menu--ZIndex: var(--pf-t--global--z-index--sm);
-  --#{$app-launcher}--m-top__menu--Top: 0;
+  --#{$app-launcher}--m-top__menu--InsetBlockStart: 0;
   --#{$app-launcher}--m-top__menu--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu
 
   // Expanded
-  --#{$app-launcher}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$app-launcher}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$app-launcher}__toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$app-launcher}__toggle--PaddingBlockStart: var(--#{$pf-global}--spacer--form-element);
+  --#{$app-launcher}__toggle--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
+  --#{$app-launcher}__toggle--PaddingBlockEnd: var(--#{$pf-global}--spacer--form-element);
+  --#{$app-launcher}__toggle--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
   --#{$app-launcher}__toggle--Color: var(--#{$pf-global}--Color--200);
   --#{$app-launcher}__toggle--hover--Color: var(--#{$pf-global}--Color--100);
   --#{$app-launcher}__toggle--active--Color: var(--#{$pf-global}--Color--100);
@@ -25,25 +25,25 @@
   --#{$app-launcher}__toggle--BackgroundColor: transparent;
 
   // Menu input
-  --#{$app-launcher}__menu-search--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-search--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--BottomBorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$app-launcher}__menu-search--BottomBorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$app-launcher}__menu-search--MarginBottom: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__menu-search--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__menu-search--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
+  --#{$app-launcher}__menu-search--PaddingBlockEnd: var(--#{$pf-global}--spacer--md);
+  --#{$app-launcher}__menu-search--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
+  --#{$app-launcher}__menu-search--BorderBlockEndColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$app-launcher}__menu-search--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$app-launcher}__menu-search--MarginBlockEnd: var(--#{$pf-global}--spacer--sm);
 
   // Menu item
-  --#{$app-launcher}__menu-item--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-item--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-item--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-item--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$app-launcher}__menu-item--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__menu-item--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
+  --#{$app-launcher}__menu-item--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__menu-item--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
   --#{$app-launcher}__menu-item--Color: var(--#{$pf-global}--Color--dark-100);
   --#{$app-launcher}__menu-item--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$app-launcher}__menu-item--Width: 100%;
   --#{$app-launcher}__menu-item--disabled--Color: var(--#{$pf-global}--Color--dark-200);
   --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$app-launcher}__menu-item--m-link--PaddingRight: 0;
+  --#{$app-launcher}__menu-item--m-link--PaddingInlineEnd: 0;
   --#{$app-launcher}__menu-item--m-link--hover--BackgroundColor: transparent;
   --#{$app-launcher}__menu-item--m-action--Color: var(--#{$pf-global}--Color--200);
   --#{$app-launcher}__menu-item--m-action--Width: auto;
@@ -56,29 +56,29 @@
   --#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--#{$pf-global}--palette--gold-500);
 
   // Menu item icon
-  --#{$app-launcher}__menu-item-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__menu-item-icon--MarginInlineEnd: var(--#{$pf-global}--spacer--sm);
   --#{$app-launcher}__menu-item-icon--Width: var(--#{$pf-global}--icon--FontSize--lg);
   --#{$app-launcher}__menu-item-icon--Height: var(--#{$pf-global}--icon--FontSize--lg);
 
   // Menu item external icon
   --#{$app-launcher}__menu-item-external-icon--Color: var(--#{$pf-global}--link--Color);
-  --#{$app-launcher}__menu-item-external-icon--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$app-launcher}__menu-item-external-icon--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
   --#{$app-launcher}__menu-item-external-icon--TranslateY: #{pf-size-prem(-1px)};
   --#{$app-launcher}__menu-item-external-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
 
   // Groups
-  --#{$app-launcher}__group--group--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__group-title--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__group-title--PaddingRight: var(--#{$app-launcher}__menu-item--PaddingRight);
-  --#{$app-launcher}__group-title--PaddingBottom: var(--#{$app-launcher}__menu-item--PaddingBottom);
-  --#{$app-launcher}__group-title--PaddingLeft: var(--#{$app-launcher}__menu-item--PaddingLeft);
+  --#{$app-launcher}__group--group--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__group-title--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}__group-title--PaddingInlineEnd: var(--#{$app-launcher}__menu-item--PaddingInlineEnd);
+  --#{$app-launcher}__group-title--PaddingBlockEnd: var(--#{$app-launcher}__menu-item--PaddingBlockEnd);
+  --#{$app-launcher}__group-title--PaddingInlineStart: var(--#{$app-launcher}__menu-item--PaddingInlineStart);
   --#{$app-launcher}__group-title--FontSize: var(--#{$pf-global}--FontSize--xs);
   --#{$app-launcher}__group-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$app-launcher}__group-title--Color: var(--#{$pf-global}--Color--dark-200);
 
   // Divider
-  --#{$app-launcher}--c-divider--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}--c-divider--MarginBottom: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}--c-divider--MarginBlockStart: var(--#{$pf-global}--spacer--sm);
+  --#{$app-launcher}--c-divider--MarginBlockEnd: var(--#{$pf-global}--spacer--sm);
 
   position: relative;
   display: inline-block;
@@ -91,21 +91,21 @@
   }
 
   .#{$divider} {
-    margin-block-start: var(--#{$app-launcher}--c-divider--MarginTop);
-    margin-block-end: var(--#{$app-launcher}--c-divider--MarginBottom);
+    margin-block-start: var(--#{$app-launcher}--c-divider--MarginBlockStart);
+    margin-block-end: var(--#{$app-launcher}--c-divider--MarginBlockEnd);
 
     // Support divider as last item in group to separate groups
     &:last-child {
-      --#{$app-launcher}--c-divider--MarginBottom: 0;
+      --#{$app-launcher}--c-divider--MarginBlockEnd: 0;
     }
   }
 }
 
 .#{$app-launcher}__toggle {
-  padding-block-start: var(--#{$app-launcher}__toggle--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__toggle--PaddingBottom);
-  padding-inline-start: var(--#{$app-launcher}__toggle--PaddingLeft);
-  padding-inline-end: var(--#{$app-launcher}__toggle--PaddingRight);
+  padding-block-start: var(--#{$app-launcher}__toggle--PaddingBlockStart);
+  padding-block-end: var(--#{$app-launcher}__toggle--PaddingBlockEnd);
+  padding-inline-start: var(--#{$app-launcher}__toggle--PaddingInlineStart);
+  padding-inline-end: var(--#{$app-launcher}__toggle--PaddingInlineEnd);
   color: var(--#{$app-launcher}__toggle--Color);
   background-color: var(--#{$app-launcher}__toggle--BackgroundColor);
   border: none;
@@ -132,11 +132,11 @@
 
 .#{$app-launcher}__menu {
   position: absolute;
-  inset-block-start: var(--#{$app-launcher}__menu--Top);
+  inset-block-start: var(--#{$app-launcher}__menu--InsetBlockStart);
   z-index: var(--#{$app-launcher}__menu--ZIndex);
   min-width: 100%;
-  padding-block-start: var(--#{$app-launcher}__menu--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__menu--PaddingBottom);
+  padding-block-start: var(--#{$app-launcher}__menu--PaddingBlockStart);
+  padding-block-end: var(--#{$app-launcher}__menu--PaddingBlockEnd);
   background-color: var(--#{$app-launcher}__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--#{$app-launcher}__menu--BoxShadow);
@@ -146,7 +146,7 @@
   }
 
   .#{$app-launcher}.pf-m-top & {
-    --#{$app-launcher}__menu--Top: var(--#{$app-launcher}--m-top__menu--Top);
+    --#{$app-launcher}__menu--InsetBlockStart: var(--#{$app-launcher}--m-top__menu--InsetBlockStart);
 
     transform: translateY(var(--#{$app-launcher}--m-top__menu--TranslateY));
   }
@@ -165,12 +165,12 @@
 }
 
 .#{$app-launcher}__menu-search {
-  padding-block-start: var(--#{$app-launcher}__menu-search--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__menu-search--PaddingBottom);
-  padding-inline-start: var(--#{$app-launcher}__menu-search--PaddingLeft);
-  padding-inline-end: var(--#{$app-launcher}__menu-search--PaddingRight);
-  margin-block-end: var(--#{$app-launcher}__menu-search--MarginBottom);
-  border-block-end: var(--#{$app-launcher}__menu-search--BottomBorderWidth) solid var(--#{$app-launcher}__menu-search--BottomBorderColor);
+  padding-block-start: var(--#{$app-launcher}__menu-search--PaddingBlockStart);
+  padding-block-end: var(--#{$app-launcher}__menu-search--PaddingBlockEnd);
+  padding-inline-start: var(--#{$app-launcher}__menu-search--PaddingInlineStart);
+  padding-inline-end: var(--#{$app-launcher}__menu-search--PaddingInlineEnd);
+  margin-block-end: var(--#{$app-launcher}__menu-search--MarginBlockEnd);
+  border-block-end: var(--#{$app-launcher}__menu-search--BorderBlockEndWidth) solid var(--#{$app-launcher}__menu-search--BorderBlockEndColor);
 }
 
 .#{$app-launcher}__menu-wrapper {
@@ -186,10 +186,10 @@
   display: flex;
   align-items: center;
   width: var(--#{$app-launcher}__menu-item--Width);
-  padding-block-start: var(--#{$app-launcher}__menu-item--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__menu-item--PaddingBottom);
-  padding-inline-start: var(--#{$app-launcher}__menu-item--PaddingLeft);
-  padding-inline-end: var(--#{$app-launcher}__menu-item--PaddingRight);
+  padding-block-start: var(--#{$app-launcher}__menu-item--PaddingBlockStart);
+  padding-block-end: var(--#{$app-launcher}__menu-item--PaddingBlockEnd);
+  padding-inline-start: var(--#{$app-launcher}__menu-item--PaddingInlineStart);
+  padding-inline-end: var(--#{$app-launcher}__menu-item--PaddingInlineEnd);
   font-weight: var(--#{$app-launcher}__menu-item--FontWeight);
   color: var(--#{$app-launcher}__menu-item--Color);
   white-space: nowrap;
@@ -241,7 +241,7 @@
   }
 
   &.pf-m-link {
-    --#{$app-launcher}__menu-item--PaddingRight: var(--#{$app-launcher}__menu-item--m-link--PaddingRight);
+    --#{$app-launcher}__menu-item--PaddingInlineEnd: var(--#{$app-launcher}__menu-item--m-link--PaddingInlineEnd);
     --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$app-launcher}__menu-item--m-link--hover--BackgroundColor);
   }
 
@@ -265,7 +265,7 @@
   justify-content: center;
   width: var(--#{$app-launcher}__menu-item-icon--Width);
   height: var(--#{$app-launcher}__menu-item-icon--Height);
-  margin-inline-end: var(--#{$app-launcher}__menu-item-icon--MarginRight);
+  margin-inline-end: var(--#{$app-launcher}__menu-item-icon--MarginInlineEnd);
 
   > * {
     max-width: 100%;
@@ -274,7 +274,7 @@
 }
 
 .#{$app-launcher}__menu-item-external-icon {
-  padding-inline-start: var(--#{$app-launcher}__menu-item-external-icon--PaddingLeft);
+  padding-inline-start: var(--#{$app-launcher}__menu-item-external-icon--PaddingInlineStart);
   margin-inline-start: auto;
   font-size: var(--#{$app-launcher}__menu-item-external-icon--FontSize);
   color: var(--#{$app-launcher}__menu-item-external-icon--Color);
@@ -284,15 +284,15 @@
 
 .#{$app-launcher}__group {
   & + & {
-    padding-block-start: var(--#{$app-launcher}__group--group--PaddingTop);
+    padding-block-start: var(--#{$app-launcher}__group--group--PaddingBlockStart);
   }
 }
 
 .#{$app-launcher}__group-title {
-  padding-block-start: var(--#{$app-launcher}__group-title--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__group-title--PaddingBottom);
-  padding-inline-start: var(--#{$app-launcher}__group-title--PaddingLeft);
-  padding-inline-end: var(--#{$app-launcher}__group-title--PaddingRight);
+  padding-block-start: var(--#{$app-launcher}__group-title--PaddingBlockStart);
+  padding-block-end: var(--#{$app-launcher}__group-title--PaddingBlockEnd);
+  padding-inline-start: var(--#{$app-launcher}__group-title--PaddingInlineStart);
+  padding-inline-end: var(--#{$app-launcher}__group-title--PaddingInlineEnd);
   font-size: var(--#{$app-launcher}__group-title--FontSize);
   font-weight: var(--#{$app-launcher}__group-title--FontWeight);
   color: var(--#{$app-launcher}__group-title--Color);

package/components/BackToTop/back-to-top.css

@@ -1,33 +1,33 @@
 :where(:root, .pf-v6-c-back-to-top) {
-  --pf-v6-c-back-to-top--Right: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-back-to-top--Bottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-back-to-top--md--Bottom: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-back-to-top--md--InsetBlockEnd: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-back-to-top--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-back-to-top--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-back-to-top--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-back-to-top--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-back-to-top--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-back-to-top--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-back-to-top--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-back-to-top--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-back-to-top--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 }
 @media (min-width: 768px) {
   :where(:root, .pf-v6-c-back-to-top) {
-    --pf-v6-c-back-to-top--Bottom: var(--pf-v6-c-back-to-top--md--Bottom);
+    --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-v6-c-back-to-top--md--InsetBlockEnd);
   }
 }
 
 .pf-v6-c-back-to-top {
   position: absolute;
-  inset-block-end: var(--pf-v6-c-back-to-top--Bottom);
-  inset-inline-end: var(--pf-v6-c-back-to-top--Right);
+  inset-block-end: var(--pf-v6-c-back-to-top--InsetBlockEnd);
+  inset-inline-end: var(--pf-v6-c-back-to-top--InsetInlineEnd);
 }
 .pf-v6-c-back-to-top.pf-m-hidden {
   display: none;
 }
 .pf-v6-c-back-to-top .pf-v6-c-button {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-back-to-top--c-button--FontSize);
-  --pf-v6-c-button--PaddingTop: var(--pf-v6-c-back-to-top--c-button--PaddingTop);
-  --pf-v6-c-button--PaddingRight: var(--pf-v6-c-back-to-top--c-button--PaddingRight);
-  --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-back-to-top--c-button--PaddingBottom);
-  --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-back-to-top--c-button--PaddingLeft);
+  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-back-to-top--c-button--PaddingBlockStart);
+  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-back-to-top--c-button--PaddingInlineEnd);
+  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-back-to-top--c-button--PaddingBlockEnd);
+  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-back-to-top--c-button--PaddingInlineStart);
   box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow);
 }

package/components/BackToTop/back-to-top.scss

@@ -1,25 +1,25 @@
 @use '../../sass-utilities' as *;
 
 :where(:root, .#{$back-to-top}) {
-  --#{$back-to-top}--Right: var(--pf-t--global--spacer--2xl);
-  --#{$back-to-top}--Bottom: var(--pf-t--global--spacer--lg);
-  --#{$back-to-top}--md--Bottom: var(--pf-t--global--spacer--2xl);
+  --#{$back-to-top}--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
+  --#{$back-to-top}--InsetBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$back-to-top}--md--InsetBlockEnd: var(--pf-t--global--spacer--2xl);
   --#{$back-to-top}--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
-  --#{$back-to-top}--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$back-to-top}--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$back-to-top}--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$back-to-top}--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$back-to-top}--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$back-to-top}--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$back-to-top}--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$back-to-top}--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$back-to-top}--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 
   @media (min-width: $pf-v6-global--breakpoint--md) {
-    --#{$back-to-top}--Bottom: var(--#{$back-to-top}--md--Bottom);
+    --#{$back-to-top}--InsetBlockEnd: var(--#{$back-to-top}--md--InsetBlockEnd);
   }
 }
 
 .#{$back-to-top} {
   position: absolute;
-  inset-block-end: var(--#{$back-to-top}--Bottom);
-  inset-inline-end: var(--#{$back-to-top}--Right);
+  inset-block-end: var(--#{$back-to-top}--InsetBlockEnd);
+  inset-inline-end: var(--#{$back-to-top}--InsetInlineEnd);
 
   &.pf-m-hidden {
     display: none;
@@ -27,10 +27,10 @@
 
   .#{$button} {
     --#{$button}--FontSize: var(--#{$back-to-top}--c-button--FontSize);
-    --#{$button}--PaddingTop: var(--#{$back-to-top}--c-button--PaddingTop);
-    --#{$button}--PaddingRight: var(--#{$back-to-top}--c-button--PaddingRight);
-    --#{$button}--PaddingBottom: var(--#{$back-to-top}--c-button--PaddingBottom);
-    --#{$button}--PaddingLeft: var(--#{$back-to-top}--c-button--PaddingLeft);
+    --#{$button}--PaddingBlockStart: var(--#{$back-to-top}--c-button--PaddingBlockStart);
+    --#{$button}--PaddingInlineEnd: var(--#{$back-to-top}--c-button--PaddingInlineEnd);
+    --#{$button}--PaddingBlockEnd: var(--#{$back-to-top}--c-button--PaddingBlockEnd);
+    --#{$button}--PaddingInlineStart: var(--#{$back-to-top}--c-button--PaddingInlineStart);
 
     box-shadow: var(--#{$back-to-top}--c-button--BoxShadow);
   }

package/components/Badge/badge.css

@@ -2,11 +2,11 @@
   --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
   --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
@@ -19,8 +19,8 @@
 .pf-v6-c-badge {
   display: inline-block;
   min-width: var(--pf-v6-c-badge--MinWidth);
-  padding-inline-start: var(--pf-v6-c-badge--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-badge--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
   font-size: var(--pf-v6-c-badge--FontSize);
   font-weight: var(--pf-v6-c-badge--FontWeight);
   color: var(--pf-v6-c-badge--Color);
@@ -41,6 +41,6 @@
 }
 
 .pf-v6-c-badge__toggle-icon {
-  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
   color: var(--pf-v6-c-badge__toggle-icon--Color);
 }

package/components/Badge/badge.scss

@@ -5,13 +5,13 @@
   --#{$badge}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$badge}--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$badge}--FontWeight: var(--pf-t--global--font--weight--body--bold); // TODO - design calls for 500/semi-bold, do we need a token for that or is bold ok
-  --#{$badge}--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$badge}--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$badge}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$badge}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$badge}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --#{$badge}--MinWidth: var(--pf-t--global--spacer--xl);
 
   // Toggle icon
-  --#{$badge}__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
+  --#{$badge}__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --#{$badge}__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
 
   // Modifiers
@@ -26,8 +26,8 @@
 .#{$badge} {
   display: inline-block;
   min-width: var(--#{$badge}--MinWidth);
-  padding-inline-start: var(--#{$badge}--PaddingLeft);
-  padding-inline-end: var(--#{$badge}--PaddingRight);
+  padding-inline-start: var(--#{$badge}--PaddingInlineStart);
+  padding-inline-end: var(--#{$badge}--PaddingInlineEnd);
   font-size: var(--#{$badge}--FontSize);
   font-weight: var(--#{$badge}--FontWeight);
   color: var(--#{$badge}--Color);
@@ -50,6 +50,6 @@
 }
 
 .#{$badge}__toggle-icon {
-  margin-inline-start: var(--#{$badge}__toggle-icon--MarginLeft);
+  margin-inline-start: var(--#{$badge}__toggle-icon--MarginInlineStart);
   color: var(--#{$badge}__toggle-icon--Color);
 }

package/components/Banner/banner.css

@@ -1,10 +1,10 @@
 :where(:root, .pf-v6-c-banner) {
-  --pf-v6-c-banner--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-banner--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-banner--md--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-banner--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-banner--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-banner--md--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-banner--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-banner--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-banner--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-banner--md--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
@@ -45,17 +45,17 @@
 }
 @media (min-width: 768px) {
   :where(:root, .pf-v6-c-banner) {
-    --pf-v6-c-banner--PaddingRight: var(--pf-v6-c-banner--md--PaddingRight);
-    --pf-v6-c-banner--PaddingLeft: var(--pf-v6-c-banner--md--PaddingLeft);
+    --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
+    --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
   }
 }
 
 .pf-v6-c-banner {
   flex-shrink: 0;
-  padding-block-start: var(--pf-v6-c-banner--PaddingTop);
-  padding-block-end: var(--pf-v6-c-banner--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-banner--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-banner--PaddingRight);
+  padding-block-start: var(--pf-v6-c-banner--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-banner--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-banner--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-banner--PaddingInlineEnd);
   font-size: var(--pf-v6-c-banner--FontSize);
   color: var(--pf-v6-c-banner--Color);
   white-space: nowrap;

package/components/Banner/banner.scss

@@ -1,19 +1,19 @@
 @use '../../sass-utilities' as *;
 
 :where(:root, .#{$banner}) {
-  --#{$banner}--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$banner}--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$banner}--md--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$banner}--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$banner}--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$banner}--md--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$banner}--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$banner}--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$banner}--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$banner}--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$banner}--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$banner}--md--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$banner}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
 
   @media (min-width: $pf-v6-global--breakpoint--md) {
-    --#{$banner}--PaddingRight: var(--#{$banner}--md--PaddingRight);
-    --#{$banner}--PaddingLeft: var(--#{$banner}--md--PaddingLeft);
+    --#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);
+    --#{$banner}--PaddingInlineStart: var(--#{$banner}--md--PaddingInlineStart);
   }
 
   // banner link variables
@@ -61,10 +61,10 @@
 
 .#{$banner} {
   flex-shrink: 0;
-  padding-block-start: var(--#{$banner}--PaddingTop);
-  padding-block-end: var(--#{$banner}--PaddingBottom);
-  padding-inline-start: var(--#{$banner}--PaddingLeft);
-  padding-inline-end: var(--#{$banner}--PaddingRight);
+  padding-block-start: var(--#{$banner}--PaddingBlockStart);
+  padding-block-end: var(--#{$banner}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$banner}--PaddingInlineStart);
+  padding-inline-end: var(--#{$banner}--PaddingInlineEnd);
   font-size: var(--#{$banner}--FontSize);
   color: var(--#{$banner}--Color);
   white-space: nowrap;

package/components/Breadcrumb/breadcrumb.css

@@ -1,9 +1,9 @@
 :where(:root, .pf-v6-c-breadcrumb) {
   --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v6-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-breadcrumb__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
   --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -14,10 +14,10 @@
   --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
-  --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v6-c-breadcrumb__item--MarginRight) * -1);
-  --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginRight) * -1);
+  --pf-v6-c-breadcrumb__dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-breadcrumb__dropdown--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
+  --pf-v6-c-breadcrumb__dropdown--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-breadcrumb__dropdown--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
   --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
 }
 
@@ -44,11 +44,11 @@
   --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
 }
 .pf-v6-c-breadcrumb__item:not(:last-child) {
-  margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginRight);
+  margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
 }
 
 .pf-v6-c-breadcrumb__item-divider {
-  margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginRight);
+  margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
   font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
   line-height: 1;
   color: var(--pf-v6-c-breadcrumb__item-divider--Color);
@@ -84,10 +84,10 @@ button.pf-v6-c-breadcrumb__link {
 }
 
 .pf-v6-c-breadcrumb__dropdown {
-  margin-block-start: var(--pf-v6-c-breadcrumb__dropdown--MarginTop);
-  margin-block-end: var(--pf-v6-c-breadcrumb__dropdown--MarginBottom);
-  margin-inline-start: var(--pf-v6-c-breadcrumb__dropdown--MarginLeft);
-  margin-inline-end: var(--pf-v6-c-breadcrumb__dropdown--MarginRight);
+  margin-block-start: var(--pf-v6-c-breadcrumb__dropdown--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-breadcrumb__dropdown--MarginBlockEnd);
+  margin-inline-start: var(--pf-v6-c-breadcrumb__dropdown--MarginInlineStart);
+  margin-inline-end: var(--pf-v6-c-breadcrumb__dropdown--MarginInlineEnd);
 }
 .pf-v6-c-breadcrumb__dropdown .pf-v6-c-dropdown__toggle {
   line-height: var(--pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);

package/components/Breadcrumb/breadcrumb.scss

@@ -4,11 +4,11 @@
   // Breadcrumb item
   --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$breadcrumb}__item--LineHeight: var(--pf-t--global--font--line-height--body);
-  --#{$breadcrumb}__item--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$breadcrumb}__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
   // Breadcrumb divider
   --#{$breadcrumb}__item-divider--Color: var(--pf-t--global--icon--color--regular);
-  --#{$breadcrumb}__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$breadcrumb}__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$breadcrumb}__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
 
   // Breadcrumb link
@@ -25,10 +25,10 @@
   --#{$breadcrumb}__heading--FontSize: var( --pf-t--global--font--size--body--sm);
 
   // breadcrumb dropdown
-  --#{$breadcrumb}__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --#{$breadcrumb}__dropdown--MarginRight: calc(var(--#{$breadcrumb}__item--MarginRight) * -1);
-  --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --#{$breadcrumb}__dropdown--MarginLeft: calc(var(--#{$breadcrumb}__item-divider--MarginRight) * -1);
+  --#{$breadcrumb}__dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$breadcrumb}__dropdown--MarginInlineEnd: calc(var(--#{$breadcrumb}__item--MarginInlineEnd) * -1);
+  --#{$breadcrumb}__dropdown--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$breadcrumb}__dropdown--MarginInlineStart: calc(var(--#{$breadcrumb}__item-divider--MarginInlineEnd) * -1);
 
   // breadcrumb toggle
   --#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -60,7 +60,7 @@
   }
 
   &:not(:last-child) {
-    margin-inline-end: var(--#{$breadcrumb}__item--MarginRight);
+    margin-inline-end: var(--#{$breadcrumb}__item--MarginInlineEnd);
   }
 }
 
@@ -68,7 +68,7 @@
 .#{$breadcrumb}__item-divider {
   @include pf-v6-mirror-inline-on-rtl;
 
-  margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginRight);
+  margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginInlineEnd);
   font-size: var(--#{$breadcrumb}__item-divider--FontSize);
   line-height: 1;
   color: var(--#{$breadcrumb}__item-divider--Color);
@@ -110,10 +110,10 @@
 }
 
 .#{$breadcrumb}__dropdown {
-  margin-block-start: var(--#{$breadcrumb}__dropdown--MarginTop);
-  margin-block-end: var(--#{$breadcrumb}__dropdown--MarginBottom);
-  margin-inline-start: var(--#{$breadcrumb}__dropdown--MarginLeft);
-  margin-inline-end: var(--#{$breadcrumb}__dropdown--MarginRight);
+  margin-block-start: var(--#{$breadcrumb}__dropdown--MarginBlockStart);
+  margin-block-end: var(--#{$breadcrumb}__dropdown--MarginBlockEnd);
+  margin-inline-start: var(--#{$breadcrumb}__dropdown--MarginInlineStart);
+  margin-inline-end: var(--#{$breadcrumb}__dropdown--MarginInlineEnd);
 
   .#{$dropdown}__toggle {
     line-height: var(--#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight);