@patternfly/patternfly 6.0.0-alpha.123 → 6.0.0-alpha.125

package/components/Page/page.scss

@@ -11,60 +11,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}--xl--inset: var(--pf-t--global--spacer--xl);
 
   // Header
-  --#{$page}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$page}__header--ZIndex: var(--pf-t--global--z-index--md);
-  --#{$page}__header--MinHeight: #{pf-size-prem(76px)}; // fixed height for header to ensure consistency across screen sizes.
-
-  // Header brand
-  --#{$page}__header-brand--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --#{$page}__header-brand--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --#{$page}__header-brand--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
 
   @media (min-width: $pf-v6-global--breakpoint--xl) {
-    --#{$page}__header-brand--PaddingInlineStart: var(--#{$page}__header-brand--xl--PaddingInlineStart);
     --#{$page}--inset: var(--#{$page}--xl--inset);
   }
 
-  // Toggle
-  --#{$page}__header-sidebar-toggle__c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --#{$page}__header-sidebar-toggle__c-button--MarginInlineStart: calc(var(--#{$page}__header-sidebar-toggle__c-button--PaddingInlineStart) * -1);
-  --#{$page}__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
-
-  // Header brand link
-  --#{$page}__header-brand-link--c-brand--MaxHeight: #{pf-size-prem(60px)};
-
-  // Header nav
-  --#{$page}__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$page}__header-nav--xl--BackgroundColor: transparent;
-  --#{$page}__header-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --#{$page}__header-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
-
-  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
-    --#{$page}__header-nav--BackgroundColor: var(--#{$page}__header-nav--xl--BackgroundColor);
-    --#{$page}__header-nav--PaddingInlineEnd: var(--#{$page}__header-nav--xl--PaddingInlineEnd);
-    --#{$page}__header-nav--PaddingInlineStart: var(--#{$page}__header-nav--xl--PaddingInlineStart);
-  }
-
-  // Header tools
-  --#{$page}__header-tools--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --#{$page}__header-tools--xl--MarginInlineEnd: var(--pf-t--global--spacer--lg);
-  --#{$page}__header-tools--c-avatar--MarginInlineStart: var(--pf-t--global--spacer--md);
-  --#{$page}__header-tools-group--MarginInlineStart: var(--pf-t--global--spacer--xl);
-  --#{$page}__header-tools-group--Display: flex;
-  --#{$page}__header-tools-item--Display: block;
-
-  // Header tools group button
-  --#{$page}__header-tools--c-button--m-selected--before--Width: auto;
-  --#{$page}__header-tools--c-button--m-selected--before--Height: auto;
-
-  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
-    --#{$page}__header-tools--MarginInlineEnd: var(--#{$page}__header-tools--xl--MarginInlineEnd);
-  }
-
+ 
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
@@ -199,119 +152,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 // Header
-.#{$page}__header,
 .#{$page} > .#{$masthead} {
