@patternfly/react-styles 6.5.0-prerelease.2 → 6.5.0-prerelease.21

package/css/components/Nav/nav.css

@@ -28,13 +28,22 @@
   --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
   --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
   --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
+  --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
+  --pf-v6-c-nav__item--accent--color: var(--pf-t--global--color--brand--accent--default);
+  --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-nav__item--accent--ScaleY: 0;
+  --pf-v6-c-nav__item--current--accent--ScaleY: 1;
+  --pf-v6-c-nav__item--accent--TransitionDuration: 0;
+  --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
-  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: -180deg;
   --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav__link--AlignItems: baseline;
-  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --pf-v6-c-nav__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-nav__link--WhiteSpace: normal;
   --pf-v6-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
@@ -52,6 +61,7 @@
   --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-nav__link-text--FontSize: initial;
   --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -63,6 +73,15 @@
   --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__subnav--TranslateY: 0;
   --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-nav {
+    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-nav {
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -92,13 +111,11 @@
   --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);
-}
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-nav {
-    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
-  }
+  --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);
+  --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
 }
 
 .pf-v6-c-nav,
@@ -133,6 +150,31 @@
 .pf-v6-c-nav.pf-m-fill {
   flex-grow: 1;
 }
+.pf-v6-c-nav.pf-m-docked {
+  --pf-v6-c-nav--PaddingBlockStart: 0;
+  --pf-v6-c-nav--PaddingBlockEnd: 0;
+  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
+  --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
+  --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
+  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
+  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
+  width: 100%;
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-nav.pf-m-docked {
+    width: fit-content;
+  }
+  .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
+    display: none;
+  }
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
+  width: 100%;
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
+  display: revert;
+}
+
 .pf-v6-c-nav .pf-v6-c-menu {
   --pf-v6-c-menu--MinWidth: 100%;
 }
@@ -196,14 +238,34 @@
 }
 
 .pf-v6-c-nav__item {
+  position: relative;
   scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
 }
+.pf-v6-c-nav__item::before {
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
+  width: var(--pf-v6-c-nav__item--accent--size);
+  pointer-events: none;
+  content: var(--pf-v6-c-nav__item--accent--content, "");
+  background-color: var(--pf-v6-c-nav__item--accent--color);
+  border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
+  transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
+  transition-property: scale;
+  scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
+}
 .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
   margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
 }
 .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
   margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
 }
+.pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
+  --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
+  --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
+}
 
 .pf-v6-c-nav__section {
   row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -262,7 +324,13 @@
 }
 
 .pf-v6-c-nav__link-icon {
+  min-width: 1lh;
   color: var(--pf-v6-c-nav__link-icon--Color);
+  text-align: center;
+}
+
+.pf-v6-c-nav__link-text {
+  font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
 }
 
 .pf-v6-c-nav__toggle {
@@ -320,6 +388,7 @@
 }
 
 .pf-v6-c-nav:where(.pf-m-horizontal) {
+  --pf-v6-c-nav__item--accent--content: none;
   padding: 0;
   overflow: hidden;
 }
@@ -340,12 +409,14 @@
   scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
   scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
   -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
   display: none;
 }
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
+  scrollbar-width: none;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
   outline-offset: var(--pf-v6-c-nav--OutlineOffset);
 }

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

