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

package/components/Sidebar/sidebar.css

@@ -3,29 +3,29 @@
   --pf-v6-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
   --pf-v6-c-sidebar--BorderWidth--base: var(--pf-t--global--border--width--regular);
   --pf-v6-c-sidebar--BorderColor--base: var(--pf-t--global--border--color--default);
-  --pf-v6-c-sidebar__panel--PaddingTop: 0;
-  --pf-v6-c-sidebar__panel--PaddingRight: 0;
-  --pf-v6-c-sidebar__panel--PaddingBottom: 0;
-  --pf-v6-c-sidebar__panel--PaddingLeft: 0;
+  --pf-v6-c-sidebar__panel--PaddingBlockStart: 0;
+  --pf-v6-c-sidebar__panel--PaddingInlineEnd: 0;
+  --pf-v6-c-sidebar__panel--PaddingBlockEnd: 0;
+  --pf-v6-c-sidebar__panel--PaddingInlineStart: 0;
   --pf-v6-c-sidebar__panel--Order: -1;
-  --pf-v6-c-sidebar__panel--m-padding--PaddingTop: var(--pf-v6-c-sidebar--inset);
-  --pf-v6-c-sidebar__panel--m-padding--PaddingRight: var(--pf-v6-c-sidebar--inset);
-  --pf-v6-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-v6-c-sidebar--inset);
-  --pf-v6-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-v6-c-sidebar--inset);
-  --pf-v6-c-sidebar__content--PaddingTop: 0;
-  --pf-v6-c-sidebar__content--PaddingRight: 0;
-  --pf-v6-c-sidebar__content--PaddingBottom: 0;
-  --pf-v6-c-sidebar__content--PaddingLeft: 0;
+  --pf-v6-c-sidebar__panel--m-padding--PaddingBlockStart: var(--pf-v6-c-sidebar--inset);
+  --pf-v6-c-sidebar__panel--m-padding--PaddingInlineEnd: var(--pf-v6-c-sidebar--inset);
+  --pf-v6-c-sidebar__panel--m-padding--PaddingBlockEnd: var(--pf-v6-c-sidebar--inset);
+  --pf-v6-c-sidebar__panel--m-padding--PaddingInlineStart: var(--pf-v6-c-sidebar--inset);
+  --pf-v6-c-sidebar__content--PaddingBlockStart: 0;
+  --pf-v6-c-sidebar__content--PaddingInlineEnd: 0;
+  --pf-v6-c-sidebar__content--PaddingBlockEnd: 0;
+  --pf-v6-c-sidebar__content--PaddingInlineStart: 0;
   --pf-v6-c-sidebar__content--Order: 1;
-  --pf-v6-c-sidebar__content--m-padding--PaddingTop: var(--pf-v6-c-sidebar--inset);
-  --pf-v6-c-sidebar__content--m-padding--PaddingRight: var(--pf-v6-c-sidebar--inset);
-  --pf-v6-c-sidebar__content--m-padding--PaddingBottom: var(--pf-v6-c-sidebar--inset);
-  --pf-v6-c-sidebar__content--m-padding--PaddingLeft: var(--pf-v6-c-sidebar--inset);
+  --pf-v6-c-sidebar__content--m-padding--PaddingBlockStart: var(--pf-v6-c-sidebar--inset);
+  --pf-v6-c-sidebar__content--m-padding--PaddingInlineEnd: var(--pf-v6-c-sidebar--inset);
+  --pf-v6-c-sidebar__content--m-padding--PaddingBlockEnd: var(--pf-v6-c-sidebar--inset);
+  --pf-v6-c-sidebar__content--m-padding--PaddingInlineStart: var(--pf-v6-c-sidebar--inset);
   --pf-v6-c-sidebar__main--FlexDirection: column;
   --pf-v6-c-sidebar__main--md--FlexDirection: row;
   --pf-v6-c-sidebar__main--AlignItems: stretch;
   --pf-v6-c-sidebar__main--md--AlignItems: flex-start;
-  --pf-v6-c-sidebar__main--child--MarginTop: 0;
+  --pf-v6-c-sidebar__main--child--MarginBlockStart: 0;
   --pf-v6-c-sidebar--m-gutter__main--Gap: var(--pf-v6-c-sidebar--inset);
   --pf-v6-c-sidebar__main--m-border--before--Display: none;
   --pf-v6-c-sidebar__main--m-border--before--md--Display: block;
@@ -37,20 +37,20 @@
   --pf-v6-c-sidebar--m-stack__main--FlexDirection: column;
   --pf-v6-c-sidebar--m-stack__main--AlignItems: stretch;
   --pf-v6-c-sidebar--m-stack__panel--Position: sticky;
