@patternfly/react-core 6.0.0-alpha.82 → 6.0.0-alpha.83

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 (184) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/AboutModal/package.json +1 -1
  5. package/dist/dynamic/components/Accordion/package.json +1 -1
  6. package/dist/dynamic/components/ActionList/package.json +1 -1
  7. package/dist/dynamic/components/Alert/package.json +1 -1
  8. package/dist/dynamic/components/Avatar/package.json +1 -1
  9. package/dist/dynamic/components/BackToTop/package.json +1 -1
  10. package/dist/dynamic/components/Backdrop/package.json +1 -1
  11. package/dist/dynamic/components/BackgroundImage/package.json +1 -1
  12. package/dist/dynamic/components/Badge/package.json +1 -1
  13. package/dist/dynamic/components/Banner/package.json +1 -1
  14. package/dist/dynamic/components/Brand/package.json +1 -1
  15. package/dist/dynamic/components/Breadcrumb/package.json +1 -1
  16. package/dist/dynamic/components/Button/package.json +1 -1
  17. package/dist/dynamic/components/CalendarMonth/package.json +1 -1
  18. package/dist/dynamic/components/Card/package.json +1 -1
  19. package/dist/dynamic/components/Checkbox/package.json +1 -1
  20. package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
  21. package/dist/dynamic/components/CodeBlock/package.json +1 -1
  22. package/dist/dynamic/components/Content/package.json +1 -1
  23. package/dist/dynamic/components/DataList/package.json +1 -1
  24. package/dist/dynamic/components/DatePicker/package.json +1 -1
  25. package/dist/dynamic/components/DescriptionList/package.json +1 -1
  26. package/dist/dynamic/components/Divider/package.json +1 -1
  27. package/dist/dynamic/components/Drawer/package.json +1 -1
  28. package/dist/dynamic/components/Dropdown/package.json +1 -1
  29. package/dist/dynamic/components/DualListSelector/package.json +1 -1
  30. package/dist/dynamic/components/EmptyState/package.json +1 -1
  31. package/dist/dynamic/components/ExpandableSection/package.json +1 -1
  32. package/dist/dynamic/components/FileUpload/package.json +1 -1
  33. package/dist/dynamic/components/Form/package.json +1 -1
  34. package/dist/dynamic/components/FormSelect/package.json +1 -1
  35. package/dist/dynamic/components/HelperText/package.json +1 -1
  36. package/dist/dynamic/components/Hint/package.json +1 -1
  37. package/dist/dynamic/components/Icon/package.json +1 -1
  38. package/dist/dynamic/components/InputGroup/package.json +1 -1
  39. package/dist/dynamic/components/JumpLinks/package.json +1 -1
  40. package/dist/dynamic/components/Label/package.json +1 -1
  41. package/dist/dynamic/components/List/package.json +1 -1
  42. package/dist/dynamic/components/LoginPage/package.json +1 -1
  43. package/dist/dynamic/components/Masthead/package.json +1 -1
  44. package/dist/dynamic/components/Menu/package.json +1 -1
  45. package/dist/dynamic/components/MenuToggle/package.json +1 -1
  46. package/dist/dynamic/components/Modal/package.json +1 -1
  47. package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
  48. package/dist/dynamic/components/Nav/package.json +1 -1
  49. package/dist/dynamic/components/NotificationBadge/package.json +1 -1
  50. package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
  51. package/dist/dynamic/components/NumberInput/package.json +1 -1
  52. package/dist/dynamic/components/OverflowMenu/package.json +1 -1
  53. package/dist/dynamic/components/Page/package.json +1 -1
  54. package/dist/dynamic/components/Pagination/package.json +1 -1
  55. package/dist/dynamic/components/Panel/package.json +1 -1
  56. package/dist/dynamic/components/Popover/package.json +1 -1
  57. package/dist/dynamic/components/Progress/package.json +1 -1
  58. package/dist/dynamic/components/ProgressStepper/package.json +1 -1
  59. package/dist/dynamic/components/Radio/package.json +1 -1
  60. package/dist/dynamic/components/SearchInput/package.json +1 -1
  61. package/dist/dynamic/components/Select/package.json +1 -1
  62. package/dist/dynamic/components/Sidebar/package.json +1 -1
  63. package/dist/dynamic/components/SimpleList/package.json +1 -1
  64. package/dist/dynamic/components/Skeleton/package.json +1 -1
  65. package/dist/dynamic/components/SkipToContent/package.json +1 -1
  66. package/dist/dynamic/components/Slider/package.json +1 -1
  67. package/dist/dynamic/components/Spinner/package.json +1 -1
  68. package/dist/dynamic/components/Switch/package.json +1 -1
  69. package/dist/dynamic/components/Tabs/package.json +1 -1
  70. package/dist/dynamic/components/TextArea/package.json +1 -1
  71. package/dist/dynamic/components/TextInput/package.json +1 -1
  72. package/dist/dynamic/components/TextInputGroup/package.json +1 -1
  73. package/dist/dynamic/components/Tile/package.json +1 -1
  74. package/dist/dynamic/components/TimePicker/package.json +1 -1
  75. package/dist/dynamic/components/Timestamp/package.json +1 -1
  76. package/dist/dynamic/components/Title/package.json +1 -1
  77. package/dist/dynamic/components/ToggleGroup/package.json +1 -1
  78. package/dist/dynamic/components/Toolbar/package.json +1 -1
  79. package/dist/dynamic/components/Tooltip/package.json +1 -1
  80. package/dist/dynamic/components/TreeView/package.json +1 -1
  81. package/dist/dynamic/components/Truncate/package.json +1 -1
  82. package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
  83. package/dist/dynamic/components/Wizard/package.json +1 -1
  84. package/dist/dynamic/deprecated/components/Chip/package.json +1 -1
  85. package/dist/dynamic/deprecated/components/DragDrop/package.json +1 -1
  86. package/dist/dynamic/deprecated/components/DualListSelector/package.json +1 -1
  87. package/dist/dynamic/deprecated/components/Modal/package.json +1 -1
  88. package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
  89. package/dist/dynamic/deprecated/components/package.json +1 -1
  90. package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
  91. package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
  92. package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
  93. package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
  94. package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
  95. package/dist/dynamic/helpers/constants/package.json +1 -1
  96. package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
  97. package/dist/dynamic/helpers/fileUtils/package.json +1 -1
  98. package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
  99. package/dist/dynamic/helpers/package.json +1 -1
  100. package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
  101. package/dist/dynamic/helpers/typeUtils/package.json +1 -1
  102. package/dist/dynamic/helpers/useInterval/package.json +1 -1
  103. package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
  104. package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
  105. package/dist/dynamic/helpers/util/package.json +1 -1
  106. package/dist/dynamic/layouts/Bullseye/package.json +1 -1
  107. package/dist/dynamic/layouts/Flex/package.json +1 -1
  108. package/dist/dynamic/layouts/Gallery/package.json +1 -1
  109. package/dist/dynamic/layouts/Grid/package.json +1 -1
  110. package/dist/dynamic/layouts/Level/package.json +1 -1
  111. package/dist/dynamic/layouts/Split/package.json +1 -1
  112. package/dist/dynamic/layouts/Stack/package.json +1 -1
  113. package/dist/dynamic/styles/package.json +1 -1
  114. package/dist/dynamic-modules.json +2 -2
  115. package/dist/esm/components/Page/Page.d.ts.map +1 -1
  116. package/dist/esm/components/Page/Page.js +8 -8
  117. package/dist/esm/components/Page/Page.js.map +1 -1
  118. package/dist/esm/components/Page/PageBody.d.ts +9 -0
  119. package/dist/esm/components/Page/PageBody.d.ts.map +1 -0
  120. package/dist/esm/components/Page/PageBody.js +10 -0
  121. package/dist/esm/components/Page/PageBody.js.map +1 -0
  122. package/dist/esm/components/Page/PageBreadcrumb.d.ts +5 -1
  123. package/dist/esm/components/Page/PageBreadcrumb.d.ts.map +1 -1
  124. package/dist/esm/components/Page/PageBreadcrumb.js +3 -4
  125. package/dist/esm/components/Page/PageBreadcrumb.js.map +1 -1
  126. package/dist/esm/components/Page/PageSection.d.ts +5 -2
  127. package/dist/esm/components/Page/PageSection.d.ts.map +1 -1
  128. package/dist/esm/components/Page/PageSection.js +3 -6
  129. package/dist/esm/components/Page/PageSection.js.map +1 -1
  130. package/dist/esm/components/Page/index.d.ts +1 -1
  131. package/dist/esm/components/Page/index.d.ts.map +1 -1
  132. package/dist/esm/components/Page/index.js +1 -1
  133. package/dist/esm/components/Page/index.js.map +1 -1
  134. package/dist/js/components/Page/Page.d.ts.map +1 -1
  135. package/dist/js/components/Page/Page.js +7 -7
  136. package/dist/js/components/Page/Page.js.map +1 -1
  137. package/dist/js/components/Page/PageBody.d.ts +9 -0
  138. package/dist/js/components/Page/PageBody.d.ts.map +1 -0
  139. package/dist/js/components/Page/PageBody.js +14 -0
  140. package/dist/js/components/Page/PageBody.js.map +1 -0
  141. package/dist/js/components/Page/PageBreadcrumb.d.ts +5 -1
  142. package/dist/js/components/Page/PageBreadcrumb.d.ts.map +1 -1
  143. package/dist/js/components/Page/PageBreadcrumb.js +3 -4
  144. package/dist/js/components/Page/PageBreadcrumb.js.map +1 -1
  145. package/dist/js/components/Page/PageSection.d.ts +5 -2
  146. package/dist/js/components/Page/PageSection.d.ts.map +1 -1
  147. package/dist/js/components/Page/PageSection.js +3 -6
  148. package/dist/js/components/Page/PageSection.js.map +1 -1
  149. package/dist/js/components/Page/index.d.ts +1 -1
  150. package/dist/js/components/Page/index.d.ts.map +1 -1
  151. package/dist/js/components/Page/index.js +1 -1
  152. package/dist/js/components/Page/index.js.map +1 -1
  153. package/dist/umd/assets/{output-CJBOn_jY.css → output-ZK-DtcVp.css} +1672 -1672
  154. package/dist/umd/react-core.min.js +1 -1
  155. package/helpers/package.json +1 -1
  156. package/layouts/package.json +1 -1
  157. package/next/package.json +1 -1
  158. package/package.json +2 -2
  159. package/src/components/Page/Page.tsx +11 -21
  160. package/src/components/Page/PageBody.tsx +18 -0
  161. package/src/components/Page/PageBreadcrumb.tsx +7 -2
  162. package/src/components/Page/PageSection.tsx +8 -5
  163. package/src/components/Page/__tests__/Page.test.tsx +11 -41
  164. package/src/components/Page/__tests__/PageBody.test.tsx +34 -0
  165. package/src/components/Page/__tests__/PageBreadcrumb.test.tsx +14 -1
  166. package/src/components/Page/__tests__/PageSection.test.tsx +15 -2
  167. package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +950 -973
  168. package/src/components/Page/__tests__/__snapshots__/PageBody.test.tsx.snap +11 -0
  169. package/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap +30 -6
  170. package/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap +66 -14
  171. package/src/components/Page/examples/Page.md +2 -11
  172. package/src/components/Page/examples/PageGroupSection.tsx +19 -22
  173. package/src/components/Page/index.ts +1 -1
  174. package/dist/esm/components/Page/PageNavigation.d.ts +0 -31
  175. package/dist/esm/components/Page/PageNavigation.d.ts.map +0 -1
  176. package/dist/esm/components/Page/PageNavigation.js +0 -21
  177. package/dist/esm/components/Page/PageNavigation.js.map +0 -1
  178. package/dist/js/components/Page/PageNavigation.d.ts +0 -31
  179. package/dist/js/components/Page/PageNavigation.d.ts.map +0 -1
  180. package/dist/js/components/Page/PageNavigation.js +0 -25
  181. package/dist/js/components/Page/PageNavigation.js.map +0 -1
  182. package/src/components/Page/PageNavigation.tsx +0 -72
  183. package/src/components/Page/__tests__/PageNavigation.test.tsx +0 -78
  184. package/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap +0 -77
