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

package/components/FormControl/form-control.css

@@ -1,6 +1,6 @@
 :root,
 .pf-v6-c-form-control {
-  --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -8,22 +8,25 @@
   --pf-v6-c-form-control--OutlineOffset: -6px;
   --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-form-control--before--BorderStyle: solid;
   --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-form-control--after--BorderStyle: solid;
   --pf-v6-c-form-control--after--BorderColor: transparent;
   --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
   --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--sm);
-  --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --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--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
+  --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);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+  --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+  --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
   --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
   --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -31,47 +34,45 @@
   --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
-  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
+  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
+  --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
   --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
+  --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
   --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
   --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-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + 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-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + 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-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + 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--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
+  --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-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
+  --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
+  --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
   --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--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --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--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
+  --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
+  --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);
 }
@@ -97,21 +98,21 @@
 }
 .pf-v6-c-form-control::before {
   border-color: var(--pf-v6-c-form-control--before--BorderColor);
-  border-style: var(--pf-v6-c-form-control--before--BorderStyle, solid);
+  border-style: var(--pf-v6-c-form-control--before--BorderStyle);
   border-width: var(--pf-v6-c-form-control--before--BorderWidth);
   border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
 }
 .pf-v6-c-form-control::after {
-  border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle, solid) var(--pf-v6-c-form-control--after--BorderColor);
+  border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle) var(--pf-v6-c-form-control--after--BorderColor);
   border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
 }
 .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;
@@ -130,27 +131,22 @@
 }
 .pf-v6-c-form-control.pf-m-readonly {
   --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
-  --pf-v6-c-form-control--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
+  --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
 }
 .pf-v6-c-form-control.pf-m-readonly:hover {
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
 }
 .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderColor);
 }
 .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
+  --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
   --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
   --pf-v6-c-form-control--before--BorderStyle: none;
   --pf-v6-c-form-control--after--BorderStyle: none;
   --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
 }
