@patternfly/patternfly 6.0.0-alpha.161 → 6.0.0-alpha.163

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/components/ClipboardCopy/clipboard-copy.css +11 -19
  2. package/components/ClipboardCopy/clipboard-copy.scss +12 -20
  3. package/components/Page/page.css +38 -54
  4. package/components/Page/page.scss +19 -32
  5. package/components/Toolbar/toolbar.css +1 -0
  6. package/components/Toolbar/toolbar.scss +1 -0
  7. package/components/_index.css +50 -73
  8. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +7 -7
  9. package/docs/components/Page/examples/Page.css +5 -9
  10. package/docs/components/Page/examples/Page.md +71 -32
  11. package/docs/demos/Alert/examples/Alert.md +393 -374
  12. package/docs/demos/CardView/examples/CardView.md +717 -708
  13. package/docs/demos/DataList/examples/DataList.md +2574 -2500
  14. package/docs/demos/Drawer/examples/Drawer.md +190 -182
  15. package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
  16. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
  17. package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
  18. package/docs/demos/Table/examples/Table.md +9458 -9105
  19. package/docs/demos/Tabs/examples/Tabs.md +889 -885
  20. package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
  21. package/package.json +1 -1
  22. package/patternfly-no-globals.css +50 -73
  23. package/patternfly.css +50 -73
  24. package/patternfly.min.css +1 -1
  25. package/patternfly.min.css.map +1 -1
package/components/_index.css CHANGED
@@ -2550,18 +2550,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2550
2550
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
2551
2551
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
2552
2552
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
2553
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
2554
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
2555
2553
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2554
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2556
2555
  --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2556
+ --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
2557
+ --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
2558
+ --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
2559
+ --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
2557
2560
  --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
2558
2561
  --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
2559
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
2560
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
2561
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2562
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2563
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2564
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2565
2562
  }
2566
2563
 
2567
2564
  .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -2569,9 +2566,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2569
2566
  }
2570
2567
  .pf-v6-c-clipboard-copy.pf-m-inline {
2571
2568
  display: inline;
2572
- padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
2573
- padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
2574
2569
  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
2570
+ padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
2575
2571
  white-space: nowrap;
2576
2572
  background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
2577
2573
  }
@@ -2626,17 +2622,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2626
2622
 
2627
2623
  .pf-v6-c-clipboard-copy__actions {
2628
2624
  display: inline-flex;
2625
+ gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
2626
+ margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
2629
2627
  }
2630
2628
 
2631
- .pf-v6-c-clipboard-copy__actions-item {
2632
- margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
2633
- margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
2634
- }
2635
- .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
2636
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
2637
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
2638
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
2639
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
2629
+ .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
2630
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
2631
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
2640
2632
  }
2641
2633
 