package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap CHANGED
@@ -31,7 +31,11 @@ exports[`Page Check dark page against snapshot 1`] = `
31
31
  <section
32
32
  class="pf-v6-c-page__main-section"
33
33
  >
34
- Section with default background
34
+ <div
35
+ class="pf-v6-c-page__main-body"
36
+ >
37
+ Section with default background
38
+ </div>
35
39
  </section>
36
40
  </main>
37
41
  </div>
@@ -64,144 +68,11 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
64
68
  <section
65
69
  class="pf-v6-c-page__main-section"
66
70
  >
67
- Section with default background
68
- </section>
69
- </main>
70
- </div>
71
- </div>
72
- </DocumentFragment>
73
- `;
74
-
75
- exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = `
76
- <DocumentFragment>
77
- <div
78
- aria-label="Page layout"
79
- class="pf-v6-c-page my-page-class"
80
- id="PageId"
81
- >
82
- <header
83
- class="pf-v6-c-masthead pf-m-display-inline-on-md"
84
- />
85
- <div
86
- aria-hidden="false"
87
- class="pf-v6-c-page__sidebar pf-m-expanded"
88
- id="page-sidebar"
89
- />
90
- <div
91
- class="pf-v6-c-page__main-container"
92
- >
93
- <main
94
- class="pf-v6-c-page__main"
95
- tabindex="-1"
96
- >
97
- <section
98
- class="pf-v6-c-page__main-breadcrumb"
99
- >
100
- <nav
101
- aria-label="Breadcrumb"
102
- class="pf-v6-c-breadcrumb"
103
- data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
104
- data-ouia-component-type="PF6/Breadcrumb"
105
- data-ouia-safe="true"
71
+ <div
72
+ class="pf-v6-c-page__main-body"
106
73
  >
107
- <ol
108
- class="pf-v6-c-breadcrumb__list"
109
- role="list"
110
- >
111
- <li
112
- class="pf-v6-c-breadcrumb__item"
113
- >
114
- Section Home
115
- </li>
116
- <li
117
- class="pf-v6-c-breadcrumb__item"
118
- >
119
- <span
120
- class="pf-v6-c-breadcrumb__item-divider"
121
- >
122
- <svg
123
- aria-hidden="true"
124
- class="pf-v6-svg"
125
- fill="currentColor"
126
- height="1em"
127
- role="img"
128
- viewBox="0 0 256 512"
129
- width="1em"
130
- >
131
- <path
132
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
133
- />
134
- </svg>
135
- </span>
136
- <a
137
- class="pf-v6-c-breadcrumb__link"
138
- href="#"
139
- >
140
- Section Title
141
- </a>
142
- </li>
143
- <li
144
- class="pf-v6-c-breadcrumb__item"
145
- >
146
- <span
147
- class="pf-v6-c-breadcrumb__item-divider"
148
- >
149
- <svg
150
- aria-hidden="true"
151
- class="pf-v6-svg"
152
- fill="currentColor"
153
- height="1em"
154
- role="img"
155
- viewBox="0 0 256 512"
156
- width="1em"
157
- >
158
- <path
159
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
160
- />
161
- </svg>
162
- </span>
163
- <a
164
- class="pf-v6-c-breadcrumb__link"
165
- href="#"
166
- >
167
- Section Title
168
- </a>
169
- </li>
170
- <li
171
- class="pf-v6-c-breadcrumb__item"
172
- >
173
- <span
174
- class="pf-v6-c-breadcrumb__item-divider"
175
- >
176
- <svg
177
- aria-hidden="true"
178
- class="pf-v6-svg"
179
- fill="currentColor"
180
- height="1em"
181
- role="img"
182
- viewBox="0 0 256 512"
183
- width="1em"
184
- >
185
- <path
186
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
187
- />
188
- </svg>
189
- </span>
190
- <a
191
- aria-current="page"
192
- class="pf-v6-c-breadcrumb__link pf-m-current"
193
- href="#"
194
- >
195
- Section Landing
196
- </a>
197
- </li>
198
- </ol>
199
- </nav>
200
- </section>
201
- <section
202
- class="pf-v6-c-page__main-section"
203
- >
204
- Section with default background
74
+ Section with default background
75
+ </div>
205
76
  </section>
206
77
  </main>
207
78
  </div>
@@ -209,7 +80,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
209
80
  </DocumentFragment>
210
81
  `;
211
82
 
212
- exports[`Page Check page to verify breadcrumb is created 1`] = `
83
+ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = `
213
84
  <DocumentFragment>
214
85
  <div
215
86
  aria-label="Page layout"
@@ -234,150 +105,13 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
234
105
  <section
235
106
  class="pf-v6-c-page__main-breadcrumb"
236
107
  >
