@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

package/components/Toolbar/toolbar.css

@@ -49,22 +49,30 @@
 
 .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);
@@ -107,8 +115,8 @@
   --pf-c-toolbar--m-full-height__item--Display: flex;
   --pf-c-toolbar--m-full-height__item--AlignItems: center;
   position: relative;
-  row-gap: var(--pf-c-toolbar--RowGap);
   display: grid;
+  row-gap: var(--pf-c-toolbar--RowGap);
   padding-top: var(--pf-c-toolbar--PaddingTop);
   padding-bottom: var(--pf-c-toolbar--PaddingBottom);
   background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -182,9 +190,23 @@
 .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);
-  align-items: center;
+  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);
 }
+.pf-c-toolbar__group.pf-m-align-items-center {
+  align-items: center;
+}
+.pf-c-toolbar__group.pf-m-align-items-baseline {
+  align-items: baseline;
+}
+.pf-c-toolbar__group.pf-m-align-self-center {
+  align-self: center;
+}
+.pf-c-toolbar__group.pf-m-align-self-baseline {
+  align-self: baseline;
+}
 .pf-c-toolbar__group.pf-m-button-group {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
 }
@@ -225,6 +247,7 @@
   --pf-c-toolbar__item--Width--base: var(--pf-c-toolbar__item--Width);
   --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth);
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__item--Display);
+  align-self: var(--pf-c-toolbar__item--AlignSelf);
   width: var(--pf-c-toolbar__item--Width--base);
   min-width: var(--pf-c-toolbar__item--MinWidth--base);
   margin-right: var(--pf-c-toolbar--spacer);
@@ -279,6 +302,12 @@
     --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth-on-2xl, var(--pf-c-toolbar__item--MinWidth-on-xl, var(--pf-c-toolbar__item--MinWidth-on-lg, var(--pf-c-toolbar__item--MinWidth-on-md, var(--pf-c-toolbar__item--MinWidth-on-sm, var(--pf-c-toolbar__item--MinWidth))))));
   }
 }
+.pf-c-toolbar__item.pf-m-align-self-center {
+  align-self: center;
+}
+.pf-c-toolbar__item.pf-m-align-self-baseline {
+  align-self: baseline;
+}
 .pf-c-toolbar__item.pf-m-overflow-menu {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
 }
@@ -323,30 +352,36 @@
 .pf-c-toolbar__content,
 .pf-c-toolbar__content-section {
   flex-wrap: wrap;
-  align-items: center;
 }
 
 .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);
 }
 
 .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%;
 }
+.pf-c-toolbar__content-section.pf-m-align-items-center {
+  align-items: center;
+}
 
 .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);
 }
@@ -377,9 +412,9 @@
 .pf-c-toolbar__group.pf-m-chip-container {
   display: flex;
   flex-wrap: wrap;
+  grid-row-gap: 0;
   align-items: baseline;
   margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
-  grid-row-gap: 0;
 }
 .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item,
 .pf-c-toolbar__group.pf-m-chip-container .pf-c-toolbar__item {
@@ -429,7 +464,7 @@
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
   }
   .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__group,
-.pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__item {
+  .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
   }
@@ -442,7 +477,7 @@
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
   }
   .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__group,
-.pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__item {
+  .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
   }
@@ -455,7 +490,7 @@
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
   }
   .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__group,
-.pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__item {
+  .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
   }
@@ -468,7 +503,7 @@
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
   }
   .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__group,
-.pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__item {
+  .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
   }
@@ -481,7 +516,7 @@
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-toggle-group--m-show--spacer);
   }
   .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__group,
-.pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__item {
+  .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
   }
