@patternfly/patternfly 5.0.0-alpha.73 → 5.0.0-alpha.75

package/patternfly.css

@@ -14900,75 +14900,74 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-form-control--LineHeight: var(--pf-v5-global--LineHeight--md);
   --pf-v5-c-form-control--Resize: none;
-  --pf-v5-c-form-control--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-form-control--BorderTopColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-form-control--BorderRightColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-form-control--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-form-control--BorderRadius: 0;
+  --pf-v5-c-form-control--OutlineOffset: -2px;
+  --pf-v5-c-form-control--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-form-control--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-form-control--before--BorderBottomWidth: 0;
+  --pf-v5-c-form-control--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-form-control--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
+  --pf-v5-c-form-control--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
+  --pf-v5-c-form-control--before--BorderBottomColor: transparent;
+  --pf-v5-c-form-control--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
+  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-form-control--Width: 100%;
-  --pf-v5-c-form-control--Height: calc(var(--pf-v5-c-form-control--FontSize) * var(--pf-v5-c-form-control--LineHeight) + var(--pf-v5-c-form-control--BorderWidth) * 2 + var(--pf-v5-c-form-control--PaddingTop) + var(--pf-v5-c-form-control--PaddingBottom));
   --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-form-control--PaddingTop: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
-  --pf-v5-c-form-control--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
+  --pf-v5-c-form-control--PaddingTop: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--inset--base);
   --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
-  --pf-v5-c-form-control--hover--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
-  --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-form-control--m-expanded--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
-  --pf-v5-c-form-control--m-expanded--BorderBottomColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-global--Color--dark-200);
   --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-form-control--m-disabled--BorderColor: transparent;
+  --pf-v5-c-form-control--m-disabled--after--BorderColor: transparent;
   --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-form-control--m-readonly--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
-  --pf-v5-c-form-control--m-readonly--focus--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
   --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
   --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
-  --pf-v5-c-form-control--m-success--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--m-success--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
-  --pf-v5-c-form-control--m-success--BorderBottomColor: var(--pf-v5-global--success-color--100);
+  --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
+  --pf-v5-c-form-control--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-form-control--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
   --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-form-control--m-warning--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--m-warning--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
-  --pf-v5-c-form-control--m-warning--BorderBottomColor: var(--pf-v5-global--warning-color--100);
+  --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-form-control--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
   --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-form-control--m-error--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--m-error--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
-  --pf-v5-c-form-control--m-error--BorderBottomColor: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-form-control--m-error--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-form-control--m-error--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
   --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-form-control--m-error--IconWidth: var(--pf-v5-c-form-control--FontSize);
-  --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
-  --pf-v5-c-form-control--m-icon--IconWidth: var(--pf-v5-c-form-control--FontSize);
+  --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
+  --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
+  --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
   --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
-  --pf-v5-c-form-control__select--PaddingRight: calc(var(--pf-v5-global--spacer--lg) + var(--pf-v5-c-form-control--BorderWidth) + var(--pf-v5-c-form-control--BorderWidth));
-  --pf-v5-c-form-control__select--PaddingLeft: calc(var(--pf-v5-global--spacer--sm) - var(--pf-v5-c-form-control--BorderWidth));
+  --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
+  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-form-control__select--PaddingLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
   --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
   --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
   --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width);
   --pf-v5-c-form-control--textarea--Height: auto;
+  --pf-v5-c-form-control__icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-form-control__icon--Color: var(--pf-v5-global--icon--Color--light);
   --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-global--icon--Color--light);
   --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-v5-global--success-color--100);
   --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-v5-global--warning-color--100);
   --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - (2 * var(--pf-v5-c-form-control--BorderWidth)));
   --pf-v5-c-form-control__utilities--Gap: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-form-control__utilities--PaddingTop: var(--pf-v5-c-form-control--inset--base);
   --pf-v5-c-form-control__utilities--PaddingRight: var(--pf-v5-c-form-control--inset--base);
+  --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-form-control__toggle-icon--PaddingRight: var(--pf-v5-c-form-control--inset--base);
   --pf-v5-c-form-control__toggle-icon--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
-  --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - (2 * var(--pf-v5-c-form-control--BorderWidth)));
   --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
   color: var(--pf-v5-c-form-control--Color);
@@ -14982,9 +14981,20 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   line-height: var(--pf-v5-c-form-control--LineHeight);
   resize: var(--pf-v5-c-form-control--Resize);
   background-color: var(--pf-v5-c-form-control--BackgroundColor);
