@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.105

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 (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -242,100 +242,101 @@ section: components
242
242
  <div class="pf-v6-c-drawer__main">
243
243
  <div class="pf-v6-c-drawer__content">
244
244
  <div class="pf-v6-c-drawer__body">
245
- <main class="pf-v6-c-page__main" tabindex="-1">
246
- // TODO should this be a page-main-list so there is not a duplicate main tag?
247
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
248
- <div class="pf-v6-c-page__main-body">
249
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
250
- <ol class="pf-v6-c-breadcrumb__list" role="list">
251
- <li class="pf-v6-c-breadcrumb__item">
252
- <a
253
- href="#"
254
- class="pf-v6-c-breadcrumb__link"
255
- >Section home</a>
256
- </li>
257
- <li class="pf-v6-c-breadcrumb__item">
258
- <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
260
- </span>
245
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
246
+ <main class="pf-v6-c-page__main" tabindex="-1">
247
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
248
+ <div class="pf-v6-c-page__main-body">
249
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
250
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
251
+ <li class="pf-v6-c-breadcrumb__item">
252
+ <a
253
+ href="#"
254
+ class="pf-v6-c-breadcrumb__link"
255
+ >Section home</a>
256
+ </li>
257
+ <li class="pf-v6-c-breadcrumb__item">
258
+ <span class="pf-v6-c-breadcrumb__item-divider">
259
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
260
+ </span>
261
261
 
262
- <a
263
- href="#"
264
- class="pf-v6-c-breadcrumb__link"
265
- >Section title</a>
266
- </li>
267
- <li class="pf-v6-c-breadcrumb__item">
268
- <span class="pf-v6-c-breadcrumb__item-divider">
269
- <i class="fas fa-angle-right" aria-hidden="true"></i>
270
- </span>
262
+ <a
263
+ href="#"
264
+ class="pf-v6-c-breadcrumb__link"
265
+ >Section title</a>
266
+ </li>
267
+ <li class="pf-v6-c-breadcrumb__item">
268
+ <span class="pf-v6-c-breadcrumb__item-divider">
269
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
270
+ </span>
271
271
 
272
- <a
273
- href="#"
274
- class="pf-v6-c-breadcrumb__link"
275
- >Section title</a>
276
- </li>
277
- <li class="pf-v6-c-breadcrumb__item">
278
- <span class="pf-v6-c-breadcrumb__item-divider">
279
- <i class="fas fa-angle-right" aria-hidden="true"></i>
280
- </span>
272
+ <a
273
+ href="#"
274
+ class="pf-v6-c-breadcrumb__link"
275
+ >Section title</a>
276
+ </li>
277
+ <li class="pf-v6-c-breadcrumb__item">
278
+ <span class="pf-v6-c-breadcrumb__item-divider">
279
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
280
+ </span>
281
281
 
282
- <a
283
- href="#"
284
- class="pf-v6-c-breadcrumb__link pf-m-current"
285
- aria-current="page"
286
- >Section landing</a>
287
- </li>
288
- </ol>
289
- </nav>
290
- </div>
291
- </section>
292
- <section
293
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
294
- >
295
- <div class="pf-v6-c-page__main-body">
296
- <div class="pf-v6-c-content">
297
- <h1>Main title</h1>
298
- <p>This is a full page demo.</p>
282
+ <a
283
+ href="#"
284
+ class="pf-v6-c-breadcrumb__link pf-m-current"
285
+ aria-current="page"
286
+ >Section landing</a>
287
+ </li>
288
+ </ol>
289
+ </nav>
299
290
  </div>
300
- </div>
301
- </section>
302
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
303
- <div class="pf-v6-c-page__main-body">
304
- <div class="pf-v6-l-gallery pf-m-gutter">
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
310
- </div>
311
- <div class="pf-v6-c-card">
312
- <div class="pf-v6-c-card__body">This is a card</div>
313
- </div>
314
- <div class="pf-v6-c-card">
315
- <div class="pf-v6-c-card__body">This is a card</div>
316
- </div>
317
- <div class="pf-v6-c-card">
318
- <div class="pf-v6-c-card__body">This is a card</div>
319
- </div>
320
- <div class="pf-v6-c-card">
321
- <div class="pf-v6-c-card__body">This is a card</div>
322
- </div>
323
- <div class="pf-v6-c-card">
324
- <div class="pf-v6-c-card__body">This is a card</div>
325
- </div>
326
- <div class="pf-v6-c-card">
327
- <div class="pf-v6-c-card__body">This is a card</div>
328
- </div>
329
- <div class="pf-v6-c-card">
330
- <div class="pf-v6-c-card__body">This is a card</div>
291
+ </section>
292
+ <section
293
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
294
+ >
295
+ <div class="pf-v6-c-page__main-body">
296
+ <div class="pf-v6-c-content">
297
+ <h1>Main title</h1>
298
+ <p>This is a full page demo.</p>
331
299
  </div>
332
- <div class="pf-v6-c-card">
333
- <div class="pf-v6-c-card__body">This is a card</div>
300
+ </div>
301
+ </section>
302
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
303
+ <div class="pf-v6-c-page__main-body">
304
+ <div class="pf-v6-l-gallery pf-m-gutter">
305
+ <div class="pf-v6-c-card">
306
+ <div class="pf-v6-c-card__body">This is a card</div>
307
+ </div>
308
+ <div class="pf-v6-c-card">
309
+ <div class="pf-v6-c-card__body">This is a card</div>
310
+ </div>
311
+ <div class="pf-v6-c-card">
312
+ <div class="pf-v6-c-card__body">This is a card</div>
313
+ </div>
314
+ <div class="pf-v6-c-card">
315
+ <div class="pf-v6-c-card__body">This is a card</div>
316
+ </div>
317
+ <div class="pf-v6-c-card">
318
+ <div class="pf-v6-c-card__body">This is a card</div>
319
+ </div>
320
+ <div class="pf-v6-c-card">
321
+ <div class="pf-v6-c-card__body">This is a card</div>
322
+ </div>
323
+ <div class="pf-v6-c-card">
324
+ <div class="pf-v6-c-card__body">This is a card</div>
325
+ </div>
326
+ <div class="pf-v6-c-card">
327
+ <div class="pf-v6-c-card__body">This is a card</div>
328
+ </div>
329
+ <div class="pf-v6-c-card">
330
+ <div class="pf-v6-c-card__body">This is a card</div>
331
+ </div>
332
+ <div class="pf-v6-c-card">
333
+ <div class="pf-v6-c-card__body">This is a card</div>
334
+ </div>
334
335
  </div>
335
336
  </div>
336
- </div>
337
- </section>
338
- </main>
337
+ </section>
338
+ </main>
339
+ </div>
339
340
  </div>
340
341
  </div>
341
342
  <div class="pf-v6-c-drawer__panel pf-m-width-33" hidden>
@@ -1250,100 +1251,101 @@ section: components
1250
1251
  <div class="pf-v6-c-drawer__main">
1251
1252
  <div class="pf-v6-c-drawer__content">
1252
1253
  <div class="pf-v6-c-drawer__body">
1253
- <main class="pf-v6-c-page__main" tabindex="-1">
1254
- // TODO should this be a page-main-list so there is not a duplicate main tag?
1255
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1256
- <div class="pf-v6-c-page__main-body">
1257
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1258
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1259
- <li class="pf-v6-c-breadcrumb__item">
1260
- <a
1261
- href="#"
1262
- class="pf-v6-c-breadcrumb__link"
1263
- >Section home</a>
1264
- </li>
1265
- <li class="pf-v6-c-breadcrumb__item">
1266
- <span class="pf-v6-c-breadcrumb__item-divider">
1267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1268
- </span>
1254
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1255
+ <main class="pf-v6-c-page__main" tabindex="-1">
1256
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1257
+ <div class="pf-v6-c-page__main-body">
1258
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1259
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1260
+ <li class="pf-v6-c-breadcrumb__item">
1261
+ <a
1262
+ href="#"
1263
+ class="pf-v6-c-breadcrumb__link"
1264
+ >Section home</a>
1265
+ </li>
1266
+ <li class="pf-v6-c-breadcrumb__item">
1267
+ <span class="pf-v6-c-breadcrumb__item-divider">
1268
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1269
+ </span>
1269
1270
 
1270
- <a
1271
- href="#"
1272
- class="pf-v6-c-breadcrumb__link"
1273
- >Section title</a>
1274
- </li>
1275
- <li class="pf-v6-c-breadcrumb__item">
1276
- <span class="pf-v6-c-breadcrumb__item-divider">
1277
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1278
- </span>
1271
+ <a
1272
+ href="#"
1273
+ class="pf-v6-c-breadcrumb__link"
1274
+ >Section title</a>
1275
+ </li>
1276
+ <li class="pf-v6-c-breadcrumb__item">
1277
+ <span class="pf-v6-c-breadcrumb__item-divider">
1278
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1279
+ </span>
1279
1280
 
1280
- <a
1281
- href="#"
1282
- class="pf-v6-c-breadcrumb__link"
1283
- >Section title</a>
1284
- </li>
1285
- <li class="pf-v6-c-breadcrumb__item">
1286
- <span class="pf-v6-c-breadcrumb__item-divider">
1287
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1288
- </span>
1281
+ <a
1282
+ href="#"
1283
+ class="pf-v6-c-breadcrumb__link"
1284
+ >Section title</a>
1285
+ </li>
1286
+ <li class="pf-v6-c-breadcrumb__item">
1287
+ <span class="pf-v6-c-breadcrumb__item-divider">
1288
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1289
+ </span>
1289
1290
 
1290
- <a
1291
- href="#"
1292
- class="pf-v6-c-breadcrumb__link pf-m-current"
1293
- aria-current="page"
1294
- >Section landing</a>
1295
- </li>
1296
- </ol>
1297
- </nav>
1298
- </div>
1299
- </section>
1300
- <section
1301
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
1302
- >
1303
- <div class="pf-v6-c-page__main-body">
1304
- <div class="pf-v6-c-content">
1305
- <h1>Main title</h1>
1306
- <p>This is a full page demo.</p>
1291
+ <a
1292
+ href="#"
1293
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1294
+ aria-current="page"
1295
+ >Section landing</a>
1296
+ </li>
1297
+ </ol>
1298
+ </nav>
1307
1299
  </div>
1308
- </div>
1309
- </section>
1310
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1311
- <div class="pf-v6-c-page__main-body">
1312
- <div class="pf-v6-l-gallery pf-m-gutter">
1313
- <div class="pf-v6-c-card">
1314
- <div class="pf-v6-c-card__body">This is a card</div>
1315
- </div>
1316
- <div class="pf-v6-c-card">
1317
- <div class="pf-v6-c-card__body">This is a card</div>
1318
- </div>
1319
- <div class="pf-v6-c-card">
1320
- <div class="pf-v6-c-card__body">This is a card</div>
1321
- </div>
1322
- <div class="pf-v6-c-card">
1323
- <div class="pf-v6-c-card__body">This is a card</div>
1324
- </div>
1325
- <div class="pf-v6-c-card">
1326
- <div class="pf-v6-c-card__body">This is a card</div>
1327
- </div>
1328
- <div class="pf-v6-c-card">
1329
- <div class="pf-v6-c-card__body">This is a card</div>
1330
- </div>
1331
- <div class="pf-v6-c-card">
1332
- <div class="pf-v6-c-card__body">This is a card</div>
1333
- </div>
1334
- <div class="pf-v6-c-card">
1335
- <div class="pf-v6-c-card__body">This is a card</div>
1336
- </div>
1337
- <div class="pf-v6-c-card">
1338
- <div class="pf-v6-c-card__body">This is a card</div>
1300
+ </section>
1301
+ <section
1302
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
1303
+ >
1304
+ <div class="pf-v6-c-page__main-body">
1305
+ <div class="pf-v6-c-content">
1306
+ <h1>Main title</h1>
1307
+ <p>This is a full page demo.</p>
1339
1308
  </div>
1340
- <div class="pf-v6-c-card">
1341
- <div class="pf-v6-c-card__body">This is a card</div>
1309
+ </div>
1310
+ </section>
1311
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1312
+ <div class="pf-v6-c-page__main-body">
1313
+ <div class="pf-v6-l-gallery pf-m-gutter">
1314
+ <div class="pf-v6-c-card">
1315
+ <div class="pf-v6-c-card__body">This is a card</div>
1316
+ </div>
1317
+ <div class="pf-v6-c-card">
1318
+ <div class="pf-v6-c-card__body">This is a card</div>
1319
+ </div>
1320
+ <div class="pf-v6-c-card">
1321
+ <div class="pf-v6-c-card__body">This is a card</div>
1322
+ </div>
1323
+ <div class="pf-v6-c-card">
1324
+ <div class="pf-v6-c-card__body">This is a card</div>
1325
+ </div>
1326
+ <div class="pf-v6-c-card">
1327
+ <div class="pf-v6-c-card__body">This is a card</div>
1328
+ </div>
1329
+ <div class="pf-v6-c-card">
1330
+ <div class="pf-v6-c-card__body">This is a card</div>
1331
+ </div>
1332
+ <div class="pf-v6-c-card">
1333
+ <div class="pf-v6-c-card__body">This is a card</div>
1334
+ </div>
1335
+ <div class="pf-v6-c-card">
1336
+ <div class="pf-v6-c-card__body">This is a card</div>
1337
+ </div>
1338
+ <div class="pf-v6-c-card">
1339
+ <div class="pf-v6-c-card__body">This is a card</div>
1340
+ </div>
1341
+ <div class="pf-v6-c-card">
1342
+ <div class="pf-v6-c-card__body">This is a card</div>
1343
+ </div>
1342
1344
  </div>
1343
1345
  </div>
1344
- </div>
1345
- </section>
1346
- </main>
1346
+ </section>
1347
+ </main>
1348
+ </div>
1347
1349
  </div>
1348
1350
  </div>
1349
1351
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -2258,100 +2260,101 @@ section: components
2258
2260
  <div class="pf-v6-c-drawer__main">
2259
2261
  <div class="pf-v6-c-drawer__content">
2260
2262
  <div class="pf-v6-c-drawer__body">
2261
- <main class="pf-v6-c-page__main" tabindex="-1">
2262
- // TODO should this be a page-main-list so there is not a duplicate main tag?
2263
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2264
- <div class="pf-v6-c-page__main-body">
2265
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2266
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2267
- <li class="pf-v6-c-breadcrumb__item">
2268
- <a
2269
- href="#"
2270
- class="pf-v6-c-breadcrumb__link"
2271
- >Section home</a>
2272
- </li>
2273
- <li class="pf-v6-c-breadcrumb__item">
2274
- <span class="pf-v6-c-breadcrumb__item-divider">
2275
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2276
- </span>
2263
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2264
+ <main class="pf-v6-c-page__main" tabindex="-1">
2265
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2266
+ <div class="pf-v6-c-page__main-body">
2267
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2268
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2269
+ <li class="pf-v6-c-breadcrumb__item">
2270
+ <a
2271
+ href="#"
2272
+ class="pf-v6-c-breadcrumb__link"
2273
+ >Section home</a>
2274
+ </li>
2275
+ <li class="pf-v6-c-breadcrumb__item">
2276
+ <span class="pf-v6-c-breadcrumb__item-divider">
2277
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2278
+ </span>
2277
2279
 
2278
- <a
2279
- href="#"
2280
- class="pf-v6-c-breadcrumb__link"
2281
- >Section title</a>
2282
- </li>
2283
- <li class="pf-v6-c-breadcrumb__item">
2284
- <span class="pf-v6-c-breadcrumb__item-divider">
2285
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2286
- </span>
2280
+ <a
2281
+ href="#"
2282
+ class="pf-v6-c-breadcrumb__link"
2283
+ >Section title</a>
2284
+ </li>
2285
+ <li class="pf-v6-c-breadcrumb__item">
2286
+ <span class="pf-v6-c-breadcrumb__item-divider">
2287
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2288
+ </span>
2287
2289
 
2288
- <a
2289
- href="#"
2290
- class="pf-v6-c-breadcrumb__link"
2291
- >Section title</a>
2292
- </li>
2293
- <li class="pf-v6-c-breadcrumb__item">
2294
- <span class="pf-v6-c-breadcrumb__item-divider">
2295
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2296
- </span>
2290
+ <a
2291
+ href="#"
2292
+ class="pf-v6-c-breadcrumb__link"
2293
+ >Section title</a>
2294
+ </li>
2295
+ <li class="pf-v6-c-breadcrumb__item">
2296
+ <span class="pf-v6-c-breadcrumb__item-divider">
2297
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2298
+ </span>
2297
2299
 
2298
- <a
2299
- href="#"
2300
- class="pf-v6-c-breadcrumb__link pf-m-current"
2301
- aria-current="page"
2302
- >Section landing</a>
2303
- </li>
2304
- </ol>
2305
- </nav>
2306
- </div>
2307
- </section>
2308
- <section
2309
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
2310
- >
2311
- <div class="pf-v6-c-page__main-body">
2312
- <div class="pf-v6-c-content">
2313
- <h1>Main title</h1>
2314
- <p>This is a full page demo.</p>
2300
+ <a
2301
+ href="#"
2302
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2303
+ aria-current="page"
2304
+ >Section landing</a>
2305
+ </li>
2306
+ </ol>
2307
+ </nav>
2315
2308
  </div>
2316
- </div>
2317
- </section>
2318
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2319
- <div class="pf-v6-c-page__main-body">
2320
- <div class="pf-v6-l-gallery pf-m-gutter">
2321
- <div class="pf-v6-c-card">
2322
- <div class="pf-v6-c-card__body">This is a card</div>
2323
- </div>
2324
- <div class="pf-v6-c-card">
2325
- <div class="pf-v6-c-card__body">This is a card</div>
2326
- </div>
2327
- <div class="pf-v6-c-card">
2328
- <div class="pf-v6-c-card__body">This is a card</div>
2329
- </div>
2330
- <div class="pf-v6-c-card">
2331
- <div class="pf-v6-c-card__body">This is a card</div>
2332
- </div>
2333
- <div class="pf-v6-c-card">
2334
- <div class="pf-v6-c-card__body">This is a card</div>
2335
- </div>
2336
- <div class="pf-v6-c-card">
2337
- <div class="pf-v6-c-card__body">This is a card</div>
2338
- </div>
2339
- <div class="pf-v6-c-card">
2340
- <div class="pf-v6-c-card__body">This is a card</div>
2341
- </div>
2342
- <div class="pf-v6-c-card">
2343
- <div class="pf-v6-c-card__body">This is a card</div>
2344
- </div>
2345
- <div class="pf-v6-c-card">
2346
- <div class="pf-v6-c-card__body">This is a card</div>
2309
+ </section>
2310
+ <section
2311
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
2312
+ >
2313
+ <div class="pf-v6-c-page__main-body">
2314
+ <div class="pf-v6-c-content">
2315
+ <h1>Main title</h1>
2316
+ <p>This is a full page demo.</p>
2347
2317
  </div>
2348
- <div class="pf-v6-c-card">
2349
- <div class="pf-v6-c-card__body">This is a card</div>
2318
+ </div>
2319
+ </section>
2320
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2321
+ <div class="pf-v6-c-page__main-body">
2322
+ <div class="pf-v6-l-gallery pf-m-gutter">
2323
+ <div class="pf-v6-c-card">
2324
+ <div class="pf-v6-c-card__body">This is a card</div>
2325
+ </div>
2326
+ <div class="pf-v6-c-card">
2327
+ <div class="pf-v6-c-card__body">This is a card</div>
2328
+ </div>
2329
+ <div class="pf-v6-c-card">
2330
+ <div class="pf-v6-c-card__body">This is a card</div>
2331
+ </div>
2332
+ <div class="pf-v6-c-card">
2333
+ <div class="pf-v6-c-card__body">This is a card</div>
2334
+ </div>
2335
+ <div class="pf-v6-c-card">
2336
+ <div class="pf-v6-c-card__body">This is a card</div>
2337
+ </div>
2338
+ <div class="pf-v6-c-card">
2339
+ <div class="pf-v6-c-card__body">This is a card</div>
2340
+ </div>
2341
+ <div class="pf-v6-c-card">
2342
+ <div class="pf-v6-c-card__body">This is a card</div>
2343
+ </div>
2344
+ <div class="pf-v6-c-card">
2345
+ <div class="pf-v6-c-card__body">This is a card</div>
2346
+ </div>
2347
+ <div class="pf-v6-c-card">
2348
+ <div class="pf-v6-c-card__body">This is a card</div>
2349
+ </div>
2350
+ <div class="pf-v6-c-card">
2351
+ <div class="pf-v6-c-card__body">This is a card</div>
2352
+ </div>
2350
2353
  </div>
2351
2354
  </div>
2352
- </div>
2353
- </section>
2354
- </main>
2355
+ </section>
2356
+ </main>
2357
+ </div>
2355
2358
  </div>
2356
2359
  </div>
2357
2360
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -3269,100 +3272,101 @@ section: components
3269
3272
  <div class="pf-v6-c-drawer__main">
3270
3273
  <div class="pf-v6-c-drawer__content">
3271
3274
  <div class="pf-v6-c-drawer__body">
3272
- <main class="pf-v6-c-page__main" tabindex="-1">
3273
- // TODO should this be a page-main-list so there is not a duplicate main tag?
3274
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3275
- <div class="pf-v6-c-page__main-body">
3276
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3277
- <ol class="pf-v6-c-breadcrumb__list" role="list">
3278
- <li class="pf-v6-c-breadcrumb__item">
3279
- <a
3280
- href="#"
3281
- class="pf-v6-c-breadcrumb__link"
3282
- >Section home</a>
3283
- </li>
3284
- <li class="pf-v6-c-breadcrumb__item">
3285
- <span class="pf-v6-c-breadcrumb__item-divider">
3286
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3287
- </span>
3275
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3276
+ <main class="pf-v6-c-page__main" tabindex="-1">
3277
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3278
+ <div class="pf-v6-c-page__main-body">
3279
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3280
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3281
+ <li class="pf-v6-c-breadcrumb__item">
3282
+ <a
3283
+ href="#"
3284
+ class="pf-v6-c-breadcrumb__link"
3285
+ >Section home</a>
3286
+ </li>
3287
+ <li class="pf-v6-c-breadcrumb__item">
3288
+ <span class="pf-v6-c-breadcrumb__item-divider">
3289
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3290
+ </span>
3288
3291
 
3289
- <a
3290
- href="#"
3291
- class="pf-v6-c-breadcrumb__link"
3292
- >Section title</a>
3293
- </li>
3294
- <li class="pf-v6-c-breadcrumb__item">
3295
- <span class="pf-v6-c-breadcrumb__item-divider">
3296
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3297
- </span>
3292
+ <a
3293
+ href="#"
3294
+ class="pf-v6-c-breadcrumb__link"
3295
+ >Section title</a>
3296
+ </li>
3297
+ <li class="pf-v6-c-breadcrumb__item">
3298
+ <span class="pf-v6-c-breadcrumb__item-divider">
3299
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3300
+ </span>
3298
3301
 
3299
- <a
3300
- href="#"
3301
- class="pf-v6-c-breadcrumb__link"
3302
- >Section title</a>
3303
- </li>
3304
- <li class="pf-v6-c-breadcrumb__item">
3305
- <span class="pf-v6-c-breadcrumb__item-divider">
3306
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3307
- </span>
3302
+ <a
3303
+ href="#"
3304
+ class="pf-v6-c-breadcrumb__link"
3305
+ >Section title</a>
3306
+ </li>
3307
+ <li class="pf-v6-c-breadcrumb__item">
3308
+ <span class="pf-v6-c-breadcrumb__item-divider">
3309
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3310
+ </span>
3308
3311
 
3309
- <a
3310
- href="#"
3311
- class="pf-v6-c-breadcrumb__link pf-m-current"
3312
- aria-current="page"
3313
- >Section landing</a>
3314
- </li>
3315
- </ol>
3316
- </nav>
3317
- </div>
3318
- </section>
3319
- <section
3320
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
3321
- >
3322
- <div class="pf-v6-c-page__main-body">
3323
- <div class="pf-v6-c-content">
3324
- <h1>Main title</h1>
3325
- <p>This is a full page demo.</p>
3312
+ <a
3313
+ href="#"
3314
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3315
+ aria-current="page"
3316
+ >Section landing</a>
3317
+ </li>
3318
+ </ol>
3319
+ </nav>
3326
3320
  </div>
3327
- </div>
3328
- </section>
3329
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3330
- <div class="pf-v6-c-page__main-body">
3331
- <div class="pf-v6-l-gallery pf-m-gutter">
3332
- <div class="pf-v6-c-card">
3333
- <div class="pf-v6-c-card__body">This is a card</div>
3334
- </div>
3335
- <div class="pf-v6-c-card">
3336
- <div class="pf-v6-c-card__body">This is a card</div>
3337
- </div>
3338
- <div class="pf-v6-c-card">
3339
- <div class="pf-v6-c-card__body">This is a card</div>
3340
- </div>
3341
- <div class="pf-v6-c-card">
3342
- <div class="pf-v6-c-card__body">This is a card</div>
3343
- </div>
3344
- <div class="pf-v6-c-card">
3345
- <div class="pf-v6-c-card__body">This is a card</div>
3346
- </div>
3347
- <div class="pf-v6-c-card">
3348
- <div class="pf-v6-c-card__body">This is a card</div>
3349
- </div>
3350
- <div class="pf-v6-c-card">
3351
- <div class="pf-v6-c-card__body">This is a card</div>
3352
- </div>
3353
- <div class="pf-v6-c-card">
3354
- <div class="pf-v6-c-card__body">This is a card</div>
3355
- </div>
3356
- <div class="pf-v6-c-card">
3357
- <div class="pf-v6-c-card__body">This is a card</div>
3321
+ </section>
3322
+ <section
3323
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
3324
+ >
3325
+ <div class="pf-v6-c-page__main-body">
3326
+ <div class="pf-v6-c-content">
3327
+ <h1>Main title</h1>
3328
+ <p>This is a full page demo.</p>
3358
3329
  </div>
3359
- <div class="pf-v6-c-card">
3360
- <div class="pf-v6-c-card__body">This is a card</div>
3330
+ </div>
3331
+ </section>
3332
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3333
+ <div class="pf-v6-c-page__main-body">
3334
+ <div class="pf-v6-l-gallery pf-m-gutter">
3335
+ <div class="pf-v6-c-card">
3336
+ <div class="pf-v6-c-card__body">This is a card</div>
3337
+ </div>
3338
+ <div class="pf-v6-c-card">
3339
+ <div class="pf-v6-c-card__body">This is a card</div>
3340
+ </div>
3341
+ <div class="pf-v6-c-card">
3342
+ <div class="pf-v6-c-card__body">This is a card</div>
3343
+ </div>
3344
+ <div class="pf-v6-c-card">
3345
+ <div class="pf-v6-c-card__body">This is a card</div>
3346
+ </div>
3347
+ <div class="pf-v6-c-card">
3348
+ <div class="pf-v6-c-card__body">This is a card</div>
3349
+ </div>
3350
+ <div class="pf-v6-c-card">
3351
+ <div class="pf-v6-c-card__body">This is a card</div>
3352
+ </div>
3353
+ <div class="pf-v6-c-card">
3354
+ <div class="pf-v6-c-card__body">This is a card</div>
3355
+ </div>
3356
+ <div class="pf-v6-c-card">
3357
+ <div class="pf-v6-c-card__body">This is a card</div>
3358
+ </div>
3359
+ <div class="pf-v6-c-card">
3360
+ <div class="pf-v6-c-card__body">This is a card</div>
3361
+ </div>
3362
+ <div class="pf-v6-c-card">
3363
+ <div class="pf-v6-c-card__body">This is a card</div>
3364
+ </div>
3361
3365
  </div>
3362
3366
  </div>
3363
- </div>
3364
- </section>
3365
- </main>
3367
+ </section>
3368
+ </main>
3369
+ </div>
3366
3370
  </div>
3367
3371
  </div>
3368
3372
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -4279,100 +4283,101 @@ section: components
4279
4283
  <div class="pf-v6-c-drawer__main">
4280
4284
  <div class="pf-v6-c-drawer__content">
4281
4285
  <div class="pf-v6-c-drawer__body">
4282
- <main class="pf-v6-c-page__main" tabindex="-1">
4283
- // TODO should this be a page-main-list so there is not a duplicate main tag?
4284
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4285
- <div class="pf-v6-c-page__main-body">
4286
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4287
- <ol class="pf-v6-c-breadcrumb__list" role="list">
4288
- <li class="pf-v6-c-breadcrumb__item">
4289
- <a
4290
- href="#"
4291
- class="pf-v6-c-breadcrumb__link"
4292
- >Section home</a>
4293
- </li>
4294
- <li class="pf-v6-c-breadcrumb__item">
4295
- <span class="pf-v6-c-breadcrumb__item-divider">
4296
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4297
- </span>
4286
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4287
+ <main class="pf-v6-c-page__main" tabindex="-1">
4288
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4289
+ <div class="pf-v6-c-page__main-body">
4290
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4291
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4292
+ <li class="pf-v6-c-breadcrumb__item">
4293
+ <a
4294
+ href="#"
4295
+ class="pf-v6-c-breadcrumb__link"
4296
+ >Section home</a>
4297
+ </li>
4298
+ <li class="pf-v6-c-breadcrumb__item">
4299
+ <span class="pf-v6-c-breadcrumb__item-divider">
4300
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4301
+ </span>
4298
4302
 
4299
- <a
4300
- href="#"
4301
- class="pf-v6-c-breadcrumb__link"
4302
- >Section title</a>
4303
- </li>
4304
- <li class="pf-v6-c-breadcrumb__item">
4305
- <span class="pf-v6-c-breadcrumb__item-divider">
4306
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4307
- </span>
4303
+ <a
4304
+ href="#"
4305
+ class="pf-v6-c-breadcrumb__link"
4306
+ >Section title</a>
4307
+ </li>
4308
+ <li class="pf-v6-c-breadcrumb__item">
4309
+ <span class="pf-v6-c-breadcrumb__item-divider">
4310
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4311
+ </span>
4308
4312
 
4309
- <a
4310
- href="#"
4311
- class="pf-v6-c-breadcrumb__link"
4312
- >Section title</a>
4313
- </li>
4314
- <li class="pf-v6-c-breadcrumb__item">
4315
- <span class="pf-v6-c-breadcrumb__item-divider">
4316
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4317
- </span>
4313
+ <a
4314
+ href="#"
4315
+ class="pf-v6-c-breadcrumb__link"
4316
+ >Section title</a>
4317
+ </li>
4318
+ <li class="pf-v6-c-breadcrumb__item">
4319
+ <span class="pf-v6-c-breadcrumb__item-divider">
4320
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4321
+ </span>
4318
4322
 
4319
- <a
4320
- href="#"
4321
- class="pf-v6-c-breadcrumb__link pf-m-current"
4322
- aria-current="page"
4323
- >Section landing</a>
4324
- </li>
4325
- </ol>
4326
- </nav>
4327
- </div>
4328
- </section>
4329
- <section
4330
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
4331
- >
4332
- <div class="pf-v6-c-page__main-body">
4333
- <div class="pf-v6-c-content">
4334
- <h1>Main title</h1>
4335
- <p>This is a full page demo.</p>
4323
+ <a
4324
+ href="#"
4325
+ class="pf-v6-c-breadcrumb__link pf-m-current"
4326
+ aria-current="page"
4327
+ >Section landing</a>
4328
+ </li>
4329
+ </ol>
4330
+ </nav>
4336
4331
  </div>
4337
- </div>
4338
- </section>
4339
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4340
- <div class="pf-v6-c-page__main-body">
4341
- <div class="pf-v6-l-gallery pf-m-gutter">
4342
- <div class="pf-v6-c-card">
4343
- <div class="pf-v6-c-card__body">This is a card</div>
4344
- </div>
4345
- <div class="pf-v6-c-card">
4346
- <div class="pf-v6-c-card__body">This is a card</div>
4347
- </div>
4348
- <div class="pf-v6-c-card">
4349
- <div class="pf-v6-c-card__body">This is a card</div>
4350
- </div>
4351
- <div class="pf-v6-c-card">
4352
- <div class="pf-v6-c-card__body">This is a card</div>
4353
- </div>
4354
- <div class="pf-v6-c-card">
4355
- <div class="pf-v6-c-card__body">This is a card</div>
4356
- </div>
4357
- <div class="pf-v6-c-card">
4358
- <div class="pf-v6-c-card__body">This is a card</div>
4359
- </div>
4360
- <div class="pf-v6-c-card">
4361
- <div class="pf-v6-c-card__body">This is a card</div>
4362
- </div>
4363
- <div class="pf-v6-c-card">
4364
- <div class="pf-v6-c-card__body">This is a card</div>
4365
- </div>
4366
- <div class="pf-v6-c-card">
4367
- <div class="pf-v6-c-card__body">This is a card</div>
4332
+ </section>
4333
+ <section
4334
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
4335
+ >
4336
+ <div class="pf-v6-c-page__main-body">
4337
+ <div class="pf-v6-c-content">
4338
+ <h1>Main title</h1>
4339
+ <p>This is a full page demo.</p>
4368
4340
  </div>
4369
- <div class="pf-v6-c-card">
4370
- <div class="pf-v6-c-card__body">This is a card</div>
4341
+ </div>
4342
+ </section>
4343
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
4344
+ <div class="pf-v6-c-page__main-body">
4345
+ <div class="pf-v6-l-gallery pf-m-gutter">
4346
+ <div class="pf-v6-c-card">
4347
+ <div class="pf-v6-c-card__body">This is a card</div>
4348
+ </div>
4349
+ <div class="pf-v6-c-card">
4350
+ <div class="pf-v6-c-card__body">This is a card</div>
4351
+ </div>
4352
+ <div class="pf-v6-c-card">
4353
+ <div class="pf-v6-c-card__body">This is a card</div>
4354
+ </div>
4355
+ <div class="pf-v6-c-card">
4356
+ <div class="pf-v6-c-card__body">This is a card</div>
4357
+ </div>
4358
+ <div class="pf-v6-c-card">
4359
+ <div class="pf-v6-c-card__body">This is a card</div>
4360
+ </div>
4361
+ <div class="pf-v6-c-card">
4362
+ <div class="pf-v6-c-card__body">This is a card</div>
4363
+ </div>
4364
+ <div class="pf-v6-c-card">
4365
+ <div class="pf-v6-c-card__body">This is a card</div>
4366
+ </div>
4367
+ <div class="pf-v6-c-card">
4368
+ <div class="pf-v6-c-card__body">This is a card</div>
4369
+ </div>
4370
+ <div class="pf-v6-c-card">
4371
+ <div class="pf-v6-c-card__body">This is a card</div>
4372
+ </div>
4373
+ <div class="pf-v6-c-card">
4374
+ <div class="pf-v6-c-card__body">This is a card</div>
4375
+ </div>
4371
4376
  </div>
4372
4377
  </div>
4373
- </div>
4374
- </section>
4375
- </main>
4378
+ </section>
4379
+ </main>
4380
+ </div>
4376
4381
  </div>
4377
4382
  </div>
4378
4383
  <div class="pf-v6-c-drawer__panel pf-m-width-33">