@patternfly/react-styles 6.0.0-alpha.25 → 6.0.0-alpha.27

package/css/components/ClipboardCopy/clipboard-copy.mjs

@@ -13,6 +13,7 @@ export default {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
-    "code": "pf-m-code"
+    "code": "pf-m-code",
+    "plain": "pf-m-plain"
   }
 };

package/css/components/JumpLinks/jump-links.css

@@ -41,18 +41,14 @@
   --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-jump-links__label--Display: block;
-  --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
-  --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
-  --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
-  --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: calc(var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
-  --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
+  --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
+  --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-jump-links__toggle--Display: none;
-  --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
+  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
-  --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
 }
 
@@ -236,13 +232,7 @@
 
 .pf-v6-c-jump-links__toggle {
   display: var(--pf-v6-c-jump-links__toggle--Display);
-  margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
-  margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
-}
-.pf-v6-c-jump-links__toggle .pf-v6-c-button {
-  display: flex;
-  align-items: center;
 }
 
 .pf-v6-c-jump-links__toggle-icon {

package/css/components/JumpLinks/jump-links.d.ts

@@ -1,6 +1,5 @@
 import './jump-links.css';
 declare const _default: {
-  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "jumpLinks": "pf-v6-c-jump-links",
   "jumpLinksItem": "pf-v6-c-jump-links__item",

package/css/components/JumpLinks/jump-links.js

@@ -2,7 +2,6 @@
 exports.__esModule = true;
 require('./jump-links.css');
 exports.default = {
-  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "jumpLinks": "pf-v6-c-jump-links",
   "jumpLinksItem": "pf-v6-c-jump-links__item",

package/css/components/JumpLinks/jump-links.mjs

@@ -1,6 +1,5 @@
 import './jump-links.css';
 export default {
-  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "jumpLinks": "pf-v6-c-jump-links",
   "jumpLinksItem": "pf-v6-c-jump-links__item",

package/css/components/Label/label.css

@@ -48,14 +48,14 @@
   --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
   --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
   --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
-  --pf-v6-c-label--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
-  --pf-v6-c-label--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
-  --pf-v6-c-label--m-gold__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gold--default);
-  --pf-v6-c-label--m-gold--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--hover);
-  --pf-v6-c-label--m-gold--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gold--hover);
-  --pf-v6-c-label--m-gold--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gold--hover);
-  --pf-v6-c-label--m-gold--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gold--default);
-  --pf-v6-c-label--m-gold--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gold--hover);
+  --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+  --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+  --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
+  --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
+  --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
+  --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
+  --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
   --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
   --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
   --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
@@ -64,14 +64,14 @@
   --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
   --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
   --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
-  --pf-v6-c-label--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
-  --pf-v6-c-label--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
-  --pf-v6-c-label--m-cyan__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-cyan--default);
-  --pf-v6-c-label--m-cyan--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--hover);
-  --pf-v6-c-label--m-cyan--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--hover);
-  --pf-v6-c-label--m-cyan--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-cyan--hover);
-  --pf-v6-c-label--m-cyan--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--cyan--default);
-  --pf-v6-c-label--m-cyan--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--cyan--hover);
+  --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+  --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+  --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
+  --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
+  --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
+  --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
+  --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
   --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
   --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
   --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
@@ -245,15 +245,15 @@
   --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
   --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
 }
-.pf-v6-c-label.pf-m-gold {
-  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-gold--BackgroundColor);
-  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-gold--Color);
-  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-gold__icon--Color);
-  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-gold--m-clickable--hover--BackgroundColor);
-  --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-gold--m-clickable--hover--Color);
-  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-gold--m-clickable--hover__icon--Color);
-  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-gold--m-outline--BorderColor);
-  --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-gold--m-outline--m-clickable--hover--BorderColor);
+.pf-v6-c-label.pf-m-yellow {
+  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
+  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
+  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
+  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
+  --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
+  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
+  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
+  --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
 }
 .pf-v6-c-label.pf-m-green {
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
@@ -265,15 +265,15 @@
   --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
   --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
 }
