@patternfly/patternfly 5.0.0-alpha.30 → 5.0.0-alpha.32

package/package.json

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

package/patternfly-no-reset.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-.pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
+.pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -11199,26 +11199,30 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-toolbar {
   --pf-c-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-toolbar--RowGap: var(--pf-global--spacer--lg);
+  --pf-c-toolbar--RowGap--base: var(--pf-global--spacer--lg);
+  --pf-c-toolbar--RowGap: var(--pf-c-toolbar--RowGap--base);
   --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-toolbar--item--RowGap--base: var(--pf-global--spacer--xs);
   --pf-c-toolbar__item--Display: block;
   --pf-c-toolbar__item--MinWidth--base: auto;
   --pf-c-toolbar__item--AlignSelf: auto;
   --pf-c-toolbar__group--Display: flex;
   --pf-c-toolbar__group--AlignItems: baseline;
   --pf-c-toolbar__group--AlignSelf: auto;
+  --pf-c-toolbar__group--RowGap: var(--pf-c-toolbar--item--RowGap--base);
   --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-toolbar__content--Display: flex;
+  --pf-c-toolbar__content--RowGap: var(--pf-c-toolbar--RowGap--base);
   --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-toolbar__content-section--Display: flex;
   --pf-c-toolbar__content-section--AlignItems: baseline;
+  --pf-c-toolbar__content-section--RowGap: var(--pf-c-toolbar--item--RowGap--base);
   --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
   --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-toolbar__expandable-content--Display: grid;
-  --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-toolbar--RowGap);
   --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-toolbar__content--PaddingRight);
   --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-toolbar__content--PaddingLeft);
