@patternfly/patternfly 6.0.0-alpha.4 → 6.0.0-alpha.41

package/components/ExpandableSection/expandable-section.scss

@@ -1,70 +1,79 @@
 // @debug $expandable-section; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$expandable-section} {
+:root {
   // Toggle
-  --#{$expandable-section}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$expandable-section}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$expandable-section}__toggle--PaddingLeft: 0;
-  --#{$expandable-section}__toggle--MarginTop: 0;
-  --#{$expandable-section}__toggle--Color: var(--#{$pf-global}--link--Color);
-  --#{$expandable-section}__toggle--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--active--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--focus--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--m-expanded--Color: var(--#{$pf-global}--link--Color--hover);
+  --#{$expandable-section}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__toggle--BackgroundColor: transparent;
-
+  --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
+  
   // Toggle icon
   --#{$expandable-section}__toggle-icon--MinWidth: 1em;
-  --#{$expandable-section}__toggle-icon--Color: var(--#{$pf-global}--Color--100);
+  --#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$expandable-section}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$expandable-section}__toggle-icon--Rotate: 0;
   --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
   --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
   --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
-
+  
   // Toggle text
-  --#{$expandable-section}__toggle-text--MarginLeft: calc(var(--#{$pf-global}--spacer--xs) + var(--#{$pf-global}--spacer--sm));
+  --#{$expandable-section}__toggle-text--Color: var(--pf-t--global--color--brand--default);
+  --#{$expandable-section}__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
+  --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
+
 
   // Content
-  --#{$expandable-section}__content--MarginTop: var(--#{$pf-global}--spacer--md);
+  --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__content--MaxWidth: auto;
-
+  
   // Limit Width
   --#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
+  
+  // Large / Disclosure
+  --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$expandable-section}--m-display-lg__toggle--Width: 100%;
+  --#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
 
-  // Large
-  --#{$expandable-section}--m-display-lg--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__content--MarginTop: 0;
-  --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg--after--BackgroundColor: transparent;
-  --#{$expandable-section}--m-display-lg--after--Width: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
 
   // Indented
-  --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}__toggle-text--MarginLeft) + var(--#{$expandable-section}__toggle-icon--MinWidth));
-
+  --#{$expandable-section}--m-indented__content--PaddingLeft--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
+  --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}__toggle--PaddingLeft));
+  --#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingLeft));
+  
   // Truncate
+  --#{$expandable-section}--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}--m-truncate__content--LineClamp: 3;
-  --#{$expandable-section}--m-truncate__toggle--MarginTop: var(--#{$pf-global}--spacer--xs);
-
+}
 
+.#{$expandable-section} {
   &.pf-m-expanded {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--m-expanded--Color);
+    --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}--m-expanded__toggle-text--Color);
     --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
     --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
     --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
-  }
-
-  &.pf-m-detached,
-  &.pf-m-truncate {
-    --#{$expandable-section}__content--MarginTop: 0;
+    --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius);
   }
 
   &.pf-m-limit-width {
@@ -76,23 +85,19 @@
     --#{$expandable-section}__toggle--PaddingRight: var(--#{$expandable-section}--m-display-lg__toggle--PaddingRight);
     --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBottom);
     --#{$expandable-section}__toggle--PaddingLeft: var(--#{$expandable-section}--m-display-lg__toggle--PaddingLeft);
+    --#{$expandable-section}__toggle--hover--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor);
+    --#{$expandable-section}__toggle--active--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor);
+    --#{$expandable-section}__toggle--focus--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor);
+    --#{$expandable-section}__toggle--BorderRadius: var(--#{$expandable-section}--m-display-lg__toggle--BorderRadius);
+    --#{$expandable-section}__toggle--Width: var(--#{$expandable-section}--m-display-lg__toggle--Width);
     --#{$expandable-section}__content--PaddingRight: var(--#{$expandable-section}--m-display-lg__content--PaddingRight);
     --#{$expandable-section}__content--PaddingBottom: var(--#{$expandable-section}--m-display-lg__content--PaddingBottom);
     --#{$expandable-section}__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg__content--PaddingLeft);
