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

package/components/Form/form.scss

@@ -30,7 +30,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   // Group
   --#{$form}__group--Gap: var(--pf-t--global--spacer--sm);
-  --#{$form}__group--m-action--MarginTop: var(--pf-t--global--spacer--xl);
+  --#{$form}__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --#{$form}--m-horizontal__group-label--md--GridColumnWidth: #{pf-size-prem(150px)};
   --#{$form}--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--md);
   --#{$form}--m-horizontal__group-control--md--GridColumnWidth: 1fr;
@@ -54,8 +54,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   // plus the border width used by the text inputs is 1px
   // So we need to adjust by 21 - 16.1 + 1 = 5.9px
 
-  --#{$form}--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) + (2 * var(--pf-t--global--border--width--control--default))) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)) - ((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) + var(--pf-t--global--border--width--control--default));
-  --#{$form}__group-label--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$form}--m-horizontal__group-label--md--PaddingBlockStart: calc((((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) + (2 * var(--pf-t--global--border--width--control--default))) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)) - ((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) + var(--pf-t--global--border--width--control--default));
+  --#{$form}__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
 
   // Use the no-padding modifier to align form groups that aren't text inputs
   // Use the formula above, except
@@ -63,7 +63,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   // - reverse the subtraction so we get a negative number to translate by
   // - controls like checkboxes use the medium font and small line height
   // - This comes out to a difference of 2.3px.
-  --#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
+  --#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
   --#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
 
   // Label
@@ -77,7 +77,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Required labels
-  --#{$form}__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
+  --#{$form}__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$form}__label-required--Color: var(--pf-t--global--color--status--danger--default);
 
@@ -85,75 +85,75 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
 
   // Form group label info
-  --#{$form}__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$form}__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --#{$form}__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
 
   // Group control
-  --#{$form}__group-control--m-inline--child--MarginRight: var(--pf-t--global--spacer--lg);
-  --#{$form}__group-control__helper-text--MarginBottom: var(--pf-t--global--spacer--xs);
+  --#{$form}__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$form}__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
   --#{$form}__group-control--Gap: var(--pf-t--global--spacer--sm);
   --#{$form}__group-control--m-stack--Gap: var(--pf-t--global--spacer--sm);
-  --#{$form}__group-control--m-stack__helper-text--MarginTop: calc(var(--#{$form}__group-control--m-stack--Gap) * -1 + var(--#{$form}__helper-text--MarginTop--base));
+  --#{$form}__group-control--m-stack__helper-text--MarginBlockStart: calc(var(--#{$form}__group-control--m-stack--Gap) * -1 + var(--#{$form}__helper-text--MarginBlockStart--base));
 
   // Actions
-  --#{$form}__actions--child--MarginTop: var(--pf-t--global--spacer--sm);
-  --#{$form}__actions--child--MarginRight: var(--pf-t--global--spacer--sm);
-  --#{$form}__actions--child--MarginBottom: var(--pf-t--global--spacer--sm);
-  --#{$form}__actions--child--MarginLeft: var(--pf-t--global--spacer--sm);
-  --#{$form}__actions--MarginTop: calc(var(--#{$form}__actions--child--MarginTop) * -1);
-  --#{$form}__actions--MarginRight: calc(var(--#{$form}__actions--child--MarginRight) * -1);
-  --#{$form}__actions--MarginBottom: calc(var(--#{$form}__actions--child--MarginBottom) * -1);
-  --#{$form}__actions--MarginLeft: calc(var(--#{$form}__actions--child--MarginLeft) * -1);
+  --#{$form}__actions--child--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$form}__actions--child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$form}__actions--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$form}__actions--child--MarginInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$form}__actions--MarginBlockStart: calc(var(--#{$form}__actions--child--MarginBlockStart) * -1);
+  --#{$form}__actions--MarginInlineEnd: calc(var(--#{$form}__actions--child--MarginInlineEnd) * -1);
+  --#{$form}__actions--MarginBlockEnd: calc(var(--#{$form}__actions--child--MarginBlockEnd) * -1);
+  --#{$form}__actions--MarginInlineStart: calc(var(--#{$form}__actions--child--MarginInlineStart) * -1);
 
   // Helper text