-  border: var(--pf-v5-c-form-control--BorderWidth) solid;
-  border-color: var(--pf-v5-c-form-control--BorderTopColor) var(--pf-v5-c-form-control--BorderRightColor) var(--pf-v5-c-form-control--BorderBottomColor) var(--pf-v5-c-form-control--BorderLeftColor);
-  border-radius: var(--pf-v5-c-form-control--BorderRadius);
+}
+.pf-v5-c-form-control::before, .pf-v5-c-form-control::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+}
+.pf-v5-c-form-control::before {
+  border-color: var(--pf-v5-c-form-control--before--BorderTopColor) var(--pf-v5-c-form-control--before--BorderRightColor) var(--pf-v5-c-form-control--before--BorderBottomColor) var(--pf-v5-c-form-control--before--BorderLeftColor);
+  border-style: var(--pf-v5-c-form-control--before--BorderStyle, solid);
+  border-width: var(--pf-v5-c-form-control--before--BorderTopWidth) var(--pf-v5-c-form-control--before--BorderRightWidth) var(--pf-v5-c-form-control--before--BorderBottomWidth) var(--pf-v5-c-form-control--before--BorderLeftWidth);
+}
+.pf-v5-c-form-control::after {
+  border-bottom: var(--pf-v5-c-form-control--after--BorderBottomWidth) var(--pf-v5-c-form-control--after--BorderStyle, solid) var(--pf-v5-c-form-control--after--BorderBottomColor);
 }
 .pf-v5-c-form-control > :is(input, select, textarea) {
   grid-row: 1/2;
@@ -14996,6 +15006,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   -moz-appearance: none;
   -webkit-appearance: none;
 }
+.pf-v5-c-form-control > :is(input, select, textarea):focus {
+  outline-offset: var(--pf-v5-c-form-control--OutlineOffset);
+}
 .pf-v5-c-form-control > ::placeholder {
   color: var(--pf-v5-c-form-control--m-placeholder--Color);
 }
@@ -15005,78 +15018,63 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 .pf-v5-c-form-control.pf-m-readonly {
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--BackgroundColor);
 }
-.pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error):hover {
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--BorderBottomColor);
-}
-.pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error):focus {
-  --pf-v5-c-form-control--focus--PaddingBottom: var(--pf-v5-c-form-control--m-readonly--focus--PaddingBottom);
-  --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--BorderBottomWidth);
-  --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--BorderBottomColor);
+.pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
+  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor);
+  --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth);
+  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor);
 }
 .pf-v5-c-form-control.pf-m-readonly.pf-m-plain {
   --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor);
   --pf-v5-c-form-control--inset--base: var(--pf-v5-c-form-control--m-readonly--m-plain--inset--base);
-  border-color: transparent;
+  --pf-v5-c-form-control--before--BorderStyle: none;
+  --pf-v5-c-form-control--after--BorderStyle: none;
+  --pf-v5-c-form-control--OutlineOffset: var(--pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset);
 }
 .pf-v5-c-form-control:hover {
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--hover--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--hover--after--BorderBottomColor);
 }
-.pf-v5-c-form-control:focus {
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--focus--BorderBottomColor);
-  --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
-  --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
-  --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--focus--PaddingBottom);
-  border-bottom-width: var(--pf-v5-c-form-control--focus--BorderBottomWidth);
+.pf-v5-c-form-control:focus-within {
+  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--focus--after--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
 }
 .pf-v5-c-form-control.pf-m-expanded {
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--BorderBottomColor);
-  --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth));
-  --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth));
-  --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-expanded--PaddingBottom);
-  border-bottom-width: var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth);
 }
 .pf-v5-c-form-control.pf-m-disabled {
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-disabled--BackgroundColor);
   --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-disabled--Color);
   --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-c-form-control--m-disabled__toggle-icon--Color);
+  --pf-v5-c-form-control--before--BorderStyle: none;
+  --pf-v5-c-form-control--after--BorderStyle: none;
   cursor: not-allowed;
-  border-color: var(--pf-v5-c-form-control--m-disabled--BorderColor);
 }
 .pf-v5-c-form-control.pf-m-error {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-error--PaddingRight);
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-error--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-error--after--BorderBottomColor);
   --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-error__icon--m-status--Color);
-  --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
-  --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
-  --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-error--PaddingBottom);
   --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-error--m-status--PaddingRight);
-  border-bottom-width: var(--pf-v5-c-form-control--m-error--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-error--after--BorderBottomWidth);
 }
 .pf-v5-c-form-control.pf-m-error.pf-m-icon {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
 }
 .pf-v5-c-form-control.pf-m-success {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-success--PaddingRight);
-  --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-success--PaddingBottom);
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-success--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-success--after--BorderBottomColor);
   --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-success__icon--m-status--Color);
-  --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
-  --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
   --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-success--m-status--PaddingRight);
-  border-bottom-width: var(--pf-v5-c-form-control--m-success--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-success--after--BorderBottomWidth);
 }
 .pf-v5-c-form-control.pf-m-success.pf-m-icon {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
 }
 .pf-v5-c-form-control.pf-m-warning {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-warning--PaddingRight);
-  --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-warning--PaddingBottom);
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--after--BorderBottomColor);
   --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-warning__icon--m-status--Color);
-  --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
-  --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
   --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight);