-.pf-v6-c-form-control:hover {
-  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
-  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
-}
 .pf-v6-c-form-control.pf-m-expanded {
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
@@ -165,53 +161,61 @@
   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--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--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--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--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--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--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:hover {
+  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
+  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
 }
 .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 {
   --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
 }
 .pf-v6-c-form-control.pf-m-placeholder > select * {
-  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
+  color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
 }
 .pf-v6-c-form-control.pf-m-placeholder > select *:disabled {
   color: revert;
@@ -236,7 +240,7 @@
 }
 
 .pf-v6-c-form-control__icon {
-  padding-block-start: var(--pf-v6-c-form-control__icon--PaddingTop);
+  font-size: var(--pf-v6-c-form-control__icon--FontSize);
   color: var(--pf-v6-c-form-control__icon--Color);
 }
 .pf-v6-c-form-control__icon.pf-m-status {
@@ -246,9 +250,8 @@
 .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-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 +262,11 @@
   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-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
+  padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
   pointer-events: none;
 }
 
 select ~ .pf-v6-c-form-control__utilities {
-  --pf-v5-c-form-control__utilities--PaddingRight: 0;
+  --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
 }

package/components/FormControl/form-control.scss

@@ -1,6 +1,7 @@
-:root,
-.#{$form-control} {
-  --#{$form-control}--ColumnGap: var(--pf-t--global--spacer--sm);
+@use '../../sass-utilities' as *;
+
+@include pf-root($form-control) {
+  --#{$form-control}--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$form-control}--Color: var(--pf-t--global--text--color--regular);
   --#{$form-control}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$form-control}--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -8,28 +9,29 @@
   --#{$form-control}--OutlineOffset: -6px;
   --#{$form-control}--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$form-control}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --#{$form-control}--before--BorderStyle: solid;
   --#{$form-control}--before--BorderColor: var(--pf-t--global--border--color--default);
   --#{$form-control}--before--BorderRadius: var(--#{$form-control}--BorderRadius);
   --#{$form-control}--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --#{$form-control}--after--BorderStyle: solid;
   --#{$form-control}--after--BorderColor: transparent;
   --#{$form-control}--after--BorderRadius: var(--#{$form-control}--BorderRadius);
   --#{$form-control}--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --#{$form-control}--Width: 100%;
 
   // padding
-  --#{$form-control}--inset--base: var(--pf-t--global--spacer--md);
-  --#{$form-control}--PaddingTop: var(--pf-t--global--spacer--sm); // (--#{$pf-global}--spacer--form-element);
-  --#{$form-control}--PaddingBottom: var(--pf-t--global--spacer--sm); // var(--#{$pf-global}--spacer--form-element);
-  --#{$form-control}--PaddingRight: var(--#{$form-control}--inset--base);
-  --#{$form-control}--PaddingLeft: var(--#{$form-control}--inset--base);
+  --#{$form-control}--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
+  --#{$form-control}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$form-control}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--inset--base);
+  --#{$form-control}--PaddingInlineStart: var(--#{$form-control}--inset--base);
 
   // hover
   --#{$form-control}--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
   --#{$form-control}--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
-
-  // focus
-  --#{$form-control}--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --#{$form-control}--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$form-control}--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+  --#{$form-control}--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+  --#{$form-control}--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
 
   // expanded
   --#{$form-control}--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
@@ -45,71 +47,69 @@
   --#{$form-control}--m-disabled--after--BorderColor: transparent;
 
   // readonly
-  --#{$form-control}--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$form-control}--m-readonly--BorderColor: transparent;
+  --#{$form-control}--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
+  --#{$form-control}--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
   --#{$form-control}--m-readonly--hover--after--BorderColor: revert;
-  --#{$form-control}--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --#{$form-control}--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
 
   // readonly plain
   --#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
+  --#{$form-control}--m-readonly--m-plain--BorderColor: transparent;
   --#{$form-control}--m-readonly--m-plain--inset--base: 0;
   --#{$form-control}--m-readonly--m-plain--OutlineOffset: 0;
 
   // success
   --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
-  --#{$form-control}--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
+  --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
 
   // warning
   --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
-  --#{$form-control}--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
+  --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
 
   // error
   --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
-  --#{$form-control}--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
+  --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
   --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
 
   // custom icon
-  --#{$form-control}--m-icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
+  --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
   --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
-  --#{$form-control}--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
-  --#{$form-control}--m-icon--icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
-  --#{$form-control}__select--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$form-control}__select--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$form-control}--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
+  --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
+  --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}--inset--base);
+  --#{$form-control}__select--PaddingInlineStart: var(--#{$form-control}--inset--base);
 
   // Select success
-  --#{$form-control}__select--m-success--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
 
   // Select warning
-  --#{$form-control}__select--m-warning--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
 
   // Select invalid
-  --#{$form-control}__select--m-error--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
 
   // Textarea
   --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
   --#{$form-control}--textarea--Height: auto;
 
-  // Form control icon 
-  --#{$form-control}__icon--PaddingTop: var(--pf-t--global--spacer--sm);
+  // Form control icon
   --#{$form-control}__icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$form-control}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --#{$form-control}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
   --#{$form-control}--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
   --#{$form-control}--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
   --#{$form-control}--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
 
   // Form control utilities
-  --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--sm);
-  --#{$form-control}__utilities--PaddingTop: var(--#{$form-control}--inset--base);
-  --#{$form-control}__utilities--PaddingRight: var(--#{$form-control}--inset--base);
+  --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
+  --#{$form-control}__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--inset--base);
 
   // Form control select toggle icon
-  --#{$form-control}__toggle-icon--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$form-control}__toggle-icon--PaddingRight: var(--#{$form-control}--inset--base);
-  --#{$form-control}__toggle-icon--PaddingLeft: var(--#{$form-control}--inset--base);
+  --#{$form-control}__toggle-icon--PaddingInlineEnd: var(--#{$form-control}--inset--base);
+  --#{$form-control}__toggle-icon--PaddingInlineStart: var(--#{$form-control}--inset--base);
   --#{$form-control}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$form-control}--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
