@patternfly/patternfly 6.1.0-prerelease.2 → 6.1.0-prerelease.4

package/README.md

@@ -1,11 +1,11 @@
-# PatternFly 5
+# PatternFly
 
 ## Install
 
 - This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json).
 - run `npm install @patternfly/patternfly --save`
 
-When you install PatternFly 5, the package includes:
+When you install PatternFly, the package includes:
 
 - a single file for the entire compiled library: `node_modules/@patternfly/patternfly/patternfly.css`
 - individual files with each component compiled separately: `node_modules/@patternfly/patternfly/<ComponentName>/styles.css`
@@ -16,9 +16,9 @@ Any of the files above are meant for use in consuming the library. The recommend
 
 ## Development
 
-**PatternFly 5 Development requires Node v18.0.0 or greater**
+**PatternFly Development requires Node v18.0.0 or greater**
 
-To setup the PatternFly 5 development environment:
+To setup the PatternFly development environment:
 
 - clone the project
 - run `yarn install` from the project root
@@ -115,7 +115,7 @@ If you have any suggestions about ways that we can improve how we use this tool,
 [How do I use CSS variables to customize the library?](https://core-staging.patternfly.org/guidelines#variables)
 
 #### Browser support
-PatternFly 5 is supported on the latest two major versions of the following browsers:
+PatternFly is supported on the latest two major versions of the following browsers:
 
 - Chrome
 - Firefox

package/components/Content/content.css

@@ -36,6 +36,7 @@
   --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -135,6 +136,14 @@
 .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
   margin-block-end: 0;
 }
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6).pf-m-page-title {
+  font-weight: var(--pf-v6-c-content--heading--m-page-title--FontWeight);
+}
 
 :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
   margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);

package/components/Content/content.scss

@@ -56,6 +56,9 @@
   --#{$content}--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --#{$content}--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
+  // Page title
+  --#{$content}--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+
   // Small text
   --#{$content}--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --#{$content}--small--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -194,6 +197,10 @@
     &:last-child {
       margin-block-end: 0;
     }
+
+    &.pf-m-page-title {
+      font-weight: var(--#{$content}--heading--m-page-title--FontWeight);
+    }
   }
 
   @at-root :is(

package/components/Label/label-group.css

@@ -1,16 +1,22 @@
 .pf-v6-c-label-group {
   --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group--MaxWidth: 100%;
   --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-label-group__main--MaxWidth: 100%;
+  --pf-v6-c-label-group__main--MinWidth: 0;
   --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group__list--MaxWidth: 100%;
+  --pf-v6-c-label-group__list--MinWidth: 0;
   --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group__list-item--MaxWidth: 100%;
   --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -37,6 +43,7 @@
   row-gap: var(--pf-v6-c-label-group--RowGap);
   column-gap: var(--pf-v6-c-label-group--ColumnGap);
   align-items: center;
+  max-width: var(--pf-v6-c-label-group--MaxWidth);
 }
 .pf-v6-c-label-group.pf-m-category {
   padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
@@ -62,9 +69,11 @@
 .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
   flex-direction: column;
   align-items: flex-start;
+  max-width: var(--pf-v6-c-label-group__list--MaxWidth);
 }
 .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
   flex-direction: column;
+  min-width: var(--pf-v6-c-label-group__main--MinWidth);
 }
 .pf-v6-c-label-group.pf-m-editable,
 .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
@@ -85,6 +94,7 @@
   row-gap: var(--pf-v6-c-label-group__main--RowGap);
   column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
   align-items: baseline;