-  border-bottom-width: var(--pf-v5-c-form-control--m-warning--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-warning--after--BorderBottomWidth);
 }
 .pf-v5-c-form-control.pf-m-warning.pf-m-icon {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
@@ -15123,9 +15121,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 }
 
 .pf-v5-c-form-control__icon {
-  display: flex;
-  align-items: center;
-  height: var(--pf-v5-c-form-control__icon--Height);
+  padding-top: var(--pf-v5-c-form-control__icon--PaddingTop);
   color: var(--pf-v5-c-form-control__icon--Color);
 }
 .pf-v5-c-form-control__icon.pf-m-status {
@@ -15133,11 +15129,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 }
 
 .pf-v5-c-form-control__toggle-icon {
-  display: flex;
   grid-row: 1/2;
   grid-column: 3;
-  align-items: center;
-  height: var(--pf-v5-c-form-control__toggle-icon--Height);
+  padding-top: var(--pf-v5-c-form-control__toggle-icon--PaddingTop);
   padding-right: var(--pf-v5-c-form-control__toggle-icon--PaddingRight);
   padding-left: var(--pf-v5-c-form-control__toggle-icon--PaddingLeft);
   color: var(--pf-v5-c-form-control__toggle-icon--Color);
@@ -15150,7 +15144,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   grid-row: 1/2;
   grid-column: 2;
   gap: var(--pf-v5-c-form-control__utilities--Gap);
-  align-items: flex-start;
   padding-right: var(--pf-v5-c-form-control__utilities--PaddingRight);
   pointer-events: none;
 }
@@ -15169,16 +15162,16 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-form-control {
-  --pf-v5-c-form-control--BorderTopColor: transparent;
-  --pf-v5-c-form-control--BorderRightColor: transparent;
-  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
-  --pf-v5-c-form-control--BorderLeftColor: transparent;
+  --pf-v5-c-form-control--before--BorderTopColor: transparent;
+  --pf-v5-c-form-control--before--BorderRightColor: transparent;
+  --pf-v5-c-form-control--before--BorderLeftColor: transparent;
+  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
-  --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
+  --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
+  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
   --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--300);
   color: var(--pf-v5-global--Color--100);
 }
@@ -19296,7 +19289,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
   --pf-v5-c-nav__subnav--c-divider--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-nav__subnav--c-divider--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__section--MarginTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-nav__section--first-child--PaddingTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-nav__section--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-nav__section__item--MarginTop: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-nav__section__link--PaddingTop: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -19319,6 +19313,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-nav__section-title--MarginBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-nav__section-title--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -19997,21 +19992,23 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--focus--after--BorderWidth);
   --pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--active--after--BorderWidth);
   --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--m-current--after--BorderWidth);
+  --pf-v5-c-nav__list--PaddingTop: 0;
+  --pf-v5-c-nav__list--PaddingBottom: 0;
   --pf-v5-c-nav--c-divider--MarginBottom: 0;
-  margin-top: var(--pf-v5-c-nav__section--MarginTop);
+}
+.pf-v5-c-nav__section:first-child {
+  padding-top: var(--pf-v5-c-nav__section--first-child--PaddingTop);
 }
 .pf-v5-c-nav__section + .pf-v5-c-nav__section {
-  --pf-v5-c-nav__section--MarginTop: var(--pf-v5-c-nav__section--section--MarginTop);
+  margin-top: var(--pf-v5-c-nav__section--section--MarginTop);
 }
-.pf-v5-c-nav__section.pf-m-no-title {
-  --pf-v5-c-nav__section--MarginTop: 0;
-}
-.pf-v5-c-nav__section:not(:last-child) {
-  --pf-v5-c-nav__list--PaddingBottom: 0;
+.pf-v5-c-nav__section:last-child {
+  padding-bottom: var(--pf-v5-c-nav__section--last-child--PaddingBottom);
 }
 
 .pf-v5-c-nav__section-title {
   padding: var(--pf-v5-c-nav__section-title--PaddingTop) var(--pf-v5-c-nav__section-title--PaddingRight) var(--pf-v5-c-nav__section-title--PaddingBottom) var(--pf-v5-c-nav__section-title--PaddingLeft);
+  margin-bottom: var(--pf-v5-c-nav__section-title--MarginBottom);
   font-size: var(--pf-v5-c-nav__section-title--FontSize);
   color: var(--pf-v5-c-nav__section-title--Color);
   border-bottom: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
@@ -20868,7 +20865,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-c-overflow-menu--spacer: 0;
 }
 
-.pf-v5-c-page {
+:root {
   --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
   --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
   --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -20982,40 +20979,32 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  display: grid;
-  grid-template-areas: "header" "main";
-  grid-template-rows: max-content 1fr;
-  grid-template-columns: 1fr;
-  height: 100vh;
-  height: 100dvh;
-  max-height: 100%;
-  background-color: var(--pf-v5-c-page--BackgroundColor);
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
     --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
     --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
     --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
     --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
     --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -21023,17 +21012,28 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
     --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
     --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
   }
 }
+
+.pf-v5-c-page {
+  display: grid;
+  grid-template-areas: "header" "main";
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: 1fr;
+  height: 100vh;
+  height: 100dvh;
+  max-height: 100%;
+  background-color: var(--pf-v5-c-page--BackgroundColor);
+}
 @media (min-width: 1200px) {
   .pf-v5-c-page {
     grid-template-areas: "header header" "nav main";
@@ -21763,7 +21763,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page {
+:where(.pf-v5-theme-dark):root {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);