@@ -137,23 +137,23 @@
 
   &::before {
     border-color: var(--#{$form-control}--before--BorderColor);
-    border-style: var(--#{$form-control}--before--BorderStyle, solid);
+    border-style: var(--#{$form-control}--before--BorderStyle);
     border-width: var(--#{$form-control}--before--BorderWidth);
     border-radius: var(--#{$form-control}--before--BorderRadius);
   }
 
   &::after {
-    border: var(--#{$form-control}--after--BorderWidth) var(--#{$form-control}--after--BorderStyle, solid) var(--#{$form-control}--after--BorderColor);
+    border: var(--#{$form-control}--after--BorderWidth) var(--#{$form-control}--after--BorderStyle) var(--#{$form-control}--after--BorderColor);
     border-radius: var(--#{$form-control}--before--BorderRadius);
   }
 
   > :is(input, select, textarea) {
     grid-row: 1 / 2;
     grid-column: 1 / -1;
-    padding-block-start: var(--#{$form-control}--PaddingTop);
-    padding-block-end: var(--#{$form-control}--PaddingBottom);
-    padding-inline-start: var(--#{$form-control}--PaddingLeft);
-    padding-inline-end: var(--#{$form-control}--PaddingRight);
+    padding-block-start: var(--#{$form-control}--PaddingBlockStart);
+    padding-block-end: var(--#{$form-control}--PaddingBlockEnd);
+    padding-inline-start: var(--#{$form-control}--PaddingInlineStart);
+    padding-inline-end: var(--#{$form-control}--PaddingInlineEnd);
     color: var(--#{$form-control}--Color);
     background-color: transparent;
     border: none;
@@ -172,15 +172,15 @@
   > ::placeholder {
     color: var(--#{$form-control}--m-placeholder--Color); // TODO update to set --#{$form-control}--Color in breaking change - also look for any other place to do that in this component
   }
-  
+
   > :is(input, select) {
     text-overflow: ellipsis;
   }
 
   &.pf-m-readonly {
     --#{$form-control}--BackgroundColor: var(--#{$form-control}--m-readonly--BackgroundColor);
-    --#{$form-control}--BorderColor: var(--#{$form-control}--m-readonly--BorderColor);
-    
+    --#{$form-control}--before--BorderColor: var(--#{$form-control}--m-readonly--BorderColor);
+
     &:hover {
       --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
     }
@@ -188,12 +188,11 @@
     // stylelint-disable selector-not-notation
     &:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
       --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
-      --#{$form-control}--focus--after--BorderWidth: var(--#{$form-control}--m-readonly--focus--after--BorderWidth);
-      --#{$form-control}--focus--after--BorderColor: var(--#{$form-control}--m-readonly--focus--after--BorderColor);
     }
 
     &.pf-m-plain {
       --#{$form-control}--m-readonly--BackgroundColor: var(--#{$form-control}--m-readonly--m-plain--BackgroundColor);
+      --#{$form-control}--m-readonly--BorderColor: var(--#{$form-control}--m-readonly--m-plain--BorderColor);
       --#{$form-control}--inset--base: var(--#{$form-control}--m-readonly--m-plain--inset--base);
       --#{$form-control}--before--BorderStyle: none;
       --#{$form-control}--after--BorderStyle: none;
@@ -201,11 +200,6 @@
     }
   }
 
-  &:hover {
-    --#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
-    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
-  }
-
   &.pf-m-expanded {
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-expanded--after--BorderColor);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-expanded--after--BorderWidth);
@@ -223,62 +217,75 @@
   }
 
   &.pf-m-error {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}--m-error--PaddingRight);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-error--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-error--after--BorderColor);
+    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-error--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
-    --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-error--m-status--PaddingRight);
+    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
 
     &.pf-m-icon {
-      --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
+      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
     }
   }
 
   &.pf-m-success {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}--m-success--PaddingRight);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-success--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-success--after--BorderColor);
+    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-success--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
-    --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-success--m-status--PaddingRight);
+    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-success--after--BorderWidth);
 
     &.pf-m-icon {
-      --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
+      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
     }
   }
 
   &.pf-m-warning {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}--m-warning--PaddingRight);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-warning--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-warning--after--BorderColor);
+    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-warning--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
-    --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-warning--m-status--PaddingRight);
+    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-warning--after--BorderWidth);
 
     &.pf-m-icon {
-      --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
+      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
     }
   }
 
+  &:hover {
+    --#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
+    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
+  }
+
   &.pf-m-icon {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--PaddingRight);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--PaddingInlineEnd);
   }
 
   > select {
-    --#{$form-control}--PaddingRight: var(--#{$form-control}__select--PaddingRight);
-    --#{$form-control}--PaddingLeft: var(--#{$form-control}__select--PaddingLeft);
+    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}__select--PaddingInlineEnd);
+    --#{$form-control}--PaddingInlineStart: var(--#{$form-control}__select--PaddingInlineStart);
 
     // Firefox's select text has additional padding
     // stylelint-disable-next-line
     @-moz-document url-prefix() {
-      --#{$form-control}--PaddingRight: calc(var(--#{$form-control}__select--PaddingRight) - 1px);
-      --#{$form-control}--PaddingLeft: calc(var(--#{$form-control}__select--PaddingLeft) - 4px);
+      --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) - 1px);
+      --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__select--PaddingInlineStart) - 4px);
     }