@@ -11336,6 +11340,7 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-toolbar__group {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
+  row-gap: var(--pf-c-toolbar__group--RowGap);
   align-items: var(--pf-c-toolbar__group--AlignItems);
   align-self: var(--pf-c-toolbar__group--AlignSelf);
   margin-right: var(--pf-c-toolbar--spacer);
@@ -11502,6 +11507,7 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-toolbar__content {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
   position: relative;
+  row-gap: var(--pf-c-toolbar__content--RowGap);
   align-items: center;
   padding-right: var(--pf-c-toolbar__content--PaddingRight);
   padding-left: var(--pf-c-toolbar__content--PaddingLeft);
@@ -11509,6 +11515,7 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-toolbar__content-section {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
+  row-gap: var(--pf-c-toolbar__content-section--RowGap);
   align-items: var(--pf-c-toolbar__content-section--AlignItems);
   width: 100%;
 }
@@ -11518,13 +11525,13 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-toolbar__expandable-content {
   position: absolute;
-  top: 100%;
+  top: calc(100% + var(--pf-c-toolbar__content--RowGap));
   right: 0;
   left: 0;
   z-index: var(--pf-c-toolbar__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
+  padding: 0 var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
   background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
 }
@@ -15938,77 +15945,74 @@ textarea.pf-c-form-control {
 }
 
 .pf-c-input-group {
-  --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
+  --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
+  --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
+  --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
+  --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
+  --pf-c-input-group__item--BackgroundColor: transparent;
+  --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
+  --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
+  --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
+  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
+  --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
+  --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
   --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
-  --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
-  --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
-  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
-  --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
-  --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
-  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
-  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
-  --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
+  --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
+  --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
+  --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-input-group--c-form-control--MarginRight: 0;
-  color: var(--pf-global--Color--100);
   display: flex;
   width: 100%;
-  background-color: var(--pf-c-input-group--BackgroundColor);
-}
-.pf-c-input-group.pf-m-plain {
-  --pf-c-input-group--BackgroundColor: transparent;
-}
-.pf-c-input-group > * + * {
-  margin-left: -1px;
 }
-.pf-c-input-group > :focus,
-.pf-c-input-group > :focus-within {
-  z-index: var(--pf-c-input-group--child--ZIndex);
-}
-.pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
-  margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
+
+.pf-c-input-group__item {
+  position: relative;
+  display: flex;
+  min-width: var(--pf-c-input-group__item--MinWidth, revert);
+  max-width: var(--pf-c-input-group__item--MaxWidth, revert);
+  background-color: var(--pf-c-input-group__item--BackgroundColor);
+  border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
+}
+.pf-c-input-group__item:where(:not(:first-child)) {
+  margin-left: var(--pf-c-input-group__item--MarginLeft);
+}
+.pf-c-input-group__item.pf-m-box {
+  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
+  padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
+  padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
+  border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
+  border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
+}
+.pf-c-input-group__item.pf-m-plain {
+  --pf-c-input-group__item--MarginLeft: 0;
+  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
+  border: none;
 }
-.pf-c-input-group input:not([type=checkbox]):not([type=radio]),
-.pf-c-input-group textarea {
-  flex: 2;
-  min-width: 0;
+.pf-c-input-group__item.pf-m-disabled {
+  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
+  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
+  --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
 }
-.pf-c-input-group textarea {
-  min-height: var(--pf-c-input-group__textarea--MinHeight);
+.pf-c-input-group__item.pf-m-fill {
+  flex-grow: 1;
 }
 
 .pf-c-input-group__text {
-  display: flex;
-  align-items: center;
-  padding-right: var(--pf-c-input-group__text--PaddingRight);
-  padding-left: var(--pf-c-input-group__text--PaddingLeft);
+  align-self: center;
   font-size: var(--pf-c-input-group__text--FontSize);
   color: var(--pf-c-input-group__text--Color);
-  text-align: center;
-  background-color: var(--pf-c-input-group__text--BackgroundColor);
-  border: var(--pf-c-input-group__text--BorderWidth) solid;
-  border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
 }
 label.pf-c-input-group__text {
   cursor: pointer;
 }
 
-.pf-c-input-group__text.pf-m-plain {
-  --pf-c-input-group__text--BorderWidth: 0;
-  margin-left: 0;
-}
-.pf-c-input-group__text.pf-m-disabled {
-  --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
-  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
-  --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
-}
-
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
 :where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
@@ -16046,31 +16050,20 @@ label.pf-c-input-group__text {
 }
 
 :where(.pf-theme-dark) .pf-c-input-group {
-  --pf-c-input-group--BackgroundColor: transparent;
-  --pf-c-input-group__text--BorderTopColor: transparent;
-  --pf-c-input-group__text--BorderRightColor: transparent;
-  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
-  --pf-c-input-group__text--BorderLeftColor: transparent;
-  --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
+  --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
+  --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-input-group__item--m-box--BorderTopColor: transparent;
+  --pf-c-input-group__item--m-box--BorderRightColor: transparent;
+  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
+  --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
   --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
-  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }
 :where(.pf-theme-dark) .pf-c-input-group > * + * {
-  margin-left: 0;
-  border-left: 1px solid var(--pf-global--palette--black-700);
-}
-:where(.pf-theme-dark) .pf-c-input-group__text {
-  --pf-c-input-group__text--BorderTopColor: transparent;
-  --pf-c-input-group__text--BorderRightColor: transparent;
-  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
-  --pf-c-input-group__text--BorderLeftColor: transparent;
-}
-:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
-  --pf-c-input-group__text--BackgroundColor: transparent;
-}
-:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
-  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
-  color: var(--pf-c-input-group__text--m-disabled--Color);
+  --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
+  border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
 }
 
 .pf-c-jump-links {
@@ -21149,7 +21142,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--MinWidth: 0;
-  --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
   --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -21257,7 +21249,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
   padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
-  line-height: var(--pf-c-options-menu__toggle--LineHeight);
   color: var(--pf-c-options-menu__toggle--Color);
   background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
   border: none;
@@ -21275,9 +21266,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   display: inline-block;
   color: var(--pf-c-options-menu__toggle--m-plain--Color);
 }
-.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
-  line-height: var(--pf-c-options-menu__toggle--LineHeight);
-}
 .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
   --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);

package/patternfly.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-.pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
+.pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -11322,26 +11322,30 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-toolbar {
   --pf-c-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-toolbar--RowGap: var(--pf-global--spacer--lg);
+  --pf-c-toolbar--RowGap--base: var(--pf-global--spacer--lg);
+  --pf-c-toolbar--RowGap: var(--pf-c-toolbar--RowGap--base);
   --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-toolbar--item--RowGap--base: var(--pf-global--spacer--xs);
   --pf-c-toolbar__item--Display: block;
   --pf-c-toolbar__item--MinWidth--base: auto;
   --pf-c-toolbar__item--AlignSelf: auto;
   --pf-c-toolbar__group--Display: flex;
   --pf-c-toolbar__group--AlignItems: baseline;
   --pf-c-toolbar__group--AlignSelf: auto;
+  --pf-c-toolbar__group--RowGap: var(--pf-c-toolbar--item--RowGap--base);
   --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-toolbar__content--Display: flex;
+  --pf-c-toolbar__content--RowGap: var(--pf-c-toolbar--RowGap--base);
   --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-toolbar__content-section--Display: flex;
   --pf-c-toolbar__content-section--AlignItems: baseline;
+  --pf-c-toolbar__content-section--RowGap: var(--pf-c-toolbar--item--RowGap--base);
   --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
   --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-toolbar__expandable-content--Display: grid;
-  --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-toolbar--RowGap);
   --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-toolbar__content--PaddingRight);
   --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-toolbar__content--PaddingLeft);