+  min-width: var(--pf-v6-c-label-group__main--MinWidth);
 }
 
 .pf-v6-c-label-group__list {
@@ -92,10 +102,12 @@
   flex-wrap: wrap;
   row-gap: var(--pf-v6-c-label-group__list--RowGap);
   column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
+  min-width: var(--pf-v6-c-label-group__list--MinWidth);
 }
 
 .pf-v6-c-label-group__list-item {
   display: inline-flex;
+  max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
 }
 
 .pf-v6-c-label-group__label {

package/components/Label/label-group.scss

@@ -4,21 +4,29 @@
   // Label group - spaces main with the close button
   --#{$label-group}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$label-group}--ColumnGap: var(--pf-t--global--spacer--xs);
+  --#{$label-group}--MaxWidth: 100%;
   --#{$label-group}--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
   --#{$label-group}--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
 
   // Main - spaces the category label with the list
   --#{$label-group}__main--RowGap: var(--pf-t--global--spacer--xs);
   --#{$label-group}__main--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$label-group}__main--MaxWidth: 100%;
+  --#{$label-group}__main--MinWidth: 0;
   --#{$label-group}--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
   --#{$label-group}--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
 
   // List - spaces the items
   --#{$label-group}__list--RowGap: var(--pf-t--global--spacer--xs);
   --#{$label-group}__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --#{$label-group}__list--MaxWidth: 100%;
+  --#{$label-group}__list--MinWidth: 0;
   --#{$label-group}--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
   --#{$label-group}--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
 
+  // List item
+  --#{$label-group}__list-item--MaxWidth: 100%;
+
   // Category
   --#{$label-group}--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --#{$label-group}--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -52,6 +60,7 @@
   row-gap: var(--#{$label-group}--RowGap);
   column-gap: var(--#{$label-group}--ColumnGap);
   align-items: center;
+  max-width: var(--#{$label-group}--MaxWidth);
 
   &.pf-m-category {
     padding-block-start: var(--#{$label-group}--m-category--PaddingBlockStart);
@@ -79,10 +88,12 @@
     .#{$label-group}__list {
       flex-direction: column;
       align-items: flex-start;
+      max-width: var(--#{$label-group}__list--MaxWidth);
     }
 
     .#{$label-group}__main {
       flex-direction: column;
+      min-width: var(--#{$label-group}__main--MinWidth);
     }
   }
 
@@ -109,6 +120,7 @@
   row-gap: var(--#{$label-group}__main--RowGap);
   column-gap: var(--#{$label-group}__main--ColumnGap);
   align-items: baseline;
+  min-width: var(--#{$label-group}__main--MinWidth);
 }
 
 .#{$label-group}__list {
@@ -116,10 +128,12 @@
   flex-wrap: wrap;
   row-gap: var(--#{$label-group}__list--RowGap);
   column-gap: var(--#{$label-group}__list--ColumnGap);
+  min-width: var(--#{$label-group}__list--MinWidth);
 }
 
 .#{$label-group}__list-item {
   display: inline-flex;
+  max-width: var(--#{$label-group}__list-item--MaxWidth);
 }
 
 .#{$label-group}__label {

package/components/Label/label.css

@@ -4,6 +4,7 @@
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
+  --pf-v6-c-label--MinWidth: 3em;
   --pf-v6-c-label--BorderWidth: 0;
   --pf-v6-c-label--BorderColor: transparent;
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -193,6 +194,7 @@
 
 .pf-v6-c-label {
   position: relative;
+  min-width: var(--pf-v6-c-label--MinWidth);
   max-width: var(--pf-v6-c-label--MaxWidth);
   padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);

package/components/Label/label.scss

@@ -6,6 +6,7 @@
   --#{$label}--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --#{$label}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$label}--MaxWidth: 100%;
+  --#{$label}--MinWidth: 3em;
   --#{$label}--BorderWidth: 0;
   --#{$label}--BorderColor: transparent;
   --#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -251,6 +252,7 @@
 
 .#{$label} {
   position: relative;
+  min-width: var(--#{$label}--MinWidth);
   max-width: var(--#{$label}--MaxWidth);
   padding-block-start: var(--#{$label}--PaddingBlockStart);
   padding-block-end: var(--#{$label}--PaddingBlockEnd);

package/components/MenuToggle/menu-toggle.css

@@ -383,13 +383,6 @@
   flex-wrap: nowrap;
 }
 
-.pf-v6-c-menu-toggle__controls,
-.pf-v6-c-menu-toggle__toggle-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .pf-v6-c-menu-toggle__icon {
   flex-shrink: 0;
 }
@@ -401,7 +394,10 @@
 }
 
 .pf-v6-c-menu-toggle__controls {
+  display: flex;
   gap: var(--pf-v6-c-menu-toggle__controls--Gap);
+  align-items: center;
+  justify-content: center;
   margin-inline-start: auto;
 }
 

package/components/MenuToggle/menu-toggle.scss

@@ -500,14 +500,6 @@
   flex-wrap: nowrap;
 }
 
-// - Menu toggle controls - Menu toggle icon
-.#{$menu-toggle}__controls,
-.#{$menu-toggle}__toggle-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
 
@@ -523,7 +515,10 @@
 
 // - Menu toggle controls
 .#{$menu-toggle}__controls {
+  display: flex;
   gap: var(--#{$menu-toggle}__controls--Gap);
+  align-items: center;
+  justify-content: center;
   margin-inline-start: auto; // TODO: possibly replace as part of one of the other TODOs at top of file
 }
 

package/components/Table/table.css

@@ -526,6 +526,7 @@
 .pf-v6-c-table .pf-v6-c-table__draggable {
   --pf-v6-c-table--cell--MinWidth: 0;
   --pf-v6-c-table--cell--Width: 1%;
+  max-width: none;
 }
 
 .pf-v6-c-table .pf-v6-c-table__favorite {

package/components/Table/table.scss

@@ -715,6 +715,8 @@
 .#{$table} .#{$table}__draggable {
   --#{$table}--cell--MinWidth: 0;
   --#{$table}--cell--Width: 1%;
+
+  max-width: none;
 }
 // stylelint-enable
 

package/components/Title/title.css

@@ -36,6 +36,7 @@
   --pf-v6-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v6-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-title--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
 }
 
 .pf-v6-c-title {
@@ -101,4 +102,7 @@
   font-size: var(--pf-v6-c-title--m-h6--FontSize);
   font-weight: var(--pf-v6-c-title--m-h6--FontWeight);
   line-height: var(--pf-v6-c-title--m-h6--LineHeight);
+}
+.pf-v6-c-title.pf-m-page-title {
+  font-weight: var(--pf-v6-c-title--m-page-title--FontWeight);
 }

package/components/Title/title.scss

@@ -64,6 +64,9 @@
   --#{$title}--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --#{$title}--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+
+  // Page title
+  --#{$title}--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
 }
 
 .#{$title} {
@@ -141,4 +144,8 @@
     font-weight: var(--#{$title}--m-h6--FontWeight);
     line-height: var(--#{$title}--m-h6--LineHeight);
   }
+
+  &.pf-m-page-title {
+    font-weight: var(--#{$title}--m-page-title--FontWeight);
+  }
 }

package/components/Wizard/wizard.css

@@ -82,7 +82,7 @@
   --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
   --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
-  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-wizard__nav--Width: 100%;

package/components/Wizard/wizard.scss

@@ -126,7 +126,7 @@
   --#{$wizard}__toggle--m-expanded__toggle-icon--Rotate: 180deg;
 
   // Nav
-  --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$wizard}__nav--Width: 100%;

package/components/_index.css

@@ -2982,6 +2982,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -3081,6 +3082,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
   margin-block-end: 0;
 }
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6).pf-m-page-title {
+  font-weight: var(--pf-v6-c-content--heading--m-page-title--FontWeight);
+}
 
 :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
   margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
@@ -7851,6 +7860,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
+  --pf-v6-c-label--MinWidth: 3em;
   --pf-v6-c-label--BorderWidth: 0;
   --pf-v6-c-label--BorderColor: transparent;
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -8040,6 +8050,7 @@ label.pf-v6-c-input-group__text {
 
 .pf-v6-c-label {
   position: relative;
+  min-width: var(--pf-v6-c-label--MinWidth);
   max-width: var(--pf-v6-c-label--MaxWidth);
   padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
@@ -8342,16 +8353,22 @@ input.pf-v6-c-label__content {
 .pf-v6-c-label-group {
   --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group--MaxWidth: 100%;
   --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-label-group__main--MaxWidth: 100%;
+  --pf-v6-c-label-group__main--MinWidth: 0;
   --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group__list--MaxWidth: 100%;
+  --pf-v6-c-label-group__list--MinWidth: 0;
   --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group__list-item--MaxWidth: 100%;
   --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -8378,6 +8395,7 @@ input.pf-v6-c-label__content {
   row-gap: var(--pf-v6-c-label-group--RowGap);
   column-gap: var(--pf-v6-c-label-group--ColumnGap);
   align-items: center;
+  max-width: var(--pf-v6-c-label-group--MaxWidth);
 }
 .pf-v6-c-label-group.pf-m-category {
   padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
@@ -8403,9 +8421,11 @@ input.pf-v6-c-label__content {
 .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
   flex-direction: column;
   align-items: flex-start;
+  max-width: var(--pf-v6-c-label-group__list--MaxWidth);
 }
 .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
   flex-direction: column;
+  min-width: var(--pf-v6-c-label-group__main--MinWidth);
 }
 .pf-v6-c-label-group.pf-m-editable,
 .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
@@ -8426,6 +8446,7 @@ input.pf-v6-c-label__content {
   row-gap: var(--pf-v6-c-label-group__main--RowGap);
   column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
   align-items: baseline;
+  min-width: var(--pf-v6-c-label-group__main--MinWidth);
 }
 
 .pf-v6-c-label-group__list {
@@ -8433,10 +8454,12 @@ input.pf-v6-c-label__content {
   flex-wrap: wrap;
   row-gap: var(--pf-v6-c-label-group__list--RowGap);
   column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
+  min-width: var(--pf-v6-c-label-group__list--MinWidth);
 }
 
 .pf-v6-c-label-group__list-item {
   display: inline-flex;
+  max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
 }
 
 .pf-v6-c-label-group__label {
@@ -10298,13 +10321,6 @@ ul.pf-v6-c-list {
   flex-wrap: nowrap;
 }
 
-.pf-v6-c-menu-toggle__controls,
-.pf-v6-c-menu-toggle__toggle-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .pf-v6-c-menu-toggle__icon {
   flex-shrink: 0;
 }
@@ -10316,7 +10332,10 @@ ul.pf-v6-c-list {
 }
 
 .pf-v6-c-menu-toggle__controls {
+  display: flex;
   gap: var(--pf-v6-c-menu-toggle__controls--Gap);
+  align-items: center;
+  justify-content: center;
   margin-inline-start: auto;
 }
 
@@ -16682,6 +16701,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table .pf-v6-c-table__draggable {
   --pf-v6-c-table--cell--MinWidth: 0;
   --pf-v6-c-table--cell--Width: 1%;
+  max-width: none;
 }
 
 .pf-v6-c-table .pf-v6-c-table__favorite {
@@ -19087,6 +19107,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v6-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-title--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
 }
 
 .pf-v6-c-title {
@@ -19153,6 +19174,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   font-weight: var(--pf-v6-c-title--m-h6--FontWeight);
   line-height: var(--pf-v6-c-title--m-h6--LineHeight);
 }
+.pf-v6-c-title.pf-m-page-title {
+  font-weight: var(--pf-v6-c-title--m-page-title--FontWeight);
+}
 
 .pf-v6-c-toggle-group {
   --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -21924,7 +21948,7 @@ label.pf-v6-c-tree-view__node-text {
   --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
   --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
-  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-wizard__nav--Width: 100%;

package/docs/components/Content/examples/Content.md

@@ -7,7 +7,7 @@ cssPrefix: pf-v6-c-content
 ### Basic
 
 ```html
-<h1 class="pf-v6-c-content--h1">Hello world</h1>
+<h1 class="pf-v6-c-content--h1 pf-m-page-title">Hello world</h1>
 <p
   class="pf-v6-c-content--p"
 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -179,7 +179,7 @@ cssPrefix: pf-v6-c-content
 
 ```html
 <div class="pf-v6-c-content">
-  <h1>Hello world</h1>
+  <h1 class="pf-m-page-title">Hello world</h1>
   <p
     class
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -329,7 +329,7 @@ cssPrefix: pf-v6-c-content
 ### Long-form/editorial content
 
 ```html
-<h1 class="pf-v6-c-content--h1 pf-m-editorial">Hello world</h1>
+<h1 class="pf-v6-c-content--h1 pf-m-page-title pf-m-editorial">Hello world</h1>
 <p
   class="pf-v6-c-content--p pf-m-editorial"
 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -425,7 +425,7 @@ cssPrefix: pf-v6-c-content
 </p>
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <h3 class="pf-v6-c-content--h3 pf-m-editorial">Plain list example</h3>
-<ol class="pf-v6-c-content--ol pf-m-editorial pf-m-plain">
+<ol class="pf-v6-c-content--ol pf-m-plain pf-m-editorial">
   <li
     class="pf-v6-c-content--li pf-m-editorial"
   >Donec blandit a lorem id convallis.</li>
@@ -446,7 +446,7 @@ cssPrefix: pf-v6-c-content
       >Cras gravida arcu at diam gravida gravida.</li>
       <li class="pf-v6-c-content--li pf-m-editorial">
         Integer in volutpat libero.
-        <ol class="pf-v6-c-content--ol pf-m-editorial pf-m-plain">
+        <ol class="pf-v6-c-content--ol pf-m-plain pf-m-editorial">
           <li class="pf-v6-c-content--li pf-m-editorial">Nested plain list</li>
           <li
             class="pf-v6-c-content--li pf-m-editorial"
@@ -469,7 +469,7 @@ cssPrefix: pf-v6-c-content
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <h3 class="pf-v6-c-content--h3 pf-m-editorial">Visited link example</h3>
 <p class="pf-v6-c-content--p pf-m-editorial">
-  <a class="pf-v6-c-content--a pf-m-editorial pf-m-plain" href>Visited link</a>
+  <a class="pf-v6-c-content--a pf-m-plain pf-m-editorial" href>Visited link</a>
 </p>
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <p class="pf-v6-c-content--p pf-m-editorial">
@@ -533,7 +533,7 @@ cssPrefix: pf-v6-c-content
 
 ```html
 <div class="pf-v6-c-content pf-m-editorial">
-  <h1>Hello world</h1>
+  <h1 class="pf-m-page-title">Hello world</h1>
   <p
     class
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -704,3 +704,4 @@ This component is an exception to the variable system since we style type select
 | `.pf-m-visited` | `.pf-v6-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
 | `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |
 | `.pf-m-editorial` | `.pf-v6-c-content*` | Applies long-form, editorial content styles to a block of content or individual content elements. |
+| `.pf-m-page-title` | `.pf-v6-c-content--[h1, h2, h3, h4, h5, h6]`, `.pf-v6-c-content [h1, h2, h3, h4, h5, h6]` | Applies page title styles. **Note:** `.pf-m-page-title` should only apply to the heading that serves as the title for the current page. |

package/docs/components/Label/examples/Label.css

@@ -11,3 +11,15 @@
 #ws-core-c-label-overflow .pf-v6-c-label {
   margin: 4px;
 }
+
+#ws-core-c-label-labels-with-truncation .ws-preview-html { 
+  max-width: 320px;
+}
+
+.pf-v6-c-label-truncate--example {
+  max-width: 100%;
+  padding: var(--pf-t--global--spacer--sm);
+  overflow: auto;
+  resize: horizontal;
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
+}