+
+    // We need this property for certain Linux distros/non-Mac OS where dark theme styles aren't applied properly.
+    background-color: var(--#{$form-control}--BackgroundColor);
   }
 
   &.pf-m-placeholder > select {
     --#{$form-control}--Color: var(--#{$form-control}--m-placeholder--Color);
 
     * {
-      --#{$form-control}--Color: var(--#{$form-control}--m-placeholder--child--Color);
+      // We need to use the color property instead of redefining a var
+      // for certain Linux distros/non-Mac OS
+      color: var(--#{$form-control}--m-placeholder--child--Color);
 
       // stylelint-disable max-nesting-depth
       &:disabled {
@@ -312,11 +319,10 @@
 
     overflow: auto;
   }
-
 }
 
 .#{$form-control}__icon {
-  padding-block-start: var(--#{$form-control}__icon--PaddingTop);
+  font-size: var(--#{$form-control}__icon--FontSize);
   color: var(--#{$form-control}__icon--Color);
 
   &.pf-m-status {
@@ -327,9 +333,8 @@
 .#{$form-control}__toggle-icon {
   grid-row: 1 / 2;
   grid-column: 3;
-  padding-block-start: var(--#{$form-control}__toggle-icon--PaddingTop);
-  padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingLeft);
-  padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingRight);
+  padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingInlineStart);
+  padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingInlineEnd);
   color: var(--#{$form-control}__toggle-icon--Color);
   pointer-events: none;
 }
@@ -340,10 +345,11 @@
   grid-row: 1 / 2;
   grid-column: 2;
   gap: var(--#{$form-control}__utilities--Gap);
-  padding-inline-end: var(--#{$form-control}__utilities--PaddingRight);
+  padding-block-start: var(--#{$form-control}__utilities--PaddingBlockStart);
+  padding-inline-end: var(--#{$form-control}__utilities--PaddingInlineEnd);
   pointer-events: none;
 }
 
 select ~ .#{$form-control}__utilities {
---pf-v5-c-form-control__utilities--PaddingRight: 0;
-}
+  --#{$form-control}__utilities--PaddingInlineEnd: 0;
+}