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

package/components/MenuToggle/menu-toggle.css

@@ -50,6 +50,8 @@
   --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
   --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
   --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+  --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+  --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
   --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
   --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
@@ -64,6 +66,8 @@
   --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
   --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+  --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+  --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
   --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
   --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
   --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -74,6 +78,8 @@
   --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
   --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
+  --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
   --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
@@ -88,6 +94,8 @@
   --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
+  --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -99,6 +107,8 @@
   --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
+  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
   --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -168,6 +178,8 @@
   --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
   --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
   --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
+  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
 }
 .pf-v6-c-menu-toggle.pf-m-secondary {
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -183,6 +195,8 @@
   --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
   --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
   --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
+  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
 }
 .pf-v6-c-menu-toggle.pf-m-full-height {
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -207,6 +221,8 @@
   --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
   --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
   --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
+  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
 }
 .pf-v6-c-menu-toggle.pf-m-plain::before {
   border: none;
@@ -233,6 +249,10 @@
   --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
+  --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
+  --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
+  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
+  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
 }
 .pf-v6-c-menu-toggle.pf-m-success {
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
@@ -311,13 +331,13 @@
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
   --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
 }
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):first-child,
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):first-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
   padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
 }
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):last-child,
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):last-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
   padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
 }
@@ -383,13 +403,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 +414,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

@@ -1,13 +1,5 @@
 @use '../../sass-utilities' as *;
 
-// TODO: standardize this layout
-// TODO: add .#{$menu-toggle}__main to house extra elements, like .#{$menu-toggle}__icon, .#{$menu-toggle}__text, .#{$menu-toggle}__count, .#{$menu-toggle}__controls
-// TODO: transition to row/column gap instead of margins
-// TODO: abstract button / control styling to affect any/all variants
-// TODO: move controls to wrap buttons, not the other way around
-// TODO: update text-input-button to use gap
-// TODO: label all variables group - // * Menu toggle (vars) // - Menu toggle (selectors)
-
 @include pf-root($menu-toggle) {
   --#{$menu-toggle}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$menu-toggle}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -72,6 +64,8 @@
   --#{$menu-toggle}--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
   --#{$menu-toggle}--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
   --#{$menu-toggle}--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+  --#{$menu-toggle}--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+  --#{$menu-toggle}--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
 
   // * Menu toggle secondary
   --#{$menu-toggle}--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -88,6 +82,8 @@
   --#{$menu-toggle}--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
   --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
   --#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+  --#{$menu-toggle}--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+  --#{$menu-toggle}--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
 
   // Full height
   --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
@@ -102,6 +98,8 @@
   --#{$menu-toggle}--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
   --#{$menu-toggle}--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$menu-toggle}--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
+  --#{$menu-toggle}--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
+  --#{$menu-toggle}--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
 
   // Split button action, primary
   --#{$menu-toggle}--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
@@ -122,6 +120,8 @@
   --#{$menu-toggle}__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$menu-toggle}__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+  --#{$menu-toggle}--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
+  --#{$menu-toggle}--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
 
   // Menu toggle plain
   --#{$menu-toggle}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -135,6 +135,8 @@
   --#{$menu-toggle}--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
   --#{$menu-toggle}--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
   --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent;
+  --#{$menu-toggle}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
 
   // Typeahead
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
@@ -224,6 +226,8 @@
     --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-primary--hover__toggle-icon--Color);
     --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-primary--expanded__toggle-icon--Color);
     --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-primary__toggle-icon--Color);
+    --#{$menu-toggle}--m-small--PaddingInlineStart: var(--#{$menu-toggle}--m-primary--m-small--PaddingInlineStart);
+    --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--#{$menu-toggle}--m-primary--m-small--PaddingInlineEnd);
   }
 
   &.pf-m-secondary {
@@ -241,6 +245,8 @@
     --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--hover__toggle-icon--Color);
     --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color);
     --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary__toggle-icon--Color);