-  --pf-v6-c-sidebar--m-stack__panel--Top: 0;
+  --pf-v6-c-sidebar--m-stack__panel--InsetBlockStart: 0;
   --pf-v6-c-sidebar--m-stack__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
   --pf-v6-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
   --pf-v6-c-sidebar--m-split__main--AlignItems: flex-start;
   --pf-v6-c-sidebar--m-split__main--FlexDirection: row;
   --pf-v6-c-sidebar--m-split__panel--Position: static;
-  --pf-v6-c-sidebar--m-split__panel--Top: auto;
+  --pf-v6-c-sidebar--m-split__panel--InsetBlockStart: auto;
   --pf-v6-c-sidebar--m-split--m-panel-right__panel--Order: 1;
   --pf-v6-c-sidebar--m-split__main--m-border--before--Display: block;
   --pf-v6-c-sidebar__panel--FlexBasis--base: auto;
   --pf-v6-c-sidebar__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
-  --pf-v6-c-sidebar__panel--Top: 0;
-  --pf-v6-c-sidebar__panel--md--Top: auto;
+  --pf-v6-c-sidebar__panel--InsetBlockStart: 0;
+  --pf-v6-c-sidebar__panel--md--InsetBlockStart: auto;
   --pf-v6-c-sidebar__panel--Position: sticky;
   --pf-v6-c-sidebar__panel--md--Position: static;
   --pf-v6-c-sidebar__panel--FlexBasis-base: auto;
@@ -63,7 +63,7 @@
   --pf-v6-c-sidebar__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-sidebar__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-sidebar__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-sidebar__panel--m-sticky--Top: 0;
+  --pf-v6-c-sidebar__panel--m-sticky--InsetBlockStart: 0;
   --pf-v6-c-sidebar__panel--m-sticky--Position: sticky;
 }
 
@@ -77,7 +77,7 @@
     --pf-v6-c-sidebar__main--m-border--before--Display: var(--pf-v6-c-sidebar__main--m-border--before--md--Display);
     --pf-v6-c-sidebar__panel--BoxShadow: none;
     --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--md--FlexBasis);
-    --pf-v6-c-sidebar__panel--Top: var(--pf-v6-c-sidebar__panel--md--Top);
+    --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar__panel--md--InsetBlockStart);
     --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar__panel--md--Position);
   }
 }
@@ -103,7 +103,7 @@
   --pf-v6-c-sidebar__main--FlexDirection: var(--pf-v6-c-sidebar--m-stack__main--FlexDirection);
   --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar--m-stack__main--AlignItems);
   --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar--m-stack__panel--Position);
-  --pf-v6-c-sidebar__panel--Top: var(--pf-v6-c-sidebar--m-stack__panel--Top);
+  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar--m-stack__panel--InsetBlockStart);
   --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar--m-stack__panel--BoxShadow);
   --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--m-stack--FlexBasis);
   --pf-v6-c-sidebar__main--m-border--before--Display: none;
@@ -113,7 +113,7 @@
   --pf-v6-c-sidebar__main--FlexDirection: var(--pf-v6-c-sidebar--m-split__main--FlexDirection);
   --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar--m-split__main--AlignItems);
   --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar--m-split__panel--Position);
-  --pf-v6-c-sidebar__panel--Top: var(--pf-v6-c-sidebar--m-split__panel--Top);
+  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar--m-split__panel--InsetBlockStart);
   --pf-v6-c-sidebar__panel--BoxShadow: none;
   --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--m-split--FlexBasis);
   --pf-v6-c-sidebar__main--m-border--before--Display: var(--pf-v6-c-sidebar--m-split__main--m-border--before--Display);