@@ -11459,6 +11463,7 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-toolbar__group {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
+  row-gap: var(--pf-c-toolbar__group--RowGap);
   align-items: var(--pf-c-toolbar__group--AlignItems);
   align-self: var(--pf-c-toolbar__group--AlignSelf);
   margin-right: var(--pf-c-toolbar--spacer);
@@ -11625,6 +11630,7 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-toolbar__content {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
   position: relative;
+  row-gap: var(--pf-c-toolbar__content--RowGap);
   align-items: center;
   padding-right: var(--pf-c-toolbar__content--PaddingRight);
   padding-left: var(--pf-c-toolbar__content--PaddingLeft);
@@ -11632,6 +11638,7 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-toolbar__content-section {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
+  row-gap: var(--pf-c-toolbar__content-section--RowGap);
   align-items: var(--pf-c-toolbar__content-section--AlignItems);
   width: 100%;
 }
@@ -11641,13 +11648,13 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-toolbar__expandable-content {
   position: absolute;
-  top: 100%;
+  top: calc(100% + var(--pf-c-toolbar__content--RowGap));
   right: 0;
   left: 0;
   z-index: var(--pf-c-toolbar__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
+  padding: 0 var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
   background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
 }
@@ -16061,77 +16068,74 @@ textarea.pf-c-form-control {
 }
 
 .pf-c-input-group {
-  --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
+  --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
+  --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
+  --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
+  --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
+  --pf-c-input-group__item--BackgroundColor: transparent;
+  --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
+  --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
+  --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
+  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
+  --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
+  --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
   --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
-  --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
-  --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
-  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
-  --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
-  --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
-  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
-  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
-  --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
+  --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
+  --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
+  --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-input-group--c-form-control--MarginRight: 0;
-  color: var(--pf-global--Color--100);
   display: flex;
   width: 100%;
-  background-color: var(--pf-c-input-group--BackgroundColor);
-}
-.pf-c-input-group.pf-m-plain {
-  --pf-c-input-group--BackgroundColor: transparent;
-}
-.pf-c-input-group > * + * {
-  margin-left: -1px;
 }
-.pf-c-input-group > :focus,
-.pf-c-input-group > :focus-within {
-  z-index: var(--pf-c-input-group--child--ZIndex);
-}
-.pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
-  margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
+
+.pf-c-input-group__item {
+  position: relative;
+  display: flex;
+  min-width: var(--pf-c-input-group__item--MinWidth, revert);
+  max-width: var(--pf-c-input-group__item--MaxWidth, revert);
+  background-color: var(--pf-c-input-group__item--BackgroundColor);
+  border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
+}
+.pf-c-input-group__item:where(:not(:first-child)) {
+  margin-left: var(--pf-c-input-group__item--MarginLeft);
+}
+.pf-c-input-group__item.pf-m-box {
+  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
+  padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
+  padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
+  border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
+  border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
+}
+.pf-c-input-group__item.pf-m-plain {
+  --pf-c-input-group__item--MarginLeft: 0;
+  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
+  border: none;
 }
-.pf-c-input-group input:not([type=checkbox]):not([type=radio]),
-.pf-c-input-group textarea {
-  flex: 2;
-  min-width: 0;
+.pf-c-input-group__item.pf-m-disabled {
+  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
+  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
+  --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
 }
-.pf-c-input-group textarea {
-  min-height: var(--pf-c-input-group__textarea--MinHeight);
+.pf-c-input-group__item.pf-m-fill {
+  flex-grow: 1;
 }
 
 .pf-c-input-group__text {
-  display: flex;
-  align-items: center;
-  padding-right: var(--pf-c-input-group__text--PaddingRight);
-  padding-left: var(--pf-c-input-group__text--PaddingLeft);
+  align-self: center;
   font-size: var(--pf-c-input-group__text--FontSize);
   color: var(--pf-c-input-group__text--Color);
-  text-align: center;
-  background-color: var(--pf-c-input-group__text--BackgroundColor);
-  border: var(--pf-c-input-group__text--BorderWidth) solid;
-  border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
 }
 label.pf-c-input-group__text {
   cursor: pointer;
 }
 
-.pf-c-input-group__text.pf-m-plain {
-  --pf-c-input-group__text--BorderWidth: 0;
-  margin-left: 0;
-}
-.pf-c-input-group__text.pf-m-disabled {
-  --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
-  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
-  --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
-}
-
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
 :where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
@@ -16169,31 +16173,20 @@ label.pf-c-input-group__text {
 }
 
 :where(.pf-theme-dark) .pf-c-input-group {
-  --pf-c-input-group--BackgroundColor: transparent;
-  --pf-c-input-group__text--BorderTopColor: transparent;
-  --pf-c-input-group__text--BorderRightColor: transparent;
-  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
-  --pf-c-input-group__text--BorderLeftColor: transparent;
-  --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
+  --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
+  --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-input-group__item--m-box--BorderTopColor: transparent;
+  --pf-c-input-group__item--m-box--BorderRightColor: transparent;
+  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
+  --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
   --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
-  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }
 :where(.pf-theme-dark) .pf-c-input-group > * + * {
-  margin-left: 0;
-  border-left: 1px solid var(--pf-global--palette--black-700);
-}
-:where(.pf-theme-dark) .pf-c-input-group__text {
-  --pf-c-input-group__text--BorderTopColor: transparent;
-  --pf-c-input-group__text--BorderRightColor: transparent;
-  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
-  --pf-c-input-group__text--BorderLeftColor: transparent;
-}
-:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
-  --pf-c-input-group__text--BackgroundColor: transparent;
-}
-:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
-  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
-  color: var(--pf-c-input-group__text--m-disabled--Color);
+  --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
+  border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
 }
 
 .pf-c-jump-links {
@@ -21272,7 +21265,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--MinWidth: 0;
-  --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
   --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -21380,7 +21372,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
   padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
-  line-height: var(--pf-c-options-menu__toggle--LineHeight);
   color: var(--pf-c-options-menu__toggle--Color);
   background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
   border: none;
@@ -21398,9 +21389,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   display: inline-block;
   color: var(--pf-c-options-menu__toggle--m-plain--Color);
 }
-.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
-  line-height: var(--pf-c-options-menu__toggle--LineHeight);
-}
 .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
   --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);