237
- <nav
238
- aria-label="Breadcrumb"
239
- class="pf-v6-c-breadcrumb"
240
- data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
241
- data-ouia-component-type="PF6/Breadcrumb"
242
- data-ouia-safe="true"
243
- >
244
- <ol
245
- class="pf-v6-c-breadcrumb__list"
246
- role="list"
247
- >
248
- <li
249
- class="pf-v6-c-breadcrumb__item"
250
- >
251
- Section Home
252
- </li>
253
- <li
254
- class="pf-v6-c-breadcrumb__item"
255
- >
256
- <span
257
- class="pf-v6-c-breadcrumb__item-divider"
258
- >
259
- <svg
260
- aria-hidden="true"
261
- class="pf-v6-svg"
262
- fill="currentColor"
263
- height="1em"
264
- role="img"
265
- viewBox="0 0 256 512"
266
- width="1em"
267
- >
268
- <path
269
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
270
- />
271
- </svg>
272
- </span>
273
- <a
274
- class="pf-v6-c-breadcrumb__link"
275
- href="#"
276
- >
277
- Section Title
278
- </a>
279
- </li>
280
- <li
281
- class="pf-v6-c-breadcrumb__item"
282
- >
283
- <span
284
- class="pf-v6-c-breadcrumb__item-divider"
285
- >
286
- <svg
287
- aria-hidden="true"
288
- class="pf-v6-svg"
289
- fill="currentColor"
290
- height="1em"
291
- role="img"
292
- viewBox="0 0 256 512"
293
- width="1em"
294
- >
295
- <path
296
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
297
- />
298
- </svg>
299
- </span>
300
- <a
301
- class="pf-v6-c-breadcrumb__link"
302
- href="#"
303
- >
304
- Section Title
305
- </a>
306
- </li>
307
- <li
308
- class="pf-v6-c-breadcrumb__item"
309
- >
310
- <span
311
- class="pf-v6-c-breadcrumb__item-divider"
312
- >
313
- <svg
314
- aria-hidden="true"
315
- class="pf-v6-svg"
316
- fill="currentColor"
317
- height="1em"
318
- role="img"
319
- viewBox="0 0 256 512"
320
- width="1em"
321
- >
322
- <path
323
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
324
- />
325
- </svg>
326
- </span>
327
- <a
328
- aria-current="page"
329
- class="pf-v6-c-breadcrumb__link pf-m-current"
330
- href="#"
331
- >
332
- Section Landing
333
- </a>
334
- </li>
335
- </ol>
336
- </nav>
337
- </section>
338
- <section
339
- class="pf-v6-c-page__main-section"
340
- >
341
- Section with default background
342
- </section>
343
- </main>
344
- </div>
345
- </div>
346
- </DocumentFragment>
347
- `;
348
-
349
- exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = `
350
- <DocumentFragment>
351
- <div
352
- aria-label="Page layout"
353
- class="pf-v6-c-page my-page-class"
354
- id="PageId"
355
- >
356
- <header
357
- class="pf-v6-c-masthead pf-m-display-inline-on-md"
358
- />
359
- <div
360
- aria-hidden="false"
361
- class="pf-v6-c-page__sidebar pf-m-expanded"
362
- id="page-sidebar"
363
- />
364
- <div
365
- class="pf-v6-c-page__main-container"
366
- >
367
- <main
368
- class="pf-v6-c-page__main"
369
- tabindex="-1"
370
- >
371
- <div
372
- class="pf-v6-c-page__main-group pf-m-sticky-bottom"
373
- >
374
- <section
375
- class="pf-v6-c-page__main-breadcrumb"
108
+ <div
109
+ class="pf-v6-c-page__main-body"
376
110
  >
377
111
  <nav
378
112
  aria-label="Breadcrumb"
379
113
  class="pf-v6-c-breadcrumb"
380
- data-ouia-component-id="OUIA-Generated-Breadcrumb-7"
114
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
381
115
  data-ouia-component-type="PF6/Breadcrumb"
382
116
  data-ouia-safe="true"
383
117
  >
@@ -474,110 +208,16 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
474
208
  </li>
475
209
  </ol>
476
210
  </nav>
477
- </section>
478
- <div
479
- class="pf-v6-c-page__main-nav"
480
- >
481
- <nav
482
- aria-label="Nav"
483
- class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
484
- data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
485
- data-ouia-component-type="PF6/Nav"
486
- data-ouia-safe="true"
487
- >
488
- <ul
489
- class="pf-v6-c-nav__list"
490
- role="list"
491
- >
492
- <li
493
- class="pf-v6-c-nav__item"
494
- data-ouia-component-id="OUIA-Generated-NavItem-6"
495
- data-ouia-component-type="PF6/NavItem"
496
- data-ouia-safe="true"
497
- >
498
- <a
499
- aria-current="page"
500
- class="pf-v6-c-nav__link pf-m-current"
501
- >
502
- <span
503
- class="pf-v6-c-nav__link-text"
504
- >
505
- System Panel
506
- </span>
507
- </a>
508
- </li>
509
- <li
510
- class="pf-v6-c-nav__item"
511
- data-ouia-component-id="OUIA-Generated-NavItem-7"
512
- data-ouia-component-type="PF6/NavItem"
513
- data-ouia-safe="true"
514
- >
515
- <a
516
- class="pf-v6-c-nav__link"
517
- >
518
- <span
519
- class="pf-v6-c-nav__link-text"
520
- >
521
- Policy
522
- </span>
523
- </a>
524
- </li>
525
- <li
526
- class="pf-v6-c-nav__item"
527
- data-ouia-component-id="OUIA-Generated-NavItem-8"
528
- data-ouia-component-type="PF6/NavItem"
529
- data-ouia-safe="true"
530
- >
531
- <a
532
- class="pf-v6-c-nav__link"
533
- >
534
- <span
535
- class="pf-v6-c-nav__link-text"
536
- >
537
- Authentication
538
- </span>
539
- </a>
540
- </li>
541
- <li
542
- class="pf-v6-c-nav__item"
543
- data-ouia-component-id="OUIA-Generated-NavItem-9"
544
- data-ouia-component-type="PF6/NavItem"
545
- data-ouia-safe="true"
546
- >
547
- <a
548
- class="pf-v6-c-nav__link"
549
- >
550
- <span
551
- class="pf-v6-c-nav__link-text"
552
- >
553
- Network Services
554
- </span>
555
- </a>
556
- </li>
557
- <li
558
- class="pf-v6-c-nav__item"
559
- data-ouia-component-id="OUIA-Generated-NavItem-10"
560
- data-ouia-component-type="PF6/NavItem"
561
- data-ouia-safe="true"
562
- >
563
- <a
564
- class="pf-v6-c-nav__link"
565
- >
566
- <span
567
- class="pf-v6-c-nav__link-text"
568
- >
569
- Server
570
- </span>
571
- </a>
572
- </li>
573
- </ul>
574
- </nav>
575
211
  </div>
576
- </div>
212
+ </section>
577
213
  <section
578
214
  class="pf-v6-c-page__main-section"
579
215
  >
580
- Section with default background
216
+ <div
217
+ class="pf-v6-c-page__main-body"
218
+ >
219
+ Section with default background
220
+ </div>
581
221
  </section>
582
222
  </main>
583
223
  </div>
@@ -585,7 +225,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
585
225
  </DocumentFragment>
