@patternfly/patternfly 5.0.0-prerelease.9 → 5.0.0

package/{components → dist/components}/MenuToggle/menu-toggle.scss

@@ -153,6 +153,7 @@
 
   // Split button, controls, check
   --#{$menu-toggle}__button--BackgroundColor: transparent;
+  --#{$menu-toggle}__button--AlignSelf: baseline;
   --#{$menu-toggle}__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}__button__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
@@ -162,6 +163,7 @@
   --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}--m-typeahead__controls--MarginLeft: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
+  --#{$menu-toggle}--m-typeahead__button--AlignSelf: center;
 
   position: relative;
   display: inline-flex;
@@ -275,6 +277,7 @@
     --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth);
     --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--active--after--BorderBottomWidth);
 
+    align-items: center;
     height: 100%;
   }
 
@@ -333,6 +336,7 @@
   &.pf-m-typeahead {
     --#{$menu-toggle}__button__controls--MarginRight: var(--#{$menu-toggle}--m-typeahead__controls--MarginRight);
     --#{$menu-toggle}__button__controls--MarginLeft: var(--#{$menu-toggle}--m-typeahead__controls--MarginLeft);
+    --#{$menu-toggle}__button--AlignSelf: var(--#{$menu-toggle}--m-typeahead__button--AlignSelf);
 
     align-items: stretch;
     padding: 0;
@@ -365,12 +369,19 @@
 
     > .#{$check} {
       --#{$menu-toggle}--PaddingRight: 0;
-      --#{$check}__input--MarginTop: 0;
       --#{$check}__label--Color: currentcolor;
       --#{$check}__label--disabled--Color: currentcolor;
 
       align-items: center;
       align-self: stretch;
+
+      .#{$check}__input {
+        align-self: revert;
+
+        // stylelint-disable property-no-vendor-prefix
+        -moz-transform: none;
+        // stylelint-enable
+      }
     }
 
     // Split button, active
@@ -507,6 +518,7 @@
   --#{$menu-toggle}__controls--MarginRight: var(--#{$menu-toggle}__button__controls--MarginRight);
   --#{$menu-toggle}__controls--MarginLeft: var(--#{$menu-toggle}__button__controls--MarginLeft);
 
+  align-self: var(--#{$menu-toggle}__button--AlignSelf);
   padding-right: var(--#{$menu-toggle}__button--PaddingRight);
   padding-left: var(--#{$menu-toggle}__button--PaddingLeft);
   color: inherit;
@@ -515,7 +527,6 @@
 }
 
 .#{$menu-toggle}__icon {
-  display: inline-flex;
   flex-shrink: 0;
   align-self: center;
   margin-right: var(--#{$menu-toggle}__icon--MarginRight);
@@ -530,7 +541,7 @@
 
 .#{$menu-toggle}__count {
   display: flex;
-  align-items: center;
+  flex-wrap: nowrap;
   margin-left: var(--#{$menu-toggle}__count--MarginLeft);
 }
 

package/{components → dist/components}/Radio/radio.css

@@ -4,24 +4,23 @@
   --pf-v5-c-radio__label--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-radio__input--Height: var(--pf-v5-c-radio__label--FontSize);
-  --pf-v5-c-radio__input--MarginTop: calc(((var(--pf-v5-c-radio__label--FontSize) * var(--pf-v5-c-radio__label--LineHeight)) - var(--pf-v5-c-radio__input--Height)) / 2);
+  --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
+  --pf-v5-c-radio__input--TranslateY--moz: 5px;
   --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
   --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
   --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-radio__description--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-radio__body--MarginTop: var(--pf-v5-global--spacer--sm);
-  display: grid;
+  display: inline-grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-v5-c-radio--GridGap);
+  align-items: baseline;
+  width: 100%;
 }
 .pf-v5-c-radio.pf-m-standalone {
   --pf-v5-c-radio--GridGap: 0;
-  --pf-v5-c-radio__input--Height: auto;
-  --pf-v5-c-radio__input--MarginTop: 0;
-  display: inline-grid;
-  line-height: 1;
+  --pf-v5-c-radio__input--TranslateY--moz: 0;
+  width: auto;
 }
 
 .pf-v5-c-radio__label {
@@ -32,8 +31,7 @@
 }
 
 .pf-v5-c-radio__input {
-  height: var(--pf-v5-c-radio__input--Height);
-  margin-top: var(--pf-v5-c-radio__input--MarginTop);
+  -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
 }
 .pf-v5-c-radio__input:first-child {
   margin-left: var(--pf-v5-c-radio__input--first-child--MarginLeft);

package/{components → dist/components}/Radio/radio.scss

@@ -6,26 +6,25 @@
   --#{$radio}__label--Color: var(--#{$pf-global}--Color--100);
   --#{$radio}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$radio}__label--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$radio}__label--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$radio}__input--Height: var(--#{$radio}__label--FontSize);
-  --#{$radio}__input--MarginTop: calc(((var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight)) - var(--#{$radio}__input--Height)) / 2);
+  --#{$radio}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
+  --#{$radio}__input--TranslateY--moz: 5px;
   --#{$radio}__input--first-child--MarginLeft: #{pf-size-prem(1px)};
   --#{$radio}__input--last-child--MarginRight: #{pf-size-prem(1px)};
   --#{$radio}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$radio}__description--Color: var(--#{$pf-global}--Color--200);
   --#{$radio}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
 
-  display: grid;
+  display: inline-grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--#{$radio}--GridGap);
+  align-items: baseline;
+  width: 100%;
 
   &.pf-m-standalone {
     --#{$radio}--GridGap: 0;
-    --#{$radio}__input--Height: auto;
-    --#{$radio}__input--MarginTop: 0;
+    --#{$radio}__input--TranslateY--moz: 0;
 
-    display: inline-grid;
-    line-height: 1;
+    width: auto;
   }
 }
 
@@ -37,8 +36,9 @@
 }
 
 .#{$radio}__input {