-  --#{$form}__helper-text--MarginTop--base: var(--pf-t--global--spacer--xs);
-  --#{$form}__helper-text--MarginTop: var(--#{$form}__helper-text--MarginTop--base);
+  --#{$form}__helper-text--MarginBlockStart--base: var(--pf-t--global--spacer--xs);
+  --#{$form}__helper-text--MarginBlockStart: var(--#{$form}__helper-text--MarginBlockStart--base);
 
   // Section
-  --#{$form}__section--MarginTop: var(--pf-t--global--spacer--xl);
+  --#{$form}__section--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --#{$form}__section--Gap: var(--pf-t--global--spacer--md);
 
   // Section title
   --#{$form}__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$form}__section-title--FontWeight: var(--pf-t--global--font--weight--heading);
-  --#{$form}__section-title--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
+  --#{$form}__section-title--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
 
   // Field groups
   --#{$form}__field-group--border-width-base: var(--pf-t--global--border--width--divider--default);
-  --#{$form}__field-group--BorderTopWidth: var(--#{$form}__field-group--border-width-base);
-  --#{$form}__field-group--BorderTopColor: var(--pf-t--global--border--color--default);
-  --#{$form}__field-group--BorderBottomWidth: var(--#{$form}__field-group--border-width-base);
-  --#{$form}__field-group--BorderBottomColor: var(--pf-t--global--border--color--default);
-  --#{$form}__field-group--field-group--MarginTop: calc(var(--#{$form}--GridGap) * -1);
+  --#{$form}__field-group--BorderBlockStartWidth: var(--#{$form}__field-group--border-width-base);
+  --#{$form}__field-group--BorderBlockStartColor: var(--pf-t--global--border--color--default);
+  --#{$form}__field-group--BorderBlockEndWidth: var(--#{$form}__field-group--border-width-base);
+  --#{$form}__field-group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  --#{$form}__field-group--field-group--MarginBlockStart: calc(var(--#{$form}--GridGap) * -1);
   --#{$form}__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$form}__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs)); // based off of the expected width of the group toggle, for use to define a column when the toggle is not present
-  --#{$form}__field-group-toggle--PaddingTop: var(--#{$form}__field-group-header--PaddingTop);
-  --#{$form}__field-group-toggle--PaddingRight: var(--pf-t--global--spacer--xs);
-  --#{$form}__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$form}__field-group-toggle--PaddingBlockStart: var(--#{$form}__field-group-header--PaddingBlockStart);
+  --#{$form}__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --#{$form}__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$form}__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
-  --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
-  --#{$form}__field-group-toggle-button--MarginTop: calc(var(--#{$button}--m-plain--PaddingTop) * -1);
-  --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--#{$button}--m-plain--PaddingBottom) * -1);
+  --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
+  --#{$form}__field-group-toggle-button--MarginBlockStart: calc(var(--#{$button}--m-plain--PaddingBlockStart) * -1);
+  --#{$form}__field-group-toggle-button--MarginBlockEnd: calc(var(--#{$button}--m-plain--PaddingBlockEnd) * -1);
   --#{$form}__field-group-toggle-icon--Transition: var(--pf-t--global--transition);
   --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --#{$form}__field-group-toggle-icon--Rotate: 0;
   --#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;
-  --#{$form}__field-group-header--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$form}__field-group-header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$form}__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$form}__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$form}__field-group-header--GridColumn: 1 / 3;
-  --#{$form}__field-group__field-group__field-group-header--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$form}__field-group__field-group__field-group-header--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$form}__field-group__field-group__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$form}__field-group__field-group__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$form}__field-group-toggle--field-group-header--GridColumn: 2 / 3;
-  --#{$form}__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
-  --#{$form}__field-group-header-description--MarginTop: var(--pf-t--global--spacer--xs);
+  --#{$form}__field-group__field-group--field-group__field-group-header--after--BorderBlockStartWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
+  --#{$form}__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
   --#{$form}__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
-  --#{$form}__field-group-header-actions--MarginLeft: var(--pf-t--global--spacer--sm);
-  --#{$form}__field-group-body--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$form}__field-group-body--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$form}__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$form}__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$form}__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$form}__field-group-body--Gap: var(--#{$form}--GridGap);
   --#{$form}__field-group-body--GridColumn: 2 / 3;
   --#{$form}__field-group__field-group__field-group-body--GridColumn: 1 / 3;
   --#{$form}__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