586
226
  `;
587
227
 
588
- exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = `
228
+ exports[`Page Check page to verify breadcrumb is created 1`] = `
589
229
  <DocumentFragment>
590
230
  <div
591
231
  aria-label="Page layout"
@@ -607,120 +247,168 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
607
247
  class="pf-v6-c-page__main"
608
248
  tabindex="-1"
609
249
  >
610
- <div
611
- aria-label="test"
612
- class="pf-v6-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
613
- role="region"
614
- tabindex="0"
250
+ <section
251
+ class="pf-v6-c-page__main-breadcrumb"
615
252
  >
616
253
  <div
617
- class="pf-v6-c-page__main-nav"
254
+ class="pf-v6-c-page__main-body"
618
255
  >
619
- <nav
620
- aria-label="Nav"
621
- class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
622
- data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-3"
623
- data-ouia-component-type="PF6/Nav"
624
- data-ouia-safe="true"
256
+ <div
257
+ class="pf-v6-c-page__main-body"
625
258
  >
626
- <ul
627
- class="pf-v6-c-nav__list"
628
- role="list"
259
+ <nav
260
+ aria-label="Breadcrumb"
261
+ class="pf-v6-c-breadcrumb"
262
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
263
+ data-ouia-component-type="PF6/Breadcrumb"
264
+ data-ouia-safe="true"
629
265
  >
630
- <li
631
- class="pf-v6-c-nav__item"
632
- data-ouia-component-id="OUIA-Generated-NavItem-11"
633
- data-ouia-component-type="PF6/NavItem"
634
- data-ouia-safe="true"
635
- >
636
- <a
637
- aria-current="page"
638
- class="pf-v6-c-nav__link pf-m-current"
639
- >
640
- <span
641
- class="pf-v6-c-nav__link-text"
642
- >
643
- System Panel
644
- </span>
645
- </a>
646
- </li>
647
- <li
648
- class="pf-v6-c-nav__item"
649
- data-ouia-component-id="OUIA-Generated-NavItem-12"
650
- data-ouia-component-type="PF6/NavItem"
651
- data-ouia-safe="true"
266
+ <ol
267
+ class="pf-v6-c-breadcrumb__list"
268
+ role="list"
652
269
  >
653
- <a
654
- class="pf-v6-c-nav__link"
270
+ <li
271
+ class="pf-v6-c-breadcrumb__item"
655
272
  >
656
- <span
657
- class="pf-v6-c-nav__link-text"
658
- >
659
- Policy
660
- </span>
661
- </a>
662
- </li>
663
- <li
664
- class="pf-v6-c-nav__item"
665
- data-ouia-component-id="OUIA-Generated-NavItem-13"
666
- data-ouia-component-type="PF6/NavItem"
667
- data-ouia-safe="true"
668
- >
669
- <a
670
- class="pf-v6-c-nav__link"
273
+ Section Home
274
+ </li>
275
+ <li
276
+ class="pf-v6-c-breadcrumb__item"
671
277
  >
672
278
  <span
673
- class="pf-v6-c-nav__link-text"
279
+ class="pf-v6-c-breadcrumb__item-divider"
674
280
  >
675
- Authentication
281
+ <svg
282
+ aria-hidden="true"
283
+ class="pf-v6-svg"
284
+ fill="currentColor"
285
+ height="1em"
286
+ role="img"
287
+ viewBox="0 0 256 512"
288
+ width="1em"
289
+ >
290
+ <path
291
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
292
+ />
293
+ </svg>
676
294
  </span>
677
- </a>
678
- </li>
679
- <li
680
- class="pf-v6-c-nav__item"
681
- data-ouia-component-id="OUIA-Generated-NavItem-14"
682
- data-ouia-component-type="PF6/NavItem"
683
- data-ouia-safe="true"
684
- >
685
- <a
686
- class="pf-v6-c-nav__link"
295
+ <a
296
+ class="pf-v6-c-breadcrumb__link"
297
+ href="#"
298
+ >
299
+ Section Title
300
+ </a>
301
+ </li>
302
+ <li
303
+ class="pf-v6-c-breadcrumb__item"
687
304
  >
688
305
  <span
689
- class="pf-v6-c-nav__link-text"
306
+ class="pf-v6-c-breadcrumb__item-divider"
690
307
  >
691
- Network Services
308
+ <svg
309
+ aria-hidden="true"
310
+ class="pf-v6-svg"
311
+ fill="currentColor"
312
+ height="1em"
313
+ role="img"
314
+ viewBox="0 0 256 512"
315
+ width="1em"
316
+ >
317
+ <path
318
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
319
+ />
320
+ </svg>
692
321
  </span>
693
- </a>
694
- </li>
695
- <li
696
- class="pf-v6-c-nav__item"
697
- data-ouia-component-id="OUIA-Generated-NavItem-15"
698
- data-ouia-component-type="PF6/NavItem"
699
- data-ouia-safe="true"
700
- >
701
- <a
702
- class="pf-v6-c-nav__link"
322
+ <a
323
+ class="pf-v6-c-breadcrumb__link"
324
+ href="#"
325
+ >
326
+ Section Title
327
+ </a>
328
+ </li>
329
+ <li
330
+ class="pf-v6-c-breadcrumb__item"
703
331
  >
704
332
  <span
705
- class="pf-v6-c-nav__link-text"
333
+ class="pf-v6-c-breadcrumb__item-divider"
706
334
  >
707
- Server
335
+ <svg
336
+ aria-hidden="true"
337
+ class="pf-v6-svg"
338
+ fill="currentColor"
339
+ height="1em"
340
+ role="img"
341
+ viewBox="0 0 256 512"
342
+ width="1em"
343
+ >
344
+ <path
345
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
346
+ />
347
+ </svg>
708
348
  </span>
709
- </a>
710
- </li>
711
- </ul>
712
- </nav>
349
+ <a
350
+ aria-current="page"
351
+ class="pf-v6-c-breadcrumb__link pf-m-current"
352
+ href="#"
353
+ >
354
+ Section Landing
355
+ </a>
356
+ </li>
357
+ </ol>
358
+ </nav>
359
+ </div>
360
+ </div>
361
+ </section>
362
+ <section
363
+ class="pf-v6-c-page__main-section"
364
+ >
365
+ <div
366
+ class="pf-v6-c-page__main-body"
367
+ >
368
+ Section with default background
713
369
  </div>
370
+ </section>
371
+ </main>
372
+ </div>
373
+ </div>
374
+ </DocumentFragment>
375
+ `;
376
+
377
+ exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = `
378
+ <DocumentFragment>
379
+ <div
380
+ aria-label="Page layout"
381
+ class="pf-v6-c-page my-page-class"
382
+ id="PageId"
383
+ >
384
+ <header
385
+ class="pf-v6-c-masthead pf-m-display-inline-on-md"
386
+ />
387
+ <div
388
+ aria-hidden="false"
389
+ class="pf-v6-c-page__sidebar pf-m-expanded"
390
+ id="page-sidebar"
391
+ />
392
+ <div
393
+ class="pf-v6-c-page__main-container"
394
+ >
395
+ <main
396
+ class="pf-v6-c-page__main"
397
+ tabindex="-1"
398
+ >
399
+ <div
400
+ class="pf-v6-c-page__main-group pf-m-sticky-bottom"
401
+ >
714
402
  <section
715
403
  class="pf-v6-c-page__main-breadcrumb"
716
404
  >
717
- <section
718
- class="pf-v6-c-page__main-breadcrumb"
405
+ <div
406
+ class="pf-v6-c-page__main-body"
719
407
  >
720
408
  <nav
721
409
  aria-label="Breadcrumb"
722
410
  class="pf-v6-c-breadcrumb"
723
- data-ouia-component-id="OUIA-Generated-Breadcrumb-8"
411
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-7"
724
412
  data-ouia-component-type="PF6/Breadcrumb"
725
413
  data-ouia-safe="true"
726
414
  >
@@ -817,45 +505,8 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
817
505
  </li>
818
506
  </ol>
819
507
  </nav>
820
- </section>
508
+ </div>
821
509
  </section>
822
- </div>
823
- <section
824
- class="pf-v6-c-page__main-section"
825
- >
826
- Section with default background
827
- </section>
828
- </main>
829
- </div>
830
- </div>
831
- </DocumentFragment>
832
- `;
833
-
834
- exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] = `
835
- <DocumentFragment>
836
- <div
837
- aria-label="Page layout"
838
- class="pf-v6-c-page my-page-class"
839
- id="PageId"
840
- >
841
- <header
842
- class="pf-v6-c-masthead pf-m-display-inline-on-md"
843
- />
844
- <div
845
- aria-hidden="false"
846
- class="pf-v6-c-page__sidebar pf-m-expanded"
847
- id="page-sidebar"
848
- />
849
- <div
850
- class="pf-v6-c-page__main-container"
851
- >
852
- <main
853
- class="pf-v6-c-page__main"
854
- tabindex="-1"
855
- >
856
- <div
857
- class="pf-v6-c-page__main-nav"
858
- >
859
510
  <nav
860
511
  aria-label="Nav"
861
512
  class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
@@ -954,7 +605,277 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
954
605
  <section
955
606
  class="pf-v6-c-page__main-section"
956
607
  >
957
- Section with default background
608
+ <div
609
+ class="pf-v6-c-page__main-body"
610
+ >
611
+ Section with default background
612
+ </div>
613
+ </section>
614
+ </main>
615
+ </div>
616
+ </div>
617
+ </DocumentFragment>
618
+ `;
619
+
620
+ exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = `
621
+ <DocumentFragment>
622
+ <div
623
+ aria-label="Page layout"
624
+ class="pf-v6-c-page my-page-class"
625
+ id="PageId"
626
+ >
627
+ <header
628
+ class="pf-v6-c-masthead pf-m-display-inline-on-md"
629
+ />
630
+ <div
631
+ aria-hidden="false"
632
+ class="pf-v6-c-page__sidebar pf-m-expanded"
633
+ id="page-sidebar"
634
+ />
635
+ <div
636
+ class="pf-v6-c-page__main-container"
637
+ >
638
+ <main
639
+ class="pf-v6-c-page__main"
640
+ tabindex="-1"
641
+ >
642
+ <div
643
+ aria-label="test"
644
+ class="pf-v6-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
645
+ role="region"
646
+ tabindex="0"
647
+ >
648
+ <div
649
+ class="pf-v6-c-page__main-subnav"
650
+ >
651
+ <div
652
+ class="pf-v6-c-page__main-body"
653
+ >
654
+ <nav
655
+ aria-label="Nav"
656
+ class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
657
+ data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
658
+ data-ouia-component-type="PF6/Nav"
659
+ data-ouia-safe="true"
660
+ >
661
+ <ul
662
+ class="pf-v6-c-nav__list"
663
+ role="list"
664
+ >
665
+ <li
666
+ class="pf-v6-c-nav__item"
667
+ data-ouia-component-id="OUIA-Generated-NavItem-6"
668
+ data-ouia-component-type="PF6/NavItem"
669
+ data-ouia-safe="true"
670
+ >
671
+ <a
672
+ aria-current="page"
673
+ class="pf-v6-c-nav__link pf-m-current"
674
+ >
675
+ <span
676
+ class="pf-v6-c-nav__link-text"
677
+ >
678
+ System Panel
679
+ </span>
680
+ </a>
681
+ </li>
682
+ <li
683
+ class="pf-v6-c-nav__item"
684
+ data-ouia-component-id="OUIA-Generated-NavItem-7"
685
+ data-ouia-component-type="PF6/NavItem"
686
+ data-ouia-safe="true"
687
+ >
688
+ <a
689
+ class="pf-v6-c-nav__link"
690
+ >
691
+ <span
692
+ class="pf-v6-c-nav__link-text"
693
+ >
694
+ Policy
695
+ </span>
696
+ </a>
697
+ </li>
698
+ <li
699
+ class="pf-v6-c-nav__item"
700
+ data-ouia-component-id="OUIA-Generated-NavItem-8"
701
+ data-ouia-component-type="PF6/NavItem"
702
+ data-ouia-safe="true"
703
+ >
704
+ <a
705
+ class="pf-v6-c-nav__link"
706
+ >
707
+ <span
708
+ class="pf-v6-c-nav__link-text"
709
+ >
710
+ Authentication
711
+ </span>
712
+ </a>
713
+ </li>
714
+ <li
715
+ class="pf-v6-c-nav__item"
716
+ data-ouia-component-id="OUIA-Generated-NavItem-9"
717
+ data-ouia-component-type="PF6/NavItem"
718
+ data-ouia-safe="true"
719
+ >
720
+ <a
721
+ class="pf-v6-c-nav__link"
722
+ >
723
+ <span
724
+ class="pf-v6-c-nav__link-text"
725
+ >
726
+ Network Services
727
+ </span>
728
+ </a>
729
+ </li>
730
+ <li
731
+ class="pf-v6-c-nav__item"
732
+ data-ouia-component-id="OUIA-Generated-NavItem-10"
733
+ data-ouia-component-type="PF6/NavItem"
734
+ data-ouia-safe="true"
735
+ >
736
+ <a
737
+ class="pf-v6-c-nav__link"
738
+ >
739
+ <span
740
+ class="pf-v6-c-nav__link-text"
741
+ >
742
+ Server
743
+ </span>
744
+ </a>
745
+ </li>
746
+ </ul>
747
+ </nav>
748
+ </div>
749
+ </div>
750
+ <section
751
+ class="pf-v6-c-page__main-breadcrumb"
752
+ >
753
+ <div
754
+ class="pf-v6-c-page__main-body"
755
+ >
756
+ <div
757
+ class="pf-v6-c-page__main-body"
758
+ >
759
+ <section
760
+ class="pf-v6-c-page__main-breadcrumb"
761
+ >
762
+ <div
763
+ class="pf-v6-c-page__main-body"
764
+ >
765
+ <nav
766
+ aria-label="Breadcrumb"
767
+ class="pf-v6-c-breadcrumb"
768
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-8"
769
+ data-ouia-component-type="PF6/Breadcrumb"
770
+ data-ouia-safe="true"
771
+ >
772
+ <ol
773
+ class="pf-v6-c-breadcrumb__list"
774
+ role="list"
775
+ >
776
+ <li
777
+ class="pf-v6-c-breadcrumb__item"
778
+ >
779
+ Section Home
780
+ </li>
781
+ <li
782
+ class="pf-v6-c-breadcrumb__item"
783
+ >
784
+ <span
785
+ class="pf-v6-c-breadcrumb__item-divider"
786
+ >
787
+ <svg
788
+ aria-hidden="true"
789
+ class="pf-v6-svg"
790
+ fill="currentColor"
791
+ height="1em"
792
+ role="img"
793
+ viewBox="0 0 256 512"
794
+ width="1em"
795
+ >
796
+ <path
797
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
798
+ />
799
+ </svg>
800
+ </span>
801
+ <a
802
+ class="pf-v6-c-breadcrumb__link"
803
+ href="#"
804
+ >
805
+ Section Title
806
+ </a>
807
+ </li>
808
+ <li
809
+ class="pf-v6-c-breadcrumb__item"
810
+ >
811
+ <span
812
+ class="pf-v6-c-breadcrumb__item-divider"
813
+ >
814
+ <svg
815
+ aria-hidden="true"
816
+ class="pf-v6-svg"
817
+ fill="currentColor"
818
+ height="1em"
819
+ role="img"
820
+ viewBox="0 0 256 512"
821
+ width="1em"
822
+ >
823
+ <path
824
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
825
+ />
826
+ </svg>
827
+ </span>
828
+ <a
829
+ class="pf-v6-c-breadcrumb__link"
830
+ href="#"
831
+ >
832
+ Section Title
833
+ </a>
834
+ </li>
835
+ <li
836
+ class="pf-v6-c-breadcrumb__item"
837
+ >
838
+ <span
839
+ class="pf-v6-c-breadcrumb__item-divider"
840
+ >
841
+ <svg
842
+ aria-hidden="true"
843
+ class="pf-v6-svg"
844
+ fill="currentColor"
845
+ height="1em"
846
+ role="img"
847
+ viewBox="0 0 256 512"
848
+ width="1em"
849
+ >
850
+ <path
851
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
852
+ />
853
+ </svg>
854
+ </span>
855
+ <a
856
+ aria-current="page"
857
+ class="pf-v6-c-breadcrumb__link pf-m-current"
858
+ href="#"
859
+ >
860
+ Section Landing
861
+ </a>
862
+ </li>
863
+ </ol>
864
+ </nav>
865
+ </div>
866
+ </section>
867
+ </div>
868
+ </div>
869
+ </section>
870
+ </div>
871
+ <section
872
+ class="pf-v6-c-page__main-section"
873
+ >
874
+ <div
875
+ class="pf-v6-c-page__main-body"
876
+ >
877
+ Section with default background
878
+ </div>
958
879
  </section>
959
880
  </main>
960
881
  </div>
@@ -1007,111 +928,123 @@ exports[`Page Check page to verify skip to content points to main content region
1007
928
  <section
