@patternfly/react-styles 5.0.0-alpha.16 → 5.0.0-alpha.17

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 5.0.0-alpha.17 (2023-05-31)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # [5.0.0-alpha.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.0.0-alpha.15...@patternfly/react-styles@5.0.0-alpha.16) (2023-05-19)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/InputGroup/input-group.css

@@ -20,8 +20,6 @@
   --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
   --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-input-group--c-form-control--invalid--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-input-group--c-form-control--MarginRight: 0;
   display: flex;
   width: 100%;
 }

package/css/components/Masthead/masthead.css

@@ -89,6 +89,7 @@
   --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--AlignItems--base: center;
   --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
   --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
   --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
@@ -161,6 +162,7 @@
   --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--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);
   --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);

package/css/components/NumberInput/number-input.css

@@ -1,7 +1,7 @@
-.pf-v5-c-number-input .pf-v5-c-form-control {
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
   appearance: textfield;
 }
-.pf-v5-c-number-input .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control::-webkit-outer-spin-button {
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
@@ -27,6 +27,8 @@
 }
 .pf-v5-c-number-input .pf-v5-c-form-control {
   width: var(--pf-v5-c-number-input--c-form-control--Width);
+}
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
   text-align: right;
 }
 

package/css/components/Pagination/pagination.css

@@ -1,7 +1,7 @@
-.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
+.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input) {
   appearance: textfield;
 }
-.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-outer-spin-button {
+.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
@@ -16,7 +16,7 @@
   --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
   --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--c-options-menu__toggle--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-pagination__nav--Display: none;
   --pf-v5-c-pagination--m-display-summary__nav--Display: none;
   --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
@@ -60,9 +60,9 @@
   --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
-  --pf-v5-c-pagination--c-options-menu--Display: none;
-  --pf-v5-c-pagination--m-display-summary--c-options-menu--Display: none;
-  --pf-v5-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
+  --pf-v5-c-pagination--c-menu-toggle--Display: none;
+  --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
+  --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -79,7 +79,7 @@
     --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
     --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
     --pf-v5-c-pagination--m-bottom--BoxShadow: none;
-    --pf-v5-c-pagination--c-options-menu--Display: inline-flex;
+    --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
     --pf-v5-c-pagination__nav--Display: inline-flex;
     --pf-v5-c-pagination__total-items--Display: none;
   }
@@ -95,8 +95,9 @@
 .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
   margin-right: var(--pf-v5-c-pagination--child--MarginRight);
 }
-.pf-v5-c-pagination .pf-v5-c-options-menu {
-  display: var(--pf-v5-c-pagination--c-options-menu--Display);
+.pf-v5-c-pagination .pf-v5-c-menu-toggle {
+  display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
+  font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
 }
 .pf-v5-c-pagination.pf-m-bottom {
   --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
@@ -126,7 +127,7 @@
 .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
   display: none;
 }
-.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu {
+.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
   position: absolute;
   display: block;
 }
@@ -149,7 +150,10 @@
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
     display: block;
   }
-  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu {
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
+    display: inline-flex;
+  }
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
     position: relative;
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
@@ -174,9 +178,6 @@
     padding: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop) var(--pf-v5-c-pagination--m-sticky--md--PaddingRight) var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom) var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
   }
 }
-.pf-v5-c-pagination .pf-v5-c-options-menu__toggle {
-  font-size: var(--pf-v5-c-pagination--c-options-menu__toggle--FontSize);
-}
 .pf-v5-c-pagination.pf-m-compact {
   --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
 }
@@ -214,19 +215,18 @@
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
   width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
 }
