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

package/components/FormControl/form-control.scss

@@ -19,10 +19,10 @@
 
   // padding
   --#{$form-control}--inset--base: var(--pf-t--global--spacer--md);
-  --#{$form-control}--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
-  --#{$form-control}--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
-  --#{$form-control}--PaddingRight: var(--#{$form-control}--inset--base);
-  --#{$form-control}--PaddingLeft: var(--#{$form-control}--inset--base);
+  --#{$form-control}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$form-control}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--inset--base);
+  --#{$form-control}--PaddingInlineStart: var(--#{$form-control}--inset--base);
 
   // hover
   --#{$form-control}--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
@@ -60,42 +60,42 @@
   // success
   --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
-  --#{$form-control}--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
+  --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
 
   // warning
   --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
-  --#{$form-control}--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
+  --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
 
   // error
   --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
-  --#{$form-control}--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
+  --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
   --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
 
   // custom icon
-  --#{$form-control}--m-icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
+  --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
   --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
   --#{$form-control}--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
-  --#{$form-control}--m-icon--icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
-  --#{$form-control}__select--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$form-control}__select--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
+  --#{$form-control}__select--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$form-control}__select--PaddingInlineStart: var(--pf-t--global--spacer--md);
 
   // Select success
-  --#{$form-control}__select--m-success--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
 
   // Select warning
-  --#{$form-control}__select--m-warning--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
 
   // Select invalid
-  --#{$form-control}__select--m-error--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
 
   // Textarea
   --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
   --#{$form-control}--textarea--Height: auto;
 
   // Form control icon
-  --#{$form-control}__icon--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$form-control}__icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$form-control}__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$form-control}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
   --#{$form-control}--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -104,13 +104,13 @@
 
   // Form control utilities
   --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--sm);
-  --#{$form-control}__utilities--PaddingTop: var(--#{$form-control}--inset--base);
-  --#{$form-control}__utilities--PaddingRight: var(--#{$form-control}--inset--base);
+  --#{$form-control}__utilities--PaddingBlockStart: var(--#{$form-control}--inset--base);
+  --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--inset--base);
 
   // Form control select toggle icon
-  --#{$form-control}__toggle-icon--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$form-control}__toggle-icon--PaddingRight: var(--#{$form-control}--inset--base);
-  --#{$form-control}__toggle-icon--PaddingLeft: var(--#{$form-control}--inset--base);
+  --#{$form-control}__toggle-icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$form-control}__toggle-icon--PaddingInlineEnd: var(--#{$form-control}--inset--base);
+  --#{$form-control}__toggle-icon--PaddingInlineStart: var(--#{$form-control}--inset--base);
   --#{$form-control}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$form-control}--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
@@ -151,10 +151,10 @@
   > :is(input, select, textarea) {
     grid-row: 1 / 2;
     grid-column: 1 / -1;
-    padding-block-start: var(--#{$form-control}--PaddingTop);
-    padding-block-end: var(--#{$form-control}--PaddingBottom);
-    padding-inline-start: var(--#{$form-control}--PaddingLeft);
-    padding-inline-end: var(--#{$form-control}--PaddingRight);
+    padding-block-start: var(--#{$form-control}--PaddingBlockStart);
+    padding-block-end: var(--#{$form-control}--PaddingBlockEnd);
+    padding-inline-start: var(--#{$form-control}--PaddingInlineStart);
+    padding-inline-end: var(--#{$form-control}--PaddingInlineEnd);
     color: var(--#{$form-control}--Color);
     background-color: transparent;
     border: none;
@@ -224,54 +224,54 @@
   }
 
   &.pf-m-error {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}--m-error--PaddingRight);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-error--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-error--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
-    --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-error--m-status--PaddingRight);
+    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
 
     &.pf-m-icon {
-      --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
+      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
     }
   }
 
   &.pf-m-success {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}--m-success--PaddingRight);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-success--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-success--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
-    --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-success--m-status--PaddingRight);
+    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-success--after--BorderWidth);
 
     &.pf-m-icon {
-      --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
+      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
     }
   }
 
   &.pf-m-warning {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}--m-warning--PaddingRight);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-warning--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-warning--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
-    --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-warning--m-status--PaddingRight);
+    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-warning--after--BorderWidth);
 
     &.pf-m-icon {
-      --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
+      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
     }
   }
 
   &.pf-m-icon {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--PaddingRight);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--PaddingInlineEnd);
   }
 
   > select {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}__select--PaddingRight);