1008
929
  class="pf-v6-c-page__main-breadcrumb"
1009
930
  >
1010
- <nav
1011
- aria-label="Breadcrumb"
1012
- class="pf-v6-c-breadcrumb"
1013
- data-ouia-component-id="OUIA-Generated-Breadcrumb-9"
1014
- data-ouia-component-type="PF6/Breadcrumb"
1015
- data-ouia-safe="true"
931
+ <div
932
+ class="pf-v6-c-page__main-body"
1016
933
  >
1017
- <ol
1018
- class="pf-v6-c-breadcrumb__list"
1019
- role="list"
934
+ <div
935
+ class="pf-v6-c-page__main-body"
1020
936
  >
1021
- <li
1022
- class="pf-v6-c-breadcrumb__item"
1023
- >
1024
- Section Home
1025
- </li>
1026
- <li
1027
- class="pf-v6-c-breadcrumb__item"
937
+ <nav
938
+ aria-label="Breadcrumb"
939
+ class="pf-v6-c-breadcrumb"
940
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-9"
941
+ data-ouia-component-type="PF6/Breadcrumb"
942
+ data-ouia-safe="true"
1028
943
  >
1029
- <span
1030
- class="pf-v6-c-breadcrumb__item-divider"
944
+ <ol
945
+ class="pf-v6-c-breadcrumb__list"
946
+ role="list"
1031
947
  >
1032
- <svg
1033
- aria-hidden="true"
1034
- class="pf-v6-svg"
1035
- fill="currentColor"
1036
- height="1em"
1037
- role="img"
1038
- viewBox="0 0 256 512"
1039
- width="1em"
948
+ <li
949
+ class="pf-v6-c-breadcrumb__item"
1040
950
  >
1041
- <path
1042
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1043
- />
1044
- </svg>
1045
- </span>
1046
- <a
1047
- class="pf-v6-c-breadcrumb__link"
1048
- href="#"
1049
- >
1050
- Section Title
1051
- </a>
1052
- </li>
1053
- <li
1054
- class="pf-v6-c-breadcrumb__item"
1055
- >
1056
- <span
1057
- class="pf-v6-c-breadcrumb__item-divider"
1058
- >
1059
- <svg
1060
- aria-hidden="true"
1061
- class="pf-v6-svg"
1062
- fill="currentColor"
1063
- height="1em"
1064
- role="img"
1065
- viewBox="0 0 256 512"
1066
- width="1em"
951
+ Section Home
952
+ </li>
953
+ <li
954
+ class="pf-v6-c-breadcrumb__item"
1067
955
  >
1068
- <path
1069
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1070
- />
1071
- </svg>
1072
- </span>
1073
- <a
1074
- class="pf-v6-c-breadcrumb__link"
1075
- href="#"
1076
- >
1077
- Section Title
1078
- </a>
1079
- </li>
1080
- <li
1081
- class="pf-v6-c-breadcrumb__item"
1082
- >
1083
- <span
1084
- class="pf-v6-c-breadcrumb__item-divider"
1085
- >
1086
- <svg
1087
- aria-hidden="true"
1088
- class="pf-v6-svg"
1089
- fill="currentColor"
1090
- height="1em"
1091
- role="img"
1092
- viewBox="0 0 256 512"
1093
- width="1em"
956
+ <span
957
+ class="pf-v6-c-breadcrumb__item-divider"
958
+ >
959
+ <svg
960
+ aria-hidden="true"
961
+ class="pf-v6-svg"
962
+ fill="currentColor"
963
+ height="1em"
964
+ role="img"
965
+ viewBox="0 0 256 512"
966
+ width="1em"
967
+ >
968
+ <path
969
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
970
+ />
971
+ </svg>
972
+ </span>
973
+ <a
974
+ class="pf-v6-c-breadcrumb__link"
975
+ href="#"
976
+ >
977
+ Section Title
978
+ </a>
979
+ </li>
980
+ <li
981
+ class="pf-v6-c-breadcrumb__item"
1094
982
  >