-  height: var(--#{$radio}__input--Height);
-  margin-top: var(--#{$radio}__input--MarginTop);
+  // stylelint-disable property-no-vendor-prefix
+  -moz-transform: translateY(var(--#{$radio}__input--TranslateY--moz));
+  // stylelint-enable
 
   // fixes a chrome issue where the left edge is cut off in a container with overflow hidden
   &:first-child {

package/{components → dist/components}/Select/select.css

@@ -72,7 +72,6 @@
   --pf-v5-c-select__toggle-typeahead--BorderRight: none;
   --pf-v5-c-select__toggle-typeahead--BorderLeft: none;
   --pf-v5-c-select__toggle-typeahead--MinWidth: 7.5rem;
-  --pf-v5-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--md));
   --pf-v5-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-v5-global--Color--dark-200);
   --pf-v5-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-select__toggle-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -282,7 +281,6 @@
   white-space: nowrap;
   --pf-v5-c-form-control--invalid--BackgroundUrl: none;
   position: relative;
-  height: auto;
 }
 .pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear {
   padding-right: var(--pf-v5-c-select__toggle-clear--PaddingRight);
@@ -330,9 +328,6 @@
 .pf-v5-c-select__toggle-wrapper > :not(:last-child) {
   margin-right: var(--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight);
 }
-.pf-v5-c-select__toggle-wrapper > .pf-v5-c-form-control {
-  margin-top: calc(-1 * var(--pf-v5-c-select__toggle-wrapper--m-typeahead--PaddingTop));
-}
 .pf-v5-c-select__toggle-wrapper .pf-v5-c-chip-group {
   margin-top: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop);
   margin-bottom: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom);
@@ -363,13 +358,9 @@
 }
 .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control {
   background-color: var(--pf-v5-c-select__toggle-typeahead--BackgroundColor);
-  border-top: var(--pf-v5-c-select__toggle-typeahead--BorderTop);
-  border-right: var(--pf-v5-c-select__toggle-typeahead--BorderRight);
-  border-bottom-color: transparent;
-  border-left: var(--pf-v5-c-select__toggle-typeahead--BorderLeft);
 }