@@ -135,31 +135,31 @@
 
 .pf-v6-c-sidebar__panel {
   position: var(--pf-v6-c-sidebar__panel--Position);
-  inset-block-start: var(--pf-v6-c-sidebar__panel--Top);
+  inset-block-start: var(--pf-v6-c-sidebar__panel--InsetBlockStart);
   z-index: var(--pf-v6-c-sidebar__panel--ZIndex);
   flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
   flex-shrink: 0;
   order: var(--pf-v6-c-sidebar__panel--Order);
-  padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingTop);
-  padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-sidebar__panel--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-sidebar__panel--PaddingRight);
+  padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-sidebar__panel--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-sidebar__panel--PaddingInlineEnd);
   background-color: var(--pf-v6-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-v6-c-sidebar__panel--BoxShadow);
 }
 .pf-v6-c-sidebar__panel.pf-m-padding {
-  --pf-v6-c-sidebar__panel--PaddingTop: var(--pf-v6-c-sidebar__panel--m-padding--PaddingTop);
-  --pf-v6-c-sidebar__panel--PaddingRight: var(--pf-v6-c-sidebar__panel--m-padding--PaddingRight);
-  --pf-v6-c-sidebar__panel--PaddingBottom: var(--pf-v6-c-sidebar__panel--m-padding--PaddingBottom);
-  --pf-v6-c-sidebar__panel--PaddingLeft: var(--pf-v6-c-sidebar__panel--m-padding--PaddingLeft);
+  --pf-v6-c-sidebar__panel--PaddingBlockStart: var(--pf-v6-c-sidebar__panel--m-padding--PaddingBlockStart);
+  --pf-v6-c-sidebar__panel--PaddingInlineEnd: var(--pf-v6-c-sidebar__panel--m-padding--PaddingInlineEnd);
+  --pf-v6-c-sidebar__panel--PaddingBlockEnd: var(--pf-v6-c-sidebar__panel--m-padding--PaddingBlockEnd);
+  --pf-v6-c-sidebar__panel--PaddingInlineStart: var(--pf-v6-c-sidebar__panel--m-padding--PaddingInlineStart);
 }
 .pf-v6-c-sidebar__panel.pf-m-sticky {
   --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar__panel--m-sticky--Position);