@@ -515,131 +550,131 @@
 }
 @media (min-width: 576px) {
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-sm,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-sm ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-sm ~ .pf-m-pagination {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-sm,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-sm ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-sm ~ .pf-m-pagination {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-sm,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-sm {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-sm {
     flex-wrap: nowrap;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-sm,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-sm {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-sm {
     flex-wrap: wrap;
   }
 }
 @media (min-width: 768px) {
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-md,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-md ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-md ~ .pf-m-pagination {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-md,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-md ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-md ~ .pf-m-pagination {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-md,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-md {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-md {
     flex-wrap: nowrap;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-md,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-md {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-md {
     flex-wrap: wrap;
   }
 }
 @media (min-width: 992px) {
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-lg,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-lg ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-lg ~ .pf-m-pagination {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-lg,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-lg ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-lg ~ .pf-m-pagination {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-lg,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-lg {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-lg {
     flex-wrap: nowrap;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-lg,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-lg {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-lg {
     flex-wrap: wrap;
   }
 }
 @media (min-width: 1200px) {
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-xl,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-xl ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-xl ~ .pf-m-pagination {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-xl,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-xl ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-xl ~ .pf-m-pagination {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-xl,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-xl {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-xl {
     flex-wrap: nowrap;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-xl,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-xl {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-xl {
     flex-wrap: wrap;
   }
 }
 @media (min-width: 1450px) {
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-2xl,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right-on-2xl ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-right-on-2xl ~ .pf-m-pagination {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-2xl,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl {
     margin-left: 0;
   }
   .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-left-on-2xl ~ .pf-m-pagination,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl ~ .pf-m-pagination {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-align-left-on-2xl ~ .pf-m-pagination {
     margin-left: auto;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-nowrap-on-2xl,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-2xl {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-nowrap-on-2xl {
     flex-wrap: nowrap;
   }
   .pf-c-toolbar .pf-c-toolbar__content-section.pf-m-wrap-on-2xl,
-.pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-2xl {
+  .pf-c-toolbar .pf-c-toolbar__group.pf-m-wrap-on-2xl {
     flex-wrap: wrap;
   }
 }

package/components/Toolbar/toolbar.scss

@@ -6,16 +6,22 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 
 .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); // row-gap between toolbar content elements
+  --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); // shared row-gap for items and groups
 
   // Item
   --pf-c-toolbar__item--Display: block;
   --pf-c-toolbar__item--MinWidth--base: auto;
+  --pf-c-toolbar__item--AlignSelf: auto;
 
   // Group
   --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);
 
   // Sticky
   --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
@@ -23,11 +29,14 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 
   // Content
   --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); // remove at breaking change
   --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md); // remove at breaking change
 
   // Content section
   --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);
 
   // Insets
   --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md); // make this the default inset at breaking change
@@ -35,7 +44,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 
   // Expandable content
   --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);
@@ -127,8 +135,8 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 
   position: relative;
-  row-gap: var(--pf-c-toolbar--RowGap);
   display: grid;
+  row-gap: var(--pf-c-toolbar--RowGap);
   padding-top: var(--pf-c-toolbar--PaddingTop);
   padding-bottom: var(--pf-c-toolbar--PaddingBottom);
   background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -208,9 +216,27 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 
   @include pf-hidden-visible(var(--pf-c-toolbar__group--Display));
 
-  align-items: center;
+  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);
 
+  &.pf-m-align-items-center {
+    align-items: center;
+  }
+
+  &.pf-m-align-items-baseline {
+    align-items: baseline;
+  }
+
+  &.pf-m-align-self-center {
+    align-self: center;
+  }
+
+  &.pf-m-align-self-baseline {
+    align-self: baseline;
+  }
+
   // Button group
   &.pf-m-button-group {
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
@@ -270,10 +296,19 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   @include pf-build-css-variable-stack("--pf-c-toolbar__item--MinWidth--base", "--pf-c-toolbar__item--MinWidth", $pf-c-toolbar--breakpoint-map);
   @include pf-hidden-visible(var(--pf-c-toolbar__item--Display));
 
+  align-self: var(--pf-c-toolbar__item--AlignSelf);
   width: var(--pf-c-toolbar__item--Width--base);
   min-width: var(--pf-c-toolbar__item--MinWidth--base);
   margin-right: var(--pf-c-toolbar--spacer);
 
+  &.pf-m-align-self-center {
+    align-self: center;
+  }
+
+  &.pf-m-align-self-baseline {
+    align-self: baseline;
+  }
+
   // Overflow menu
   &.pf-m-overflow-menu {
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
@@ -329,7 +364,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 }
 
-
 .pf-c-toolbar__expand-all-icon {
   display: inline-block;
   transition: var(--pf-c-toolbar__expand-all-icon--Transition);
@@ -339,7 +373,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 .pf-c-toolbar__content,
 .pf-c-toolbar__content-section {
   flex-wrap: wrap;
-  align-items: center;
 }
 
 // Content
@@ -347,6 +380,8 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   @include pf-hidden-visible(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);
 }
@@ -355,19 +390,25 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 .pf-c-toolbar__content-section {
   @include pf-hidden-visible(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%;
+
+  &.pf-m-align-items-center {
+    align-items: center;
+  }
 }
 
 // Expandable content
 .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);
 
@@ -403,9 +444,9 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 .pf-c-toolbar__group.pf-m-chip-container {
   display: flex;
   flex-wrap: wrap;
+  grid-row-gap: 0;
   align-items: baseline;
   margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
-  grid-row-gap: 0;
 
   .pf-c-toolbar__item {
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--spacer);
@@ -466,7 +507,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   @each $breakpoint, $breakpoint-value in $pf-c-toolbar--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-
     @include pf-apply-breakpoint($breakpoint) {
       // Align right
       .pf-c-toolbar__item.pf-m-align-right#{$breakpoint-name},

package/components/Tooltip/themes/dark/tooltip.scss

@@ -2,17 +2,7 @@
 
 @mixin pf-theme-dark-tooltip() {
   .pf-c-tooltip {
-    --pf-c-tooltip--BoxShadow: none;
     --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  }
-
-  .pf-c-tooltip,
-  .pf-c-tooltip__arrow {
-    border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
-  }
-
-  .pf-c-tooltip__arrow {
-    --pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
-    --pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
+    --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
   }
 }

package/components/Tooltip/tooltip.css

@@ -8,8 +8,10 @@
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-tooltip__arrow--Width: 0.5rem;
-  --pf-c-tooltip__arrow--Height: 0.5rem;
+  --pf-c-tooltip__arrow--Width: 0.9375rem;
+  --pf-c-tooltip__arrow--Height: 0.9375rem;
+  --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
+  --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -79,18 +81,11 @@
   width: var(--pf-c-tooltip__arrow--Width);
   height: var(--pf-c-tooltip__arrow--Height);
   pointer-events: none;
-  background-color: var(--pf-c-tooltip__content--BackgroundColor);
+  background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
+  box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
 }
 
 :where(.pf-theme-dark) .pf-c-tooltip {
-  --pf-c-tooltip--BoxShadow: none;
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-}
-:where(.pf-theme-dark) .pf-c-tooltip,
-:where(.pf-theme-dark) .pf-c-tooltip__arrow {
-  border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
-}
-:where(.pf-theme-dark) .pf-c-tooltip__arrow {
-  --pf-c-tooltip__arrow--Width: 0.9375rem;
-  --pf-c-tooltip__arrow--Height: 0.9375rem;
+  --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/components/Tooltip/tooltip.scss

@@ -13,8 +13,10 @@
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
 
   // Arrow variables
-  --pf-c-tooltip__arrow--Width: #{pf-size-prem(8px)};
-  --pf-c-tooltip__arrow--Height: #{pf-size-prem(8px)};
+  --pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
+  --pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
+  --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
+  --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -122,7 +124,8 @@
   width: var(--pf-c-tooltip__arrow--Width);
   height: var(--pf-c-tooltip__arrow--Height);
   pointer-events: none;
-  background-color: var(--pf-c-tooltip__content--BackgroundColor);
+  background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
+  box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/TreeView/tree-view.css

@@ -11,11 +11,12 @@
   --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
   --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-tree-view__node--BackgroundColor: transparent;
   --pf-c-tree-view__node-container--Display: contents;
   --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
   --pf-c-tree-view__node-content--Overflow: visible;
   --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
+  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
   --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
   --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -25,6 +26,7 @@
   --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--BackgroundColor: transparent;
   --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
   --pf-c-tree-view__node-toggle-icon--Transition: transform var(--pf-global--TransitionDuration) var(--pf-global--TimingFunction);
@@ -49,10 +51,6 @@
   --pf-c-tree-view__node-text--max-lines: 1;
   --pf-c-tree-view__node-title--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
-  --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
-  --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
-  --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
   --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--guide-left--base);
   --pf-c-tree-view--m-guides--guide-color--base: var(--pf-global--BorderColor--100);
   --pf-c-tree-view--m-guides--guide-width--base: var(--pf-global--BorderWidth--sm);
@@ -250,13 +248,14 @@
   display: flex;
   padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
   color: var(--pf-c-tree-view__node--Color);
+  background-color: var(--pf-c-tree-view__node--BackgroundColor);
 }
 .pf-c-tree-view__node.pf-m-current {
   --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
   font-weight: var(--pf-c-tree-view__node--m-current--FontWeight);
 }
 .pf-c-tree-view__node:focus {
-  background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
+  --pf-c-tree-view__node--BackgroundColor: var(--pf-c-tree-view__node--focus--BackgroundColor);
 }
 .pf-c-tree-view__node .pf-c-tree-view__node-count {
   margin-left: var(--pf-c-tree-view__node-count--MarginLeft);
@@ -303,6 +302,7 @@
   margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
   margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
   color: var(--pf-c-tree-view__node-toggle--Color);
+  background-color: var(--pf-c-tree-view__node-toggle--BackgroundColor);
   border: 0;
   transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
@@ -326,6 +326,7 @@
   font-weight: inherit;
   color: inherit;
   text-align: left;
+  background-color: transparent;
   border: 0;
 }
 label.pf-c-tree-view__node-text {
@@ -357,15 +358,6 @@ label.pf-c-tree-view__node-text {
 
 .pf-c-tree-view__action {
   margin-left: var(--pf-c-tree-view__action--MarginLeft);
-  color: var(--pf-c-tree-view__action--Color);
-  border: 0;
-}
-.pf-c-tree-view__action:hover {
-  --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
-}
-.pf-c-tree-view__action:focus {
-  --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
-  background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
 }
 
 .pf-c-tree-view__list-item .pf-c-tree-view__list-item {