-  --#{$form}__field-group-body__field-group--last-child--MarginBottom: calc(var(--#{$form}__field-group-body--PaddingBottom) * -1);
+  --#{$form}__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--#{$form}__field-group-body--PaddingBlockEnd) * -1);
 }
 
 .#{$form} {
@@ -168,7 +168,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
     }
 
     @include pf-v6-c-form--m-horizontal {
-      --#{$form}__group-label--PaddingBottom: 0;
+      --#{$form}__group-label--PaddingBlockEnd: 0;
 
       .#{$form}__group {
         display: grid;
@@ -177,11 +177,11 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
       }
 
       .#{$form}__group-label {
-        padding-block-start: var(--#{$form}--m-horizontal__group-label--md--PaddingTop);
+        padding-block-start: var(--#{$form}--m-horizontal__group-label--md--PaddingBlockStart);
 
         // stylelint-disable-next-line
         &.pf-m-no-padding-top {
-          --#{$form}--m-horizontal__group-label--md--PaddingTop: var(--#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+          --#{$form}--m-horizontal__group-label--md--PaddingBlockStart: var(--#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
 
           transform: translateY(var(--#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY));
         }
@@ -205,7 +205,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   min-width: 0;
 
   &.pf-m-action {
-    margin-block-start: var(--#{$form}__group--m-action--MarginTop);
+    margin-block-start: var(--#{$form}__group--m-action--MarginBlockStart);
     overflow: hidden; // keeps the negative bottom margin bottom on .#{$form}__actions from triggering overflow
   }
 }
@@ -216,18 +216,18 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   & + .#{$form}__group:not(.pf-m-action),
   &:not(:first-child) {
-    margin-block-start: var(--#{$form}__section--MarginTop);
+    margin-block-start: var(--#{$form}__section--MarginBlockStart);
   }
 }
 
 .#{$form}__section-title {
-  margin-block-end: var(--#{$form}__section-title--MarginBottom);
+  margin-block-end: var(--#{$form}__section-title--MarginBlockEnd);
   font-size: var(--#{$form}__section-title--FontSize);
   font-weight: var(--#{$form}__section-title--FontWeight);
 }
 
 .#{$form}__group-label {
-  --#{$form}__helper-text--MarginTop: 0;
+  --#{$form}__helper-text--MarginBlockStart: 0;
 
   &.pf-m-info {
     display: flex;
@@ -240,7 +240,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__group-label-info {
-  margin-inline-start: var(--#{$form}__group-label-info--MarginLeft);
+  margin-inline-start: var(--#{$form}__group-label-info--MarginInlineStart);
   font-size: var(--#{$form}__group-label-info--FontSize);
 }
 
@@ -270,7 +270,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__label-required {
-  margin-inline-start: var(--#{$form}__label-required--MarginLeft);
+  margin-inline-start: var(--#{$form}__label-required--MarginInlineStart);
   font-size: var(--#{$form}__label-required--FontSize);
   color: var(--#{$form}__label-required--Color);
 }
@@ -289,30 +289,30 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
     flex-flow: row wrap;
 
     > * {
-      margin-inline-end: var(--#{$form}__group-control--m-inline--child--MarginRight);
+      margin-inline-end: var(--#{$form}__group-control--m-inline--child--MarginInlineEnd);
     }
 
     > :last-child {
-      --#{$form}__group-control--m-inline--child--MarginRight: 0;
+      --#{$form}__group-control--m-inline--child--MarginInlineEnd: 0;
     }
   }
 
   &.pf-m-stack {
-    --#{$form}__helper-text--MarginTop: var(--#{$form}__group-control--m-stack__helper-text--MarginTop);
+    --#{$form}__helper-text--MarginBlockStart: var(--#{$form}__group-control--m-stack__helper-text--MarginBlockStart);
 
     display: grid;
     gap: var(--#{$form}__group-control--m-stack--Gap);
   }
 
   .#{$form}__helper-text:first-child {
-    --#{$form}__helper-text--MarginTop: 0;
+    --#{$form}__helper-text--MarginBlockStart: 0;
 
-    margin-block-end: var(--#{$form}__group-control__helper-text--MarginBottom);
+    margin-block-end: var(--#{$form}__group-control__helper-text--MarginBlockEnd);
   }
 }
 
 .#{$form}__helper-text {
-  margin-block-start: var(--#{$form}__helper-text--MarginTop);
+  margin-block-start: var(--#{$form}__helper-text--MarginBlockStart);
 
   &.pf-m-inactive {
     display: none;
@@ -332,47 +332,47 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 .#{$form}__actions {
   display: flex;
   flex-wrap: wrap;
-  margin-block-start: var(--#{$form}__actions--MarginTop);
-  margin-block-end: var(--#{$form}__actions--MarginBottom);
-  margin-inline-start: var(--#{$form}__actions--MarginLeft);
-  margin-inline-end: var(--#{$form}__actions--MarginRight);
+  margin-block-start: var(--#{$form}__actions--MarginBlockStart);
+  margin-block-end: var(--#{$form}__actions--MarginBlockEnd);
+  margin-inline-start: var(--#{$form}__actions--MarginInlineStart);
+  margin-inline-end: var(--#{$form}__actions--MarginInlineEnd);
 
   > * {
-    margin-block-start: var(--#{$form}__actions--child--MarginTop);
-    margin-block-end: var(--#{$form}__actions--child--MarginBottom);
-    margin-inline-start: var(--#{$form}__actions--child--MarginLeft);
-    margin-inline-end: var(--#{$form}__actions--child--MarginRight);
+    margin-block-start: var(--#{$form}__actions--child--MarginBlockStart);
+    margin-block-end: var(--#{$form}__actions--child--MarginBlockEnd);
+    margin-inline-start: var(--#{$form}__actions--child--MarginInlineStart);
+    margin-inline-end: var(--#{$form}__actions--child--MarginInlineEnd);
   }
 }
 
 .#{$form}__field-group {
-  --#{$form}__field-group--BorderTopWidth: var(--#{$form}__field-group--border-width-base);
+  --#{$form}__field-group--BorderBlockStartWidth: var(--#{$form}__field-group--border-width-base);
 
   display: grid;
   grid-template-columns: minmax(var(--#{$form}__field-group--GridTemplateColumns--toggle), max-content) 1fr;
-  border-block-start: var(--#{$form}__field-group--BorderTopWidth) solid var(--#{$form}__field-group--BorderTopColor);
-  border-block-end: var(--#{$form}__field-group--BorderBottomWidth) solid var(--#{$form}__field-group--BorderBottomColor);
+  border-block-start: var(--#{$form}__field-group--BorderBlockStartWidth) solid var(--#{$form}__field-group--BorderBlockStartColor);
+  border-block-end: var(--#{$form}__field-group--BorderBlockEndWidth) solid var(--#{$form}__field-group--BorderBlockEndColor);
 
   &:last-child {
-    --#{$form}__field-group--BorderBottomWidth: 0;
+    --#{$form}__field-group--BorderBlockEndWidth: 0;
   }
 
   & + &,
   &:first-child {
-    --#{$form}__field-group--BorderTopWidth: 0;
+    --#{$form}__field-group--BorderBlockStartWidth: 0;
   }
 
   & + & {
-    margin-block-start: var(--#{$form}__field-group--field-group--MarginTop);
+    margin-block-start: var(--#{$form}__field-group--field-group--MarginBlockStart);
   }
 
   // nested
   & & {
     --#{$form}__field-group-body--GridColumn: var(--#{$form}__field-group__field-group__field-group-body--GridColumn);
-    --#{$form}__field-group-toggle--PaddingTop: var(--#{$form}__field-group__field-group__field-group-toggle--PaddingTop);
-    --#{$form}__field-group-header--PaddingTop: var(--#{$form}__field-group__field-group__field-group-header--PaddingTop);
-    --#{$form}__field-group-header--PaddingBottom: var(--#{$form}__field-group__field-group__field-group-header--PaddingBottom);
-    --#{$form}__field-group-body--PaddingTop: 0;
+    --#{$form}__field-group-toggle--PaddingBlockStart: var(--#{$form}__field-group__field-group__field-group-toggle--PaddingBlockStart);
+    --#{$form}__field-group-header--PaddingBlockStart: var(--#{$form}__field-group__field-group__field-group-header--PaddingBlockStart);
+    --#{$form}__field-group-header--PaddingBlockEnd: var(--#{$form}__field-group__field-group__field-group-header--PaddingBlockEnd);
+    --#{$form}__field-group-body--PaddingBlockStart: 0;
 
     .#{$form}__field-group-toggle ~ .#{$form}__field-group-body {
       --#{$form}__field-group-body--GridColumn: var(--#{$form}__field-group__field-group__field-group-toggle--field-group-body--GridColumn);
@@ -389,8 +389,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 .#{$form}__field-group-toggle {
   grid-row: 1 / 2;
   grid-column: 1 / 2;
-  padding-block-start: var(--#{$form}__field-group-toggle--PaddingTop);
-  padding-inline-end: var(--#{$form}__field-group-toggle--PaddingRight);
+  padding-block-start: var(--#{$form}__field-group-toggle--PaddingBlockStart);
+  padding-inline-end: var(--#{$form}__field-group-toggle--PaddingInlineEnd);
 
   + .#{$form}__field-group-header {
     --#{$form}__field-group-header--GridColumn: var(--#{$form}__field-group-toggle--field-group-header--GridColumn);
@@ -398,8 +398,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__field-group-toggle-button {
-  margin-block-start: var(--#{$form}__field-group-toggle-button--MarginTop);
-  margin-block-end: var(--#{$form}__field-group-toggle-button--MarginBottom);
+  margin-block-start: var(--#{$form}__field-group-toggle-button--MarginBlockStart);
+  margin-block-end: var(--#{$form}__field-group-toggle-button--MarginBlockEnd);
 }
 
 .#{$form}__field-group-toggle-icon {
@@ -417,8 +417,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   grid-row: 1 / 2;
   grid-column: var(--#{$form}__field-group-header--GridColumn);
   align-items: flex-start;
-  padding-block-start: var(--#{$form}__field-group-header--PaddingTop);
-  padding-block-end: var(--#{$form}__field-group-header--PaddingBottom);
+  padding-block-start: var(--#{$form}__field-group-header--PaddingBlockStart);
+  padding-block-end: var(--#{$form}__field-group-header--PaddingBlockEnd);
 }
 
 .#{$form}__field-group-header-main {
@@ -436,12 +436,12 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__field-group-header-description {
-  margin-block-start: var(--#{$form}__field-group-header-description--MarginTop);
+  margin-block-start: var(--#{$form}__field-group-header-description--MarginBlockStart);
   color: var(--#{$form}__field-group-header-description--Color);
 }
 
 .#{$form}__field-group-header-actions {
-  margin-inline-start: var(--#{$form}__field-group-header-actions--MarginLeft);
+  margin-inline-start: var(--#{$form}__field-group-header-actions--MarginInlineStart);
   white-space: nowrap;
 }
 
@@ -449,17 +449,17 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   display: grid;
   grid-column: var(--#{$form}__field-group-body--GridColumn);
   gap: var(--#{$form}__field-group-body--Gap);
-  padding-block-start: var(--#{$form}__field-group-body--PaddingTop);
-  padding-block-end: var(--#{$form}__field-group-body--PaddingBottom);
+  padding-block-start: var(--#{$form}__field-group-body--PaddingBlockStart);
+  padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
 
   > .#{$form}__field-group {
     &:first-child {
-      --#{$form}__field-group-toggle--PaddingTop: 0;
-      --#{$form}__field-group-header--PaddingTop: 0;
+      --#{$form}__field-group-toggle--PaddingBlockStart: 0;
+      --#{$form}__field-group-header--PaddingBlockStart: 0;
     }
 
     &:last-child {
-      margin-block-end: var(--#{$form}__field-group-body__field-group--last-child--MarginBottom);
+      margin-block-end: var(--#{$form}__field-group-body__field-group--last-child--MarginBlockEnd);
     }
   }
 }

package/components/FormControl/form-control.css

@@ -15,10 +15,10 @@
   --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-form-control--Width: 100%;
   --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
-  --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
-  --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--inset--base);
-  --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+  --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
@@ -40,37 +40,37 @@
   --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
   --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
-  --pf-v6-c-form-control--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
+  --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
   --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
-  --pf-v6-c-form-control--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
+  --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
   --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
-  --pf-v6-c-form-control--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
+  --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
   --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
-  --pf-v6-c-form-control--m-icon--PaddingRight: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
+  --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
   --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
   --pf-v6-c-form-control--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
-  --pf-v6-c-form-control__select--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-form-control__select--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
+  --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
   --pf-v6-c-form-control--textarea--Height: auto;
-  --pf-v6-c-form-control__icon--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form-control__icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
   --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-form-control__utilities--PaddingTop: var(--pf-v6-c-form-control--inset--base);
-  --pf-v6-c-form-control__utilities--PaddingRight: var(--pf-v6-c-form-control--inset--base);
-  --pf-v6-c-form-control__toggle-icon--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-form-control__toggle-icon--PaddingRight: var(--pf-v6-c-form-control--inset--base);
-  --pf-v6-c-form-control__toggle-icon--PaddingLeft: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control__toggle-icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
@@ -107,10 +107,10 @@
 .pf-v6-c-form-control > :is(input, select, textarea) {
   grid-row: 1/2;
   grid-column: 1/-1;
-  padding-block-start: var(--pf-v6-c-form-control--PaddingTop);
-  padding-block-end: var(--pf-v6-c-form-control--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-form-control--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-form-control--PaddingRight);
+  padding-block-start: var(--pf-v6-c-form-control--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-form-control--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
   color: var(--pf-v6-c-form-control--Color);
   background-color: transparent;
   border: none;
@@ -164,47 +164,47 @@
   cursor: not-allowed;
 }
 .pf-v6-c-form-control.pf-m-error {
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-error--PaddingRight);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
-  --pf-v6-c-form-control__select--PaddingRight: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingRight);
+  --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
 }
 .pf-v6-c-form-control.pf-m-error.pf-m-icon {
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-icon--icon--PaddingRight);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
 }
 .pf-v6-c-form-control.pf-m-success {
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-success--PaddingRight);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
-  --pf-v6-c-form-control__select--PaddingRight: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingRight);
+  --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
 }
 .pf-v6-c-form-control.pf-m-success.pf-m-icon {
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-icon--icon--PaddingRight);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
 }
 .pf-v6-c-form-control.pf-m-warning {
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-warning--PaddingRight);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
-  --pf-v6-c-form-control__select--PaddingRight: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingRight);
+  --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
 }
 .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-icon--icon--PaddingRight);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
 }
 .pf-v6-c-form-control.pf-m-icon {
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-icon--PaddingRight);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
 }
 .pf-v6-c-form-control > select {
-  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control__select--PaddingRight);
-  --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control__select--PaddingLeft);
+  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
+  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
   background-color: var(--pf-v6-c-form-control--BackgroundColor);
 }
 @-moz-document url-prefix() {
   .pf-v6-c-form-control > select {
-    --pf-v6-c-form-control--PaddingRight: calc(var(--pf-v6-c-form-control__select--PaddingRight) - 1px);
-    --pf-v6-c-form-control--PaddingLeft: calc(var(--pf-v6-c-form-control__select--PaddingLeft) - 4px);
+    --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
+    --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
   }
 }
 .pf-v6-c-form-control.pf-m-placeholder > select {
@@ -236,7 +236,7 @@
 }
 
 .pf-v6-c-form-control__icon {
-  padding-block-start: var(--pf-v6-c-form-control__icon--PaddingTop);
+  padding-block-start: var(--pf-v6-c-form-control__icon--PaddingBlockStart);
   color: var(--pf-v6-c-form-control__icon--Color);
 }
 .pf-v6-c-form-control__icon.pf-m-status {
@@ -246,9 +246,9 @@
 .pf-v6-c-form-control__toggle-icon {
   grid-row: 1/2;
   grid-column: 3;
-  padding-block-start: var(--pf-v6-c-form-control__toggle-icon--PaddingTop);
-  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingRight);
+  padding-block-start: var(--pf-v6-c-form-control__toggle-icon--PaddingBlockStart);
+  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
   color: var(--pf-v6-c-form-control__toggle-icon--Color);
   pointer-events: none;
 }
@@ -259,10 +259,10 @@
   grid-row: 1/2;
   grid-column: 2;
   gap: var(--pf-v6-c-form-control__utilities--Gap);
-  padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingRight);
+  padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
   pointer-events: none;
 }
 
 select ~ .pf-v6-c-form-control__utilities {
-  --pf-v6-c-form-control__utilities--PaddingRight: 0;
+  --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
 }