-    --#{$form-control}--PaddingLeft: var(--#{$form-control}__select--PaddingLeft);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}__select--PaddingInlineEnd);
+    --#{$form-control}--PaddingInlineStart: var(--#{$form-control}__select--PaddingInlineStart);
 
     // Firefox's select text has additional padding
     // stylelint-disable-next-line
     @-moz-document url-prefix() {
-      --#{$form-control}--PaddingRight: calc(var(--#{$form-control}__select--PaddingRight) - 1px);
-      --#{$form-control}--PaddingLeft: calc(var(--#{$form-control}__select--PaddingLeft) - 4px);
+      --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) - 1px);
+      --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__select--PaddingInlineStart) - 4px);
     }
 
     // We need this property for certain Linux distros/non-Mac OS where dark theme styles aren't applied properly.
@@ -322,7 +322,7 @@
 }
 
 .#{$form-control}__icon {
-  padding-block-start: var(--#{$form-control}__icon--PaddingTop);
+  padding-block-start: var(--#{$form-control}__icon--PaddingBlockStart);
   color: var(--#{$form-control}__icon--Color);
 
   &.pf-m-status {
@@ -333,9 +333,9 @@
 .#{$form-control}__toggle-icon {
   grid-row: 1 / 2;
   grid-column: 3;
-  padding-block-start: var(--#{$form-control}__toggle-icon--PaddingTop);
-  padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingLeft);
-  padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingRight);
+  padding-block-start: var(--#{$form-control}__toggle-icon--PaddingBlockStart);
+  padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingInlineStart);
+  padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingInlineEnd);
   color: var(--#{$form-control}__toggle-icon--Color);
   pointer-events: none;
 }
@@ -346,10 +346,10 @@
   grid-row: 1 / 2;
   grid-column: 2;
   gap: var(--#{$form-control}__utilities--Gap);
-  padding-inline-end: var(--#{$form-control}__utilities--PaddingRight);
+  padding-inline-end: var(--#{$form-control}__utilities--PaddingInlineEnd);
   pointer-events: none;
 }
 
 select ~ .#{$form-control}__utilities {
-  --#{$form-control}__utilities--PaddingRight: 0;
+  --#{$form-control}__utilities--PaddingInlineEnd: 0;
 }

package/components/HelperText/helper-text.css

@@ -19,7 +19,7 @@
   --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
-  --pf-v6-c-helper-text__item-icon--MarginRight: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-helper-text__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-helper-text {
@@ -62,7 +62,7 @@
 }
 
 .pf-v6-c-helper-text__item-icon {
-  margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginRight);
+  margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginInlineEnd);
   color: var(--pf-v6-c-helper-text__item-icon--Color);
 }
 

package/components/HelperText/helper-text.scss

@@ -27,7 +27,7 @@
   --#{$helper-text}--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
 
   // icon
-  --#{$helper-text}__item-icon--MarginRight: var(--pf-t--global--spacer--xs);
+  --#{$helper-text}__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
 }
 .#{$helper-text} {
   // text
@@ -78,7 +78,7 @@
 }
 
 .#{$helper-text}__item-icon {