1095
- <path
1096
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1097
- />
1098
- </svg>
1099
- </span>
1100
- <a
1101
- aria-current="page"
1102
- class="pf-v6-c-breadcrumb__link pf-m-current"
1103
- href="#"
1104
- >
1105
- Section Landing
1106
- </a>
1107
- </li>
1108
- </ol>
1109
- </nav>
983
+ <span
984
+ class="pf-v6-c-breadcrumb__item-divider"
985
+ >
986
+ <svg
987
+ aria-hidden="true"
988
+ class="pf-v6-svg"
989
+ fill="currentColor"
990
+ height="1em"
991
+ role="img"
992
+ viewBox="0 0 256 512"
993
+ width="1em"
994
+ >
995
+ <path
996
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
997
+ />
998
+ </svg>
999
+ </span>
1000
+ <a
1001
+ class="pf-v6-c-breadcrumb__link"
1002
+ href="#"
1003
+ >
1004
+ Section Title
1005
+ </a>
1006
+ </li>
1007
+ <li
1008
+ class="pf-v6-c-breadcrumb__item"
1009
+ >
1010
+ <span
1011
+ class="pf-v6-c-breadcrumb__item-divider"
1012
+ >
1013
+ <svg
1014
+ aria-hidden="true"
1015
+ class="pf-v6-svg"
1016
+ fill="currentColor"
1017
+ height="1em"
1018
+ role="img"
1019
+ viewBox="0 0 256 512"
1020
+ width="1em"
1021
+ >
1022
+ <path
1023
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1024
+ />
1025
+ </svg>
1026
+ </span>
1027
+ <a
1028
+ aria-current="page"
1029
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1030
+ href="#"
1031
+ >
1032
+ Section Landing
1033
+ </a>
1034
+ </li>
1035
+ </ol>
1036
+ </nav>
1037
+ </div>
1038
+ </div>
1110
1039
  </section>
1111
1040
  <section
1112
1041
  class="pf-v6-c-page__main-section"
1113
1042
  >
1114
- Section with default background
1043
+ <div
1044
+ class="pf-v6-c-page__main-body"
1045
+ >
1046
+ Section with default background
1047
+ </div>
1115
1048
  </section>
1116
1049
  </main>
1117
1050
  </div>
@@ -1150,7 +1083,11 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
1150
1083
  <section
1151
1084
  class="pf-v6-c-page__main-section"
1152
1085
  >
1153
- Section with default background
1086
+ <div
1087
+ class="pf-v6-c-page__main-body"
1088
+ >
1089
+ Section with default background
1090
+ </div>
1154
1091
  </section>
1155
1092
  </main>
1156
1093
  </div>
@@ -1183,111 +1120,119 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
1183
1120
  <section
1184
1121
  class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
1185
1122
  >
1186
- <nav
1187
- aria-label="Breadcrumb"
1188
- class="pf-v6-c-breadcrumb"
1189
- data-ouia-component-id="OUIA-Generated-Breadcrumb-6"
1190
- data-ouia-component-type="PF6/Breadcrumb"
1191
- data-ouia-safe="true"
1123
+ <div
1124
+ class="pf-v6-c-page__main-body"
1192
1125
  >
1193
- <ol
1194
- class="pf-v6-c-breadcrumb__list"
1195
- role="list"
1126
+ <nav
1127
+ aria-label="Breadcrumb"
1128
+ class="pf-v6-c-breadcrumb"
1129
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-6"
1130
+ data-ouia-component-type="PF6/Breadcrumb"
1131
+ data-ouia-safe="true"
1196
1132
  >
1197
- <li
1198
- class="pf-v6-c-breadcrumb__item"
1199
- >
1200
- Section Home
1201
- </li>
1202
- <li
1203
- class="pf-v6-c-breadcrumb__item"
1133
+ <ol
1134
+ class="pf-v6-c-breadcrumb__list"
1135
+ role="list"
1204
1136
  >
1205
- <span
1206
- class="pf-v6-c-breadcrumb__item-divider"
1207
- >
1208
- <svg
1209
- aria-hidden="true"
1210
- class="pf-v6-svg"
1211
- fill="currentColor"
1212
- height="1em"
1213
- role="img"
1214
- viewBox="0 0 256 512"
1215
- width="1em"
1216
- >
1217
- <path
1218
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1219
- />
1220
- </svg>
1221
- </span>
1222
- <a
1223
- class="pf-v6-c-breadcrumb__link"
1224
- href="#"
1137
+ <li
1138
+ class="pf-v6-c-breadcrumb__item"
1225
1139
  >
1226
- Section Title
1227
- </a>
1228
- </li>
1229
- <li
1230
- class="pf-v6-c-breadcrumb__item"
1231
- >
1232
- <span
1233
- class="pf-v6-c-breadcrumb__item-divider"
1140
+ Section Home
1141
+ </li>
1142
+ <li
1143
+ class="pf-v6-c-breadcrumb__item"
1234
1144
  >
1235
- <svg
1236
- aria-hidden="true"
1237
- class="pf-v6-svg"
1238
- fill="currentColor"
1239
- height="1em"
1240
- role="img"
1241
- viewBox="0 0 256 512"
1242
- width="1em"
1145
+ <span
1146
+ class="pf-v6-c-breadcrumb__item-divider"
1243
1147
  >
1244
- <path
1245
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1246
- />
1247
- </svg>
1248
- </span>
1249
- <a
1250
- class="pf-v6-c-breadcrumb__link"
1251
- href="#"
1252
- >
1253
- Section Title
1254
- </a>
1255
- </li>
1256
- <li
1257
- class="pf-v6-c-breadcrumb__item"
1258
- >
1259
- <span
1260
- class="pf-v6-c-breadcrumb__item-divider"
1148
+ <svg
1149
+ aria-hidden="true"
1150
+ class="pf-v6-svg"
1151
+ fill="currentColor"
1152
+ height="1em"
1153
+ role="img"
1154
+ viewBox="0 0 256 512"
1155
+ width="1em"
1156
+ >
1157
+ <path
1158
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1159
+ />
1160
+ </svg>
1161
+ </span>
1162
+ <a
1163
+ class="pf-v6-c-breadcrumb__link"
1164
+ href="#"
1165
+ >
1166
+ Section Title
1167
+ </a>
1168
+ </li>
1169
+ <li
1170
+ class="pf-v6-c-breadcrumb__item"
1261
1171
  >
1262
- <svg
1263
- aria-hidden="true"
1264
- class="pf-v6-svg"
1265
- fill="currentColor"
1266
- height="1em"
1267
- role="img"
1268
- viewBox="0 0 256 512"
1269
- width="1em"
1172
+ <span
1173
+ class="pf-v6-c-breadcrumb__item-divider"
1270
1174
  >
1271
- <path
1272
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1273
- />
1274
- </svg>
1275
- </span>
1276
- <a
1277
- aria-current="page"
1278
- class="pf-v6-c-breadcrumb__link pf-m-current"
1279
- href="#"
1175
+ <svg
1176
+ aria-hidden="true"
1177
+ class="pf-v6-svg"
1178
+ fill="currentColor"
1179
+ height="1em"
1180
+ role="img"
1181
+ viewBox="0 0 256 512"
1182
+ width="1em"
1183
+ >
1184
+ <path
1185
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1186
+ />
1187
+ </svg>
1188
+ </span>
1189
+ <a
1190
+ class="pf-v6-c-breadcrumb__link"
1191
+ href="#"
1192
+ >
1193
+ Section Title
1194
+ </a>
1195
+ </li>
1196
+ <li
1197
+ class="pf-v6-c-breadcrumb__item"
1280
1198
  >
1281
- Section Landing
1282
- </a>
1283
- </li>
1284
- </ol>
1285
- </nav>
1199
+ <span
1200
+ class="pf-v6-c-breadcrumb__item-divider"
1201
+ >
1202
+ <svg
1203
+ aria-hidden="true"
1204
+ class="pf-v6-svg"
1205
+ fill="currentColor"
1206
+ height="1em"
1207
+ role="img"
1208
+ viewBox="0 0 256 512"
1209
+ width="1em"
1210
+ >
1211
+ <path
1212
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1213
+ />
1214
+ </svg>
1215
+ </span>
1216
+ <a
1217
+ aria-current="page"
1218
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1219
+ href="#"
1220
+ >
1221
+ Section Landing
1222
+ </a>
1223
+ </li>
1224
+ </ol>
1225
+ </nav>
1226
+ </div>
1286
1227
  </section>
1287
1228
  <section
1288
1229
  class="pf-v6-c-page__main-section"
1289
1230
  >
1290
- Section with default background
1231
+ <div
1232
+ class="pf-v6-c-page__main-body"
1233
+ >
1234
+ Section with default background
1235
+ </div>
1291
1236
  </section>
1292
1237
  </main>
1293
1238
  </div>
@@ -1320,111 +1265,123 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
1320
1265
  <section
1321
1266
  class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
1322
1267
  >
1323
- <nav
1324
- aria-label="Breadcrumb"
1325
- class="pf-v6-c-breadcrumb"
1326
- data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
1327
- data-ouia-component-type="PF6/Breadcrumb"
1328
- data-ouia-safe="true"
1268
+ <div
1269
+ class="pf-v6-c-page__main-body"
1329
1270
  >
