@patternfly/react-styles 6.7.0-prerelease.1 → 6.7.0-prerelease.3

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.7.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.7.0-prerelease.2...@patternfly/react-styles@6.7.0-prerelease.3) (2026-10-05)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [6.7.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.7.0-prerelease.1...@patternfly/react-styles@6.7.0-prerelease.2) (2026-10-02)
+
+### Features
+
+- **toolbar:** container query support ([#12662](https://github.com/patternfly/patternfly-react/issues/12662)) ([58577a8](https://github.com/patternfly/patternfly-react/commit/58577a8a4d9654e929e5180c0f8241d3c35bd30b))
+
 # [6.7.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.7.0-prerelease.0...@patternfly/react-styles@6.7.0-prerelease.1) (2026-09-30)
 
 ### Features

package/css/components/Compass/compass.css

@@ -45,17 +45,20 @@
   --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
   --pf-v6-c-compass__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --pf-v6-c-compass__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
-  --pf-v6-c-compass__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
+  --pf-v6-c-compass__dock-main--BorderInlineEndWidth: 0;
   --pf-v6-c-compass__dock-main--BorderInlineEndColor: transparent;
-  --pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
+  --pf-v6-c-compass__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
   --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
-  --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
+  --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-compass {
     --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
     --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
     --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
+    --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-out--short);
+    --pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--default);
   }
   .pf-v6-c-compass.pf-m-animate-smoothly .pf-v6-c-compass__container {
     --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
@@ -316,11 +319,16 @@
   flex-direction: column;
   grid-area: dock;
   width: var(--pf-v6-c-compass__dock--Width);
-  translate: -100% 0;
   transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-compass__dock--TransitionDuration--slide);
+  translate: -100% 0;
 }
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__dock {
+  translate: 100% 0;
+}
+
 @media (min-width: 62rem) {
   .pf-v6-c-compass__dock:not(.pf-m-overlay) {
+    --pf-v6-c-compass__dock-main--BorderInlineEndWidth: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndWidth);
     --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-v6-c-compass__dock-main--desktop--BackgroundColor);
     --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
     position: revert;

package/css/components/Nav/nav.css

@@ -92,18 +92,21 @@
   --pf-v6-c-nav__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav__toggle--TranslateY: calc((var(--pf-v6-c-nav--LineHeight) * var(--pf-v6-c-nav--FontSize) / 2) - 50%);
+  --pf-v6-c-nav--m-horizontal--MarginBlockEnd: var(--pf-v6-c-nav--m-horizontal__item--accent--offset);
   --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: 0;
-  --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: 0;
+  --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: calc(var(--pf-v6-c-nav--m-horizontal__item--accent--offset) * -1);
   --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: 0;
   --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: 0;
+  --pf-v6-c-nav--m-horizontal__item--accent--offset: var(--pf-v6-c-nav__item--accent--offset);
   --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav__list--ColumnGap);
   --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav__list--ColumnGap);
+  --pf-v6-c-nav--m-horizontal__link--m-current--BackgroundColor: transparent;
   --pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-nav--m-horizontal--m-subnav--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-nav--m-horizontal--m-subnav--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav__list--ColumnGap);
@@ -112,6 +115,7 @@
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--m-horizontal--m-subnav__item--accent--offset: var(--pf-v6-c-nav__item--accent--offset);
   --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -121,6 +125,9 @@
   --pf-v6-c-nav--m-docked__link-expandable-icon--offset: 0.75em;
   --pf-v6-c-nav--m-docked__link-expandable-icon--Scale: 0.8;
 }
+:where(.pf-v6-theme-felt.pf-v6-theme-glass) .pf-v6-c-masthead .pf-v6-c-nav {
+  --pf-v6-c-nav--m-horizontal__item--accent--offset: calc(-1 * (var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock)) + var(--pf-t--global--border--width--glass--default)));
+}
 
 .pf-v6-c-nav,
 .pf-v6-c-nav__section,
@@ -388,19 +395,25 @@
 }
 .pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button {
   --pf-v6-c-button--BorderStartStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius);
+  --pf-v6-c-button--BorderStartEndRadius: 0;
   --pf-v6-c-button--BorderEndStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius);
+  --pf-v6-c-button--BorderEndEndRadius: 0;
 }
 .pf-v6-c-nav__scroll-button:first-of-type::before {
   border-inline-end: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
 }
 .pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button {
+  --pf-v6-c-button--BorderStartStartRadius: 0;
   --pf-v6-c-button--BorderStartEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius);