+    --#{$menu-toggle}--m-small--PaddingInlineStart: var(--#{$menu-toggle}--m-secondary--m-small--PaddingInlineStart);
+    --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--#{$menu-toggle}--m-secondary--m-small--PaddingInlineEnd);
   }
 
   &.pf-m-full-height {
@@ -269,6 +275,8 @@
     --#{$menu-toggle}--disabled__icon--Color: var(--#{$menu-toggle}--m-plain--disabled__icon--Color);
     --#{$menu-toggle}--disabled__toggle-icon--Color: var(--#{$menu-toggle}--m-plain--disabled__icon--Color);
     --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$menu-toggle}--m-plain--disabled--BackgroundColor);
+    --#{$menu-toggle}--m-small--PaddingInlineStart: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineStart);
+    --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd);
 
     &::before {
       border: none;
@@ -304,6 +312,10 @@
     --#{$menu-toggle}--PaddingBlockEnd: var(--#{$menu-toggle}--m-small--PaddingBlockEnd);
     --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-small--PaddingInlineStart);
     --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-small--PaddingInlineEnd);
+    --#{$menu-toggle}__button--toggle-icon--PaddingInlineStart: var(--#{$menu-toggle}--m-small__button--toggle-icon--PaddingInlineStart);
+    --#{$menu-toggle}__button--toggle-icon--PaddingInlineEnd: var(--#{$menu-toggle}--m-small__button--toggle-icon--PaddingInlineEnd);
+    --#{$menu-toggle}--m-split-button--pill--child--PaddingInlineStart--offset: var(--#{$menu-toggle}--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
+    --#{$menu-toggle}--m-split-button--pill--child--PaddingInlineEnd--offset: var(--#{$menu-toggle}--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
   }
 
   &.pf-m-success {
@@ -411,7 +423,7 @@
   &.pf-m-primary,
   &.pf-m-secondary {
     // Reduce the padding before/after the border unless it's an icon/check-only element
-    .#{$menu-toggle}__button:not(:has(.#{$menu-toggle}__toggle-icon:only-child)),
+    .#{$menu-toggle}__button:not(:has(.#{$menu-toggle}__controls:only-child)),
     .#{$check}:not(.pf-m-standalone) {
       &:first-child {
         padding-inline-end: var(--#{$menu-toggle}--m-split-button--pill--child--PaddingInlineEnd--offset);
@@ -500,14 +512,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 +527,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/Page/page.css

@@ -4,7 +4,7 @@
   --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--xl--Width: auto;
+  --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__sidebar--BoxShadow: none;
   --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -193,18 +193,21 @@
   flex-grow: 0;
 }
 
+.pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
   max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
 }
+.pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
   align-items: center;
 }
+.pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,

package/components/Page/page.scss

@@ -15,7 +15,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
-  --#{$page}__sidebar--xl--Width: auto;
+  --#{$page}__sidebar--xl--Width: #{pf-size-prem(290px)}; // TODO Can remove at breaking change
   --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--BoxShadow: none;
 
@@ -136,7 +136,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   background-color: var(--#{$page}--BackgroundColor);
 
   @media (min-width: $pf-v6-global--breakpoint--xl) {
-    --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width);
+    --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change
 
     grid-template-areas:
       "header header"
@@ -247,6 +247,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 }
 
+.#{$page}__main-subnav,
 .#{$page}__main-breadcrumb,
 .#{$page}__main-tabs,
 .#{$page}__main-section,

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

@@ -27,7 +27,7 @@
   --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base);
-  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MinWidth: calc(var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineEnd));
   --pf-v6-c-table--cell--MaxWidth: none;
   --pf-v6-c-table--cell--Width: auto;
   --pf-v6-c-table--cell--Overflow: visible;
@@ -41,6 +41,8 @@
   --pf-v6-c-table--cell--m-help--MinWidth: 11ch;
   --pf-v6-c-table--m-truncate--cell--MaxWidth: 1px;
   --pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart));