-    --#{$expandable-section}__content--MarginTop: var(--#{$expandable-section}--m-display-lg__content--MarginTop);
-
-    position: relative;
-    box-shadow: var(--#{$expandable-section}--m-display-lg--BoxShadow);
-
-    &::after {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: var(--#{$expandable-section}--m-display-lg--after--Width);
-      content: "";
-      background-color: var(--#{$expandable-section}--m-display-lg--after--BackgroundColor);
-    }
+    --#{$expandable-section}--m-indented__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft);
+
+    background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
+    border: solid 1px var(--#{$expandable-section}--m-display-lg--BorderColor);
+    border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
   }
 
   &.pf-m-indented {
@@ -100,11 +105,14 @@
   }
 
   &.pf-m-truncate {
-    --#{$expandable-section}__toggle--MarginTop: var(--#{$expandable-section}--m-truncate__toggle--MarginTop);
     --#{$expandable-section}__toggle--PaddingTop: 0;
     --#{$expandable-section}__toggle--PaddingRight: 0;
-    --#{$expandable-section}__toggle--PaddingBottom: 0;
-    --#{$expandable-section}__toggle-text--MarginLeft: 0;
+    --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-truncate__toggle--PaddingBottom);
+    --#{$expandable-section}__toggle--PaddingLeft: 0;
+    --#{$expandable-section}__content--PaddingTop: 0;
+    --#{$expandable-section}__content--PaddingRight: 0;
+    --#{$expandable-section}__content--PaddingBottom: 0;
+    --#{$expandable-section}__content--PaddingLeft: 0;
 
     &:not(.pf-m-expanded) .#{$expandable-section}__content {
       // stylelint-disable
@@ -115,35 +123,29 @@
       overflow: hidden;
     }
   }
-
-  &.pf-m-detached {
-    --#{$expandable-section}--m-truncate__toggle--MarginTop: 0;
-  }
 }
 
 .#{$expandable-section}__toggle {
   display: flex;