-
 .pf-v5-c-pagination__total-items {
   display: var(--pf-v5-c-pagination__total-items--Display);
 }
 
 .pf-v5-c-pagination.pf-m-display-summary {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-display-full {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-inset-none {
@@ -250,12 +250,12 @@
 @media (min-width: 576px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-sm {
@@ -280,12 +280,12 @@
 @media (min-width: 768px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-md {
@@ -310,12 +310,12 @@
 @media (min-width: 992px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-lg {
@@ -340,12 +340,12 @@
 @media (min-width: 1200px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-xl {
@@ -370,12 +370,12 @@
 @media (min-width: 1450px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-2xl {

package/css/components/Pagination/pagination.d.ts

@@ -2,6 +2,7 @@ import './pagination.css';
 declare const _default: {
   "button": "pf-v5-c-button",
   "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -59,8 +60,6 @@ declare const _default: {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-v5-c-options-menu",
-  "optionsMenuToggle": "pf-v5-c-options-menu__toggle",
   "pagination": "pf-v5-c-pagination",
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",

package/css/components/Pagination/pagination.js

@@ -4,6 +4,7 @@ require('./pagination.css');
 exports.default = {
   "button": "pf-v5-c-button",
   "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -61,8 +62,6 @@ exports.default = {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-v5-c-options-menu",
-  "optionsMenuToggle": "pf-v5-c-options-menu__toggle",
   "pagination": "pf-v5-c-pagination",
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",

package/css/components/Pagination/pagination.mjs

@@ -2,6 +2,7 @@ import './pagination.css';
 export default {
   "button": "pf-v5-c-button",
   "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -59,8 +60,6 @@ export default {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-v5-c-options-menu",
-  "optionsMenuToggle": "pf-v5-c-options-menu__toggle",
   "pagination": "pf-v5-c-pagination",
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",

package/css/components/Toolbar/toolbar.css

@@ -48,6 +48,7 @@
 }
 
 .pf-v5-c-toolbar {
+  --pf-v5-c-toolbar--AlignItems--base: flex-start;
   --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-toolbar--RowGap--base: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-toolbar--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
@@ -57,18 +58,20 @@
   --pf-v5-c-toolbar__item--Display: block;
   --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__group--Display: flex;
-  --pf-v5-c-toolbar__group--AlignItems: baseline;
+  --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__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);
   --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar__content-section--Display: flex;
-  --pf-v5-c-toolbar__content-section--AlignItems: baseline;
+  --pf-v5-c-toolbar__content-section--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__content-section--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
   --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);
@@ -87,8 +90,8 @@
   --pf-v5-c-toolbar__group--m-chip-container__item--MarginTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--spacer--base: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar__item--spacer: var(--pf-v5-c-toolbar--spacer--base);
-  --pf-v5-c-toolbar__group--spacer: var(--pf-v5-c-toolbar--spacer--base);
   --pf-v5-c-toolbar__item--Width: auto;
+  --pf-v5-c-toolbar__group--spacer: var(--pf-v5-c-toolbar--spacer--base);
   --pf-v5-c-toolbar__group--m-toggle-group--spacer: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-v5-c-toolbar__group--spacer);
   --pf-v5-c-toolbar__group--m-icon-button-group--spacer: var(--pf-v5-c-toolbar__group--spacer);
@@ -113,7 +116,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: center;
+  --pf-v5-c-toolbar--m-full-height__item--AlignItems: var(--pf-v5-c-toolbar__group--AlignItems);
   position: relative;
   display: grid;
   row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -163,8 +166,8 @@
 .pf-v5-c-toolbar.pf-m-full-height .pf-v5-c-toolbar__item {
   align-self: stretch;
 }
-.pf-v5-c-toolbar.pf-m-full-height .pf-v5-c-toolbar__item {
-  align-items: var(--pf-v5-c-toolbar--m-full-height__item--AlignItems);
+.pf-v5-c-toolbar.pf-m-full-height :where(.pf-v5-c-toolbar__item) {
+  --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--m-full-height__item--AlignItems);
 }
 .pf-v5-c-toolbar.pf-m-static,
 .pf-v5-c-toolbar.pf-m-static .pf-v5-c-toolbar__content {
@@ -186,27 +189,39 @@
 .pf-v5-c-toolbar__group > .pf-v5-c-divider.pf-m-vertical:last-child {
   --pf-v5-c-toolbar--spacer: 0;
 }
-
-.pf-v5-c-toolbar__group {
-  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__group--Display);
-  row-gap: var(--pf-v5-c-toolbar__group--RowGap);
-  align-items: var(--pf-v5-c-toolbar__group--AlignItems);
-  align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
-  margin-right: var(--pf-v5-c-toolbar--spacer);
+.pf-v5-c-toolbar__content-section.pf-m-align-items-start,
+.pf-v5-c-toolbar__group.pf-m-align-items-start {
+  align-items: flex-start;
 }
+.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__content-section.pf-m-align-items-baseline,
 .pf-v5-c-toolbar__group.pf-m-align-items-baseline {
   align-items: baseline;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-self-start,
+.pf-v5-c-toolbar__group.pf-m-align-self-start {
+  align-self: flex-start;
+}
+.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__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 {
+  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
+  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__group--Display);
+  row-gap: var(--pf-v5-c-toolbar__group--RowGap);
+  align-items: var(--pf-v5-c-toolbar__group--AlignItems);
+  align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
+  margin-right: var(--pf-v5-c-toolbar--spacer);
+}
 .pf-v5-c-toolbar__group.pf-m-button-group {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--m-button-group--spacer);
 }
@@ -247,6 +262,7 @@
   --pf-v5-c-toolbar__item--Width--base: var(--pf-v5-c-toolbar__item--Width);
   --pf-v5-c-toolbar__item--MinWidth--base: var(--pf-v5-c-toolbar__item--MinWidth);
   --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__item--Display);
+  align-items: var(--pf-v5-c-toolbar__item--AlignItems);
   align-self: var(--pf-v5-c-toolbar__item--AlignSelf);
   width: var(--pf-v5-c-toolbar__item--Width--base);
   min-width: var(--pf-v5-c-toolbar__item--MinWidth--base);
@@ -302,6 +318,18 @@
     --pf-v5-c-toolbar__item--MinWidth--base: var(--pf-v5-c-toolbar__item--MinWidth-on-2xl, var(--pf-v5-c-toolbar__item--MinWidth-on-xl, var(--pf-v5-c-toolbar__item--MinWidth-on-lg, var(--pf-v5-c-toolbar__item--MinWidth-on-md, var(--pf-v5-c-toolbar__item--MinWidth-on-sm, var(--pf-v5-c-toolbar__item--MinWidth))))));
   }
 }
+.pf-v5-c-toolbar__item.pf-m-align-items-start {
+  align-items: flex-start;
+}
+.pf-v5-c-toolbar__item.pf-m-align-items-center {
+  align-items: center;
+}
+.pf-v5-c-toolbar__item.pf-m-align-items-baseline {
+  align-items: baseline;
+}
+.pf-v5-c-toolbar__item.pf-m-align-self-start {
+  align-self: flex-start;
+}
 .pf-v5-c-toolbar__item.pf-m-align-self-center {
   align-self: center;
 }
@@ -358,7 +386,7 @@
   --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__content--Display);
   position: relative;
   row-gap: var(--pf-v5-c-toolbar__content--RowGap);
-  align-items: center;
+  align-items: var(--pf-v5-c-toolbar__content--AlignItems);
   padding-right: var(--pf-v5-c-toolbar__content--PaddingRight);
   padding-left: var(--pf-v5-c-toolbar__content--PaddingLeft);
 }
@@ -369,9 +397,15 @@
   align-items: var(--pf-v5-c-toolbar__content-section--AlignItems);
   width: 100%;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-items-start {
+  align-items: flex-start;
+}
 .pf-v5-c-toolbar__content-section.pf-m-align-items-center {
   align-items: center;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-items-baseline {
+  align-items: baseline;
+}
 
 .pf-v5-c-toolbar__expandable-content {
   position: absolute;

package/css/components/Toolbar/toolbar.d.ts

@@ -20,8 +20,10 @@ declare const _default: {
     "fullHeight": "pf-m-full-height",
     "static": "pf-m-static",
     "vertical": "pf-m-vertical",
+    "alignItemsStart": "pf-m-align-items-start",
     "alignItemsCenter": "pf-m-align-items-center",
     "alignItemsBaseline": "pf-m-align-items-baseline",
+    "alignSelfStart": "pf-m-align-self-start",
     "alignSelfCenter": "pf-m-align-self-center",
     "alignSelfBaseline": "pf-m-align-self-baseline",
     "buttonGroup": "pf-m-button-group",

package/css/components/Toolbar/toolbar.js

@@ -22,8 +22,10 @@ exports.default = {
     "fullHeight": "pf-m-full-height",
     "static": "pf-m-static",
     "vertical": "pf-m-vertical",
+    "alignItemsStart": "pf-m-align-items-start",
     "alignItemsCenter": "pf-m-align-items-center",
     "alignItemsBaseline": "pf-m-align-items-baseline",
+    "alignSelfStart": "pf-m-align-self-start",
     "alignSelfCenter": "pf-m-align-self-center",
     "alignSelfBaseline": "pf-m-align-self-baseline",
     "buttonGroup": "pf-m-button-group",

package/css/components/Toolbar/toolbar.mjs

@@ -20,8 +20,10 @@ export default {
     "fullHeight": "pf-m-full-height",
     "static": "pf-m-static",
     "vertical": "pf-m-vertical",
+    "alignItemsStart": "pf-m-align-items-start",
     "alignItemsCenter": "pf-m-align-items-center",
     "alignItemsBaseline": "pf-m-align-items-baseline",
+    "alignSelfStart": "pf-m-align-self-start",
     "alignSelfCenter": "pf-m-align-self-center",
     "alignSelfBaseline": "pf-m-align-self-baseline",
     "buttonGroup": "pf-m-button-group",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.0.0-alpha.16",
+  "version": "5.0.0-alpha.17",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.64",
+    "@patternfly/patternfly": "5.0.0-alpha.69",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "ff94267709508525b7fe8dd1da0b7ea6a33854aa"
+  "gitHead": "0f4a1d04e19c94a00f2174fb5e063e4cc516819f"
 }