@patternfly/react-styles 6.0.0-alpha.20 → 6.0.0-alpha.21

package/css/components/Radio/radio.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-radio {
+:where(:root, .pf-v6-c-radio) {
   --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
@@ -10,9 +9,9 @@
   --pf-v6-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-radio__description--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-radio__input--first-child--MarginLeft: 0.0625rem;
-  --pf-v6-c-radio__input--last-child--MarginRight: 0.0625rem;
-  --pf-v6-c-radio__body--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-radio__input--first-child--MarginInlineStart: 0.0625rem;
+  --pf-v6-c-radio__input--last-child--MarginInlineEnd: 0.0625rem;
+  --pf-v6-c-radio__body--MarginBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-radio__input--TranslateY: calc((var(--pf-v6-c-radio__label--LineHeight) * var(--pf-v6-c-radio__label--FontSize) / 2 ) - 50%);
 }
 
@@ -40,10 +39,10 @@
   transform: translateY(var(--pf-v6-c-radio__input--TranslateY));
 }
 .pf-v6-c-radio__input:first-child {
-  margin-inline-start: var(--pf-v6-c-radio__input--first-child--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-radio__input--first-child--MarginInlineStart);
 }
 .pf-v6-c-radio__input:last-child {
-  margin-inline-end: var(--pf-v6-c-radio__input--last-child--MarginRight);
+  margin-inline-end: var(--pf-v6-c-radio__input--last-child--MarginInlineEnd);
 }
 
 .pf-v6-c-radio__label {
@@ -61,7 +60,7 @@
 
 .pf-v6-c-radio__body {
   grid-column: 2;
-  margin-block-start: var(--pf-v6-c-radio__body--MarginTop);
+  margin-block-start: var(--pf-v6-c-radio__body--MarginBlockStart);
 }
 
 .pf-v6-c-radio__label,

package/css/components/Sidebar/sidebar.css

@@ -1,32 +1,31 @@
-:root,
-:where(.pf-v6-c-sidebar) {
+:where(:root, .pf-v6-c-sidebar) {
   --pf-v6-c-sidebar--inset: var(--pf-t--global--spacer--md);
   --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;
@@ -38,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;
@@ -64,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;
 }
 
@@ -78,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);
   }
 }
@@ -104,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;
@@ -114,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);
@@ -136,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);
@@ -169,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/css/components/SimpleList/simple-list.css

@@ -1,8 +1,8 @@
-: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);
+:where(:root, .pf-v6-c-simple-list) {
+  --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/css/components/Skeleton/skeleton.css

@@ -1,11 +1,10 @@
 @charset "UTF-8";
-:root,
-.pf-v6-c-skeleton {
+:where(:root, .pf-v6-c-skeleton) {
   --pf-v6-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --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;
@@ -19,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));
@@ -58,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 {
@@ -79,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/css/components/SkipToContent/skip-to-content.css

@@ -1,15 +1,15 @@
-:root {
-  --pf-v6-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
+:where(:root, .pf-v6-c-skip-to-content) {
+  --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/css/components/Slider/slider.css

@@ -1,9 +1,8 @@
-:root,
-.pf-v6-c-slider {
+: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);
@@ -11,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);
@@ -21,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%;
@@ -45,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);
@@ -87,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 {
@@ -112,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 {
@@ -130,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);
@@ -144,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 {
@@ -154,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;
@@ -193,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 {
@@ -213,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/css/components/Spinner/spinner.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-spinner {
+:where(:root, .pf-v6-c-spinner) {
   --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
   --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
   --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);

package/css/components/Switch/switch.css

@@ -1,10 +1,9 @@
-:root,
-.pf-v6-c-switch {
+:where(:root, .pf-v6-c-switch) {
   --pf-v6-c-switch--FontSize: var(--pf-t--global--font--size--sm);
   --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);
@@ -29,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));
@@ -118,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);
@@ -140,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/css/components/TabContent/tab-content.css

@@ -1,18 +1,17 @@
-: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;
+:where(:root, .pf-v6-c-tab-content) {
+  --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);
 }
 
@@ -21,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 {
@@ -32,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);
 }