1330
- <ol
1331
- class="pf-v6-c-breadcrumb__list"
1332
- role="list"
1271
+ <div
1272
+ class="pf-v6-c-page__main-body"
1333
1273
  >
1334
- <li
1335
- class="pf-v6-c-breadcrumb__item"
1336
- >
1337
- Section Home
1338
- </li>
1339
- <li
1340
- class="pf-v6-c-breadcrumb__item"
1274
+ <nav
1275
+ aria-label="Breadcrumb"
1276
+ class="pf-v6-c-breadcrumb"
1277
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
1278
+ data-ouia-component-type="PF6/Breadcrumb"
1279
+ data-ouia-safe="true"
1341
1280
  >
1342
- <span
1343
- class="pf-v6-c-breadcrumb__item-divider"
1281
+ <ol
1282
+ class="pf-v6-c-breadcrumb__list"
1283
+ role="list"
1344
1284
  >
1345
- <svg
1346
- aria-hidden="true"
1347
- class="pf-v6-svg"
1348
- fill="currentColor"
1349
- height="1em"
1350
- role="img"
1351
- viewBox="0 0 256 512"
1352
- width="1em"
1285
+ <li
1286
+ class="pf-v6-c-breadcrumb__item"
1353
1287
  >
1354
- <path
1355
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1356
- />
1357
- </svg>
1358
- </span>
1359
- <a
1360
- class="pf-v6-c-breadcrumb__link"
1361
- href="#"
1362
- >
1363
- Section Title
1364
- </a>
1365
- </li>
1366
- <li
1367
- class="pf-v6-c-breadcrumb__item"
1368
- >
1369
- <span
1370
- class="pf-v6-c-breadcrumb__item-divider"
1371
- >
1372
- <svg
1373
- aria-hidden="true"
1374
- class="pf-v6-svg"
1375
- fill="currentColor"
1376
- height="1em"
1377
- role="img"
1378
- viewBox="0 0 256 512"
1379
- width="1em"
1288
+ Section Home
1289
+ </li>
1290
+ <li
1291
+ class="pf-v6-c-breadcrumb__item"
1380
1292
  >
1381
- <path
1382
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1383
- />
1384
- </svg>
1385
- </span>
1386
- <a
1387
- class="pf-v6-c-breadcrumb__link"
1388
- href="#"
1389
- >
1390
- Section Title
1391
- </a>
1392
- </li>
1393
- <li
1394
- class="pf-v6-c-breadcrumb__item"
1395
- >
1396
- <span
1397
- class="pf-v6-c-breadcrumb__item-divider"
1398
- >
1399
- <svg
1400
- aria-hidden="true"
1401
- class="pf-v6-svg"
1402
- fill="currentColor"
1403
- height="1em"
1404
- role="img"
1405
- viewBox="0 0 256 512"
1406
- width="1em"
1293
+ <span
1294
+ class="pf-v6-c-breadcrumb__item-divider"
1295
+ >
1296
+ <svg
1297
+ aria-hidden="true"
1298
+ class="pf-v6-svg"
1299
+ fill="currentColor"
1300
+ height="1em"
1301
+ role="img"
1302
+ viewBox="0 0 256 512"
1303
+ width="1em"
1304
+ >
1305
+ <path
1306
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1307
+ />
1308
+ </svg>
1309
+ </span>
1310
+ <a
1311
+ class="pf-v6-c-breadcrumb__link"
1312
+ href="#"
1313
+ >
1314
+ Section Title
1315
+ </a>
1316
+ </li>
1317
+ <li
1318
+ class="pf-v6-c-breadcrumb__item"
1407
1319
  >
1408
- <path
1409
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1410
- />
1411
- </svg>
1412
- </span>
1413
- <a
1414
- aria-current="page"
1415
- class="pf-v6-c-breadcrumb__link pf-m-current"
1416
- href="#"
1417
- >
1418
- Section Landing
1419
- </a>
1420
- </li>
1421
- </ol>
1422
- </nav>
1320
+ <span
1321
+ class="pf-v6-c-breadcrumb__item-divider"
1322
+ >
1323
+ <svg
1324
+ aria-hidden="true"
1325
+ class="pf-v6-svg"
1326
+ fill="currentColor"
1327
+ height="1em"
1328
+ role="img"
1329
+ viewBox="0 0 256 512"
1330
+ width="1em"
1331
+ >
1332
+ <path
1333
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1334
+ />
1335
+ </svg>
1336
+ </span>
1337
+ <a
1338
+ class="pf-v6-c-breadcrumb__link"
1339
+ href="#"
1340
+ >
1341
+ Section Title
1342
+ </a>
1343
+ </li>
1344
+ <li
1345
+ class="pf-v6-c-breadcrumb__item"
1346
+ >
1347
+ <span
1348
+ class="pf-v6-c-breadcrumb__item-divider"
1349
+ >
1350
+ <svg
1351
+ aria-hidden="true"
1352
+ class="pf-v6-svg"
1353
+ fill="currentColor"
1354
+ height="1em"
1355
+ role="img"
1356
+ viewBox="0 0 256 512"
1357
+ width="1em"
1358
+ >
1359
+ <path
1360
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1361
+ />
1362
+ </svg>
1363
+ </span>
1364
+ <a
1365
+ aria-current="page"
1366
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1367
+ href="#"
1368
+ >
1369
+ Section Landing
1370
+ </a>
1371
+ </li>
1372
+ </ol>
1373
+ </nav>
1374
+ </div>
1375
+ </div>
1423
1376
  </section>
1424
1377
  <section
1425
1378
  class="pf-v6-c-page__main-section"
1426
1379
  >
1427
- Section with default background
1380
+ <div
1381
+ class="pf-v6-c-page__main-body"
1382
+ >
1383
+ Section with default background
1384
+ </div>
1428
1385
  </section>
1429
1386
  </main>
1430
1387
  </div>
@@ -1457,111 +1414,119 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
1457
1414
  <section
1458
1415
  class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
1459
1416
  >
1460
- <nav
1461
- aria-label="Breadcrumb"
1462
- class="pf-v6-c-breadcrumb"
1463
- data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
1464
- data-ouia-component-type="PF6/Breadcrumb"
1465
- data-ouia-safe="true"
1417
+ <div
1418
+ class="pf-v6-c-page__main-body"
1466
1419
  >
1467
- <ol
1468
- class="pf-v6-c-breadcrumb__list"
1469
- role="list"
1420
+ <nav
1421
+ aria-label="Breadcrumb"
1422
+ class="pf-v6-c-breadcrumb"
1423
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
1424
+ data-ouia-component-type="PF6/Breadcrumb"
1425
+ data-ouia-safe="true"
1470
1426
  >
1471
- <li
1472
- class="pf-v6-c-breadcrumb__item"
1473
- >
1474
- Section Home
1475
- </li>
1476
- <li
1477
- class="pf-v6-c-breadcrumb__item"
1427
+ <ol
1428
+ class="pf-v6-c-breadcrumb__list"
1429
+ role="list"
1478
1430
  >
1479
- <span
1480
- class="pf-v6-c-breadcrumb__item-divider"
1481
- >
1482
- <svg
1483
- aria-hidden="true"
1484
- class="pf-v6-svg"
1485
- fill="currentColor"
1486
- height="1em"
1487
- role="img"
1488
- viewBox="0 0 256 512"
1489
- width="1em"
1490
- >
1491
- <path
1492
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1493
- />
1494
- </svg>
1495
- </span>
1496
- <a
1497
- class="pf-v6-c-breadcrumb__link"
1498
- href="#"
1431
+ <li
1432
+ class="pf-v6-c-breadcrumb__item"
1499
1433
  >
1500
- Section Title
1501
- </a>
1502
- </li>
1503
- <li
1504
- class="pf-v6-c-breadcrumb__item"
1505
- >
1506
- <span
1507
- class="pf-v6-c-breadcrumb__item-divider"
1434
+ Section Home
1435
+ </li>
1436
+ <li
1437
+ class="pf-v6-c-breadcrumb__item"
1508
1438
  >
1509
- <svg
1510
- aria-hidden="true"
1511
- class="pf-v6-svg"
1512
- fill="currentColor"
1513
- height="1em"
1514
- role="img"
1515
- viewBox="0 0 256 512"
1516
- width="1em"
1439
+ <span
1440
+ class="pf-v6-c-breadcrumb__item-divider"
1517
1441
  >
1518
- <path
1519
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1520
- />
1521
- </svg>
1522
- </span>
1523
- <a
1524
- class="pf-v6-c-breadcrumb__link"
1525
- href="#"
1526
- >
1527
- Section Title
1528
- </a>
1529
- </li>
1530
- <li
1531
- class="pf-v6-c-breadcrumb__item"
1532
- >
1533
- <span
1534
- class="pf-v6-c-breadcrumb__item-divider"
1442
+ <svg
1443
+ aria-hidden="true"
1444
+ class="pf-v6-svg"
1445
+ fill="currentColor"
1446
+ height="1em"
1447
+ role="img"
1448
+ viewBox="0 0 256 512"
1449
+ width="1em"
1450
+ >
1451
+ <path
1452
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1453
+ />
1454
+ </svg>
1455
+ </span>
1456
+ <a
1457
+ class="pf-v6-c-breadcrumb__link"
1458
+ href="#"
1459
+ >
1460
+ Section Title
1461
+ </a>
1462
+ </li>
1463
+ <li
1464
+ class="pf-v6-c-breadcrumb__item"
1535
1465
  >
