@patternfly/patternfly 6.1.0-prerelease.1 → 6.1.0-prerelease.3

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/CodeEditor/code-editor.css

@@ -51,9 +51,22 @@
   --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
 }
 
+.pf-v6-c-code-editor {
+  display: flex;
+  flex-direction: column;
+}
 .pf-v6-c-code-editor.pf-m-read-only {
   --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
 }
+.pf-v6-c-code-editor.pf-m-full-height {
+  height: 100%;
+}
+
+.pf-v6-c-code-editor__container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
 
 .pf-v6-c-code-editor__header {
   position: relative;
@@ -120,6 +133,7 @@
 
 .pf-v6-c-code-editor__main {
   position: relative;
+  flex-grow: 1;
   color: var(--pf-v6-c-code-editor__main--Color, inherit);
   background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
   border: var(--pf-v6-c-code-editor__main--BorderWidth) solid;
@@ -141,6 +155,7 @@
 
 .pf-v6-c-code-editor__code {
   position: relative;
+  height: 100%;
   padding-block-start: var(--pf-v6-c-code-editor__code--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingInlineStart);

package/components/CodeEditor/code-editor.scss

@@ -71,9 +71,22 @@
 }
 
 .#{$code-editor} {
+  display: flex;
+  flex-direction: column;
+
   &.pf-m-read-only {
     --#{$code-editor}__main--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
   }
+
+  &.pf-m-full-height {
+    height: 100%;
+  }
+}
+
+.#{$code-editor}__container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 .#{$code-editor}__header {
@@ -144,7 +157,8 @@
 }
 
 .#{$code-editor}__main {
-  position: relative;
+  position: relative; 
+  flex-grow: 1;
   color: var(--#{$code-editor}__main--Color, inherit);
   background-color: var(--#{$code-editor}__main--BackgroundColor);
   border: var(--#{$code-editor}__main--BorderWidth) solid;
@@ -170,6 +184,7 @@
 
 .#{$code-editor}__code {
   position: relative;
+  height: 100%;
   padding-block-start: var(--#{$code-editor}__code--PaddingBlockStart);
   padding-block-end: var(--#{$code-editor}__code--PaddingBlockEnd);
   padding-inline-start: var(--#{$code-editor}__code--PaddingInlineStart);

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-grid.css

@@ -355,7 +355,7 @@
   --pf-v6-c-table--cell--Width: auto;
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -625,14 +625,14 @@
     text-align: end;
   }
 }
-@media screen and (max-width: 48rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -658,7 +658,7 @@
   }
 }
 
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -928,14 +928,14 @@
     text-align: end;
   }
 }
-@media screen and (max-width: 62rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -961,7 +961,7 @@
   }
 }
 
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1231,14 +1231,14 @@
     text-align: end;
   }
 }
-@media screen and (max-width: 75rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -1264,7 +1264,7 @@
   }
 }
 
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1534,14 +1534,14 @@
     text-align: end;
   }
 }
-@media screen and (max-width: 90.625rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;

package/components/Table/table-grid.scss

@@ -7,25 +7,25 @@
   }
 
   .pf-m-grid-md.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--md) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
       @content;
     }
   }
 
   .pf-m-grid-lg.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--lg) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--lg)) {
       @content;
     }
   }
 
   .pf-m-grid-xl.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--xl) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--xl)) {
       @content;
     }
   }
 
   .pf-m-grid-2xl.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--2xl) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--2xl)) {
       @content;
     }
   }

package/components/Table/table-tree-view.css

@@ -246,7 +246,7 @@
   --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-tree-view-grid-md.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -389,7 +389,7 @@
   }
 }
 
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-tree-view-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -532,7 +532,7 @@
   }
 }
 
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-tree-view-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -675,7 +675,7 @@
   }
 }
 
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-tree-view-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);

package/components/Table/table-tree-view.scss

@@ -126,25 +126,25 @@ $pf-v6-c-tree-view--MaxDepth: 10;
   }
 
   .pf-m-tree-view-grid-md.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--md) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-lg.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--lg) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--lg)) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-xl.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--xl) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--xl)) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-2xl.#{$table} {
-    @media screen and (max-width: $pf-v6-global--breakpoint--2xl) {
+    @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--2xl)) {
       @content;
     }
   }

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%;