@patternfly/react-core 6.0.0-alpha.46 → 6.0.0-alpha.48

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