1536
- <svg
1537
- aria-hidden="true"
1538
- class="pf-v6-svg"
1539
- fill="currentColor"
1540
- height="1em"
1541
- role="img"
1542
- viewBox="0 0 256 512"
1543
- width="1em"
1466
+ <span
1467
+ class="pf-v6-c-breadcrumb__item-divider"
1544
1468
  >
1545
- <path
1546
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1547
- />
1548
- </svg>
1549
- </span>
1550
- <a
1551
- aria-current="page"
1552
- class="pf-v6-c-breadcrumb__link pf-m-current"
1553
- href="#"
1469
+ <svg
1470
+ aria-hidden="true"
1471
+ class="pf-v6-svg"
1472
+ fill="currentColor"
1473
+ height="1em"
1474
+ role="img"
1475
+ viewBox="0 0 256 512"
1476
+ width="1em"
1477
+ >
1478
+ <path
1479
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1480
+ />
1481
+ </svg>
1482
+ </span>
1483
+ <a
1484
+ class="pf-v6-c-breadcrumb__link"
1485
+ href="#"
1486
+ >
1487
+ Section Title
1488
+ </a>
1489
+ </li>
1490
+ <li
1491
+ class="pf-v6-c-breadcrumb__item"
1554
1492
  >
1555
- Section Landing
1556
- </a>
1557
- </li>
1558
- </ol>
1559
- </nav>
1493
+ <span
1494
+ class="pf-v6-c-breadcrumb__item-divider"
1495
+ >
1496
+ <svg
1497
+ aria-hidden="true"
1498
+ class="pf-v6-svg"
1499
+ fill="currentColor"
1500
+ height="1em"
1501
+ role="img"
1502
+ viewBox="0 0 256 512"
1503
+ width="1em"
1504
+ >
1505
+ <path
1506
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1507
+ />
1508
+ </svg>
1509
+ </span>
1510
+ <a
1511
+ aria-current="page"
1512
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1513
+ href="#"
1514
+ >
1515
+ Section Landing
1516
+ </a>
1517
+ </li>
1518
+ </ol>
1519
+ </nav>
1520
+ </div>
1560
1521
  </section>
1561
1522
  <section
1562
1523
  class="pf-v6-c-page__main-section"
1563
1524
  >
1564
- Section with default background
1525
+ <div
1526
+ class="pf-v6-c-page__main-body"
1527
+ >
1528
+ Section with default background
1529
+ </div>
1565
1530
  </section>
1566
1531
  </main>
1567
1532
  </div>
@@ -1594,111 +1559,123 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
1594
1559
  <section
1595
1560
  class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
1596
1561
  >
1597
- <nav
1598
- aria-label="Breadcrumb"
1599
- class="pf-v6-c-breadcrumb"
1600
- data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
1601
- data-ouia-component-type="PF6/Breadcrumb"
1602
- data-ouia-safe="true"
1562
+ <div
1563
+ class="pf-v6-c-page__main-body"
1603
1564
  >
1604
- <ol
1605
- class="pf-v6-c-breadcrumb__list"
1606
- role="list"
1565
+ <div
1566
+ class="pf-v6-c-page__main-body"
1607
1567
  >
1608
- <li
1609
- class="pf-v6-c-breadcrumb__item"
1610
- >
1611
- Section Home
1612
- </li>
1613
- <li
1614
- class="pf-v6-c-breadcrumb__item"
1568
+ <nav
1569
+ aria-label="Breadcrumb"
1570
+ class="pf-v6-c-breadcrumb"
1571
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
1572
+ data-ouia-component-type="PF6/Breadcrumb"
1573
+ data-ouia-safe="true"
1615
1574
  >
1616
- <span
1617
- class="pf-v6-c-breadcrumb__item-divider"
1575
+ <ol
1576
+ class="pf-v6-c-breadcrumb__list"
1577
+ role="list"
1618
1578
  >
1619
- <svg
1620
- aria-hidden="true"
1621
- class="pf-v6-svg"
1622
- fill="currentColor"
1623
- height="1em"
1624
- role="img"
1625
- viewBox="0 0 256 512"
1626
- width="1em"
1579
+ <li
1580
+ class="pf-v6-c-breadcrumb__item"
1627
1581
  >
1628
- <path
1629
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1630
- />
1631
- </svg>
1632
- </span>
1633
- <a
1634
- class="pf-v6-c-breadcrumb__link"
1635
- href="#"
1636
- >
1637
- Section Title
1638
- </a>
1639
- </li>
1640
- <li
1641
- class="pf-v6-c-breadcrumb__item"
1642
- >
1643
- <span
1644
- class="pf-v6-c-breadcrumb__item-divider"
1645
- >
1646
- <svg
1647
- aria-hidden="true"
1648
- class="pf-v6-svg"
1649
- fill="currentColor"
1650
- height="1em"
1651
- role="img"
1652
- viewBox="0 0 256 512"
1653
- width="1em"
1582
+ Section Home
1583
+ </li>
1584
+ <li
1585
+ class="pf-v6-c-breadcrumb__item"
1654
1586
  >
1655
- <path
1656
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1657
- />
1658
- </svg>
1659
- </span>
1660
- <a
1661
- class="pf-v6-c-breadcrumb__link"
1662
- href="#"
1663
- >
1664
- Section Title
1665
- </a>
1666
- </li>
1667
- <li
1668
- class="pf-v6-c-breadcrumb__item"
1669
- >
1670
- <span
1671
- class="pf-v6-c-breadcrumb__item-divider"
1672
- >
1673
- <svg
1674
- aria-hidden="true"
1675
- class="pf-v6-svg"
1676
- fill="currentColor"
1677
- height="1em"
1678
- role="img"
1679
- viewBox="0 0 256 512"
1680
- width="1em"
1587
+ <span
1588
+ class="pf-v6-c-breadcrumb__item-divider"
1589
+ >
1590
+ <svg
1591
+ aria-hidden="true"
1592
+ class="pf-v6-svg"
1593
+ fill="currentColor"
1594
+ height="1em"
1595
+ role="img"
1596
+ viewBox="0 0 256 512"
1597
+ width="1em"
1598
+ >
1599
+ <path
1600
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1601
+ />
1602
+ </svg>
1603
+ </span>
1604
+ <a
1605
+ class="pf-v6-c-breadcrumb__link"
1606
+ href="#"
1607
+ >
1608
+ Section Title
1609
+ </a>
1610
+ </li>
1611
+ <li
1612
+ class="pf-v6-c-breadcrumb__item"
1681
1613
  >
1682
- <path
1683
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1684
- />
1685
- </svg>
1686
- </span>
1687
- <a
1688
- aria-current="page"
1689
- class="pf-v6-c-breadcrumb__link pf-m-current"
1690
- href="#"
1691
- >
1692
- Section Landing
1693
- </a>
1694
- </li>
1695
- </ol>
1696
- </nav>
1614
+ <span
1615
+ class="pf-v6-c-breadcrumb__item-divider"
1616
+ >
1617
+ <svg
1618
+ aria-hidden="true"
1619
+ class="pf-v6-svg"
1620
+ fill="currentColor"
1621
+ height="1em"
1622
+ role="img"
1623
+ viewBox="0 0 256 512"
1624
+ width="1em"
1625
+ >
1626
+ <path
1627
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1628
+ />
1629
+ </svg>
1630
+ </span>
1631
+ <a
1632
+ class="pf-v6-c-breadcrumb__link"
1633
+ href="#"
1634
+ >
1635
+ Section Title
1636
+ </a>
1637
+ </li>
1638
+ <li
1639
+ class="pf-v6-c-breadcrumb__item"
1640
+ >
1641
+ <span
1642
+ class="pf-v6-c-breadcrumb__item-divider"
1643
+ >
1644
+ <svg
1645
+ aria-hidden="true"
1646
+ class="pf-v6-svg"
1647
+ fill="currentColor"
1648
+ height="1em"
1649
+ role="img"
1650
+ viewBox="0 0 256 512"
1651
+ width="1em"
1652
+ >
1653
+ <path
1654
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1655
+ />
1656
+ </svg>
1657
+ </span>
1658
+ <a
1659
+ aria-current="page"
1660
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1661
+ href="#"
1662
+ >
1663
+ Section Landing
1664
+ </a>
1665
+ </li>
1666
+ </ol>
1667
+ </nav>
1668
+ </div>
1669
+ </div>
1697
1670
  </section>
1698
1671
  <section
1699
1672
  class="pf-v6-c-page__main-section"
1700
1673
  >
1701
- Section with default background
1674
+ <div
1675
+ class="pf-v6-c-page__main-body"
1676
+ >
1677
+ Section with default background
1678
+ </div>
1702
1679
  </section>
1703
1680
  </main>
1704
1681
  </div>