@@ -1,6 +1,7 @@
 import './nav.css';
 declare const _default: {
   "button": "pf-v6-c-button",
+  "compassDock": "pf-v6-c-compass__dock",
   "dirRtl": "pf-v6-m-dir-rtl",
   "menu": "pf-v6-c-menu",
   "menuList": "pf-v6-c-menu__list",
@@ -9,10 +10,12 @@ declare const _default: {
     "overflowHidden": "pf-m-overflow-hidden",
     "inset": "pf-m-inset",
     "fill": "pf-m-fill",
+    "docked": "pf-m-docked",
+    "textExpanded": "pf-m-text-expanded",
     "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
-    "hover": "pf-m-hover",
     "current": "pf-m-current",
+    "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
     "subnav": "pf-m-subnav",
@@ -22,6 +25,7 @@ declare const _default: {
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
   "navLinkIcon": "pf-v6-c-nav__link-icon",
+  "navLinkText": "pf-v6-c-nav__link-text",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",
@@ -29,6 +33,7 @@ declare const _default: {
   "navSectionTitle": "pf-v6-c-nav__section-title",
   "navSubnav": "pf-v6-c-nav__subnav",
   "navToggle": "pf-v6-c-nav__toggle",
-  "navToggleIcon": "pf-v6-c-nav__toggle-icon"
+  "navToggleIcon": "pf-v6-c-nav__toggle-icon",
+  "pageDock": "pf-v6-c-page__dock"
 };
 export default _default;

package/css/components/Nav/nav.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./nav.css');
 exports.default = {
   "button": "pf-v6-c-button",
+  "compassDock": "pf-v6-c-compass__dock",
   "dirRtl": "pf-v6-m-dir-rtl",
   "menu": "pf-v6-c-menu",
   "menuList": "pf-v6-c-menu__list",
@@ -11,10 +12,12 @@ exports.default = {
     "overflowHidden": "pf-m-overflow-hidden",
     "inset": "pf-m-inset",
     "fill": "pf-m-fill",
+    "docked": "pf-m-docked",
+    "textExpanded": "pf-m-text-expanded",
     "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
-    "hover": "pf-m-hover",
     "current": "pf-m-current",
+    "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
     "subnav": "pf-m-subnav",
@@ -24,6 +27,7 @@ exports.default = {
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
   "navLinkIcon": "pf-v6-c-nav__link-icon",
+  "navLinkText": "pf-v6-c-nav__link-text",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",
@@ -31,5 +35,6 @@ exports.default = {
   "navSectionTitle": "pf-v6-c-nav__section-title",
   "navSubnav": "pf-v6-c-nav__subnav",
   "navToggle": "pf-v6-c-nav__toggle",
-  "navToggleIcon": "pf-v6-c-nav__toggle-icon"
+  "navToggleIcon": "pf-v6-c-nav__toggle-icon",
+  "pageDock": "pf-v6-c-page__dock"
 };

package/css/components/Nav/nav.mjs

@@ -1,6 +1,7 @@
 import './nav.css';
 export default {
   "button": "pf-v6-c-button",
+  "compassDock": "pf-v6-c-compass__dock",
   "dirRtl": "pf-v6-m-dir-rtl",
   "menu": "pf-v6-c-menu",
   "menuList": "pf-v6-c-menu__list",
@@ -9,10 +10,12 @@ export default {
     "overflowHidden": "pf-m-overflow-hidden",
     "inset": "pf-m-inset",
     "fill": "pf-m-fill",
+    "docked": "pf-m-docked",
+    "textExpanded": "pf-m-text-expanded",
     "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
-    "hover": "pf-m-hover",
     "current": "pf-m-current",
+    "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
     "subnav": "pf-m-subnav",
@@ -22,6 +25,7 @@ export default {
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
   "navLinkIcon": "pf-v6-c-nav__link-icon",
+  "navLinkText": "pf-v6-c-nav__link-text",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",
@@ -29,5 +33,6 @@ export default {
   "navSectionTitle": "pf-v6-c-nav__section-title",
   "navSubnav": "pf-v6-c-nav__subnav",
   "navToggle": "pf-v6-c-nav__toggle",
-  "navToggleIcon": "pf-v6-c-nav__toggle-icon"
+  "navToggleIcon": "pf-v6-c-nav__toggle-icon",
+  "pageDock": "pf-v6-c-page__dock"
 };

package/css/components/NotificationDrawer/notification-drawer.css

@@ -14,6 +14,7 @@
   --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
   --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -27,6 +28,7 @@
   --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
   --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
   --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -69,7 +71,7 @@
   --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
-  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
+  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: -180deg;
 }
 
 .pf-v6-c-notification-drawer {
@@ -108,6 +110,7 @@
 
 .pf-v6-c-notification-drawer__header-action {
   display: flex;
+  gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
   align-items: center;
   margin-inline-start: auto;
 }
@@ -136,8 +139,16 @@
   padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
   background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
-  border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
   border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
+  outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
+}
+.pf-v6-c-notification-drawer__list-item::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
+  border-radius: inherit;
 }
 .pf-v6-c-notification-drawer__list-item.pf-m-info {
   --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
@@ -163,7 +174,6 @@
   --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
   --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
   --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
-  position: relative;
 }
 .pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
   cursor: pointer;
@@ -191,9 +201,9 @@
 }
 .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
-  overflow: hidden;
 }
 
 .pf-v6-c-notification-drawer__list-item-action {
@@ -247,9 +257,9 @@
 
 .pf-v6-c-notification-drawer__group-toggle-title {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
-  overflow: hidden;
   flex: 1;
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
   font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
@@ -262,15 +272,15 @@
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-notification-drawer__group-toggle-icon {
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
   color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
-  scale: -1 1;
-}
-
 .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }

package/css/components/OverflowMenu/overflow-menu.css

@@ -1,15 +1,26 @@
 .pf-v6-c-overflow-menu {
   --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-overflow-menu--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-overflow-menu__group--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-overflow-menu__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-overflow-menu {
   display: inline-flex;
+  row-gap: var(--pf-v6-c-overflow-menu--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
 }
 
+.pf-v6-c-overflow-menu.pf-m-vertical,
+.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__content,
+.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__group {
+  flex-direction: column;
+}
+
 .pf-v6-c-overflow-menu__content,
 .pf-v6-c-overflow-menu__group {
   display: flex;
@@ -17,20 +28,25 @@
 }
 
 .pf-v6-c-overflow-menu__group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--ColumnGap);
 }
 .pf-v6-c-overflow-menu__group.pf-m-button-group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap);
 }
 .pf-v6-c-overflow-menu__group.pf-m-icon-button-group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap);
 }
 
 .pf-v6-c-overflow-menu__item {
+  row-gap: var(--pf-v6-c-overflow-menu__item--RowGap, var(--pf-v6-c-overflow-menu--RowGap));
   column-gap: var(--pf-v6-c-overflow-menu__item--ColumnGap, var(--pf-v6-c-overflow-menu--ColumnGap));
 }
 
 .pf-v6-c-overflow-menu__content,
 .pf-v6-c-overflow-menu__control {
+  row-gap: var(--pf-v6-c-overflow-menu--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
 }

package/css/components/OverflowMenu/overflow-menu.d.ts

@@ -1,6 +1,7 @@
 import './overflow-menu.css';
 declare const _default: {
   "modifiers": {
+    "vertical": "pf-m-vertical",
     "buttonGroup": "pf-m-button-group",
     "iconButtonGroup": "pf-m-icon-button-group"
   },

package/css/components/OverflowMenu/overflow-menu.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./overflow-menu.css');
 exports.default = {
   "modifiers": {
+    "vertical": "pf-m-vertical",
     "buttonGroup": "pf-m-button-group",
     "iconButtonGroup": "pf-m-icon-button-group"
   },

package/css/components/OverflowMenu/overflow-menu.mjs

@@ -1,6 +1,7 @@
 import './overflow-menu.css';
 export default {
   "modifiers": {
+    "vertical": "pf-m-vertical",
     "buttonGroup": "pf-m-button-group",
     "iconButtonGroup": "pf-m-icon-button-group"
   },