-  --pf-v6-c-sidebar__panel--Top: var(--pf-v6-c-sidebar__panel--m-sticky--Top);
+  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar__panel--m-sticky--InsetBlockStart);
 }
 .pf-v6-c-sidebar__panel.pf-m-static {
   --pf-v6-c-sidebar__panel--Position: static;
-  --pf-v6-c-sidebar__panel--Top: auto;
+  --pf-v6-c-sidebar__panel--InsetBlockStart: auto;
 }
 .pf-v6-c-sidebar__panel.pf-m-secondary {
   --pf-v6-c-sidebar__panel--BackgroundColor: var(--pf-v6-c-sidebar__panel--m-secondary--BackgroundColor);
@@ -168,17 +168,17 @@
 .pf-v6-c-sidebar__content {
   flex-grow: 1;
   order: var(--pf-v6-c-sidebar__content--Order);
-  padding-block-start: var(--pf-v6-c-sidebar__content--PaddingTop);
-  padding-block-end: var(--pf-v6-c-sidebar__content--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-sidebar__content--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-sidebar__content--PaddingRight);
+  padding-block-start: var(--pf-v6-c-sidebar__content--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-sidebar__content--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-sidebar__content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-sidebar__content--PaddingInlineEnd);
   background-color: var(--pf-v6-c-sidebar__content--BackgroundColor);
 }
 .pf-v6-c-sidebar__content.pf-m-padding {
-  --pf-v6-c-sidebar__content--PaddingTop: var(--pf-v6-c-sidebar__content--m-padding--PaddingTop);
-  --pf-v6-c-sidebar__content--PaddingRight: var(--pf-v6-c-sidebar__content--m-padding--PaddingRight);
-  --pf-v6-c-sidebar__content--PaddingBottom: var(--pf-v6-c-sidebar__content--m-padding--PaddingBottom);
-  --pf-v6-c-sidebar__content--PaddingLeft: var(--pf-v6-c-sidebar__content--m-padding--PaddingTop);
+  --pf-v6-c-sidebar__content--PaddingBlockStart: var(--pf-v6-c-sidebar__content--m-padding--PaddingBlockStart);
+  --pf-v6-c-sidebar__content--PaddingInlineEnd: var(--pf-v6-c-sidebar__content--m-padding--PaddingInlineEnd);
+  --pf-v6-c-sidebar__content--PaddingBlockEnd: var(--pf-v6-c-sidebar__content--m-padding--PaddingBlockEnd);
+  --pf-v6-c-sidebar__content--PaddingInlineStart: var(--pf-v6-c-sidebar__content--m-padding--PaddingBlockStart);
 }
 .pf-v6-c-sidebar__content.pf-m-no-background {
   --pf-v6-c-sidebar__content--BackgroundColor: transparent;

package/components/Sidebar/sidebar.scss

@@ -11,37 +11,37 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}--BorderColor--base: var(--pf-t--global--border--color--default);
 
   // Panel
-  --#{$sidebar}__panel--PaddingTop: 0;
-  --#{$sidebar}__panel--PaddingRight: 0;
-  --#{$sidebar}__panel--PaddingBottom: 0;
-  --#{$sidebar}__panel--PaddingLeft: 0;
+  --#{$sidebar}__panel--PaddingBlockStart: 0;
+  --#{$sidebar}__panel--PaddingInlineEnd: 0;
+  --#{$sidebar}__panel--PaddingBlockEnd: 0;
+  --#{$sidebar}__panel--PaddingInlineStart: 0;
   --#{$sidebar}__panel--Order: -1;
 
   // Panel padding
-  --#{$sidebar}__panel--m-padding--PaddingTop: var(--#{$sidebar}--inset);
-  --#{$sidebar}__panel--m-padding--PaddingRight: var(--#{$sidebar}--inset);
-  --#{$sidebar}__panel--m-padding--PaddingBottom: var(--#{$sidebar}--inset);
-  --#{$sidebar}__panel--m-padding--PaddingLeft: var(--#{$sidebar}--inset);
+  --#{$sidebar}__panel--m-padding--PaddingBlockStart: var(--#{$sidebar}--inset);
+  --#{$sidebar}__panel--m-padding--PaddingInlineEnd: var(--#{$sidebar}--inset);
+  --#{$sidebar}__panel--m-padding--PaddingBlockEnd: var(--#{$sidebar}--inset);
+  --#{$sidebar}__panel--m-padding--PaddingInlineStart: var(--#{$sidebar}--inset);
 
   // Content
-  --#{$sidebar}__content--PaddingTop: 0;
-  --#{$sidebar}__content--PaddingRight: 0;
-  --#{$sidebar}__content--PaddingBottom: 0;
-  --#{$sidebar}__content--PaddingLeft: 0;
+  --#{$sidebar}__content--PaddingBlockStart: 0;
+  --#{$sidebar}__content--PaddingInlineEnd: 0;
+  --#{$sidebar}__content--PaddingBlockEnd: 0;
+  --#{$sidebar}__content--PaddingInlineStart: 0;
   --#{$sidebar}__content--Order: 1;
 
   // Content padding
-  --#{$sidebar}__content--m-padding--PaddingTop: var(--#{$sidebar}--inset);
-  --#{$sidebar}__content--m-padding--PaddingRight: var(--#{$sidebar}--inset);
-  --#{$sidebar}__content--m-padding--PaddingBottom: var(--#{$sidebar}--inset);
-  --#{$sidebar}__content--m-padding--PaddingLeft: var(--#{$sidebar}--inset);
+  --#{$sidebar}__content--m-padding--PaddingBlockStart: var(--#{$sidebar}--inset);
+  --#{$sidebar}__content--m-padding--PaddingInlineEnd: var(--#{$sidebar}--inset);
+  --#{$sidebar}__content--m-padding--PaddingBlockEnd: var(--#{$sidebar}--inset);
+  --#{$sidebar}__content--m-padding--PaddingInlineStart: var(--#{$sidebar}--inset);
 
   // Main
   --#{$sidebar}__main--FlexDirection: column;
   --#{$sidebar}__main--md--FlexDirection: row;
   --#{$sidebar}__main--AlignItems: stretch;
   --#{$sidebar}__main--md--AlignItems: flex-start;
-  --#{$sidebar}__main--child--MarginTop: 0;
+  --#{$sidebar}__main--child--MarginBlockStart: 0;
 
   // Gutter
   --#{$sidebar}--m-gutter__main--Gap: var(--#{$sidebar}--inset);
@@ -61,7 +61,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}--m-stack__main--FlexDirection: column;
   --#{$sidebar}--m-stack__main--AlignItems: stretch;
   --#{$sidebar}--m-stack__panel--Position: sticky;
-  --#{$sidebar}--m-stack__panel--Top: 0;
+  --#{$sidebar}--m-stack__panel--InsetBlockStart: 0;
   --#{$sidebar}--m-stack__panel--BoxShadow: var(--#{$sidebar}__panel--BoxShadow--base);
   --#{$sidebar}--m-stack--m-panel-right__panel--Order: -1;
 
@@ -69,7 +69,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}--m-split__main--AlignItems: flex-start;
   --#{$sidebar}--m-split__main--FlexDirection: row;
   --#{$sidebar}--m-split__panel--Position: static;
-  --#{$sidebar}--m-split__panel--Top: auto;
+  --#{$sidebar}--m-split__panel--InsetBlockStart: auto;
   --#{$sidebar}--m-split--m-panel-right__panel--Order: 1;
   --#{$sidebar}--m-split__main--m-border--before--Display: block;
 