-.pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control:focus {
-  padding-bottom: var(--pf-v5-c-select__toggle-typeahead--focus--PaddingBottom);
+.pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::before, .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::after {
+  border: 0;
 }
 
 .pf-v5-c-select__menu {

package/{components → dist/components}/Select/select.scss

@@ -76,9 +76,6 @@
   // Typeahead form
   --#{$select}__toggle-typeahead--MinWidth: #{pf-size-prem(120px)};
 
-  // This is really var(--#{$form-control}--PaddingBottom) but has to be recalculated instead of reusing another component's variable
-  --#{$select}__toggle-typeahead--focus--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$pf-global}--BorderWidth--md));
-
   // Toggle text
   --#{$select}__toggle--m-placeholder__toggle-text--Color: var(--#{$pf-global}--Color--dark-200);
 
@@ -355,7 +352,6 @@
       --#{$form-control}--invalid--BackgroundUrl: none;
 
       position: relative;
-      height: auto;
     }
   }
 
@@ -415,12 +411,6 @@
     margin-right: var(--#{$select}__toggle-wrapper--not-last-child--MarginRight);
   }
 
-  // Remove during breaking change
-  // if there is an input in the toggle-wrapper, then give it a negative top margin to match the typeahead top padding
-  > .#{$form-control} {
-    margin-top: calc(-1 * var(--#{$select}__toggle-wrapper--m-typeahead--PaddingTop));
-  }
-
   // a chip group needs a bottom margin to make some space between the chip group and typeahead input box if it wraps
   .#{$chip}-group {
     margin-top: var(--#{$select}__toggle-wrapper--c-chip-group--MarginTop);
@@ -455,13 +445,10 @@
 
   &.#{$form-control} {
     background-color: var(--#{$select}__toggle-typeahead--BackgroundColor);
-    border-top: var(--#{$select}__toggle-typeahead--BorderTop); // remove and define border-top-color w/ &.#{$form-control} at breaking change
-    border-right: var(--#{$select}__toggle-typeahead--BorderRight);
-    border-bottom-color: transparent;
-    border-left: var(--#{$select}__toggle-typeahead--BorderLeft);
 
-    &:focus {
-      padding-bottom: var(--#{$select}__toggle-typeahead--focus--PaddingBottom); // remove at breaking change
+    &::before,
+    &::after {
+      border: 0;
     }
   }
 }

package/{components → dist/components}/Toolbar/toolbar.css

@@ -55,16 +55,20 @@
   --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--item--RowGap--base: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-toolbar__item--Display: block;
+  --pf-v5-c-toolbar__item--Display: flex;
   --pf-v5-c-toolbar__item--MinWidth--base: auto;
-  --pf-v5-c-toolbar__item--AlignSelf: auto;
   --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
+  --pf-v5-c-toolbar__item--AlignSelf: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__group--Display: flex;
+  --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
   --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__group--AlignSelf: auto;
-  --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
   --pf-v5-c-toolbar--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-toolbar--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
+  --pf-v5-c-toolbar--m-align-items-center--AlignItems: center;
+  --pf-v5-c-toolbar--m-align-items-baseline--AlignItems: baseline;
+  --pf-v5-c-toolbar--m-align-self-center--AlignSelf: center;
+  --pf-v5-c-toolbar--m-align-self-baseline--AlignSelf: baseline;
   --pf-v5-c-toolbar__content--Display: flex;
   --pf-v5-c-toolbar__content--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__content--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
@@ -109,7 +113,9 @@
   --pf-v5-c-toolbar__item--m-search-filter--spacer: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-toolbar__item--m-chip-group--spacer: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-toolbar__item--m-label--spacer: var(--pf-v5-c-toolbar__item--spacer);
+  --pf-v5-c-toolbar__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__item--m-label--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-toolbar__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-v5-global--spacer--sm));
   --pf-v5-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-v5-global--Color--100);
@@ -117,7 +123,7 @@
   --pf-v5-c-toolbar--m-full-height--PaddingTop: 0;
   --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
   --pf-v5-c-toolbar--m-full-height__item--Display: flex;
-  --pf-v5-c-toolbar--m-full-height__item--AlignItems: var(--pf-v5-c-toolbar__group--AlignItems);
+  --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
   position: relative;
   display: grid;
   row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -196,11 +202,11 @@
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-items-center,
 .pf-v5-c-toolbar__group.pf-m-align-items-center {
-  align-items: center;
+  --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--m-align-items-center--AlignItems);
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline,
 .pf-v5-c-toolbar__group.pf-m-align-items-baseline {
-  align-items: baseline;
+  --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--m-align-items-baseline--AlignItems);
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-self-start,
 .pf-v5-c-toolbar__group.pf-m-align-self-start {
@@ -208,11 +214,11 @@
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-self-center,
 .pf-v5-c-toolbar__group.pf-m-align-self-center {
-  align-self: center;
+  --pf-v5-c-toolbar__group--AlignSelf: var(--pf-v5-c-toolbar--m-align-self-center--AlignItems);
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-self-baseline,
 .pf-v5-c-toolbar__group.pf-m-align-self-baseline {
-  align-self: baseline;
+  --pf-v5-c-toolbar__group--AlignSelf: var(--pf-v5-c-toolbar--m-align-self-baseline--AlignItems);
 }
 
 .pf-v5-c-toolbar__group {
@@ -355,6 +361,7 @@
 .pf-v5-c-toolbar__item.pf-m-label {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-label--spacer);
   font-weight: var(--pf-v5-c-toolbar__item--m-label--FontWeight);
+  transform: translateY(var(--pf-v5-global--spacer--form-element));
 }
 .pf-v5-c-toolbar__item.pf-m-pagination {
   margin-left: auto;
@@ -402,7 +409,7 @@
   align-items: flex-start;
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-items-center {
-  align-items: center;
+  --pf-v5-c-toolbar__content-section--AlignItems: var(--pf-v5-c-toolbar--m-align-items-center--AlignItems);
 }
 .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline {
   align-items: baseline;
@@ -438,7 +445,7 @@
   display: grid;
   grid-row-gap: var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap);
 }
-.pf-v5-c-toolbar__expandable-content .pf-m-label {
+.pf-v5-c-toolbar__expandable-content .pf-v5-c-toolbar__item.pf-m-label {
   margin-bottom: var(--pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom);
   font-size: var(--pf-v5-c-toolbar__expandable-content__item--m-label--FontSize);
 }
@@ -454,10 +461,12 @@
 .pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__item,
 .pf-v5-c-toolbar__group.pf-m-chip-container .pf-v5-c-toolbar__item {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--spacer);
+  --pf-v5-c-toolbar__item--AlignSelf: auto;
   margin-top: var(--pf-v5-c-toolbar__group--m-chip-container__item--MarginTop);
 }
 .pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__group,
 .pf-v5-c-toolbar__group.pf-m-chip-container .pf-v5-c-toolbar__group {
+  --pf-v5-c-toolbar__group--AlignItems: center;
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
   display: flex;
   flex-wrap: wrap;

package/{components → dist/components}/Toolbar/toolbar.scss

@@ -15,21 +15,27 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   --#{$toolbar}--item--RowGap--base: var(--#{$pf-global}--spacer--xs); // shared row-gap for items and groups
 
   // Item
-  --#{$toolbar}__item--Display: block;
+  --#{$toolbar}__item--Display: flex;
   --#{$toolbar}__item--MinWidth--base: auto;
-  --#{$toolbar}__item--AlignSelf: auto;
   --#{$toolbar}__item--AlignItems: var(--#{$toolbar}--AlignItems--base);
+  --#{$toolbar}__item--AlignSelf: var(--#{$toolbar}--AlignItems--base);
 
   // Group
   --#{$toolbar}__group--Display: flex;
+  --#{$toolbar}__group--RowGap: var(--#{$toolbar}--item--RowGap--base);
   --#{$toolbar}__group--AlignItems: var(--#{$toolbar}--AlignItems--base);
   --#{$toolbar}__group--AlignSelf: auto;
-  --#{$toolbar}__group--RowGap: var(--#{$toolbar}--item--RowGap--base);
 
   // Sticky
   --#{$toolbar}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--xs);
   --#{$toolbar}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
 
+  // Alignment options
+  --#{$toolbar}--m-align-items-center--AlignItems: center;
+  --#{$toolbar}--m-align-items-baseline--AlignItems: baseline;
+  --#{$toolbar}--m-align-self-center--AlignSelf: center;
+  --#{$toolbar}--m-align-self-baseline--AlignSelf: baseline;
+
   // Content
   --#{$toolbar}__content--Display: flex;
   --#{$toolbar}__content--AlignItems: var(--#{$toolbar}--AlignItems--base);
@@ -111,8 +117,12 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Label
   --#{$toolbar}__item--m-label--spacer: var(--#{$toolbar}__item--spacer);
+  --#{$toolbar}__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --#{$toolbar}__item--m-label--FontWeight: var(--#{$pf-global}--FontWeight--bold);
 
+  // Input
+  --#{$toolbar}__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
+
   // Label in expanded content
   --#{$toolbar}__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--#{$toolbar}__expandable-content--m-expanded--GridRowGap) + var(--#{$pf-global}--spacer--sm));
   --#{$toolbar}__expandable-content__item--m-label--FontSize: var(--#{$pf-global}--FontSize--sm);
@@ -127,7 +137,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   --#{$toolbar}--m-full-height--PaddingTop: 0;
   --#{$toolbar}--m-full-height--PaddingBottom: 0;
   --#{$toolbar}--m-full-height__item--Display: flex;
-  --#{$toolbar}--m-full-height__item--AlignItems: var(--#{$toolbar}__group--AlignItems);
+  --#{$toolbar}--m-full-height__item--AlignItems: center;
 
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
     --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__expandable-content--lg--PaddingRight);
@@ -219,11 +229,11 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   &.pf-m-align-items-center {
-    align-items: center;
+    --#{$toolbar}__group--AlignItems: var(--#{$toolbar}--m-align-items-center--AlignItems);
   }
 
   &.pf-m-align-items-baseline {
-    align-items: baseline;
+    --#{$toolbar}__group--AlignItems: var(--#{$toolbar}--m-align-items-baseline--AlignItems);
   }
 
   &.pf-m-align-self-start {
@@ -231,11 +241,11 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   &.pf-m-align-self-center {
-    align-self: center;
+    --#{$toolbar}__group--AlignSelf: var(--#{$toolbar}--m-align-self-center--AlignItems);
   }
 
   &.pf-m-align-self-baseline {
-    align-self: baseline;
+    --#{$toolbar}__group--AlignSelf: var(--#{$toolbar}--m-align-self-baseline--AlignItems);
   }
 }
 
@@ -359,7 +369,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-search-filter--spacer);
   }
 
-  // Search filter
+  // Chip group
   &.pf-m-chip-group {
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-chip-group--spacer);
   }
@@ -369,6 +379,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-label--spacer);
 
     font-weight: var(--#{$toolbar}__item--m-label--FontWeight);
+    transform: translateY(var(--#{$pf-global}--spacer--form-element));
   }
 
   // Total items
@@ -429,7 +440,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   &.pf-m-align-items-center {
-    align-items: center;
+    --#{$toolbar}__content-section--AlignItems: var(--#{$toolbar}--m-align-items-center--AlignItems);
   }
 
   &.pf-m-align-items-baseline {
@@ -470,7 +481,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     grid-row-gap: var(--#{$toolbar}__expandable-content--m-expanded--GridRowGap);
   }
 
-  .pf-m-label {
+  .#{$toolbar}__item.pf-m-label {
     margin-bottom: var(--#{$toolbar}__expandable-content__item--m-label--MarginBottom);
     font-size: var(--#{$toolbar}__expandable-content__item--m-label--FontSize);
   }
@@ -488,11 +499,13 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   .#{$toolbar}__item {
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--spacer);
+    --#{$toolbar}__item--AlignSelf: auto;
 
     margin-top: var(--#{$toolbar}__group--m-chip-container__item--MarginTop);
   }
 
   .#{$toolbar}__group {
+    --#{$toolbar}__group--AlignItems: center;
     --#{$toolbar}--spacer: var(--#{$toolbar}__group--spacer);
 
     display: flex;

package/{docs → dist/docs}/components/CalendarMonth/examples/CalendarMonth.md

@@ -83,14 +83,14 @@ cssPrefix: pf-v5-c-calendar-month
       </div>
       <div class="pf-v5-c-input-group__item">
         <div class="pf-v5-c-calendar-month__header-year">
-          <div class="pf-v5-c-form-control">
+          <span class="pf-v5-c-form-control">
             <input
               type="number"
               value="2020"
               id="calendar-month-date-selected-year"
               aria-label="Select year"
             />
-          </div>
+          </span>
         </div>
       </div>
     </div>
@@ -477,14 +477,14 @@ cssPrefix: pf-v5-c-calendar-month
       </div>
       <div class="pf-v5-c-input-group__item">
         <div class="pf-v5-c-calendar-month__header-year">
-          <div class="pf-v5-c-form-control">
+          <span class="pf-v5-c-form-control">
             <input
               type="number"
               value="2020"
               id="calendar-month-range-start-date-selected-year"
               aria-label="Select year"
             />
-          </div>
+          </span>
         </div>
       </div>
     </div>
@@ -896,14 +896,14 @@ cssPrefix: pf-v5-c-calendar-month
       </div>
       <div class="pf-v5-c-input-group__item">
         <div class="pf-v5-c-calendar-month__header-year">
-          <div class="pf-v5-c-form-control">
+          <span class="pf-v5-c-form-control">
             <input
               type="number"
               value="2020"
               id="calendar-month-range-end-date-selected-year"
               aria-label="Select year"
             />
-          </div>
+          </span>
         </div>
       </div>
     </div>
@@ -1315,14 +1315,14 @@ cssPrefix: pf-v5-c-calendar-month
       </div>
       <div class="pf-v5-c-input-group__item">
         <div class="pf-v5-c-calendar-month__header-year">
-          <div class="pf-v5-c-form-control">
+          <span class="pf-v5-c-form-control">
             <input
               type="number"
               value="2020"
               id="calendar-month-range-start-and-end-dates-selected-year"
               aria-label="Select year"
             />
-          </div>
+          </span>
         </div>
       </div>
     </div>

package/{docs → dist/docs}/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -9,14 +9,14 @@ cssPrefix: pf-v5-c-clipboard-copy
 ```html
 <div class="pf-v5-c-clipboard-copy">
   <div class="pf-v5-c-clipboard-copy__group">
-    <div class="pf-v5-c-form-control">
+    <span class="pf-v5-c-form-control">
       <input
         type="text"
         value="This is editable"
         id="basic-editable-text-input"
         aria-label="Copyable input"
       />
-    </div>
+    </span>
     <button
       class="pf-v5-c-button pf-m-control"
       type="button"
@@ -31,7 +31,7 @@ cssPrefix: pf-v5-c-clipboard-copy
 <br />
 <div class="pf-v5-c-clipboard-copy">
   <div class="pf-v5-c-clipboard-copy__group">
-    <div class="pf-v5-c-form-control pf-m-readonly">
+    <span class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -39,7 +39,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         id="basic-readonly-text-input"
         aria-label="Copyable input"
       />
-    </div>
+    </span>
     <button
       class="pf-v5-c-button pf-m-control"
       type="button"
@@ -71,14 +71,14 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control">
+    <span class="pf-v5-c-form-control">
       <input
         type="text"
         value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
         id="expandable-not-expanded-editable-text-input"
         aria-label="Copyable input"
       />
-    </div>
+    </span>
     <button
       class="pf-v5-c-button pf-m-control"
       type="button"
@@ -109,7 +109,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control pf-m-readonly">
+    <span class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -117,7 +117,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         id="expandable-expanded-editable-text-input"
         aria-label="Copyable input"
       />
-    </div>
+    </span>
     <button
       class="pf-v5-c-button pf-m-control"
       type="button"
@@ -149,7 +149,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control pf-m-readonly">
+    <span class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -157,7 +157,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         id="expandable-not-expanded-readonly-text-input"
         aria-label="Copyable input"
       />
-    </div>
+    </span>
     <button
       class="pf-v5-c-button pf-m-control"
       type="button"
@@ -188,7 +188,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control pf-m-readonly">
+    <span class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -196,7 +196,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         id="expandable-expanded-readonly-text-input"
         aria-label="Copyable input"
       />
-    </div>
+    </span>
     <button
       class="pf-v5-c-button pf-m-control"
       type="button"