+  --pf-v6-c-button--BorderEndStartRadius: 0;
   --pf-v6-c-button--BorderEndEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius);
 }
 .pf-v6-c-nav__scroll-button:last-of-type::before {
   border-inline-start: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
 }
 .pf-v6-c-nav__scroll-button .pf-v6-c-button {
+  align-items: center;
+  height: 100%;
   outline-offset: var(--pf-v6-c-nav--OutlineOffset);
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button .pf-v6-c-button > * {
@@ -408,9 +421,14 @@
 }
 
 .pf-v6-c-nav:where(.pf-m-horizontal) {
-  --pf-v6-c-nav__item--accent--content: none;
+  align-items: start;
   padding: 0;
-  overflow: hidden;
+  margin-block-end: var(--pf-v6-c-nav--m-horizontal--MarginBlockEnd);
+  overflow-x: clip;
+}
+.pf-v6-c-toolbar__item.pf-m-overflow-container:has(.pf-v6-c-nav:where(.pf-m-horizontal)), .pf-v6-c-toolbar__group.pf-m-overflow-container:has(> .pf-v6-c-nav:where(.pf-m-horizontal)) {
+  overflow-x: clip;
+  overflow-y: visible;
 }
 .pf-v6-c-nav:where(.pf-m-horizontal),
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__section,
@@ -440,6 +458,18 @@
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
   outline-offset: var(--pf-v6-c-nav--OutlineOffset);
 }
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link.pf-m-current:not(:hover, :focus-visible) {
+  background-color: transparent;
+}
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__item::before {
+  inset-block-start: auto;
+  inset-block-end: var(--pf-v6-c-nav--m-horizontal__item--accent--offset);
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  width: auto;
+  height: var(--pf-v6-c-nav__item--accent--size);
+  scale: var(--pf-v6-c-nav__item--accent--ScaleY) 1;
+}
 .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav {
   --pf-v6-c-nav--BackgroundColor: var(--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor);
   --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart);
@@ -450,6 +480,9 @@
   --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd);
   --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
   --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
+  --pf-v6-c-nav--m-horizontal__item--accent--offset: var(--pf-v6-c-nav--m-horizontal--m-subnav__item--accent--offset);
+  --pf-v6-c-nav--m-horizontal--MarginBlockEnd: 0;
+  align-items: stretch;
   border: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderWidth) solid var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderColor);
   border-radius: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius);
 }

package/css/components/Nav/nav.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   "button": "pf-v6-c-button",
   "compassDock": "pf-v6-c-compass__dock",
   "dirRtl": "pf-v6-m-dir-rtl",
+  "masthead": "pf-v6-c-masthead",
   "menu": "pf-v6-c-menu",
   "menuList": "pf-v6-c-menu__list",
   "menuListItem": "pf-v6-c-menu__list-item",
@@ -18,6 +19,7 @@ declare const _default: {
     "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
+    "overflowContainer": "pf-m-overflow-container",
     "subnav": "pf-m-subnav",
     "scrollable": "pf-m-scrollable"
   },
@@ -35,6 +37,10 @@ declare const _default: {
   "navSubnav": "pf-v6-c-nav__subnav",
   "navToggle": "pf-v6-c-nav__toggle",
   "navToggleIcon": "pf-v6-c-nav__toggle-icon",
-  "pageDock": "pf-v6-c-page__dock"
+  "pageDock": "pf-v6-c-page__dock",
+  "themeFelt": "pf-v6-theme-felt",
+  "themeGlass": "pf-v6-theme-glass",
+  "toolbarGroup": "pf-v6-c-toolbar__group",
+  "toolbarItem": "pf-v6-c-toolbar__item"
 };
 export default _default;

package/css/components/Nav/nav.js

@@ -5,6 +5,7 @@ exports.default = {
   "button": "pf-v6-c-button",
   "compassDock": "pf-v6-c-compass__dock",
   "dirRtl": "pf-v6-m-dir-rtl",
+  "masthead": "pf-v6-c-masthead",
   "menu": "pf-v6-c-menu",
   "menuList": "pf-v6-c-menu__list",
   "menuListItem": "pf-v6-c-menu__list-item",
@@ -20,6 +21,7 @@ exports.default = {
     "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
+    "overflowContainer": "pf-m-overflow-container",
     "subnav": "pf-m-subnav",
     "scrollable": "pf-m-scrollable"
   },
@@ -37,5 +39,9 @@ exports.default = {
   "navSubnav": "pf-v6-c-nav__subnav",
   "navToggle": "pf-v6-c-nav__toggle",
   "navToggleIcon": "pf-v6-c-nav__toggle-icon",
-  "pageDock": "pf-v6-c-page__dock"
+  "pageDock": "pf-v6-c-page__dock",
+  "themeFelt": "pf-v6-theme-felt",
+  "themeGlass": "pf-v6-theme-glass",
+  "toolbarGroup": "pf-v6-c-toolbar__group",
+  "toolbarItem": "pf-v6-c-toolbar__item"
 };

package/css/components/Nav/nav.mjs

@@ -3,6 +3,7 @@ export default {
   "button": "pf-v6-c-button",
   "compassDock": "pf-v6-c-compass__dock",
   "dirRtl": "pf-v6-m-dir-rtl",
+  "masthead": "pf-v6-c-masthead",
   "menu": "pf-v6-c-menu",
   "menuList": "pf-v6-c-menu__list",
   "menuListItem": "pf-v6-c-menu__list-item",
@@ -18,6 +19,7 @@ export default {
     "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
+    "overflowContainer": "pf-m-overflow-container",
     "subnav": "pf-m-subnav",
     "scrollable": "pf-m-scrollable"
   },
@@ -35,5 +37,9 @@ export default {
   "navSubnav": "pf-v6-c-nav__subnav",
   "navToggle": "pf-v6-c-nav__toggle",
   "navToggleIcon": "pf-v6-c-nav__toggle-icon",
-  "pageDock": "pf-v6-c-page__dock"
+  "pageDock": "pf-v6-c-page__dock",
+  "themeFelt": "pf-v6-theme-felt",
+  "themeGlass": "pf-v6-theme-glass",
+  "toolbarGroup": "pf-v6-c-toolbar__group",
+  "toolbarItem": "pf-v6-c-toolbar__item"
 };