-  margin-inline-end: var(--#{$helper-text}__item-icon--MarginRight);
+  margin-inline-end: var(--#{$helper-text}__item-icon--MarginInlineEnd);
   color: var(--#{$helper-text}__item-icon--Color);
 }
 

package/components/Hint/hint.css

@@ -1,9 +1,9 @@
 :where(:root, .pf-v6-c-hint) {
   --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
   --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
@@ -14,20 +14,20 @@
   --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v6-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-hint__actions--c-dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 }
 
 .pf-v6-c-hint {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
-  padding-block-start: var(--pf-v6-c-hint--PaddingTop);
-  padding-block-end: var(--pf-v6-c-hint--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-hint--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-hint--PaddingRight);
+  padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
   color: var(--pf-v6-c-hint--Color);
   background-color: var(--pf-v6-c-hint--BackgroundColor);
   border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
@@ -43,11 +43,11 @@
   grid-row: 1;
   grid-column: 2;
   grid-auto-flow: column;
-  margin-inline-start: var(--pf-v6-c-hint__actions--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
   text-align: end;
 }
 .pf-v6-c-hint__actions .pf-v6-c-dropdown .pf-v6-c-dropdown__toggle.pf-m-plain {
-  margin-block-start: var(--pf-v6-c-hint__actions--c-dropdown--MarginTop);
+  margin-block-start: var(--pf-v6-c-hint__actions--c-dropdown--MarginBlockStart);
 }
 .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
   grid-column: 1;
@@ -68,8 +68,8 @@
 
 .pf-v6-c-hint__footer {
   grid-column: 1/-1;
-  margin-block-start: var(--pf-v6-c-hint__footer--MarginTop);
+  margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
 }
 .pf-v6-c-hint__footer > :not(:last-child) {
-  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginRight);
+  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
 }

package/components/Hint/hint.scss

@@ -2,10 +2,10 @@
 
 :where(:root, .#{$hint}) {
   --#{$hint}--GridRowGap: var(--pf-t--global--spacer--sm);
-  --#{$hint}--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$hint}--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$hint}--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --#{$hint}--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$hint}--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$hint}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$hint}--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$hint}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$hint}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$hint}--BorderColor: var(--pf-t--global--border--color--status--info--default);
   --#{$hint}--BorderWidth: var(--pf-t--global--border--width--box--status--default);
@@ -22,22 +22,22 @@
   --#{$hint}__body--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Hint Footer
-  --#{$hint}__footer--MarginTop: var(--pf-t--global--spacer--sm);
-  --#{$hint}__footer--child--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$hint}__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$hint}__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
 
   // Hint Actions
-  --#{$hint}__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
-  --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$hint}__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
+  --#{$hint}__actions--c-dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 }
 
 .#{$hint} {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-row-gap: var(--#{$hint}--GridRowGap);
-  padding-block-start: var(--#{$hint}--PaddingTop);
-  padding-block-end: var(--#{$hint}--PaddingBottom);
-  padding-inline-start: var(--#{$hint}--PaddingLeft);
-  padding-inline-end: var(--#{$hint}--PaddingRight);
+  padding-block-start: var(--#{$hint}--PaddingBlockStart);
+  padding-block-end: var(--#{$hint}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$hint}--PaddingInlineStart);
+  padding-inline-end: var(--#{$hint}--PaddingInlineEnd);
   color: var(--#{$hint}--Color);
   background-color: var(--#{$hint}--BackgroundColor);
   border: var(--#{$hint}--BorderWidth) solid var(--#{$hint}--BorderColor);
@@ -55,12 +55,12 @@
   grid-row: 1;
   grid-column: 2;
   grid-auto-flow: column;
-  margin-inline-start: var(--#{$hint}__actions--MarginLeft);
+  margin-inline-start: var(--#{$hint}__actions--MarginInlineStart);
   text-align: end;
 
   // Only applies to the plain dropdown
   .#{$dropdown} .#{$dropdown}__toggle.pf-m-plain {
-    margin-block-start: var(--#{$hint}__actions--c-dropdown--MarginTop);
+    margin-block-start: var(--#{$hint}__actions--c-dropdown--MarginBlockStart);
   }
 
   + .#{$hint}__body {
@@ -83,9 +83,9 @@
 
 .#{$hint}__footer {
   grid-column: 1 / -1;
-  margin-block-start: var(--#{$hint}__footer--MarginTop);
+  margin-block-start: var(--#{$hint}__footer--MarginBlockStart);
 
   > :not(:last-child) {
-    margin-inline-end: var(--#{$hint}__footer--child--MarginRight);
+    margin-inline-end: var(--#{$hint}__footer--child--MarginInlineEnd);
   }
 }

package/components/InlineEdit/inline-edit.css

@@ -1,9 +1,9 @@
 :where(:root, .pf-v6-c-inline-edit) {
-  --pf-v6-c-inline-edit__group--item--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
-  --pf-v6-c-inline-edit__action--m-icon-group--item--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-inline-edit__group--m-footer--MarginTop: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
 }
 
@@ -12,20 +12,20 @@
   align-items: baseline;
 }
 .pf-v6-c-inline-edit__group > * {
-  margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginRight);
+  margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginInlineEnd);
 }
 .pf-v6-c-inline-edit__group.pf-m-icon-group {
-  --pf-v6-c-inline-edit__group--item--MarginRight: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginRight);
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd);
 }
 .pf-v6-c-inline-edit__group.pf-m-footer {
-  margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginTop);
+  margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart);
 }
 .pf-v6-c-inline-edit__group.pf-m-column {
-  --pf-v6-c-inline-edit__group--item--MarginRight: 0;
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
   flex-direction: column;
 }
 .pf-v6-c-inline-edit__group > :last-child {
-  --pf-v6-c-inline-edit__group--item--MarginRight: 0;
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
 }
 
 .pf-v6-c-inline-edit__input {
@@ -69,8 +69,8 @@
 }
 
 .pf-v6-c-inline-edit__label + .pf-v6-c-inline-edit__action.pf-m-enable > .pf-v6-c-button {
-  margin-block-start: calc(var(--pf-v6-c-button--PaddingTop) * -1);
-  margin-block-end: calc(var(--pf-v6-c-button--PaddingBottom) * -1);
+  margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
+  margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
 }
 
 .pf-v6-c-inline-edit__label.pf-m-bold {

package/components/InlineEdit/inline-edit.scss

@@ -2,17 +2,17 @@
 
 :where(:root,  .#{$inline-edit}) {
   // Group
-  --#{$inline-edit}__group--item--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$inline-edit}__group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
   // Valid action
   --#{$inline-edit}__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
   --#{$inline-edit}__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
 
   // Icon button
-  --#{$inline-edit}__action--m-icon-group--item--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$inline-edit}__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
   // Footer group
-  --#{$inline-edit}__group--m-footer--MarginTop: var(--pf-t--global--spacer--xl);
+  --#{$inline-edit}__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
 
   // Label
   --#{$inline-edit}__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -24,27 +24,27 @@
   align-items: baseline;
 
   > * {
-    margin-inline-end: var(--#{$inline-edit}__group--item--MarginRight);
+    margin-inline-end: var(--#{$inline-edit}__group--item--MarginInlineEnd);
   }
 
   &.pf-m-icon-group {
-    --#{$inline-edit}__group--item--MarginRight: var(--#{$inline-edit}__action--m-icon-group--item--MarginRight);
+    --#{$inline-edit}__group--item--MarginInlineEnd: var(--#{$inline-edit}__action--m-icon-group--item--MarginInlineEnd);
   }
 
   // Footer
   &.pf-m-footer {
-    margin-block-start: var(--#{$inline-edit}__group--m-footer--MarginTop);
+    margin-block-start: var(--#{$inline-edit}__group--m-footer--MarginBlockStart);
   }
 
   // Column
   &.pf-m-column {
-    --#{$inline-edit}__group--item--MarginRight: 0;
+    --#{$inline-edit}__group--item--MarginInlineEnd: 0;
 
     flex-direction: column;
   }
 
   > :last-child {
-    --#{$inline-edit}__group--item--MarginRight: 0;
+    --#{$inline-edit}__group--item--MarginInlineEnd: 0;
   }
 }
 
@@ -102,8 +102,8 @@
 
 // offset button by top padding
 .#{$inline-edit}__label + .#{$inline-edit}__action.pf-m-enable > .#{$button} {
-  margin-block-start: calc(var(--#{$button}--PaddingTop) * -1);
-  margin-block-end: calc(var(--#{$button}--PaddingBottom) * -1);
+  margin-block-start: calc(var(--#{$button}--PaddingBlockStart) * -1);
+  margin-block-end: calc(var(--#{$button}--PaddingBlockEnd) * -1);
 }
 
 .#{$inline-edit}__label.pf-m-bold {

package/components/InputGroup/input-group.css

@@ -5,15 +5,15 @@
   --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
   --pf-v6-c-input-group__item--BackgroundColor: transparent;
   --pf-v6-c-input-group__item--AlignItems: start;
-  --pf-v6-c-input-group__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-input-group__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-input-group__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-input-group__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-input-group__item--m-box--BorderWidth: var(--pf-v6-c-input-group__item--BorderWidth--base);
   --pf-v6-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-input-group__item--m-box--BorderTopColor: var(--pf-v6-c-input-group__item--BorderColor--base);
-  --pf-v6-c-input-group__item--m-box--BorderRightColor: var(--pf-v6-c-input-group__item--BorderColor--base);
-  --pf-v6-c-input-group__item--m-box--BorderBottomColor: var(--pf-v6-c-input-group__item--BorderColor--base);
-  --pf-v6-c-input-group__item--m-box--BorderLeftColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+  --pf-v6-c-input-group__item--m-box--BorderBlockStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+  --pf-v6-c-input-group__item--m-box--BorderInlineEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+  --pf-v6-c-input-group__item--m-box--BorderBlockEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+  --pf-v6-c-input-group__item--m-box--BorderInlineStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
   --pf-v6-c-input-group__item--m-plain--BackgroundColor: transparent;
   --pf-v6-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
@@ -34,20 +34,20 @@
   min-width: var(--pf-v6-c-input-group__item--MinWidth, revert);
   max-width: var(--pf-v6-c-input-group__item--MaxWidth, revert);
   background-color: var(--pf-v6-c-input-group__item--BackgroundColor);
-  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderTopColor);
-  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBottomColor);
-  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderLeftColor);
-  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderRightColor);
+  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
+  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
+  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
+  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
 }
 .pf-v6-c-input-group__item.pf-m-box {
   --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-box--BackgroundColor);
-  padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingInlineEnd);
   border: var(--pf-v6-c-input-group__item--m-box--BorderWidth) solid;
-  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderTopColor);
-  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBottomColor);
-  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderLeftColor);
-  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderRightColor);
+  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
+  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
+  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
+  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
   border-radius: var(--pf-v6-c-input-group__item--m-box--BorderRadius);
 }
 .pf-v6-c-input-group__item.pf-m-plain {

package/components/InputGroup/input-group.scss

@@ -11,15 +11,15 @@
   --#{$input-group}__item--AlignItems: start;
 
   // Input group item, box variant
-  --#{$input-group}__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$input-group}__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$input-group}__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$input-group}__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$input-group}__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$input-group}__item--m-box--BorderWidth: var(--#{$input-group}__item--BorderWidth--base);
   --#{$input-group}__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
-  --#{$input-group}__item--m-box--BorderTopColor: var(--#{$input-group}__item--BorderColor--base);
-  --#{$input-group}__item--m-box--BorderRightColor: var(--#{$input-group}__item--BorderColor--base);
-  --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$input-group}__item--BorderColor--base);
-  --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderColor--base);
+  --#{$input-group}__item--m-box--BorderBlockStartColor: var(--#{$input-group}__item--BorderColor--base);
+  --#{$input-group}__item--m-box--BorderInlineEndColor: var(--#{$input-group}__item--BorderColor--base);
+  --#{$input-group}__item--m-box--BorderBlockEndColor: var(--#{$input-group}__item--BorderColor--base);
+  --#{$input-group}__item--m-box--BorderInlineStartColor: var(--#{$input-group}__item--BorderColor--base);
 
   // Input group item, plain variant
   --#{$input-group}__item--m-plain--BackgroundColor: transparent;
@@ -46,21 +46,21 @@
   min-width: var(--#{$input-group}__item--MinWidth, revert);
   max-width: var(--#{$input-group}__item--MaxWidth, revert);
   background-color: var(--#{$input-group}__item--BackgroundColor);
-  border-block-start-color: var(--#{$input-group}__item--m-box--BorderTopColor);
-  border-block-end-color: var(--#{$input-group}__item--m-box--BorderBottomColor);
-  border-inline-start-color: var(--#{$input-group}__item--m-box--BorderLeftColor);
-  border-inline-end-color: var(--#{$input-group}__item--m-box--BorderRightColor);
+  border-block-start-color: var(--#{$input-group}__item--m-box--BorderBlockStartColor);
+  border-block-end-color: var(--#{$input-group}__item--m-box--BorderBlockEndColor);
+  border-inline-start-color: var(--#{$input-group}__item--m-box--BorderInlineStartColor);
+  border-inline-end-color: var(--#{$input-group}__item--m-box--BorderInlineEndColor);
 
   &.pf-m-box {
     --#{$input-group}__item--BackgroundColor: var(--#{$input-group}__item--m-box--BackgroundColor);
 
-    padding-inline-start: var(--#{$input-group}__item--m-box--PaddingLeft);
-    padding-inline-end: var(--#{$input-group}__item--m-box--PaddingRight);
+    padding-inline-start: var(--#{$input-group}__item--m-box--PaddingInlineStart);
+    padding-inline-end: var(--#{$input-group}__item--m-box--PaddingInlineEnd);
     border: var(--#{$input-group}__item--m-box--BorderWidth) solid;
-    border-block-start-color: var(--#{$input-group}__item--m-box--BorderTopColor);
-    border-block-end-color: var(--#{$input-group}__item--m-box--BorderBottomColor);
-    border-inline-start-color: var(--#{$input-group}__item--m-box--BorderLeftColor);
-    border-inline-end-color: var(--#{$input-group}__item--m-box--BorderRightColor);
+    border-block-start-color: var(--#{$input-group}__item--m-box--BorderBlockStartColor);
+    border-block-end-color: var(--#{$input-group}__item--m-box--BorderBlockEndColor);
+    border-inline-start-color: var(--#{$input-group}__item--m-box--BorderInlineStartColor);
+    border-inline-end-color: var(--#{$input-group}__item--m-box--BorderInlineEndColor);
     border-radius: var(--#{$input-group}__item--m-box--BorderRadius);
   }