@@ -77,8 +77,8 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}__panel--FlexBasis--base: auto;
   --#{$sidebar}__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
   --#{$sidebar}__panel--BoxShadow: var(--#{$sidebar}__panel--BoxShadow--base);
-  --#{$sidebar}__panel--Top: 0;
-  --#{$sidebar}__panel--md--Top: auto;
+  --#{$sidebar}__panel--InsetBlockStart: 0;
+  --#{$sidebar}__panel--md--InsetBlockStart: auto;
   --#{$sidebar}__panel--Position: sticky;
   --#{$sidebar}__panel--md--Position: static;
   --#{$sidebar}__panel--FlexBasis-base: auto;
@@ -95,7 +95,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // Sticky
-  --#{$sidebar}__panel--m-sticky--Top: 0;
+  --#{$sidebar}__panel--m-sticky--InsetBlockStart: 0;
   --#{$sidebar}__panel--m-sticky--Position: sticky;
 }
 
@@ -108,7 +108,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}__main--m-border--before--md--Display); // show border starting at md breakpoint
     --#{$sidebar}__panel--BoxShadow: none;
     --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--md--FlexBasis);
-    --#{$sidebar}__panel--Top: var(--#{$sidebar}__panel--md--Top);
+    --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}__panel--md--InsetBlockStart);
     --#{$sidebar}__panel--Position: var(--#{$sidebar}__panel--md--Position);
   }
 
@@ -134,7 +134,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}--m-stack__main--FlexDirection);
     --#{$sidebar}__main--AlignItems: var(--#{$sidebar}--m-stack__main--AlignItems);
     --#{$sidebar}__panel--Position: var(--#{$sidebar}--m-stack__panel--Position);
-    --#{$sidebar}__panel--Top: var(--#{$sidebar}--m-stack__panel--Top);
+    --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}--m-stack__panel--InsetBlockStart);
     --#{$sidebar}__panel--BoxShadow: var(--#{$sidebar}--m-stack__panel--BoxShadow);
     --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--m-stack--FlexBasis);
     --#{$sidebar}__main--m-border--before--Display: none;
@@ -145,7 +145,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}--m-split__main--FlexDirection);
     --#{$sidebar}__main--AlignItems: var(--#{$sidebar}--m-split__main--AlignItems);
     --#{$sidebar}__panel--Position: var(--#{$sidebar}--m-split__panel--Position);
-    --#{$sidebar}__panel--Top: var(--#{$sidebar}--m-split__panel--Top);
+    --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}--m-split__panel--InsetBlockStart);
     --#{$sidebar}__panel--BoxShadow: none;
     --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--m-split--FlexBasis);
     --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}--m-split__main--m-border--before--Display);
