@patternfly/patternfly 5.0.0-alpha.64 → 5.0.0-alpha.66

package/components/Page/page.css

@@ -949,9 +949,9 @@
   flex: 1 0 auto;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -961,38 +961,38 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
   color: var(--pf-v5-global--Color--100);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
   background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
   border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
   --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
   --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
   --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
+:root:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
   color: var(--pf-v5-global--Color--100);
 }

package/components/Pagination/pagination.css

@@ -398,6 +398,6 @@
   }
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-pagination {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-pagination {
   --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Panel/panel.css

@@ -79,6 +79,6 @@
   box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-panel {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-panel {
   --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Popover/popover.css

@@ -170,7 +170,7 @@
   margin-top: var(--pf-v5-c-popover__footer--MarginTop);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-popover {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-popover {
   --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);

package/components/Progress/progress.css

@@ -165,7 +165,7 @@
   margin-top: var(--pf-v5-c-progress__helper-text--MarginTop);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-progress {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-progress {
   --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
   --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
   --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);

package/components/Select/select.css

@@ -580,7 +580,7 @@
   box-shadow: var(--pf-v5-c-select__menu-footer--BoxShadow);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-select {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-select {
   --pf-v5-c-select__toggle--disabled--BackgroundColor: var(--pf-v5-global--palette--black-500);
   --pf-v5-c-select__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-select__toggle--before--BorderTopColor: transparent;
@@ -592,6 +592,6 @@
   --pf-v5-c-select__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-select__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-select__toggle:disabled, :where(.pf-v5-theme-dark) .pf-v5-c-select__toggle.pf-m-disabled {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-select__toggle:disabled, :root:where(.pf-v5-theme-dark) .pf-v5-c-select__toggle.pf-m-disabled {
   color: var(--pf-v5-global--palette--black-100);
 }

package/components/SimpleList/simple-list.css

@@ -71,7 +71,7 @@
   margin-top: var(--pf-v5-c-simple-list__section--section--MarginTop);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
   --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
   --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);

package/components/Skeleton/skeleton.css

@@ -160,7 +160,7 @@
     transform: translateX(100%);
   }
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
   --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
   --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
   --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);

package/components/Switch/switch.css

@@ -135,7 +135,7 @@
   vertical-align: top;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-switch {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-switch {
   --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);

package/components/Table/table.css

@@ -1062,9 +1062,9 @@
   --pf-v5-c-table--cell--Width: 100%;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-table {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-table {
   --pf-v5-c-table--m-striped__tr--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:hover, :where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:focus {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:hover, :root:where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:focus {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--palette--gold-100);
 }

package/components/Tabs/tabs.css

@@ -834,7 +834,7 @@
   }
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-tabs {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-tabs {
   --pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
   --pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);

package/components/TextInputGroup/text-input-group.css

@@ -148,7 +148,7 @@
   display: flex;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
   --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);

package/components/Tile/tile.css

@@ -136,7 +136,7 @@
   color: var(--pf-v5-c-tile__icon--Color);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-tile {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-tile {
   --pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-tile--m-disabled__title--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-tile--m-disabled__icon--Color: var(--pf-v5-global--disabled-color--300);

package/components/ToggleGroup/toggle-group.css

@@ -104,7 +104,7 @@
   margin-left: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
   --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
   --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
   --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);

package/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/components/Toolbar/toolbar.scss

@@ -6,6 +6,7 @@ $pf-v5-c-toolbar--spacer-map: build-spacer-map("none", "sm", "md", "lg");
 $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
 .#{$toolbar} {
+  --#{$toolbar}--AlignItems--base: flex-start;
   --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
   --#{$toolbar}--RowGap--base: var(--#{$pf-global}--spacer--lg); // row-gap between toolbar content elements
   --#{$toolbar}--RowGap: var(--#{$toolbar}--RowGap--base);
@@ -17,10 +18,11 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   --#{$toolbar}__item--Display: block;
   --#{$toolbar}__item--MinWidth--base: auto;
   --#{$toolbar}__item--AlignSelf: auto;
+  --#{$toolbar}__item--AlignItems: var(--#{$toolbar}--AlignItems--base);
 
   // Group
   --#{$toolbar}__group--Display: flex;
-  --#{$toolbar}__group--AlignItems: baseline;
+  --#{$toolbar}__group--AlignItems: var(--#{$toolbar}--AlignItems--base);
   --#{$toolbar}__group--AlignSelf: auto;
   --#{$toolbar}__group--RowGap: var(--#{$toolbar}--item--RowGap--base);
 
@@ -30,13 +32,14 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Content
   --#{$toolbar}__content--Display: flex;
+  --#{$toolbar}__content--AlignItems: var(--#{$toolbar}--AlignItems--base);
   --#{$toolbar}__content--RowGap: var(--#{$toolbar}--RowGap--base);
   --#{$toolbar}__content--PaddingRight: var(--#{$pf-global}--spacer--md); // remove at breaking change
   --#{$toolbar}__content--PaddingLeft: var(--#{$pf-global}--spacer--md); // remove at breaking change
 
   // Content section
   --#{$toolbar}__content-section--Display: flex;
-  --#{$toolbar}__content-section--AlignItems: baseline;
+  --#{$toolbar}__content-section--AlignItems: var(--#{$toolbar}--AlignItems--base);
   --#{$toolbar}__content-section--RowGap: var(--#{$toolbar}--item--RowGap--base);
 
   // Insets
@@ -67,8 +70,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Spacer values
   --#{$toolbar}__item--spacer: var(--#{$toolbar}--spacer--base);
-  --#{$toolbar}__group--spacer: var(--#{$toolbar}--spacer--base);
   --#{$toolbar}__item--Width: auto;
+  --#{$toolbar}__group--spacer: var(--#{$toolbar}--spacer--base);
 
   // Toggle group
   --#{$toolbar}__group--m-toggle-group--spacer: var(--#{$pf-global}--spacer--sm);
@@ -123,7 +126,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: center;
+  --#{$toolbar}--m-full-height__item--AlignItems: var(--#{$toolbar}__group--AlignItems);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
     --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__expandable-content--lg--PaddingRight);
@@ -177,8 +180,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
       align-self: stretch;
     }
 
-    .#{$toolbar}__item {
-      align-items: var(--#{$toolbar}--m-full-height__item--AlignItems);
+    :where(.#{$toolbar}__item) {
+      --#{$toolbar}__item--AlignItems: var(--#{$toolbar}--m-full-height__item--AlignItems);
     }
   }
 
@@ -209,18 +212,10 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
       --#{$toolbar}--spacer: 0;
     }
   }
-}
-
-// Group
-.#{$toolbar}__group {
-  --#{$toolbar}--spacer: var(--#{$toolbar}__group--spacer);
-
-  @include pf-v5-hidden-visible(var(--#{$toolbar}__group--Display));
 
-  row-gap: var(--#{$toolbar}__group--RowGap);
-  align-items: var(--#{$toolbar}__group--AlignItems);
-  align-self: var(--#{$toolbar}__group--AlignSelf);
-  margin-right: var(--#{$toolbar}--spacer);
+  &.pf-m-align-items-start {
+    align-items: flex-start;
+  }
 
   &.pf-m-align-items-center {
     align-items: center;
@@ -230,6 +225,10 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     align-items: baseline;
   }
 
+  &.pf-m-align-self-start {
+    align-self: flex-start;
+  }
+
   &.pf-m-align-self-center {
     align-self: center;
   }
@@ -237,6 +236,18 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   &.pf-m-align-self-baseline {
     align-self: baseline;
   }
+}
+
+// Group
+.#{$toolbar}__group {
+  --#{$toolbar}--spacer: var(--#{$toolbar}__group--spacer);
+
+  @include pf-v5-hidden-visible(var(--#{$toolbar}__group--Display));
+
+  row-gap: var(--#{$toolbar}__group--RowGap);
+  align-items: var(--#{$toolbar}__group--AlignItems);
+  align-self: var(--#{$toolbar}__group--AlignSelf);
+  margin-right: var(--#{$toolbar}--spacer);
 
   // Button group
   &.pf-m-button-group {
@@ -297,11 +308,28 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v5-c-toolbar--breakpoint-map);
   @include pf-v5-hidden-visible(var(--#{$toolbar}__item--Display));
 
+  align-items: var(--#{$toolbar}__item--AlignItems);
   align-self: var(--#{$toolbar}__item--AlignSelf);
   width: var(--#{$toolbar}__item--Width--base);
   min-width: var(--#{$toolbar}__item--MinWidth--base);
   margin-right: var(--#{$toolbar}--spacer);
 
+  &.pf-m-align-items-start {
+    align-items: flex-start;
+  }
+
+  &.pf-m-align-items-center {
+    align-items: center;
+  }
+
+  &.pf-m-align-items-baseline {
+    align-items: baseline;
+  }
+
+  &.pf-m-align-self-start {
+    align-self: flex-start;
+  }
+
   &.pf-m-align-self-center {
     align-self: center;
   }
@@ -382,7 +410,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   position: relative;
   row-gap: var(--#{$toolbar}__content--RowGap);
-  align-items: center;
+  align-items: var(--#{$toolbar}__content--AlignItems);
   padding-right: var(--#{$toolbar}__content--PaddingRight);
   padding-left: var(--#{$toolbar}__content--PaddingLeft);
 }
@@ -395,9 +423,17 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   align-items: var(--#{$toolbar}__content-section--AlignItems);
   width: 100%;
 
+  &.pf-m-align-items-start {
+    align-items: flex-start;
+  }
+
   &.pf-m-align-items-center {
     align-items: center;
   }
+
+  &.pf-m-align-items-baseline {
+    align-items: baseline;
+  }
 }
 
 // Expandable content

package/components/Tooltip/tooltip.css

@@ -85,7 +85,7 @@
   box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
   --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/TreeView/tree-view.css

@@ -447,7 +447,7 @@ label.pf-v5-c-tree-view__node-text {
   --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-tree-view {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-tree-view {
   --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Wizard/wizard.css

@@ -497,7 +497,7 @@
   margin-left: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;
   --pf-v5-global--BorderColor--100: #444548;
@@ -507,10 +507,10 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-wizard {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-wizard {
   --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-wizard__nav-link--before--BackgroundColor: var(--pf-v5-global--palette--black-500);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
+:root:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
   color: var(--pf-v5-global--Color--100);
 }

package/docs/components/Toolbar/examples/Toolbar.md

@@ -32,8 +32,10 @@ Toolbar relies on groups (`.pf-v5-c-toolbar__group`) and items (`.pf-v5-c-toolba
 | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-align-items-center` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
-| `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
+| `.pf-m-align-items-start` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align children to flex-start. |
+| `.pf-m-align-items-center` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align children to center. |
+| `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group to vertically align children to baseline. |
+| `.pf-m-align-self-start` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to flex-start. |
 | `.pf-m-align-self-center` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
 | `.pf-m-align-self-baseline` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
 

package/package.json

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