-.pf-v6-c-label.pf-m-cyan {
-  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-cyan--BackgroundColor);
-  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-cyan--Color);
-  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-cyan__icon--Color);
-  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-cyan--m-clickable--hover--BackgroundColor);
-  --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-cyan--m-clickable--hover--Color);
-  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-cyan--m-clickable--hover__icon--Color);
-  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-cyan--m-outline--BorderColor);
-  --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-cyan--m-outline--m-clickable--hover--BorderColor);
+.pf-v6-c-label.pf-m-teal {
+  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
+  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
+  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
+  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
+  --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
+  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
+  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
+  --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
 }
 .pf-v6-c-label.pf-m-purple {
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);

package/css/components/Label/label.d.ts

@@ -11,9 +11,9 @@ declare const _default: {
     "red": "pf-m-red",
     "orange": "pf-m-orange",
     "orangered": "pf-m-orangered",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "purple": "pf-m-purple",
     "success": "pf-m-success",
     "warning": "pf-m-warning",

package/css/components/Label/label.js

@@ -13,9 +13,9 @@ exports.default = {
     "red": "pf-m-red",
     "orange": "pf-m-orange",
     "orangered": "pf-m-orangered",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "purple": "pf-m-purple",
     "success": "pf-m-success",
     "warning": "pf-m-warning",

package/css/components/Label/label.mjs

@@ -11,9 +11,9 @@ export default {
     "red": "pf-m-red",
     "orange": "pf-m-orange",
     "orangered": "pf-m-orangered",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "purple": "pf-m-purple",
     "success": "pf-m-success",
     "warning": "pf-m-warning",

package/css/components/List/list.css

@@ -1,4 +1,4 @@
-.pf-v6-c-list {
+:where(:root, .pf-v6-c-list) {
   --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
@@ -16,6 +16,9 @@
   --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
   --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
+}
+
+.pf-v6-c-list {
   padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
 }
 .pf-v6-c-list ol,

package/css/components/LogViewer/log-viewer.css

@@ -1,4 +1,4 @@
-.pf-v6-c-log-viewer {
+:where(:root, .pf-v6-c-log-viewer) {
   --pf-v6-c-log-viewer--Height: 100%;
   --pf-v6-c-log-viewer--MaxHeight: auto;
   --pf-v6-c-log-viewer--m-line-numbers__index--Display: inline;
@@ -45,6 +45,9 @@
   --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0;
   --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm);
   --pf-v6-c-log-viewer--m-dark__main--BorderWidth: 0;
+}
+
+.pf-v6-c-log-viewer {
   display: flex;
   flex-direction: column;
   height: var(--pf-v6-c-log-viewer--Height);

package/css/components/Menu/menu.css

@@ -12,6 +12,8 @@
   --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu--m-plain--BoxShadow: none;
   --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
   --pf-v6-c-menu__content--Height: auto;
@@ -25,6 +27,9 @@
   --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-menu__list-item--TransitionProperty: background-color;
   --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
   --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -195,6 +200,8 @@
   background-color: var(--pf-v6-c-menu--BackgroundColor);
   border-radius: var(--pf-v6-c-menu--BorderRadius);
   box-shadow: var(--pf-v6-c-menu--BoxShadow);
+  transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
+  transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
 }
 .pf-v6-c-menu .pf-v6-c-menu {
   min-width: 100%;
@@ -366,6 +373,9 @@
 .pf-v6-c-menu__list-item {
   align-items: baseline;
   min-width: 0;
+  transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
+  transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
 }
 .pf-v6-c-menu__list-item > * {
   position: relative;
@@ -375,6 +385,7 @@
   inset: 0;
   content: "";
   background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
+  transition: inherit;
 }
 .pf-v6-c-menu__list-item.pf-m-load {
   --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);

package/css/components/MenuToggle/menu-toggle.css

@@ -13,6 +13,9 @@
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--button--default);
   --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
   --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--button--default);
@@ -136,6 +139,9 @@
   cursor: pointer;
   background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
   border: 0;
+  transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
+  transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
 }
 .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
   border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
@@ -150,6 +156,7 @@
   pointer-events: none;
   content: "";
   border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
+  transition: inherit;
 }
 .pf-v6-c-menu-toggle.pf-m-primary {
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);

package/css/components/Nav/nav.css

@@ -172,6 +172,7 @@
   line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
   color: var(--pf-v6-c-nav__link--Color);
   text-align: start;
+  text-decoration: none;
   background-color: var(--pf-v6-c-nav__link--BackgroundColor);
   border: none;
   border-radius: var(--pf-v6-c-nav__link--BorderRadius);

package/css/components/Page/page.css

@@ -36,11 +36,11 @@
   --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
   --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
-  --pf-v6-c-page__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
-  --pf-v6-c-page__main-section--PaddingBlockEnd: 0;
-  --pf-v6-c-page__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
+  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page__main-section--RowGap: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -75,6 +75,7 @@
   --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
   --pf-v6-c-page__main-tabs--PaddingInlineEnd: 0;
   --pf-v6-c-page__main-tabs--PaddingBlockEnd: 0;
+  --pf-v6-c-page__main-tabs--PaddingInlineStart: 0;
   --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
@@ -186,21 +187,11 @@
   flex-grow: 0;
 }
 
-.pf-v6-c-page__main-nav.pf-m-limit-width,
-.pf-v6-c-page__main-breadcrumb.pf-m-limit-width,
-.pf-v6-c-page__main-tabs.pf-m-limit-width,
-.pf-v6-c-page__main-section.pf-m-limit-width,
-.pf-v6-c-page__main-wizard.pf-m-limit-width {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-}
 .pf-v6-c-page__main-nav.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 {
-  flex: 1;
   max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
 }
 .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
@@ -225,6 +216,8 @@
 .pf-v6-c-page__main-wizard,
 .pf-v6-c-page__main-group,
 .pf-v6-c-page__main-subnav {
+  display: flex;
+  flex-direction: column;
   flex-shrink: 0;
 }
 .pf-v6-c-page__main-nav.pf-m-overflow-scroll,
@@ -445,6 +438,7 @@
 .pf-v6-c-page__main-list {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
 }
 
 .pf-v6-c-page__main-nav {
@@ -559,10 +553,11 @@
 }
 
 .pf-v6-c-page__main-section {
+  gap: var(--pf-v6-c-page__main-section--RowGap);
   padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+  padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+  padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
 }
 .pf-v6-c-page__main-section.pf-m-secondary {
@@ -571,8 +566,8 @@
 .pf-v6-c-page__main-section.pf-m-padding {
   padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+  padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+  padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
 }
 .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width {
   padding: 0;
@@ -580,8 +575,8 @@
 .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v6-c-page__main-body {
   padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+  padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+  padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
 }
 .pf-v6-c-page__main-section.pf-m-no-padding, .pf-v6-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v6-c-page__main-body {
   padding: 0;
@@ -590,8 +585,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-sm {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
     padding: 0;
@@ -599,8 +594,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-no-padding-on-sm, .pf-v6-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
     padding: 0;
@@ -610,8 +605,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-md {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
     padding: 0;
@@ -619,8 +614,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-no-padding-on-md, .pf-v6-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
     padding: 0;
@@ -630,8 +625,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-lg {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
     padding: 0;
@@ -639,8 +634,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-no-padding-on-lg, .pf-v6-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
     padding: 0;
@@ -650,8 +645,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-xl {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
     padding: 0;
@@ -659,8 +654,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-no-padding-on-xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
     padding: 0;
@@ -670,8 +665,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
     padding: 0;
@@ -679,8 +674,8 @@
   .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
     padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
     padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-    padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+    padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
+    padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
   }
   .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
     padding: 0;
@@ -706,25 +701,14 @@
 }
 
 .pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
-  padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
   padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
 }
 .pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
-  padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
-}
-.pf-v6-c-page__main-section .pf-v6-c-page__main-body {
-  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 .pf-v6-c-page__main-tabs .pf-v6-c-page__main-body {
-  padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
 }

package/css/components/Pagination/pagination.css

@@ -28,14 +28,17 @@
   --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
+  --pf-v6-c-pagination__page-menu--Display--base: block;
   --pf-v6-c-pagination__page-menu--Display: none;
   --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
-  --pf-v6-c-pagination--m-display-full__page-menu--Display: inline-flex;
+  --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
+  --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
+  --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
 }
 @media screen and (min-width: 768px) {
   :where(:root, .pf-v6-c-pagination) {
     --pf-v6-c-pagination--m-bottom--BoxShadow: none;
-    --pf-v6-c-pagination__page-menu--Display: inline-flex;
+    --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
     --pf-v6-c-pagination__nav--Display: inline-flex;
     --pf-v6-c-pagination__total-items--Display: none;
   }
@@ -82,7 +85,7 @@
 }
 .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
   position: absolute;
-  display: block;
+  display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
 }
 .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
   display: flex;