@patternfly/patternfly 5.0.0-alpha.74 → 5.0.0-alpha.76

package/docs/demos/Toolbar/examples/Toolbar.md

@@ -32,7 +32,7 @@ section: components
             aria-label="search filter"
             role="group"
           >
-            <div class="pf-v5-c-input-group__item pf-m-fill">
+            <div class="pf-v5-c-input-group__item">
               <div class="pf-v5-c-select" style="width: 124px">
                 <span
                   id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
@@ -100,8 +100,8 @@ section: components
                 </ul>
               </div>
             </div>
-            <div class="pf-v5-c-input-group__item">
-              <div class="pf-v5-c-text-input-group" style="width: auto">
+            <div class="pf-v5-c-input-group__item pf-m-fill">
+              <div class="pf-v5-c-text-input-group">
                 <div class="pf-v5-c-text-input-group__main pf-m-icon">
                   <span class="pf-v5-c-text-input-group__text">
                     <span class="pf-v5-c-text-input-group__icon">
@@ -1371,7 +1371,7 @@ section: components
                   aria-label="search filter"
                   role="group"
                 >
-                  <div class="pf-v5-c-input-group__item pf-m-fill">
+                  <div class="pf-v5-c-input-group__item">
                     <div class="pf-v5-c-select" style="width: 160px">
                       <span
                         id="toolbar-with-validation-example-select-name-label"
@@ -1442,8 +1442,8 @@ section: components
                       </ul>
                     </div>
                   </div>
-                  <div class="pf-v5-c-input-group__item">
-                    <div class="pf-v5-c-text-input-group" style="width: auto">
+                  <div class="pf-v5-c-input-group__item pf-m-fill">
+                    <div class="pf-v5-c-text-input-group">
                       <div class="pf-v5-c-text-input-group__main pf-m-icon">
                         <span class="pf-v5-c-text-input-group__text">
                           <span class="pf-v5-c-text-input-group__icon">
@@ -2163,7 +2163,7 @@ section: components
           aria-label="search filter"
           role="group"
         >
-          <div class="pf-v5-c-input-group__item pf-m-fill">
+          <div class="pf-v5-c-input-group__item">
             <div class="pf-v5-c-select" style="width: 124px">
               <span
                 id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
@@ -2231,8 +2231,8 @@ section: components
               </ul>
             </div>
           </div>
-          <div class="pf-v5-c-input-group__item">
-            <div class="pf-v5-c-text-input-group" style="width: auto">
+          <div class="pf-v5-c-input-group__item pf-m-fill">
+            <div class="pf-v5-c-text-input-group">
               <div class="pf-v5-c-text-input-group__main pf-m-icon">
                 <span class="pf-v5-c-text-input-group__text">
                   <span class="pf-v5-c-text-input-group__icon">
@@ -4573,7 +4573,7 @@ section: components
                   aria-label="search filter"
                   role="group"
                 >
-                  <div class="pf-v5-c-input-group__item pf-m-fill">
+                  <div class="pf-v5-c-input-group__item">
                     <div class="pf-v5-c-select" style="width: 124px">
                       <span
                         id="toolbar-pagination-management-example-toolbar-select-name-label"
@@ -4644,8 +4644,8 @@ section: components
                       </ul>
                     </div>
                   </div>
-                  <div class="pf-v5-c-input-group__item">
-                    <div class="pf-v5-c-text-input-group" style="width: auto">
+                  <div class="pf-v5-c-input-group__item pf-m-fill">
+                    <div class="pf-v5-c-text-input-group">
                       <div class="pf-v5-c-text-input-group__main pf-m-icon">
                         <span class="pf-v5-c-text-input-group__text">
                           <span class="pf-v5-c-text-input-group__icon">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.74",
+  "version": "5.0.0-alpha.76",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -10909,6 +10909,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-toolbar__expandable-content--Display: grid;
+  --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
   --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
   --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -11248,7 +11249,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
+  padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
   background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
 }
@@ -14783,75 +14784,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);
@@ -14865,9 +14865,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;
@@ -14879,6 +14890,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);
 }
@@ -14888,78 +14902,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);
@@ -15006,9 +15005,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 {
@@ -15016,11 +15013,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);
@@ -15033,7 +15028,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;
 }
@@ -15052,16 +15046,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);
 }
@@ -17031,6 +17025,7 @@ ul.pf-v5-c-list {
   --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
   --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
   --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
+  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
   --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
   --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
   --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -17038,8 +17033,8 @@ ul.pf-v5-c-list {
   --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
   --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
+  --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
   --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
   --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
   --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -17104,6 +17099,7 @@ ul.pf-v5-c-list {
   --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
 }
 .pf-v5-c-masthead .pf-v5-c-toolbar {
+  --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
   --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
   --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -17117,7 +17113,17 @@ ul.pf-v5-c-list {
   flex-wrap: nowrap;
 }
 .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
-  border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
+  top: 100%;
+}
+.pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
+  box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
 }
 .pf-v5-c-masthead .pf-v5-c-menu-toggle {
   --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
@@ -19179,7 +19185,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);
@@ -19202,6 +19209,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);
@@ -19880,21 +19888,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 + .pf-v5-c-nav__section {
-  --pf-v5-c-nav__section--MarginTop: var(--pf-v5-c-nav__section--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-m-no-title {
-  --pf-v5-c-nav__section--MarginTop: 0;
+.pf-v5-c-nav__section + .pf-v5-c-nav__section {
+  margin-top: var(--pf-v5-c-nav__section--section--MarginTop);
 }
-.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);