@patternfly/patternfly 6.0.0-alpha.160 → 6.0.0-alpha.162

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 (24) hide show
  1. package/components/Nav/nav.css +1 -0
  2. package/components/Nav/nav.scss +1 -0
  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 +40 -54
  8. package/docs/components/Page/examples/Page.css +5 -9
  9. package/docs/components/Page/examples/Page.md +71 -32
  10. package/docs/demos/Alert/examples/Alert.md +393 -374
  11. package/docs/demos/CardView/examples/CardView.md +717 -708
  12. package/docs/demos/DataList/examples/DataList.md +2574 -2500
  13. package/docs/demos/Drawer/examples/Drawer.md +190 -182
  14. package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
  15. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
  16. package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
  17. package/docs/demos/Table/examples/Table.md +9458 -9105
  18. package/docs/demos/Tabs/examples/Tabs.md +889 -885
  19. package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
  20. package/package.json +1 -1
  21. package/patternfly-no-globals.css +40 -54
  22. package/patternfly.css +40 -54
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/components/_index.css CHANGED
@@ -10967,6 +10967,7 @@ ul.pf-v6-c-list {
10967
10967
  line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
10968
10968
  color: var(--pf-v6-c-nav__link--Color);
10969
10969
  text-align: start;
10970
+ text-decoration: none;
10970
10971
  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
10971
10972
  border: none;
10972
10973
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
@@ -11525,11 +11526,11 @@ ul.pf-v6-c-list {
11525
11526
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
11526
11527
  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
11527
11528
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
11528
- --pf-v6-c-page__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
11529
- --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11530
- --pf-v6-c-page__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
11531
- --pf-v6-c-page__main-section--PaddingBlockEnd: 0;
11532
- --pf-v6-c-page__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
11529
+ --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11530
+ --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11531
+ --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11532
+ --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11533
+ --pf-v6-c-page__main-section--RowGap: var(--pf-t--global--spacer--lg);
11533
11534
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11534
11535
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11535
11536
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -11564,6 +11565,7 @@ ul.pf-v6-c-list {
11564
11565
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
11565
11566
  --pf-v6-c-page__main-tabs--PaddingInlineEnd: 0;
11566
11567
  --pf-v6-c-page__main-tabs--PaddingBlockEnd: 0;
11568
+ --pf-v6-c-page__main-tabs--PaddingInlineStart: 0;
11567
11569
  --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11568
11570
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11569
11571
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
@@ -11675,21 +11677,11 @@ ul.pf-v6-c-list {
11675
11677
  flex-grow: 0;
11676
11678
  }
11677
11679
 
11678
- .pf-v6-c-page__main-nav.pf-m-limit-width,
11679
- .pf-v6-c-page__main-breadcrumb.pf-m-limit-width,
11680
- .pf-v6-c-page__main-tabs.pf-m-limit-width,
11681
- .pf-v6-c-page__main-section.pf-m-limit-width,
11682
- .pf-v6-c-page__main-wizard.pf-m-limit-width {
11683
- display: flex;
11684
- flex-direction: column;
11685
- padding: 0;
11686
- }
11687
11680
  .pf-v6-c-page__main-nav.pf-m-limit-width > .pf-v6-c-page__main-body,
11688
11681
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
11689
11682
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
11690
11683
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
11691
11684
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
11692
- flex: 1;
11693
11685
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
11694
11686
  }
11695
11687
  .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
@@ -11714,6 +11706,8 @@ ul.pf-v6-c-list {
11714
11706
  .pf-v6-c-page__main-wizard,
11715
11707
  .pf-v6-c-page__main-group,
11716
11708
  .pf-v6-c-page__main-subnav {
11709
+ display: flex;
11710
+ flex-direction: column;
11717
11711
  flex-shrink: 0;
11718
11712
  }
11719
11713
  .pf-v6-c-page__main-nav.pf-m-overflow-scroll,
@@ -11934,6 +11928,7 @@ ul.pf-v6-c-list {
11934
11928
  .pf-v6-c-page__main-list {
11935
11929
  display: flex;
11936
11930
  flex-direction: column;
11931
+ flex-grow: 1;
11937
11932
  }
11938
11933
 
11939
11934
  .pf-v6-c-page__main-nav {
@@ -12048,10 +12043,11 @@ ul.pf-v6-c-list {
12048
12043
  }
12049
12044
 
12050
12045
  .pf-v6-c-page__main-section {
12046
+ gap: var(--pf-v6-c-page__main-section--RowGap);
12051
12047
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12052
12048
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12053
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12054
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12049
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12050
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12055
12051
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
12056
12052
  }
12057
12053
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -12060,8 +12056,8 @@ ul.pf-v6-c-list {
12060
12056
  .pf-v6-c-page__main-section.pf-m-padding {
12061
12057
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12062
12058
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12063
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12064
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12059
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12060
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12065
12061
  }
12066
12062
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width {
12067
12063
  padding: 0;
@@ -12069,8 +12065,8 @@ ul.pf-v6-c-list {
12069
12065
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v6-c-page__main-body {
12070
12066
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12071
12067
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12072
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12073
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12068
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12069
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12074
12070
  }
12075
12071
  .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 {
12076
12072
  padding: 0;
@@ -12079,8 +12075,8 @@ ul.pf-v6-c-list {
12079
12075
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
12080
12076
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12081
12077
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12082
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12083
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12078
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12079
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12084
12080
  }
12085
12081
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
12086
12082
  padding: 0;
@@ -12088,8 +12084,8 @@ ul.pf-v6-c-list {
12088
12084
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
12089
12085
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12090
12086
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12091
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12092
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12087
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12088
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12093
12089
  }
12094
12090
  .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 {
12095
12091
  padding: 0;
@@ -12099,8 +12095,8 @@ ul.pf-v6-c-list {
12099
12095
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
12100
12096
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12101
12097
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12102
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12103
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12098
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12099
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12104
12100
  }
12105
12101
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
12106
12102
  padding: 0;
@@ -12108,8 +12104,8 @@ ul.pf-v6-c-list {
12108
12104
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
12109
12105
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12110
12106
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12111
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12112
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12107
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12108
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12113
12109
  }
12114
12110
  .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 {
12115
12111
  padding: 0;
@@ -12119,8 +12115,8 @@ ul.pf-v6-c-list {
12119
12115
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
12120
12116
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12121
12117
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12122
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12123
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12118
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12119
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12124
12120
  }
12125
12121
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
12126
12122
  padding: 0;
@@ -12128,8 +12124,8 @@ ul.pf-v6-c-list {
12128
12124
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
12129
12125
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12130
12126
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12131
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12132
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12127
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12128
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12133
12129
  }
12134
12130
  .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 {
12135
12131
  padding: 0;
@@ -12139,8 +12135,8 @@ ul.pf-v6-c-list {
12139
12135
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
12140
12136
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12141
12137
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12142
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12143
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12138
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12139
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12144
12140
  }
12145
12141
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
12146
12142
  padding: 0;
@@ -12148,8 +12144,8 @@ ul.pf-v6-c-list {
12148
12144
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
12149
12145
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12150
12146
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12151
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12152
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12147
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12148
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12153
12149
  }
12154
12150
  .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 {
12155
12151
  padding: 0;
@@ -12159,8 +12155,8 @@ ul.pf-v6-c-list {
12159
12155
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
12160
12156
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12161
12157
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12162
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12163
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12158
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12159
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12164
12160
  }
12165
12161
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
12166
12162
  padding: 0;
@@ -12168,8 +12164,8 @@ ul.pf-v6-c-list {
12168
12164
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
12169
12165
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12170
12166
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12171
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12172
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12167
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12168
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12173
12169
  }
12174
12170
  .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 {
12175
12171
  padding: 0;
@@ -12195,25 +12191,14 @@ ul.pf-v6-c-list {
12195
12191
  }
12196
12192
 
12197
12193
  .pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
12198
- padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
12199
12194
  padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
12200
12195
  padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
12201
12196
  }
12202
12197
  .pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
12203
- padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
12204
- padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
12205
- padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
12206
- padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
12207
- }
12208
- .pf-v6-c-page__main-section .pf-v6-c-page__main-body {
12209
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12210
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12211
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
12212
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
12198
+ padding-inline-start: 0;
12199
+ padding-inline-end: 0;
12213
12200
  }
12214
12201
  .pf-v6-c-page__main-tabs .pf-v6-c-page__main-body {
12215
- padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
12216
- padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
12217
12202
  padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
12218
12203
  padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
12219
12204
  }
@@ -19547,6 +19532,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19547
19532
  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
19548
19533
  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
19549
19534
  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
19535
+ --pf-v6-c-toolbar__content--PaddingBlockStart: 0;
19550
19536
  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
19551
19537
  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19552
19538
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
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. |