-  z-index: var(--#{$page}__header--ZIndex);
+  z-index: var(--#{$page}--c-masthead--ZIndex);
   grid-area: header;
 }
 
-.#{$page}__header {
-  display: grid;
-  grid-template-columns: auto auto;
-  align-items: center;
-  min-width: 0;
-  min-height: var(--#{$page}__header--MinHeight);
-  background-color: var(--#{$page}__header--BackgroundColor);
-
-  > * {
-    display: flex;
-    align-items: center;
-  }
-
-  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
-    grid-template-columns: auto 1fr auto;
-  }
-
-  .#{$masthead} {
-    grid-column: span 2;
-    align-self: stretch;
-  }
-}
-
-// Brand
-.#{$page}__header-brand {
-  grid-column: 1 / 2;
-  padding-inline-start: var(--#{$page}__header-brand--PaddingInlineStart);
-
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding-inline-end: var(--#{$page}__header-brand--xl--PaddingInlineEnd); // set padding right here to allow mobile view to accomodate tools
-  }
-}
-
-// Link
-.#{$page}__header-brand-link {
-  display: flex;
-  flex: 1;
-  align-items: center;
-
-  .#{$brand} {
-    max-height: var(--#{$page}__header-brand-link--c-brand--MaxHeight); // Hardcode brand image max-height so it always aligns with everthing else.
-  }
-}
-
-// Sidebar toggle
-.#{$page}__header-brand-toggle {
-  .#{$button} {
-    padding-block-start: var(--#{$page}__header-sidebar-toggle__c-button--PaddingBlockStart);
-    padding-block-end: var(--#{$page}__header-sidebar-toggle__c-button--PaddingBlockEnd);
-    padding-inline-start: var(--#{$page}__header-sidebar-toggle__c-button--PaddingInlineStart);
-    padding-inline-end: var(--#{$page}__header-sidebar-toggle__c-button--PaddingInlineEnd);
-    margin-inline-start: var(--#{$page}__header-sidebar-toggle__c-button--MarginInlineStart);
-    margin-inline-end: var(--#{$page}__header-sidebar-toggle__c-button--MarginInlineEnd);
-    font-size: var(--#{$page}__header-sidebar-toggle__c-button--FontSize);
-    line-height: 1;
-  }
-}
-
-// Header navigation
-.#{$page}__header-nav {
-  grid-row: 2 / 3;
-  grid-column: 1 / -1;
-  align-self: stretch;
-  min-width: 0;
-  padding-inline-start: var(--#{$page}__header-nav--PaddingInlineStart);
-  padding-inline-end: var(--#{$page}__header-nav--PaddingInlineEnd);
-  background-color: var(--#{$page}__header-nav--BackgroundColor);
-
-  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
-    grid-row: 1 / 2;
-    grid-column: 2 / 3;
-  }
-
-  .#{$nav} {
-    align-self: stretch;
-  }
-}
-
-// Header tools
-.#{$page}__header-tools {
-  grid-column: 2 / 3;
-  margin-inline-start: auto; // to push it to the right
-  margin-inline-end: var(--#{$page}__header-tools--MarginInlineEnd);
-
-  .#{$avatar} {
-    margin-inline-start: var(--#{$page}__header-tools--c-avatar--MarginInlineStart);
-  }
-
-  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
-    grid-column: 3 / 4;
-  }
-}
-
-.#{$page}__header-tools-group {
-  @include pf-v6-hidden-visible(var(--#{$page}__header-tools-group--Display));
-
-  align-items: center;
-
-  & + & {
-    margin-inline-start: var(--#{$page}__header-tools-group--MarginInlineStart);
-  }
-}
-
-.#{$page}__header-tools-item {
-  @include pf-v6-hidden-visible(var(--#{$page}__header-tools-item--Display));
-}
-
 // Sidebar
 .#{$page}__sidebar {
   z-index: var(--#{$page}__sidebar--ZIndex);

package/components/Wizard/wizard.css

@@ -1,6 +1,7 @@
 :where(:root, .pf-v6-c-wizard) {
-  --pf-v6-c-wizard--Height: 100%;
-  --pf-v6-c-modal-box--c-wizard--FlexBasis: 47.625rem;
+  --pf-v6-c-wizard--Height: initial;
+  --pf-v6-c-wizard--Height--base: 100%;
+  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
   --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-wizard__header--ZIndex: auto;
   --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -121,10 +122,10 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  height: var(--pf-v6-c-wizard--Height);
+  height: var(--pf-v6-c-wizard--Height, var(--pf-v6-c-wizard--Height--base));
 }
 .pf-v6-c-modal-box .pf-v6-c-wizard {
-  flex: 1 1 var(--pf-v6-c-modal-box--c-wizard--FlexBasis);
+  flex: 1 1 var(--pf-v6-c-wizard--Height, var(--pf-v6-c-modal-box--c-wizard--Height--base));
   min-height: 0;
 }
 .pf-v6-c-wizard > :not(.pf-v6-c-wizard__outer-wrap):not(.pf-v6-c-drawer) {

package/components/Wizard/wizard.scss

@@ -1,8 +1,9 @@
 @use '../../sass-utilities' as *;
 
 :where(:root, .#{$wizard}) {
-  --#{$wizard}--Height: 100%;
-  --#{$modal-box}--c-wizard--FlexBasis: #{pf-size-prem(762px)}; // this is a specific height from design for the wizard in a modal
+  --#{$wizard}--Height: initial;
+  --#{$wizard}--Height--base: 100%;
+  --#{$modal-box}--c-wizard--Height--base: #{pf-size-prem(762px)}; // this is a specific height from design for the wizard in a modal
 
   // Header
   --#{$wizard}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -176,11 +177,11 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  height: var(--#{$wizard}--Height);
+  height: var(--#{$wizard}--Height, var(--#{$wizard}--Height--base));
 
   // When the wizard is used in a modal
   .#{$modal-box} & {
-    flex: 1 1 var(--#{$modal-box}--c-wizard--FlexBasis);
+    flex: 1 1 var(--#{$wizard}--Height, var(--#{$modal-box}--c-wizard--Height--base));
     min-height: 0;
   }
 

package/components/_index.css

@@ -4260,7 +4260,7 @@ ol) {
   --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body);
   --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
   --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -4269,7 +4269,7 @@ ol) {
   --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
   --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -15895,32 +15895,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
   --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-page__header--ZIndex: var(--pf-t--global--z-index--md);
-  --pf-v6-c-page__header--MinHeight: 4.75rem;
-  --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__header-brand--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-page__header-brand--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart: calc(var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart) * -1);
-  --pf-v6-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
-  --pf-v6-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
-  --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-page__header-nav--xl--BackgroundColor: transparent;
-  --pf-v6-c-page__header-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-page__header-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__header-tools--xl--MarginInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__header-tools--c-avatar--MarginInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__header-tools-group--MarginInlineStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-page__header-tools-group--Display: flex;
-  --pf-v6-c-page__header-tools-item--Display: block;
-  --pf-v6-c-page__header-tools--c-button--m-selected--before--Width: auto;
-  --pf-v6-c-page__header-tools--c-button--m-selected--before--Height: auto;
+  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width: 18.125rem;
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -16004,22 +15979,9 @@ ul.pf-v6-c-list {
 }
 @media (min-width: 1200px) {
   :where(:root, .pf-v6-c-page) {
-    --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-v6-c-page__header-brand--xl--PaddingInlineStart);
     --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
   }
 }
-@media screen and (min-width: 1200px) {
-  :where(:root, .pf-v6-c-page) {
-    --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-v6-c-page__header-nav--xl--BackgroundColor);
-    --pf-v6-c-page__header-nav--PaddingInlineEnd: var(--pf-v6-c-page__header-nav--xl--PaddingInlineEnd);
-    --pf-v6-c-page__header-nav--PaddingInlineStart: var(--pf-v6-c-page__header-nav--xl--PaddingInlineStart);
-  }
-}
-@media screen and (min-width: 1200px) {
-  :where(:root, .pf-v6-c-page) {
-    --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-v6-c-page__header-tools--xl--MarginInlineEnd);
-  }
-}
 @media screen and (min-width: 1200px) {
   :where(:root, .pf-v6-c-page) {
     --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
@@ -16043,201 +16005,11 @@ ul.pf-v6-c-list {
   }
 }
 
-.pf-v6-c-page__header,
 .pf-v6-c-page > .pf-v6-c-masthead {
-  z-index: var(--pf-v6-c-page__header--ZIndex);
+  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
   grid-area: header;
 }
 
-.pf-v6-c-page__header {
-  display: grid;
-  grid-template-columns: auto auto;
-  align-items: center;
-  min-width: 0;
-  min-height: var(--pf-v6-c-page__header--MinHeight);
-  background-color: var(--pf-v6-c-page__header--BackgroundColor);
-}
-.pf-v6-c-page__header > * {
-  display: flex;
-  align-items: center;
-}
-@media screen and (min-width: 992px) {
-  .pf-v6-c-page__header {
-    grid-template-columns: auto 1fr auto;
-  }
-}
-.pf-v6-c-page__header .pf-v6-c-masthead {
-  grid-column: span 2;
-  align-self: stretch;
-}
-
-.pf-v6-c-page__header-brand {
-  grid-column: 1/2;
-  padding-inline-start: var(--pf-v6-c-page__header-brand--PaddingInlineStart);
-}
-@media (min-width: 1200px) {
-  .pf-v6-c-page__header-brand {
-    padding-inline-end: var(--pf-v6-c-page__header-brand--xl--PaddingInlineEnd);
-  }
-}
-
-.pf-v6-c-page__header-brand-link {
-  display: flex;
-  flex: 1;
-  align-items: center;
-}
-.pf-v6-c-page__header-brand-link .pf-v6-c-brand {
-  max-height: var(--pf-v6-c-page__header-brand-link--c-brand--MaxHeight);
-}
-
-.pf-v6-c-page__header-brand-toggle .pf-v6-c-button {
-  padding-block-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd);
-  margin-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart);
-  margin-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd);
-  font-size: var(--pf-v6-c-page__header-sidebar-toggle__c-button--FontSize);
-  line-height: 1;
-}
-
-.pf-v6-c-page__header-nav {
-  grid-row: 2/3;
-  grid-column: 1/-1;
-  align-self: stretch;
-  min-width: 0;
-  padding-inline-start: var(--pf-v6-c-page__header-nav--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__header-nav--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-page__header-nav--BackgroundColor);
-}
-@media screen and (min-width: 1200px) {
-  .pf-v6-c-page__header-nav {
-    grid-row: 1/2;
-    grid-column: 2/3;
-  }
-}
-.pf-v6-c-page__header-nav .pf-v6-c-nav {
-  align-self: stretch;
-}
-
-.pf-v6-c-page__header-tools {
-  grid-column: 2/3;
-  margin-inline-start: auto;
-  margin-inline-end: var(--pf-v6-c-page__header-tools--MarginInlineEnd);
-}
-.pf-v6-c-page__header-tools .pf-v6-c-avatar {
-  margin-inline-start: var(--pf-v6-c-page__header-tools--c-avatar--MarginInlineStart);
-}
-@media screen and (min-width: 992px) {
-  .pf-v6-c-page__header-tools {
-    grid-column: 3/4;
-  }
-}
-
-.pf-v6-c-page__header-tools-group {
-  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
-  --pf-v6-hidden-visible--hidden--Display: none;
-  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  display: var(--pf-v6-hidden-visible--Display);
-  align-items: center;
-}
-.pf-v6-c-page__header-tools-group.pf-m-hidden {
-  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-}
-@media screen and (min-width: 576px) {
-  .pf-v6-c-page__header-tools-group.pf-m-hidden-on-sm {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-group.pf-m-visible-on-sm {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 768px) {
-  .pf-v6-c-page__header-tools-group.pf-m-hidden-on-md {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-group.pf-m-visible-on-md {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 992px) {
-  .pf-v6-c-page__header-tools-group.pf-m-hidden-on-lg {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-group.pf-m-visible-on-lg {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 1200px) {
-  .pf-v6-c-page__header-tools-group.pf-m-hidden-on-xl {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-group.pf-m-visible-on-xl {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 1450px) {
-  .pf-v6-c-page__header-tools-group.pf-m-hidden-on-2xl {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-group.pf-m-visible-on-2xl {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-.pf-v6-c-page__header-tools-group + .pf-v6-c-page__header-tools-group {
-  margin-inline-start: var(--pf-v6-c-page__header-tools-group--MarginInlineStart);
-}
-
-.pf-v6-c-page__header-tools-item {
-  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
-  --pf-v6-hidden-visible--hidden--Display: none;
-  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  display: var(--pf-v6-hidden-visible--Display);
-}
-.pf-v6-c-page__header-tools-item.pf-m-hidden {
-  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-}
-@media screen and (min-width: 576px) {
-  .pf-v6-c-page__header-tools-item.pf-m-hidden-on-sm {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-item.pf-m-visible-on-sm {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 768px) {
-  .pf-v6-c-page__header-tools-item.pf-m-hidden-on-md {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-item.pf-m-visible-on-md {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 992px) {
-  .pf-v6-c-page__header-tools-item.pf-m-hidden-on-lg {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-item.pf-m-visible-on-lg {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 1200px) {
-  .pf-v6-c-page__header-tools-item.pf-m-hidden-on-xl {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-item.pf-m-visible-on-xl {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 1450px) {
-  .pf-v6-c-page__header-tools-item.pf-m-hidden-on-2xl {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
-  }
-  .pf-v6-c-page__header-tools-item.pf-m-visible-on-2xl {
-    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-
 .pf-v6-c-page__sidebar {
   z-index: var(--pf-v6-c-page__sidebar--ZIndex);
   display: flex;
@@ -25399,8 +25171,9 @@ label.pf-v6-c-tree-view__node-text {
 }
 
 :where(:root, .pf-v6-c-wizard) {
-  --pf-v6-c-wizard--Height: 100%;
-  --pf-v6-c-modal-box--c-wizard--FlexBasis: 47.625rem;
+  --pf-v6-c-wizard--Height: initial;
+  --pf-v6-c-wizard--Height--base: 100%;
+  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
   --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-wizard__header--ZIndex: auto;
   --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -25521,10 +25294,10 @@ label.pf-v6-c-tree-view__node-text {
   position: relative;
   display: flex;
   flex-direction: column;
-  height: var(--pf-v6-c-wizard--Height);
+  height: var(--pf-v6-c-wizard--Height, var(--pf-v6-c-wizard--Height--base));
 }
 .pf-v6-c-modal-box .pf-v6-c-wizard {
-  flex: 1 1 var(--pf-v6-c-modal-box--c-wizard--FlexBasis);
+  flex: 1 1 var(--pf-v6-c-wizard--Height, var(--pf-v6-c-modal-box--c-wizard--Height--base));
   min-height: 0;
 }
 .pf-v6-c-wizard > :not(.pf-v6-c-wizard__outer-wrap):not(.pf-v6-c-drawer) {

package/docs/components/Nav/examples/Navigation.css

@@ -1,8 +1,3 @@
-#ws-core-c-navigation-horizontal-in-masthead .pf-v6-c-page__header-nav,
-#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v6-c-page__header-nav {
-  grid-row: 1;
-}
-
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
 [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
   width: 280px;

package/docs/utilities/Alignment/examples/Alignment.css

@@ -2,6 +2,6 @@
 .ws-core-u-alignment .pf-v6-u-text-align-center,
 .ws-core-u-alignment .pf-v6-u-text-align-end,
 .ws-core-u-alignment .pf-v6-u-text-align-justify {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/utilities/Display/examples/Display.css

@@ -6,6 +6,6 @@
 .ws-core-u-display .pf-v6-u-display-inline,
 .ws-core-u-display .pf-v6-u-display-table,
 .ws-core-u-display .pf-v6-u-display-table-cell {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/utilities/Flex/examples/Flex.css

@@ -2,8 +2,8 @@
 .ws-core-u-flex .ws-example-flex-item,
 .ws-core-u-flex .pf-v6-u-display-inline-flex {
   flex-wrap: wrap;
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }
 
 #ws-core-u-flex-aligned-items .pf-v6-u-display-flex,

package/docs/utilities/Float/examples/Float.css

@@ -1,5 +1,5 @@
 .ws-core-u-float .pf-v6-u-float-inline-start,
 .ws-core-u-float .pf-v6-u-float-inline-end {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
-}
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
+}

package/docs/utilities/Sizing/examples/Sizing.css

@@ -3,6 +3,6 @@
 .pf-v6-u-min-height,
 .pf-v6-u-max-height,
 .ws-example-u-sizing-item {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/utilities/Spacing/examples/Spacing.css

@@ -1,5 +1,5 @@
 .ws-core-u-spacing .ws-example-flex-item,
 .ws-core-u-spacing .pf-v6-u-display-flex {
-  padding: .5rem;
-  border: 2px dashed #393f44;
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.123",
+  "version": "6.0.0-alpha.125",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -45,11 +45,11 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.0.0-alpha.20",
+    "@patternfly/documentation-framework": "6.0.0-alpha.24",
     "@patternfly/patternfly-a11y": "4.3.1",
-    "@patternfly/react-code-editor": "6.0.0-alpha.43",
-    "@patternfly/react-core": "6.0.0-alpha.43",
-    "@patternfly/react-table": "6.0.0-alpha.43",
+    "@patternfly/react-code-editor": "6.0.0-alpha.55",
+    "@patternfly/react-core": "6.0.0-alpha.55",
+    "@patternfly/react-table": "6.0.0-alpha.55",
     "@starptech/prettyhtml": "^0.10.0",
     "backstopjs": "^6.3.23",
     "cheerio": "^1.0.0-rc.12",