@@ -169,33 +169,33 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 .#{$sidebar}__panel {
   position: var(--#{$sidebar}__panel--Position);
-  inset-block-start: var(--#{$sidebar}__panel--Top);
+  inset-block-start: var(--#{$sidebar}__panel--InsetBlockStart);
   z-index: var(--#{$sidebar}__panel--ZIndex);
   flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   flex-shrink: 0;
   order: var(--#{$sidebar}__panel--Order);
-  padding-block-start: var(--#{$sidebar}__panel--PaddingTop);
-  padding-block-end: var(--#{$sidebar}__panel--PaddingBottom);
-  padding-inline-start: var(--#{$sidebar}__panel--PaddingLeft);
-  padding-inline-end: var(--#{$sidebar}__panel--PaddingRight);
+  padding-block-start: var(--#{$sidebar}__panel--PaddingBlockStart);
+  padding-block-end: var(--#{$sidebar}__panel--PaddingBlockEnd);
+  padding-inline-start: var(--#{$sidebar}__panel--PaddingInlineStart);
+  padding-inline-end: var(--#{$sidebar}__panel--PaddingInlineEnd);
   background-color: var(--#{$sidebar}__panel--BackgroundColor);
   box-shadow: var(--#{$sidebar}__panel--BoxShadow);
 
   &.pf-m-padding {
-    --#{$sidebar}__panel--PaddingTop: var(--#{$sidebar}__panel--m-padding--PaddingTop);
-    --#{$sidebar}__panel--PaddingRight: var(--#{$sidebar}__panel--m-padding--PaddingRight);
-    --#{$sidebar}__panel--PaddingBottom: var(--#{$sidebar}__panel--m-padding--PaddingBottom);
-    --#{$sidebar}__panel--PaddingLeft: var(--#{$sidebar}__panel--m-padding--PaddingLeft);
+    --#{$sidebar}__panel--PaddingBlockStart: var(--#{$sidebar}__panel--m-padding--PaddingBlockStart);
+    --#{$sidebar}__panel--PaddingInlineEnd: var(--#{$sidebar}__panel--m-padding--PaddingInlineEnd);
+    --#{$sidebar}__panel--PaddingBlockEnd: var(--#{$sidebar}__panel--m-padding--PaddingBlockEnd);
+    --#{$sidebar}__panel--PaddingInlineStart: var(--#{$sidebar}__panel--m-padding--PaddingInlineStart);
   }
 
   &.pf-m-sticky {
     --#{$sidebar}__panel--Position: var(--#{$sidebar}__panel--m-sticky--Position);
-    --#{$sidebar}__panel--Top: var(--#{$sidebar}__panel--m-sticky--Top);
+    --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}__panel--m-sticky--InsetBlockStart);
   }
 
   &.pf-m-static {
     --#{$sidebar}__panel--Position: static;
-    --#{$sidebar}__panel--Top: auto;
+    --#{$sidebar}__panel--InsetBlockStart: auto;
   }
 
   &.pf-m-secondary {
@@ -206,17 +206,17 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 .#{$sidebar}__content {
   flex-grow: 1;
   order: var(--#{$sidebar}__content--Order);
-  padding-block-start: var(--#{$sidebar}__content--PaddingTop);
-  padding-block-end: var(--#{$sidebar}__content--PaddingBottom);
-  padding-inline-start: var(--#{$sidebar}__content--PaddingLeft);
-  padding-inline-end: var(--#{$sidebar}__content--PaddingRight);
+  padding-block-start: var(--#{$sidebar}__content--PaddingBlockStart);
+  padding-block-end: var(--#{$sidebar}__content--PaddingBlockEnd);
+  padding-inline-start: var(--#{$sidebar}__content--PaddingInlineStart);
+  padding-inline-end: var(--#{$sidebar}__content--PaddingInlineEnd);
   background-color: var(--#{$sidebar}__content--BackgroundColor);
 
   &.pf-m-padding {
-    --#{$sidebar}__content--PaddingTop: var(--#{$sidebar}__content--m-padding--PaddingTop);
-    --#{$sidebar}__content--PaddingRight: var(--#{$sidebar}__content--m-padding--PaddingRight);
-    --#{$sidebar}__content--PaddingBottom: var(--#{$sidebar}__content--m-padding--PaddingBottom);
-    --#{$sidebar}__content--PaddingLeft: var(--#{$sidebar}__content--m-padding--PaddingTop);
+    --#{$sidebar}__content--PaddingBlockStart: var(--#{$sidebar}__content--m-padding--PaddingBlockStart);
+    --#{$sidebar}__content--PaddingInlineEnd: var(--#{$sidebar}__content--m-padding--PaddingInlineEnd);
+    --#{$sidebar}__content--PaddingBlockEnd: var(--#{$sidebar}__content--m-padding--PaddingBlockEnd);
+    --#{$sidebar}__content--PaddingInlineStart: var(--#{$sidebar}__content--m-padding--PaddingBlockStart);
   }
 
   &.pf-m-no-background {

package/components/SimpleList/simple-list.css

@@ -1,8 +1,8 @@
 :where(:root, .pf-v6-c-simple-list) {
-  --pf-v6-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-simple-list__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-simple-list__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-simple-list__item-link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-simple-list__item-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body--default);
@@ -14,23 +14,23 @@
   --pf-v6-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v6-c-simple-list__title--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-simple-list__title--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-simple-list__title--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-simple-list__title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-simple-list__title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-simple-list__title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-simple-list__title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-simple-list__title--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-simple-list__section--section--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-simple-list__section--section--MarginBlockStart: var(--pf-t--global--spacer--sm);
 }
 
 .pf-v6-c-simple-list__item-link {
   display: block;
   width: 100%;
-  padding-block-start: var(--pf-v6-c-simple-list__item-link--PaddingTop);
-  padding-block-end: var(--pf-v6-c-simple-list__item-link--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-simple-list__item-link--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-simple-list__item-link--PaddingRight);
+  padding-block-start: var(--pf-v6-c-simple-list__item-link--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-simple-list__item-link--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-simple-list__item-link--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-simple-list__item-link--PaddingInlineEnd);
   font-size: var(--pf-v6-c-simple-list__item-link--FontSize);
   color: var(--pf-v6-c-simple-list__item-link--Color);
   text-align: start;
@@ -55,15 +55,15 @@
 }
 
 .pf-v6-c-simple-list__title {
-  padding-block-start: var(--pf-v6-c-simple-list__title--PaddingTop);
-  padding-block-end: var(--pf-v6-c-simple-list__title--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-simple-list__title--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-simple-list__title--PaddingRight);
+  padding-block-start: var(--pf-v6-c-simple-list__title--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-simple-list__title--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-simple-list__title--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-simple-list__title--PaddingInlineEnd);
   font-size: var(--pf-v6-c-simple-list__title--FontSize);
   font-weight: var(--pf-v6-c-simple-list__title--FontWeight);
   color: var(--pf-v6-c-simple-list__title--Color);
 }
 
 .pf-v6-c-simple-list__section + .pf-v6-c-simple-list__section {
-  margin-block-start: var(--pf-v6-c-simple-list__section--section--MarginTop);
+  margin-block-start: var(--pf-v6-c-simple-list__section--section--MarginBlockStart);
 }

package/components/SimpleList/simple-list.scss

@@ -2,10 +2,10 @@
 
 :where(:root, .#{$simple-list}) {
   // Simple list item link
-  --#{$simple-list}__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$simple-list}__item-link--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$simple-list}__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$simple-list}__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$simple-list}__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__item-link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$simple-list}__item-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$simple-list}__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
   --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body--default);
@@ -21,25 +21,25 @@
   --#{$simple-list}__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
 
   // Simple list title
-  --#{$simple-list}__title--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$simple-list}__title--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$simple-list}__title--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$simple-list}__title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__title--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$simple-list}__title--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$simple-list}__title--Color: var(--pf-t--global--text--color--regular);
   --#{$simple-list}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Simple list section
-  --#{$simple-list}__section--section--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__section--section--MarginBlockStart: var(--pf-t--global--spacer--sm);
 }
 
 .#{$simple-list}__item-link {
   display: block;
   width: 100%;
-  padding-block-start: var(--#{$simple-list}__item-link--PaddingTop);
-  padding-block-end: var(--#{$simple-list}__item-link--PaddingBottom);
-  padding-inline-start: var(--#{$simple-list}__item-link--PaddingLeft);
-  padding-inline-end: var(--#{$simple-list}__item-link--PaddingRight);
+  padding-block-start: var(--#{$simple-list}__item-link--PaddingBlockStart);
+  padding-block-end: var(--#{$simple-list}__item-link--PaddingBlockEnd);
+  padding-inline-start: var(--#{$simple-list}__item-link--PaddingInlineStart);
+  padding-inline-end: var(--#{$simple-list}__item-link--PaddingInlineEnd);
   font-size: var(--#{$simple-list}__item-link--FontSize);
   color: var(--#{$simple-list}__item-link--Color);
   text-align: start;
@@ -69,15 +69,15 @@
 }
 
 .#{$simple-list}__title {
-  padding-block-start: var(--#{$simple-list}__title--PaddingTop);
-  padding-block-end: var(--#{$simple-list}__title--PaddingBottom);
-  padding-inline-start: var(--#{$simple-list}__title--PaddingLeft);
-  padding-inline-end: var(--#{$simple-list}__title--PaddingRight);
+  padding-block-start: var(--#{$simple-list}__title--PaddingBlockStart);
+  padding-block-end: var(--#{$simple-list}__title--PaddingBlockEnd);
+  padding-inline-start: var(--#{$simple-list}__title--PaddingInlineStart);
+  padding-inline-end: var(--#{$simple-list}__title--PaddingInlineEnd);
   font-size: var(--#{$simple-list}__title--FontSize);
   font-weight: var(--#{$simple-list}__title--FontWeight);
   color: var(--#{$simple-list}__title--Color);
 }
 
 .#{$simple-list}__section + .#{$simple-list}__section {
-  margin-block-start: var(--#{$simple-list}__section--section--MarginTop);
+  margin-block-start: var(--#{$simple-list}__section--section--MarginBlockStart);
 }

package/components/Skeleton/skeleton.css

@@ -4,7 +4,7 @@
   --pf-v6-c-skeleton--Width: auto;
   --pf-v6-c-skeleton--Height: auto;
   --pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-skeleton--before--PaddingBottom: 0;
+  --pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
   --pf-v6-c-skeleton--before--Height: auto;
   --pf-v6-c-skeleton--before--Content: " ";
   --pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
@@ -18,7 +18,7 @@
   --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
   --pf-v6-c-skeleton--after--AnimationDelay: .5s;
   --pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-skeleton--m-circle--before--PaddingBottom: 100%;
+  --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
   --pf-v6-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
   --pf-v6-c-skeleton--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
   --pf-v6-c-skeleton--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
@@ -57,7 +57,7 @@
 .pf-v6-c-skeleton::before {
   display: block;
   height: var(--pf-v6-c-skeleton--before--Height);
-  padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBottom);
+  padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
   content: var(--pf-v6-c-skeleton--before--Content);
 }
 .pf-v6-c-skeleton::after {
@@ -78,7 +78,7 @@
 }
 .pf-v6-c-skeleton.pf-m-square, .pf-v6-c-skeleton.pf-m-circle {
   --pf-v6-c-skeleton--before--Height: 0;
-  --pf-v6-c-skeleton--before--PaddingBottom: var(--pf-v6-c-skeleton--m-circle--before--PaddingBottom);
+  --pf-v6-c-skeleton--before--PaddingBlockEnd: var(--pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd);
 }
 .pf-v6-c-skeleton.pf-m-width-sm {
   --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-sm--Width);

package/components/Skeleton/skeleton.scss

@@ -7,7 +7,7 @@
   --#{$skeleton}--BorderRadius: var(--pf-t--global--spacer--sm);
 
   // Before
-  --#{$skeleton}--before--PaddingBottom: 0;
+  --#{$skeleton}--before--PaddingBlockEnd: 0;
   --#{$skeleton}--before--Height: auto;
   --#{$skeleton}--before--Content: "\00a0";
 
@@ -25,7 +25,7 @@
 
   // Circle
   --#{$skeleton}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --#{$skeleton}--m-circle--before--PaddingBottom: 100%;
+  --#{$skeleton}--m-circle--before--PaddingBlockEnd: 100%;
 
   // Text modifiers
   --#{$skeleton}--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
@@ -70,7 +70,7 @@
   &::before {
     display: block;
     height: var(--#{$skeleton}--before--Height);
-    padding-block-end: var(--#{$skeleton}--before--PaddingBottom);
+    padding-block-end: var(--#{$skeleton}--before--PaddingBlockEnd);
     content: var(--#{$skeleton}--before--Content);
   }
 
@@ -94,7 +94,7 @@
   &.pf-m-square,
   &.pf-m-circle {
     --#{$skeleton}--before--Height: 0;
-    --#{$skeleton}--before--PaddingBottom: var(--#{$skeleton}--m-circle--before--PaddingBottom);
+    --#{$skeleton}--before--PaddingBlockEnd: var(--#{$skeleton}--m-circle--before--PaddingBlockEnd);
   }
 
   // Width

package/components/SkipToContent/skip-to-content.css

@@ -1,15 +1,15 @@
 :where(:root, .pf-v6-c-skip-to-content) {
-  --pf-v6-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
+  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
-  --pf-v6-c-skip-to-content--focus--Left: var(--pf-t--global--spacer--md);
+  --pf-v6-c-skip-to-content--focus--InsetInlineStart: var(--pf-t--global--spacer--md);
 }
 
 .pf-v6-c-skip-to-content {
   position: absolute;
-  inset-block-start: var(--pf-v6-c-skip-to-content--Top);
+  inset-block-start: var(--pf-v6-c-skip-to-content--InsetBlockStart);
   inset-inline-start: -300%;
   z-index: var(--pf-v6-c-skip-to-content--ZIndex);
 }
 .pf-v6-c-skip-to-content:focus-within {
-  inset-inline-start: var(--pf-v6-c-skip-to-content--focus--Left);
+  inset-inline-start: var(--pf-v6-c-skip-to-content--focus--InsetInlineStart);
 }

package/components/SkipToContent/skip-to-content.scss

@@ -1,18 +1,18 @@
 @use '../../sass-utilities' as *;
 
 :where(:root, .#{$skip-to-content}) {
-  --#{$skip-to-content}--Top: var(--pf-t--global--spacer--md);
+  --#{$skip-to-content}--InsetBlockStart: var(--pf-t--global--spacer--md);
   --#{$skip-to-content}--ZIndex: var(--pf-t--global--z-index--2xl);
-  --#{$skip-to-content}--focus--Left: var(--pf-t--global--spacer--md);
+  --#{$skip-to-content}--focus--InsetInlineStart: var(--pf-t--global--spacer--md);
 }
 
 .#{$skip-to-content} {
   position: absolute;
-  inset-block-start: var(--#{$skip-to-content}--Top);
+  inset-block-start: var(--#{$skip-to-content}--InsetBlockStart);
   inset-inline-start: -300%; // moves off screen
   z-index: var(--#{$skip-to-content}--ZIndex);
 
   &:focus-within {
-    inset-inline-start: var(--#{$skip-to-content}--focus--Left);
+    inset-inline-start: var(--#{$skip-to-content}--focus--InsetInlineStart);
   }
 }