2642
2634
  :where(:root, .pf-v6-c-code-block) {
@@ -11526,11 +11518,11 @@ ul.pf-v6-c-list {
11526
11518
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
11527
11519
  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
11528
11520
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
11529
- --pf-v6-c-page__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
11530
- --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11531
- --pf-v6-c-page__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
11532
- --pf-v6-c-page__main-section--PaddingBlockEnd: 0;
11533
- --pf-v6-c-page__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
11521
+ --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11522
+ --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11523
+ --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11524
+ --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11525
+ --pf-v6-c-page__main-section--RowGap: var(--pf-t--global--spacer--lg);
11534
11526
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11535
11527
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11536
11528
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -11565,6 +11557,7 @@ ul.pf-v6-c-list {
11565
11557
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
11566
11558
  --pf-v6-c-page__main-tabs--PaddingInlineEnd: 0;
11567
11559
  --pf-v6-c-page__main-tabs--PaddingBlockEnd: 0;
11560
+ --pf-v6-c-page__main-tabs--PaddingInlineStart: 0;
11568
11561
  --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11569
11562
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11570
11563
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
@@ -11676,21 +11669,11 @@ ul.pf-v6-c-list {
11676
11669
  flex-grow: 0;
11677
11670
  }
11678
11671
 
11679
- .pf-v6-c-page__main-nav.pf-m-limit-width,
11680
- .pf-v6-c-page__main-breadcrumb.pf-m-limit-width,
11681
- .pf-v6-c-page__main-tabs.pf-m-limit-width,
11682
- .pf-v6-c-page__main-section.pf-m-limit-width,
11683
- .pf-v6-c-page__main-wizard.pf-m-limit-width {
11684
- display: flex;
11685
- flex-direction: column;
11686
- padding: 0;
11687
- }
11688
11672
  .pf-v6-c-page__main-nav.pf-m-limit-width > .pf-v6-c-page__main-body,
11689
11673
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
11690
11674
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
11691
11675
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
11692
11676
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
11693
- flex: 1;
11694
11677
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
11695
11678
  }
11696
11679
  .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
@@ -11715,6 +11698,8 @@ ul.pf-v6-c-list {
11715
11698
  .pf-v6-c-page__main-wizard,
11716
11699
  .pf-v6-c-page__main-group,
11717
11700
  .pf-v6-c-page__main-subnav {
11701
+ display: flex;
11702
+ flex-direction: column;
11718
11703
  flex-shrink: 0;
11719
11704
  }
11720
11705
  .pf-v6-c-page__main-nav.pf-m-overflow-scroll,
@@ -11935,6 +11920,7 @@ ul.pf-v6-c-list {
11935
11920
  .pf-v6-c-page__main-list {
11936
11921
  display: flex;
11937
11922
  flex-direction: column;
11923
+ flex-grow: 1;
11938
11924
  }
11939
11925
 
11940
11926
  .pf-v6-c-page__main-nav {
@@ -12049,10 +12035,11 @@ ul.pf-v6-c-list {
12049
12035
  }
12050
12036
 
12051
12037
  .pf-v6-c-page__main-section {
12038
+ gap: var(--pf-v6-c-page__main-section--RowGap);
12052
12039
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12053
12040
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12054
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12055
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12041
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12042
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12056
12043
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
12057
12044
  }
12058
12045
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -12061,8 +12048,8 @@ ul.pf-v6-c-list {
12061
12048
  .pf-v6-c-page__main-section.pf-m-padding {
12062
12049
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12063
12050
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12064
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12065
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12051
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12052
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12066
12053
  }
12067
12054
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width {
12068
12055
  padding: 0;
@@ -12070,8 +12057,8 @@ ul.pf-v6-c-list {
12070
12057
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v6-c-page__main-body {
12071
12058
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12072
12059
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12073
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12074
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12060
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12061
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12075
12062
  }
12076
12063
  .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 {
12077
12064
  padding: 0;
@@ -12080,8 +12067,8 @@ ul.pf-v6-c-list {
12080
12067
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
12081
12068
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12082
12069
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12083
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12084
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12070
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12071
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12085
12072
  }
12086
12073
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
12087
12074
  padding: 0;
@@ -12089,8 +12076,8 @@ ul.pf-v6-c-list {
12089
12076
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
12090
12077
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12091
12078
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12092
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12093
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12079
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12080
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12094
12081
  }
12095
12082
  .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 {
12096
12083
  padding: 0;
@@ -12100,8 +12087,8 @@ ul.pf-v6-c-list {
12100
12087
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
12101
12088
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12102
12089
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12103
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12104
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12090
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12091
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12105
12092
  }
12106
12093
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
12107
12094
  padding: 0;
@@ -12109,8 +12096,8 @@ ul.pf-v6-c-list {
12109
12096
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
12110
12097
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12111
12098
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12112
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12113
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12099
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12100
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12114
12101
  }
12115
12102
  .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 {
12116
12103
  padding: 0;
@@ -12120,8 +12107,8 @@ ul.pf-v6-c-list {
12120
12107
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
12121
12108
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12122
12109
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12123
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12124
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12110
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12111
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12125
12112
  }
12126
12113
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
12127
12114
  padding: 0;
@@ -12129,8 +12116,8 @@ ul.pf-v6-c-list {
12129
12116
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
12130
12117
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12131
12118
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12132
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12133
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12119
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12120
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12134
12121
  }
12135
12122
  .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 {
12136
12123
  padding: 0;
@@ -12140,8 +12127,8 @@ ul.pf-v6-c-list {
12140
12127
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
12141
12128
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12142
12129
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12143
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12144
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12130
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12131
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12145
12132
  }
12146
12133
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
12147
12134
  padding: 0;
@@ -12149,8 +12136,8 @@ ul.pf-v6-c-list {
12149
12136
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
12150
12137
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12151
12138
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12152
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12153
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12139
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12140
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12154
12141
  }
12155
12142
  .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 {
12156
12143
  padding: 0;
@@ -12160,8 +12147,8 @@ ul.pf-v6-c-list {
12160
12147
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
12161
12148
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12162
12149
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12163
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12164
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12150
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12151
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12165
12152
  }
12166
12153
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
12167
12154
  padding: 0;
@@ -12169,8 +12156,8 @@ ul.pf-v6-c-list {
12169
12156
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
12170
12157
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12171
12158
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12172
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12173
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12159
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12160
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12174
12161
  }
12175
12162
  .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 {
12176
12163
  padding: 0;
@@ -12196,25 +12183,14 @@ ul.pf-v6-c-list {
12196
12183
  }
12197
12184
 
12198
12185
  .pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
12199
- padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
12200
12186
  padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
12201
12187
  padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
12202
12188
  }
12203
12189
  .pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
12204
- padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
12205
- padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
12206
- padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
12207
- padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
12208
- }
12209
- .pf-v6-c-page__main-section .pf-v6-c-page__main-body {
12210
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12211
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12212
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12213
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12190
+ padding-inline-start: 0;
12191
+ padding-inline-end: 0;
12214
12192
  }
12215
12193
  .pf-v6-c-page__main-tabs .pf-v6-c-page__main-body {
12216
- padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
12217
- padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
12218
12194
  padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
12219
12195
  padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
12220
12196
  }
@@ -19548,6 +19524,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19548
19524
  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
19549
19525
  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
19550
19526
  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
19527
+ --pf-v6-c-toolbar__content--PaddingBlockStart: 0;
19551
19528
  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
19552
19529
  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19553
19530
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -329,7 +329,7 @@ cssPrefix: pf-v6-c-clipboard-copy
329
329
  <span class="pf-v6-c-clipboard-copy__actions">
330
330
  <span class="pf-v6-c-clipboard-copy__actions-item">
331
331
  <button
332
- class="pf-v6-c-button pf-m-plain"
332
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
333
333
  type="button"
334
334
  aria-label="Copy to clipboard"
335
335
  >
@@ -349,7 +349,7 @@ cssPrefix: pf-v6-c-clipboard-copy
349
349
  <span class="pf-v6-c-clipboard-copy__actions">
350
350
  <span class="pf-v6-c-clipboard-copy__actions-item">
351
351
  <button
352
- class="pf-v6-c-button pf-m-plain"
352
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
353
353
  type="button"
354
354
  aria-label="Copy to clipboard"
355
355
  >
@@ -369,7 +369,7 @@ cssPrefix: pf-v6-c-clipboard-copy
369
369
  <span class="pf-v6-c-clipboard-copy__actions">
370
370
  <span class="pf-v6-c-clipboard-copy__actions-item">
371
371
  <button
372
- class="pf-v6-c-button pf-m-plain"
372
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
373
373
  type="button"
374
374
  aria-label="Copy to clipboard"
375
375
  >
@@ -378,7 +378,7 @@ cssPrefix: pf-v6-c-clipboard-copy
378
378
  </span>
379
379
  <span class="pf-v6-c-clipboard-copy__actions-item">
380
380
  <button
381
- class="pf-v6-c-button pf-m-plain"
381
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
382
382
  type="button"
383
383
  aria-label="Run in web terminal"
384
384
  >
@@ -401,7 +401,7 @@ cssPrefix: pf-v6-c-clipboard-copy
401
401
  <span class="pf-v6-c-clipboard-copy__actions">
402
402
  <span class="pf-v6-c-clipboard-copy__actions-item">
403
403
  <button
404
- class="pf-v6-c-button pf-m-plain"
404
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
405
405
  type="button"
406
406
  aria-label="Copy to clipboard"
407
407
  >
@@ -424,7 +424,7 @@ cssPrefix: pf-v6-c-clipboard-copy
424
424
  <span class="pf-v6-c-clipboard-copy__actions">
425
425
  <span class="pf-v6-c-clipboard-copy__actions-item">
426
426
  <button
427
- class="pf-v6-c-button pf-m-plain"
427
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
428
428
  type="button"
429
429
  aria-label="Copy to clipboard"
430
430
  >
@@ -446,7 +446,7 @@ cssPrefix: pf-v6-c-clipboard-copy
446
446
  <span class="pf-v6-c-clipboard-copy__actions">
447
447
  <span class="pf-v6-c-clipboard-copy__actions-item">
448
448
  <button
449
- class="pf-v6-c-button pf-m-plain"
449
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
450
450
  type="button"
451
451
  aria-label="Copy to clipboard"
452
452
  >
package/docs/components/Page/examples/Page.css CHANGED
@@ -1,9 +1,5 @@
1
- #ws-core-c-page-with-or-without-fill .ws-preview-html,
2
- #ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
3
- height: 500px;
4
- }
5
-
6
- #ws-core-c-page-multiple-sidebar-body-elements .ws-preview-html,
7
- #ws-core-c-page-using-flex-layout .ws-preview-html {
8
- height: 100%;
9
- }
1
+ /* Because the page component has height:100dvh, override it just for the embedded examples */
2
+ .ws-mdx-content-content [id^=ws-core-c-page-] .ws-preview-html .pf-v6-c-page {
3
+ height: min-content;
4
+ min-height: 30em;
5
+ }
package/docs/components/Page/examples/Page.md CHANGED
@@ -34,17 +34,34 @@ wrapperTag: div
34
34
  <div class="pf-v6-c-page__main-container" tabindex="-1">
35
35
  <main class="pf-v6-c-page__main" tabindex="-1">
36
36
  <section class="pf-v6-c-page__main-section">
37
- This is a default
38
- <code>.pf-v6-c-page__main-section</code>.
37
+ <div class="pf-v6-c-page__main-body">
38
+ This is a default
39
+ <code>.pf-v6-c-page__main-section</code>.
40
+ </div>
39
41
  </section>
40
42
  <section class="pf-v6-c-page__main-section pf-m-secondary">
41
- This
42
- <code>.pf-v6-c-page__main-section</code> uses
43
- <code>.pf-m-secondary</code>.
43
+ <div class="pf-v6-c-page__main-body">
44
+ This
45
+ <code>.pf-v6-c-page__main-section</code> uses
46
+ <code>.pf-m-secondary</code>.
47
+ </div>
44
48
  </section>
45
49
  <section class="pf-v6-c-page__main-section">
46
- This is a default
47
- <code>.pf-v6-c-page__main-section</code>.
50
+ <div class="pf-v6-c-page__main-body">
51
+ This is a default
52
+ <code>.pf-v6-c-page__main-section</code>.
53
+ </div>
54
+ </section>
55
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
56
+ <div
57
+ class="pf-v6-c-page__main-body"
58
+ >This is a page__main-body, one of three within one page__main-section.</div>
59
+ <div
60
+ class="pf-v6-c-page__main-body"
61
+ >This is a page__main-body, one of three within one page__main-section.</div>
62
+ <div
63
+ class="pf-v6-c-page__main-body"
64
+ >This is a page__main-body, one of three within one page__main-section.</div>
48
65
  </section>
49
66
  </main>
50
67
  </div>
@@ -76,17 +93,23 @@ wrapperTag: div
76
93
  <div class="pf-v6-c-page__main-container" tabindex="-1">
77
94
  <main class="pf-v6-c-page__main" tabindex="-1">
78
95
  <section class="pf-v6-c-page__main-section">
79
- This is a default
80
- <code>.pf-v6-c-page__main-section</code>.
96
+ <div class="pf-v6-c-page__main-body">
97
+ This is a default
98
+ <code>.pf-v6-c-page__main-section</code>.
99
+ </div>
81
100
  </section>
82
101
  <section class="pf-v6-c-page__main-section pf-m-secondary">
83
- This
84
- <code>.pf-v6-c-page__main-section</code> uses
85
- <code>.pf-m-secondary</code>.
102
+ <div class="pf-v6-c-page__main-body">
103
+ This
104
+ <code>.pf-v6-c-page__main-section</code> uses
105
+ <code>.pf-m-secondary</code>.
106
+ </div>
86
107
  </section>
87
108
  <section class="pf-v6-c-page__main-section">
88
- This is a default
89
- <code>.pf-v6-c-page__main-section</code>.
109
+ <div class="pf-v6-c-page__main-body">
110
+ This is a default
111
+ <code>.pf-v6-c-page__main-section</code>.
112
+ </div>
90
113
  </section>
91
114
  </main>
92
115
  </div>
@@ -124,7 +147,9 @@ wrapperTag: div
124
147
  </div>
125
148
  <div class="pf-v6-c-page__main-container" tabindex="-1">
126
149
  <main class="pf-v6-c-page__main" tabindex="-1">
127
- <section class="pf-v6-c-page__main-section"></section>
150
+ <section class="pf-v6-c-page__main-section">
151
+ <div class="pf-v6-c-page__main-body"></div>
152
+ </section>
128
153
  </main>
129
154
  </div>
130
155
  </div>
@@ -154,14 +179,20 @@ wrapperTag: div
154
179
  </header>
155
180
  <div class="pf-v6-c-page__main-container" tabindex="-1">
156
181
  <main class="pf-v6-c-page__main" tabindex="-1">
157
- <section class="pf-v6-c-page__main-section">A regular page section.</section>
182
+ <section class="pf-v6-c-page__main-section">
183
+ <div class="pf-v6-c-page__main-body">A regular page section.</div>
184
+ </section>
158
185
  <section class="pf-v6-c-page__main-section pf-m-fill">
159
- This section uses
160
- <code>.pf-m-fill</code> to fill the available space.
186
+ <div class="pf-v6-c-page__main-body">
187
+ This section uses
188
+ <code>.pf-m-fill</code> to fill the available space.
189
+ </div>
161
190
  </section>
162
191
  <section class="pf-v6-c-page__main-section pf-m-no-fill">
163
- This section uses
164
- <code>.pf-m-no-fill</code> to not fill the available space.
192
+ <div class="pf-v6-c-page__main-body">
193
+ This section uses
194
+ <code>.pf-m-no-fill</code> to not fill the available space.
195
+ </div>
165
196
  </section>
166
197
  </main>
167
198
  </div>
@@ -196,21 +227,27 @@ wrapperTag: div
196
227
  <div class="pf-v6-c-page__main-container" tabindex="-1">
197
228
  <main class="pf-v6-c-page__main" tabindex="-1">
198
229
  <section class="pf-v6-c-page__main-section">
199
- This
200
- <code>.pf-v6-c-page__main-section</code> has default padding.
230
+ <div class="pf-v6-c-page__main-body">
231
+ This
232
+ <code>.pf-v6-c-page__main-section</code> has default padding.
233
+ </div>
201
234
  </section>
202
235
  <section class="pf-v6-c-page__main-section pf-m-no-padding">
203
- This
204
- <code>.pf-v6-c-page__main-section</code> uses
205
- <code>.pf-m-no-padding</code> to remove all padding.
236
+ <div class="pf-v6-c-page__main-body">
237
+ This
238
+ <code>.pf-v6-c-page__main-section</code> uses
239
+ <code>.pf-m-no-padding</code> to remove all padding.
240
+ </div>
206
241
  </section>
207
242
  <section
208
243
  class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
209
244
  >
210
- This
211
- <code>.pf-v6-c-page__main-section</code> uses
212
- <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
213
- <code>md</code> breakpoint.
245
+ <div class="pf-v6-c-page__main-body">
246
+ This
247
+ <code>.pf-v6-c-page__main-section</code> uses
248
+ <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
249
+ <code>md</code> breakpoint.
250
+ </div>
214
251
  </section>
215
252
  </main>
216
253
  </div>
@@ -260,7 +297,9 @@ wrapperTag: div
260
297
  <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
261
298
  </section>
262
299
  <section class="pf-v6-c-page__main-section">
263
- <code>.pf-v6-c-page__main-section</code> for main sections
300
+ <div class="pf-v6-c-page__main-body">
301
+ <code>.pf-v6-c-page__main-section</code> for main sections
302
+ </div>
264
303
  </section>
265
304
  <section class="pf-v6-c-page__main-wizard">
266
305
  <code>.pf-v6-c-page__main-wizard</code> for wizards
@@ -340,10 +379,10 @@ This component provides the basic chrome for a page, including sidebar and main
340
379
  | `.pf-v6-c-page__main-nav` | `<section>` | Creates a container to nest the (deprecated) tertiary navigation component in the main page area. |
341
380
  | `.pf-v6-c-page__main-subnav` | `<section>` | Creates a container to nest the horizontal subnav navigation component in the main page area. |
342
381
  | `.pf-v6-c-page__main-breadcrumb` | `<section>` | Creates a container to nest the breadcrumb component in the main page area. |
343
- | `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: The last/only `.pf-v6-c-page__main-section` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
382
+ | `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: The last/only `.pf-v6-c-page__main-section` element will grow to fill the available vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
344
383
  | `.pf-v6-c-page__main-tabs` | `<section>` | Creates a container to nest the tabs component in the main page area. |
345
384
  | `.pf-v6-c-page__main-wizard` | `<section>` | Creates a container to nest the wizard component in the main page area. |
346
- | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-v6-c-page__main-section`** |
385
+ | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
347
386
  | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
348
387
  | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
349
388
  | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |