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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-alpha.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.26...@patternfly/react-styles@6.0.0-alpha.27) (2024-07-02)
+
+### Features
+
+- **Button:** add text wrapper, update icon usage ([#10663](https://github.com/patternfly/patternfly-react/issues/10663)) ([eca5878](https://github.com/patternfly/patternfly-react/commit/eca58789d1f07753657372a46a20c147f984b998))
+
 # [6.0.0-alpha.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.25...@patternfly/react-styles@6.0.0-alpha.26) (2024-06-26)
 
 ### Features

package/css/components/Button/button.css

@@ -1,5 +1,8 @@
 :where(:root, .pf-v6-c-button) {
-  --pf-v6-c-button--Display: inline-block;
+  --pf-v6-c-button--Display: inline-flex;
+  --pf-v6-c-button--AlignItems: baseline;
+  --pf-v6-c-button--JustifyContent: center;
+  --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -80,6 +83,7 @@
   --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
   --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
+  --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
   --pf-v6-c-button--m-link--m-inline--FontSize: initial;
   --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
   --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -92,6 +96,9 @@
   --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-button--span--m-link--m-inline--Display: inline;
+  --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -104,7 +111,8 @@
   --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
   --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -199,8 +207,10 @@
   --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button__icon--MarginInlineStart: 0;
+  --pf-v6-c-button__icon--MarginInlineEnd: 0;
+  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
+  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
   --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
@@ -215,16 +225,17 @@
   --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
   --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
-  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-block--Display: flex;
+  --pf-v6-c-button--m-block--Width: 100%;
 }
 
 .pf-v6-c-button {
   position: relative;
   display: var(--pf-v6-c-button--Display);
-  flex: var(--pf-v6-c-button--Flex, initial);
-  align-items: var(--pf-v6-c-button--AlignItems, initial);
-  justify-content: var(--pf-v6-c-button--JustifyContent, initial);
+  gap: var(--pf-v6-c-button--Gap);
+  align-items: var(--pf-v6-c-button--AlignItems);
+  justify-content: var(--pf-v6-c-button--JustifyContent);
   padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -323,6 +334,7 @@
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
 }
 .pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
   --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
   --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -338,11 +350,16 @@
   --pf-v6-c-button--disabled--BackgroundColor: transparent;
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
   --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
-  display: inline;
   text-align: start;
   white-space: normal;
   outline-offset: 0.125rem;
 }
+span.pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
+  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
+  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+}
+
 .pf-v6-c-button.pf-m-link.pf-m-danger {
   --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
   --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -448,6 +465,7 @@
   --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
   --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
+  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
   --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
   --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
@@ -466,8 +484,8 @@
   min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
 }
 .pf-v6-c-button.pf-m-block {
-  display: block;
-  width: 100%;
+  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
+  width: var(--pf-v6-c-button--m-block--Width);
 }
 .pf-v6-c-button.pf-m-small {
   --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -534,13 +552,15 @@
 }
 
 .pf-v6-c-button__icon {
+  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
+  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
   color: var(--pf-v6-c-button__icon--Color);
 }
 .pf-v6-c-button__icon.pf-m-start {
-  margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
+  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
 }
 .pf-v6-c-button__icon.pf-m-end {
-  margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
+  --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
 }
 
 .pf-v6-c-button__progress {
@@ -558,5 +578,4 @@
 .pf-v6-c-button__count {
   display: inline-flex;
   align-items: center;
-  margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
 }

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

@@ -15,18 +15,15 @@
   --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
-  --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
   --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
+  --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
   --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
-  --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -34,9 +31,8 @@
 }
 .pf-v6-c-clipboard-copy.pf-m-inline {
   display: inline;
-  padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
   white-space: nowrap;
   background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
 }
@@ -91,15 +87,11 @@
 
 .pf-v6-c-clipboard-copy__actions {
   display: inline-flex;
+  gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
+  margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
 }
 
-.pf-v6-c-clipboard-copy__actions-item {
-  margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
-  margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
-}
-.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
-  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
-  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
-  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
-  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
+.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
+  --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
+  --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
 }

package/css/components/ClipboardCopy/clipboard-copy.d.ts

@@ -13,7 +13,8 @@ declare const _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"
   }
 };
 export default _default;

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

@@ -15,6 +15,7 @@ exports.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/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/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/Panel/panel.css

@@ -2,43 +2,44 @@
   --pf-v6-c-panel--Width: auto;
   --pf-v6-c-panel--MinWidth: auto;
   --pf-v6-c-panel--MaxWidth: none;
-  --pf-v6-c-panel--ZIndex: auto;
   --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-panel--BoxShadow: none;
+  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-panel--before--BorderWidth: 0;
   --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main--MaxHeight: none;
   --pf-v6-c-panel__main--Overflow: visible;
   --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__footer--BoxShadow: none;
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
-  --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
+  --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
 }
 
 .pf-v6-c-panel {
   position: relative;
-  z-index: var(--pf-v6-c-panel--ZIndex);
   width: var(--pf-v6-c-panel--Width);
   min-width: var(--pf-v6-c-panel--MinWidth);
   max-width: var(--pf-v6-c-panel--MaxWidth);
   background-color: var(--pf-v6-c-panel--BackgroundColor);
+  border-radius: var(--pf-v6-c-panel--BorderRadius);
   box-shadow: var(--pf-v6-c-panel--BoxShadow);
 }
 .pf-v6-c-panel::before {
@@ -47,6 +48,7 @@
   pointer-events: none;
   content: "";
   border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
+  border-radius: var(--pf-v6-c-panel--BorderRadius);
 }
 .pf-v6-c-panel.pf-m-bordered {
   --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -57,12 +59,13 @@
 .pf-v6-c-panel.pf-m-raised {
   --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
   --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
-  --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
 }
 .pf-v6-c-panel.pf-m-scrollable {
   --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
   --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
   --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
+  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
+  --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
 }
 
 .pf-v6-c-panel__header {

package/css/components/Toolbar/toolbar.css

@@ -17,6 +17,7 @@
   --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
+  --pf-v6-c-toolbar__content--PaddingBlockStart: 0;
   --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);