+  --pf-v6-c-table__text--MinWidth: 100%;
+  --pf-v6-c-table__text--m-truncate--MinWidth: 5ch;
   --pf-v6-c-table--m-truncate__text--MinWidth: 5ch;
   --pf-v6-c-table--cell--hidden-visible--Display: table-cell;
   --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -429,11 +431,10 @@
 }
 
 .pf-v6-c-table__text {
-  --pf-v6-c-table--cell--MaxWidth: 100%;
   position: relative;
   display: block;
   width: var(--pf-v6-c-table--cell--Width);
-  min-width: var(--pf-v6-c-table--text--MinWidth);
+  min-width: var(--pf-v6-c-table__text--MinWidth);
   max-width: var(--pf-v6-c-table--cell--MaxWidth);
   overflow: var(--pf-v6-c-table--cell--Overflow);
   line-height: var(--pf-v6-c-table--cell--LineHeight);
@@ -443,7 +444,7 @@
 }
 .pf-v6-c-table__text.pf-m-truncate {
   --pf-v6-c-table--cell--MinWidth: 100%;
-  --pf-v6-c-table--text--MinWidth: var(--pf-v6-c-table--m-truncate__text--MinWidth);
+  min-width: max(var(--pf-v6-c-table__text--m-truncate--MinWidth), var(--pf-v6-c-table__text--MinWidth));
 }
 .pf-v6-c-table__text.pf-m-truncate > :where(th, td) {
   overflow: var(--pf-v6-c-table--cell--Overflow);
@@ -496,6 +497,7 @@
 .pf-v6-c-table__button-content .pf-v6-c-table__text,
 .pf-v6-c-table__column-help .pf-v6-c-table__text {
   min-width: auto;
+  max-width: 100%;
 }
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__button-content,
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__column-help,
@@ -526,6 +528,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

@@ -48,7 +48,7 @@
   --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--#{$table}--cell--Padding--base);
 
   // * Table cell - default variables
-  --#{$table}--cell--MinWidth: 0;
+  --#{$table}--cell--MinWidth: calc(var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineEnd));
   --#{$table}--cell--MaxWidth: none;
   --#{$table}--cell--Width: auto;
   --#{$table}--cell--Overflow: visible;
@@ -70,6 +70,8 @@
   --#{$table}--m-truncate--cell--MinWidth: calc(5ch + var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineStart));
 
   // * Table truncate
+  --#{$table}__text--MinWidth: 100%;
+  --#{$table}__text--m-truncate--MinWidth: 5ch;
   --#{$table}--m-truncate__text--MinWidth: 5ch;
 
   // * Table cell hidden visible
@@ -602,12 +604,10 @@
 
 // - Table text
 .#{$table}__text {
-  --#{$table}--cell--MaxWidth: 100%;
-
   position: relative;
   display: block;
   width: var(--#{$table}--cell--Width);
-  min-width: var(--#{$table}--text--MinWidth);
+  min-width: var(--#{$table}__text--MinWidth);
   max-width: var(--#{$table}--cell--MaxWidth);
   overflow: var(--#{$table}--cell--Overflow);
   line-height: var(--#{$table}--cell--LineHeight);
@@ -618,7 +618,8 @@
   // Only apply these settings if specifically modified
   &.pf-m-truncate {
     --#{$table}--cell--MinWidth: 100%;
-    --#{$table}--text--MinWidth: var(--#{$table}--m-truncate__text--MinWidth);
+
+    min-width: max(var(--#{$table}__text--m-truncate--MinWidth), var(--#{$table}__text--MinWidth));
 
     > :where(th, td) {
       overflow: var(--#{$table}--cell--Overflow);
@@ -682,6 +683,7 @@
 
   .#{$table}__text {
     min-width: auto;
+    max-width: 100%;
   }
 
   .#{$table} thead:where(.#{$table}__thead).pf-m-nowrap &,
@@ -715,6 +717,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);
+  }
 }