-  padding: var(--#{$expandable-section}__toggle--PaddingTop) var(--#{$expandable-section}__toggle--PaddingRight) var(--#{$expandable-section}__toggle--PaddingBottom) var(--#{$expandable-section}__toggle--PaddingLeft);
-  margin-top: var(--#{$expandable-section}__toggle--MarginTop);
-  color: var(--#{$expandable-section}__toggle--Color);
+  column-gap: var(--#{$expandable-section}__toggle--ColumnGap);
+  width: var(--#{$expandable-section}__toggle--Width, initial);
+  padding-block-start: var(--#{$expandable-section}__toggle--PaddingTop);
+  padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
   background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
   border: none;
+  border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
 
-  &:hover {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--hover--Color);
-  }
-
-  &:active,
-  &.pf-m-active {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--active--Color);
-  }
-
-  &:focus {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--focus--Color);
+  &:is(:hover, :focus) {
+    --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}__toggle-text--hover--Color);
+    --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
   }
 }
 
 .#{$expandable-section}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
   color: var(--#{$expandable-section}__toggle-icon--Color);
   transition: var(--#{$expandable-section}__toggle-icon--Transition);
@@ -155,13 +157,13 @@
 }
 
 .#{$expandable-section}__toggle-text {
-  margin-left: var(--#{$expandable-section}__toggle-text--MarginLeft);
+  color: var(--#{$expandable-section}__toggle-text--Color);
 }
 
 .#{$expandable-section}__content {
   max-width: var(--#{$expandable-section}__content--MaxWidth);
-  padding-right: var(--#{$expandable-section}__content--PaddingRight);
-  padding-bottom: var(--#{$expandable-section}__content--PaddingBottom);
-  padding-left: var(--#{$expandable-section}__content--PaddingLeft);
-  margin-top: var(--#{$expandable-section}__content--MarginTop);
+  padding-block-start: var(--#{$expandable-section}__content--PaddingTop);
+  padding-block-end: var(--#{$expandable-section}__content--PaddingBottom);
+  padding-inline-start: var(--#{$expandable-section}__content--PaddingLeft);
+  padding-inline-end: var(--#{$expandable-section}__content--PaddingRight);
 }

package/components/FileUpload/file-upload.css

@@ -16,20 +16,14 @@
 }
 .pf-v5-c-file-upload.pf-m-drag-hover::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: var(--pf-v5-c-file-upload--m-drag-hover--before--ZIndex);
   content: "";
   border: var(--pf-v5-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-file-upload--m-drag-hover--before--BorderColor);
 }
 .pf-v5-c-file-upload.pf-m-drag-hover::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   content: "";
   background-color: var(--pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor);
   opacity: var(--pf-v5-c-file-upload--m-drag-hover--after--Opacity);
@@ -39,10 +33,10 @@
 }
 .pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details::before {
   position: absolute;
-  top: 0;
-  right: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
-  bottom: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
-  left: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
+  inset-block-start: 0;
+  inset-block-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
+  inset-inline-start: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
+  inset-inline-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
   content: "";
   background-color: var(--pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor);
 }
@@ -58,12 +52,12 @@
 .pf-v5-c-file-upload__file-details .pf-v5-c-form-control {
   flex: 1 1 auto;
   min-height: var(--pf-v5-c-file-upload__file-details__c-form-control--MinHeight);
-  border-top: 0;
+  border-block-start: 0;
 }
 
 .pf-v5-c-file-upload__file-details-spinner {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }

package/components/FileUpload/file-upload.scss

@@ -27,10 +27,7 @@
   &.pf-m-drag-hover {
     &::before {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       z-index: var(--#{$file-upload}--m-drag-hover--before--ZIndex);
       content: "";
       border: var(--#{$file-upload}--m-drag-hover--before--BorderWidth) solid var(--#{$file-upload}--m-drag-hover--before--BorderColor);
@@ -38,10 +35,7 @@
 
     &::after {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       content: "";
       background-color: var(--#{$file-upload}--m-drag-hover--after--BackgroundColor);
       opacity: var(--#{$file-upload}--m-drag-hover--after--Opacity);
@@ -54,10 +48,10 @@
 
       &::before {
         position: absolute;
-        top: 0;
-        right: var(--#{$file-upload}--m-loading__file-details--before--Left);
-        bottom: var(--#{$file-upload}--m-loading__file-details--before--Left);
-        left: var(--#{$file-upload}--m-loading__file-details--before--Left);
+        inset-block-start: 0;
+        inset-block-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
+        inset-inline-start: var(--#{$file-upload}--m-loading__file-details--before--Left);
+        inset-inline-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
         content: "";
         background-color: var(--#{$file-upload}--m-loading__file-details--before--BackgroundColor);
       }
@@ -78,13 +72,13 @@
   .#{$form-control} {
     flex: 1 1 auto;
     min-height: var(--#{$file-upload}__file-details__c-form-control--MinHeight);
-    border-top: 0;
+    border-block-start: 0;
   }
 }
 
 .#{$file-upload}__file-details-spinner {
   position: absolute;
-  top: 50%;
-  left: 50%;
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }

package/components/Form/form.css

@@ -101,7 +101,7 @@
   gap: var(--pf-v5-c-form--GridGap);
 }
 .pf-v5-c-form.pf-m-horizontal.pf-m-align-right .pf-v5-c-form__label {
-  text-align: right;
+  text-align: end;
 }
 @media screen and (min-width: 768px) {
   .pf-v5-c-form.pf-m-horizontal {
@@ -113,7 +113,7 @@
     grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label {
-    padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
+    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
   }
   .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-no-padding-top {
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -133,7 +133,7 @@
     grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label {
-    padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
+    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
   }
   .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-no-padding-top {
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -153,7 +153,7 @@
     grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label {
-    padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
+    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
   }
   .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-no-padding-top {
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -173,7 +173,7 @@
     grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label {
-    padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
+    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
   }
   .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-no-padding-top {
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -193,7 +193,7 @@
     grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label {
-    padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
+    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
   }
   .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-no-padding-top {
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -213,7 +213,7 @@
     grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label {
-    padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
+    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
   }
   .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-no-padding-top {
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -233,7 +233,7 @@
     grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
   }
   .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label {
-    padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
+    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
   }
   .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-no-padding-top {
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -247,8 +247,11 @@
   max-width: var(--pf-v5-c-form--m-limit-width--MaxWidth);
 }
 
+.pf-v5-c-form__group {
+  min-width: 0;
+}
 .pf-v5-c-form__group.pf-m-action {
-  margin-top: var(--pf-v5-c-form__group--m-action--MarginTop);
+  margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
   overflow: hidden;
 }
 
@@ -257,18 +260,18 @@
   gap: var(--pf-v5-c-form__section--Gap);
 }
 .pf-v5-c-form__section + .pf-v5-c-form__group:not(.pf-m-action), .pf-v5-c-form__section:not(:first-child) {
-  margin-top: var(--pf-v5-c-form__section--MarginTop);
+  margin-block-start: var(--pf-v5-c-form__section--MarginTop);
 }
 
 .pf-v5-c-form__section-title {
-  margin-bottom: var(--pf-v5-c-form__section-title--MarginBottom);
+  margin-block-end: var(--pf-v5-c-form__section-title--MarginBottom);
   font-size: var(--pf-v5-c-form__section-title--FontSize);
   font-weight: var(--pf-v5-c-form__section-title--FontWeight);
 }
 
 .pf-v5-c-form__group-label {
   --pf-v5-c-form__helper-text--MarginTop: 0;
-  padding-bottom: var(--pf-v5-c-form__group-label--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-form__group-label--PaddingBottom);
 }
 .pf-v5-c-form__group-label.pf-m-info {
   display: flex;
@@ -280,7 +283,7 @@
 }
 
 .pf-v5-c-form__group-label-info {
-  margin-left: var(--pf-v5-c-form__group-label-info--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
   font-size: var(--pf-v5-c-form__group-label-info--FontSize);
 }
 
@@ -306,20 +309,20 @@
 }
 
 .pf-v5-c-form__label-required {
-  margin-left: var(--pf-v5-c-form__label-required--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-form__label-required--MarginLeft);
   font-size: var(--pf-v5-c-form__label-required--FontSize);
   color: var(--pf-v5-c-form__label-required--Color);
 }
 
 .pf-v5-c-form__group-label-help {
-  padding-top: var(--pf-v5-c-form__group-label-help--PaddingTop);
-  padding-right: var(--pf-v5-c-form__group-label-help--PaddingRight);
-  padding-bottom: var(--pf-v5-c-form__group-label-help--PaddingBottom);
-  padding-left: var(--pf-v5-c-form__group-label-help--PaddingLeft);
-  margin-top: var(--pf-v5-c-form__group-label-help--MarginTop);
-  margin-right: var(--pf-v5-c-form__group-label-help--MarginRight);
-  margin-bottom: var(--pf-v5-c-form__group-label-help--MarginBottom);
-  margin-left: var(--pf-v5-c-form__group-label-help--MarginLeft);
+  padding-block-start: var(--pf-v5-c-form__group-label-help--PaddingTop);
+  padding-block-end: var(--pf-v5-c-form__group-label-help--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-form__group-label-help--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-form__group-label-help--PaddingRight);
+  margin-block-start: var(--pf-v5-c-form__group-label-help--MarginTop);
+  margin-block-end: var(--pf-v5-c-form__group-label-help--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-form__group-label-help--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-form__group-label-help--MarginRight);
   font-size: var(--pf-v5-c-form__group-label-help--FontSize);
   line-height: 1;
   color: var(--pf-v5-c-form__group-label-help--Color);
@@ -335,12 +338,15 @@
   --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
 }
 
+.pf-v5-c-form__group-control {
+  min-width: 0;
+}
 .pf-v5-c-form__group-control.pf-m-inline {
   display: flex;
   flex-flow: row wrap;
 }
 .pf-v5-c-form__group-control.pf-m-inline > * {
-  margin-right: var(--pf-v5-c-form__group-control--m-inline--child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-form__group-control--m-inline--child--MarginRight);
 }
 .pf-v5-c-form__group-control.pf-m-inline > :last-child {
   --pf-v5-c-form__group-control--m-inline--child--MarginRight: 0;
@@ -352,11 +358,11 @@
 }
 .pf-v5-c-form__group-control .pf-v5-c-form__helper-text:first-child {
   --pf-v5-c-form__helper-text--MarginTop: 0;
-  margin-bottom: var(--pf-v5-c-form__group-control__helper-text--MarginBottom);
+  margin-block-end: var(--pf-v5-c-form__group-control__helper-text--MarginBottom);
 }
 
 .pf-v5-c-form__helper-text {
-  margin-top: var(--pf-v5-c-form__helper-text--MarginTop);
+  margin-block-start: var(--pf-v5-c-form__helper-text--MarginTop);
   font-size: var(--pf-v5-c-form__helper-text--FontSize);
   color: var(--pf-v5-c-form__helper-text--Color);
 }
@@ -378,7 +384,7 @@
 }
 
 .pf-v5-c-form__helper-text-icon {
-  margin-right: var(--pf-v5-c-form__helper-text-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-form__helper-text-icon--MarginRight);
   font-size: var(--pf-v5-c-form__helper-text-icon--FontSize);
 }
 
@@ -389,24 +395,24 @@
 .pf-v5-c-form__actions {
   display: flex;
   flex-wrap: wrap;
-  margin-top: var(--pf-v5-c-form__actions--MarginTop);
-  margin-right: var(--pf-v5-c-form__actions--MarginRight);
-  margin-bottom: var(--pf-v5-c-form__actions--MarginBottom);
-  margin-left: var(--pf-v5-c-form__actions--MarginLeft);
+  margin-block-start: var(--pf-v5-c-form__actions--MarginTop);
+  margin-block-end: var(--pf-v5-c-form__actions--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-form__actions--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-form__actions--MarginRight);
 }
 .pf-v5-c-form__actions > * {
-  margin-top: var(--pf-v5-c-form__actions--child--MarginTop);
-  margin-right: var(--pf-v5-c-form__actions--child--MarginRight);
-  margin-bottom: var(--pf-v5-c-form__actions--child--MarginBottom);
-  margin-left: var(--pf-v5-c-form__actions--child--MarginLeft);
+  margin-block-start: var(--pf-v5-c-form__actions--child--MarginTop);
+  margin-block-end: var(--pf-v5-c-form__actions--child--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-form__actions--child--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-form__actions--child--MarginRight);
 }
 
 .pf-v5-c-form__field-group {
   --pf-v5-c-form__field-group--BorderTopWidth: var(--pf-v5-c-form__field-group--border-width-base);
   display: grid;
   grid-template-columns: minmax(var(--pf-v5-c-form__field-group--GridTemplateColumns--toggle), max-content) 1fr;
-  border-top: var(--pf-v5-c-form__field-group--BorderTopWidth) solid var(--pf-v5-c-form__field-group--BorderTopColor);
-  border-bottom: var(--pf-v5-c-form__field-group--BorderBottomWidth) solid var(--pf-v5-c-form__field-group--BorderBottomColor);
+  border-block-start: var(--pf-v5-c-form__field-group--BorderTopWidth) solid var(--pf-v5-c-form__field-group--BorderTopColor);
+  border-block-end: var(--pf-v5-c-form__field-group--BorderBottomWidth) solid var(--pf-v5-c-form__field-group--BorderBottomColor);
 }
 .pf-v5-c-form__field-group:last-child {
   --pf-v5-c-form__field-group--BorderBottomWidth: 0;
@@ -415,7 +421,7 @@
   --pf-v5-c-form__field-group--BorderTopWidth: 0;
 }
 .pf-v5-c-form__field-group + .pf-v5-c-form__field-group {
-  margin-top: var(--pf-v5-c-form__field-group--field-group--MarginTop);
+  margin-block-start: var(--pf-v5-c-form__field-group--field-group--MarginTop);
 }
 .pf-v5-c-form__field-group .pf-v5-c-form__field-group {
   --pf-v5-c-form__field-group-body--GridColumn: var(--pf-v5-c-form__field-group__field-group__field-group-body--GridColumn);
@@ -434,16 +440,16 @@
 .pf-v5-c-form__field-group-toggle {
   grid-row: 1/2;
   grid-column: 1/2;
-  padding-top: var(--pf-v5-c-form__field-group-toggle--PaddingTop);
-  padding-right: var(--pf-v5-c-form__field-group-toggle--PaddingRight);
+  padding-block-start: var(--pf-v5-c-form__field-group-toggle--PaddingTop);
+  padding-inline-end: var(--pf-v5-c-form__field-group-toggle--PaddingRight);
 }
 .pf-v5-c-form__field-group-toggle + .pf-v5-c-form__field-group-header {
   --pf-v5-c-form__field-group-header--GridColumn: var(--pf-v5-c-form__field-group-toggle--field-group-header--GridColumn);
 }
 
 .pf-v5-c-form__field-group-toggle-button {
-  margin-top: var(--pf-v5-c-form__field-group-toggle-button--MarginTop);
-  margin-bottom: var(--pf-v5-c-form__field-group-toggle-button--MarginBottom);
+  margin-block-start: var(--pf-v5-c-form__field-group-toggle-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-form__field-group-toggle-button--MarginBottom);
 }
 
 .pf-v5-c-form__field-group-toggle-icon {
@@ -453,14 +459,17 @@
   transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-form__field-group-header {
   display: flex;
   grid-row: 1/2;
   grid-column: var(--pf-v5-c-form__field-group-header--GridColumn);
   align-items: flex-start;
-  padding-top: var(--pf-v5-c-form__field-group-header--PaddingTop);
-  padding-bottom: var(--pf-v5-c-form__field-group-header--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-form__field-group-header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-form__field-group-header--PaddingBottom);
 }
 
 .pf-v5-c-form__field-group-header-main {
@@ -478,14 +487,14 @@
 }
 
 .pf-v5-c-form__field-group-header-description {
-  margin-top: var(--pf-v5-c-form__field-group-header-description--MarginTop);
+  margin-block-start: var(--pf-v5-c-form__field-group-header-description--MarginTop);
   color: var(--pf-v5-c-form__field-group-header-description--Color);
 }
 
 .pf-v5-c-form__field-group-header-actions {
-  margin-top: var(--pf-v5-c-form__field-group-header-actions--MarginTop);
-  margin-bottom: var(--pf-v5-c-form__field-group-header-actions--MarginBottom);
-  margin-left: var(--pf-v5-c-form__field-group-header-actions--MarginLeft);
+  margin-block-start: var(--pf-v5-c-form__field-group-header-actions--MarginTop);
+  margin-block-end: var(--pf-v5-c-form__field-group-header-actions--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-form__field-group-header-actions--MarginLeft);
   white-space: nowrap;
 }
 
@@ -493,15 +502,15 @@
   display: grid;
   grid-column: var(--pf-v5-c-form__field-group-body--GridColumn);
   gap: var(--pf-v5-c-form__field-group-body--Gap);
-  padding-top: var(--pf-v5-c-form__field-group-body--PaddingTop);
-  padding-bottom: var(--pf-v5-c-form__field-group-body--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-form__field-group-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-form__field-group-body--PaddingBottom);
 }
 .pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:first-child {
   --pf-v5-c-form__field-group-toggle--PaddingTop: 0;
   --pf-v5-c-form__field-group-header--PaddingTop: 0;
 }
 .pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:last-child {
-  margin-bottom: var(--pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom);
+  margin-block-end: var(--pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-form {