@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/Form/form.scss

@@ -1,36 +1,36 @@
-// @debug $form; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
+@use '../../sass-utilities' as *;
 
-@mixin pf-v5-c-form--m-horizontal {
+$pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
+
+@mixin pf-v6-c-form--m-horizontal {
   // default horizontal styles applied at medium breakpoint
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     @content;
   }
 
   // custom xs style since this isn't in our maps - maps are based on mobile first design. This may not even be a valid option based on design but I guess it doesn't hurt to add.
   &-on-xs {
-    @media screen and (min-width: $pf-v5-global--breakpoint--xs) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xs) {
       @content;
     }
   }
 
   // loop to build the rest of the breakpoints
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-form--m-horizontal--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-form--m-horizontal--breakpoint-map {
     &-on-#{$breakpoint} {
-      @include pf-v5-apply-breakpoint($breakpoint) {
+      @include pf-v6-apply-breakpoint($breakpoint) {
         @content;
       }
     }
   }
 }
 
-:root,
-.#{$form} {
+@include pf-root($form) {
   --#{$form}--GridGap: var(--pf-t--global--spacer--lg);
 
   // 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-v5-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-v5-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-v5-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,77 @@ $pf-v5-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--m-info--Gap: var(--pf-t--global--spacer--sm);
   --#{$form}__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--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--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --#{$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-toggle-icon--Transition: var(--#{$pf-global}--Transition);
+  --#{$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(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --#{$form}__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --#{$form}__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$form}__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$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} {
@@ -167,8 +169,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
       }
     }
 
-    @include pf-v5-c-form--m-horizontal {
-      --#{$form}__group-label--PaddingBottom: 0;
+    @include pf-v6-c-form--m-horizontal {
+      --#{$form}__group-label--PaddingBlockEnd: 0;
 
       .#{$form}__group {
         display: grid;
@@ -177,14 +179,26 @@ $pf-v5-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
+        // stylelint-disable max-nesting-depth
         &.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));
         }
+
+        &.pf-m-info {
+          --#{$form}__group-label--m-info--Gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
+
+          flex-direction: column;
+          align-items: flex-start;
+        }
+        // stylelint-enable
+      }
+
+      .#{$form}__group-label-main {
+        flex-grow: 0;
       }
 
       .#{$form}__group-control {
@@ -205,7 +219,7 @@ $pf-v5-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,21 +230,22 @@ $pf-v5-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;
+    gap: var(--#{$form}__group-label--m-info--Gap);
     align-items: flex-end;
   }
 }
@@ -240,7 +255,6 @@ $pf-v5-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);
   font-size: var(--#{$form}__group-label-info--FontSize);
 }
 
@@ -270,7 +284,7 @@ $pf-v5-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 +303,30 @@ $pf-v5-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 +346,47 @@ $pf-v5-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 +403,8 @@ $pf-v5-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,18 +412,18 @@ $pf-v5-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 {
   display: inline-block;
   min-width: var(--#{$form}__field-group-toggle-icon--MinWidth);
   text-align: center;
-  transition: var(--#{$form}__field-group-toggle-icon--Transition);
+  transition: transform var(--#{$form}__field-group-toggle-icon--TransitionDuration) var(--#{$form}__field-group-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
 
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 }
 
 .#{$form}__field-group-header {
@@ -417,8 +431,8 @@ $pf-v5-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 +450,12 @@ $pf-v5-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 +463,17 @@ $pf-v5-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);
     }
   }
 }