@patternfly/patternfly 6.0.0-alpha.31 → 6.0.0-alpha.32

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 (16) hide show
  1. package/components/Pagination/pagination.css +61 -121
  2. package/components/Pagination/pagination.scss +48 -127
  3. package/docs/components/Pagination/examples/Pagination.md +663 -637
  4. package/docs/components/Toolbar/examples/Toolbar.md +102 -100
  5. package/docs/demos/CardView/examples/CardView.md +102 -98
  6. package/docs/demos/DataList/examples/DataList.md +408 -392
  7. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +319 -299
  8. package/docs/demos/Table/examples/Table.md +1239 -1193
  9. package/docs/demos/Toolbar/examples/Toolbar.md +408 -392
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +61 -125
  12. package/patternfly-theme-dark-unversioned.css +61 -125
  13. package/patternfly.css +61 -125
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/components/Pagination/themes/dark/pagination.scss +0 -7
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -411,55 +411,57 @@ wrapperTag: div
411
411
 
412
412
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
413
413
  <div class="pf-v5-c-pagination pf-m-compact">
414
- <div class="pf-v5-c-options-menu">
415
- <button
416
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
417
- type="button"
418
- id="data-list-basic-example-toolbar-top-pagination-toggle"
419
- aria-haspopup="listbox"
420
- aria-expanded="false"
421
- >
422
- <span class="pf-v5-c-options-menu__toggle-text">
423
- <b>1 - 10</b>&nbsp;of&nbsp;
424
- <b>36</b>
425
- </span>
426
- <div class="pf-v5-c-options-menu__toggle-icon">
427
- <i class="fas fa-caret-down" aria-hidden="true"></i>
428
- </div>
429
- </button>
430
- <ul
431
- class="pf-v5-c-options-menu__menu"
432
- role="menu"
433
- aria-labelledby="data-list-basic-example-toolbar-top-pagination-toggle"
434
- hidden
435
- >
436
- <li role="none">
437
- <button
438
- class="pf-v5-c-options-menu__menu-item"
439
- type="button"
440
- role="menuitem"
441
- >5 per page</button>
442
- </li>
443
- <li role="none">
444
- <button
445
- class="pf-v5-c-options-menu__menu-item"
446
- type="button"
447
- role="menuitem"
448
- >
449
- 10 per page
450
- <div class="pf-v5-c-options-menu__menu-item-icon">
451
- <i class="fas fa-check" aria-hidden="true"></i>
452
- </div>
453
- </button>
454
- </li>
455
- <li role="none">
456
- <button
457
- class="pf-v5-c-options-menu__menu-item"
458
- type="button"
459
- role="menuitem"
460
- >20 per page</button>
461
- </li>
462
- </ul>
414
+ <div class="pf-v5-c-pagination__page-menu">
415
+ <div class="pf-v5-c-options-menu">
416
+ <button
417
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
418
+ type="button"
419
+ id="data-list-basic-example-toolbar-top-pagination-toggle"
420
+ aria-haspopup="listbox"
421
+ aria-expanded="false"
422
+ >
423
+ <span class="pf-v5-c-options-menu__toggle-text">
424
+ <b>1 - 10</b>&nbsp;of&nbsp;
425
+ <b>36</b>
426
+ </span>
427
+ <div class="pf-v5-c-options-menu__toggle-icon">
428
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
429
+ </div>
430
+ </button>
431
+ <ul
432
+ class="pf-v5-c-options-menu__menu"
433
+ role="menu"
434
+ aria-labelledby="data-list-basic-example-toolbar-top-pagination-toggle"
435
+ hidden
436
+ >
437
+ <li role="none">
438
+ <button
439
+ class="pf-v5-c-options-menu__menu-item"
440
+ type="button"
441
+ role="menuitem"
442
+ >5 per page</button>
443
+ </li>
444
+ <li role="none">
445
+ <button
446
+ class="pf-v5-c-options-menu__menu-item"
447
+ type="button"
448
+ role="menuitem"
449
+ >
450
+ 10 per page
451
+ <div class="pf-v5-c-options-menu__menu-item-icon">
452
+ <i class="fas fa-check" aria-hidden="true"></i>
453
+ </div>
454
+ </button>
455
+ </li>
456
+ <li role="none">
457
+ <button
458
+ class="pf-v5-c-options-menu__menu-item"
459
+ type="button"
460
+ role="menuitem"
461
+ >20 per page</button>
462
+ </li>
463
+ </ul>
464
+ </div>
463
465
  </div>
464
466
  <nav
465
467
  class="pf-v5-c-pagination__nav"
@@ -827,55 +829,57 @@ wrapperTag: div
827
829
  </li>
828
830
  </ul>
829
831
  <div class="pf-v5-c-pagination pf-m-bottom">
830
- <div class="pf-v5-c-options-menu pf-m-top">
831
- <button
832
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
833
- type="button"
834
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
835
- aria-haspopup="listbox"
836
- aria-expanded="false"
837
- >
838
- <span class="pf-v5-c-options-menu__toggle-text">
839
- <b>1 - 10</b>&nbsp;of&nbsp;
840
- <b>36</b>
841
- </span>
842
- <div class="pf-v5-c-options-menu__toggle-icon">
843
- <i class="fas fa-caret-down" aria-hidden="true"></i>
844
- </div>
845
- </button>
846
- <ul
847
- class="pf-v5-c-options-menu__menu pf-m-top"
848
- role="menu"
849
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
850
- hidden
851
- >
852
- <li role="none">
853
- <button
854
- class="pf-v5-c-options-menu__menu-item"
855
- type="button"
856
- role="menuitem"
857
- >5 per page</button>
858
- </li>
859
- <li role="none">
860
- <button
861
- class="pf-v5-c-options-menu__menu-item"
862
- type="button"
863
- role="menuitem"
864
- >
865
- 10 per page
866
- <div class="pf-v5-c-options-menu__menu-item-icon">
867
- <i class="fas fa-check" aria-hidden="true"></i>
868
- </div>
869
- </button>
870
- </li>
871
- <li role="none">
872
- <button
873
- class="pf-v5-c-options-menu__menu-item"
874
- type="button"
875
- role="menuitem"
876
- >20 per page</button>
877
- </li>
878
- </ul>
832
+ <div class="pf-v5-c-pagination__page-menu">
833
+ <div class="pf-v5-c-options-menu pf-m-top">
834
+ <button
835
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
836
+ type="button"
837
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
838
+ aria-haspopup="listbox"
839
+ aria-expanded="false"
840
+ >
841
+ <span class="pf-v5-c-options-menu__toggle-text">
842
+ <b>1 - 10</b>&nbsp;of&nbsp;
843
+ <b>36</b>
844
+ </span>
845
+ <div class="pf-v5-c-options-menu__toggle-icon">
846
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
847
+ </div>
848
+ </button>
849
+ <ul
850
+ class="pf-v5-c-options-menu__menu pf-m-top"
851
+ role="menu"
852
+ aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
853
+ hidden
854
+ >
855
+ <li role="none">
856
+ <button
857
+ class="pf-v5-c-options-menu__menu-item"
858
+ type="button"
859
+ role="menuitem"
860
+ >5 per page</button>
861
+ </li>
862
+ <li role="none">
863
+ <button
864
+ class="pf-v5-c-options-menu__menu-item"
865
+ type="button"
866
+ role="menuitem"
867
+ >
868
+ 10 per page
869
+ <div class="pf-v5-c-options-menu__menu-item-icon">
870
+ <i class="fas fa-check" aria-hidden="true"></i>
871
+ </div>
872
+ </button>
873
+ </li>
874
+ <li role="none">
875
+ <button
876
+ class="pf-v5-c-options-menu__menu-item"
877
+ type="button"
878
+ role="menuitem"
879
+ >20 per page</button>
880
+ </li>
881
+ </ul>
882
+ </div>
879
883
  </div>
880
884
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
881
885
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
@@ -1369,55 +1373,57 @@ wrapperTag: div
1369
1373
 
1370
1374
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
1371
1375
  <div class="pf-v5-c-pagination pf-m-compact">
1372
- <div class="pf-v5-c-options-menu">
1373
- <button
1374
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1375
- type="button"
1376
- id="data-list-actionable-example-toolbar-top-pagination-toggle"
1377
- aria-haspopup="listbox"
1378
- aria-expanded="false"
1379
- >
1380
- <span class="pf-v5-c-options-menu__toggle-text">
1381
- <b>1 - 10</b>&nbsp;of&nbsp;
1382
- <b>36</b>
1383
- </span>
1384
- <div class="pf-v5-c-options-menu__toggle-icon">
1385
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1386
- </div>
1387
- </button>
1388
- <ul
1389
- class="pf-v5-c-options-menu__menu"
1390
- role="menu"
1391
- aria-labelledby="data-list-actionable-example-toolbar-top-pagination-toggle"
1392
- hidden
1393
- >
1394
- <li role="none">
1395
- <button
1396
- class="pf-v5-c-options-menu__menu-item"
1397
- type="button"
1398
- role="menuitem"
1399
- >5 per page</button>
1400
- </li>
1401
- <li role="none">
1402
- <button
1403
- class="pf-v5-c-options-menu__menu-item"
1404
- type="button"
1405
- role="menuitem"
1406
- >
1407
- 10 per page
1408
- <div class="pf-v5-c-options-menu__menu-item-icon">
1409
- <i class="fas fa-check" aria-hidden="true"></i>
1410
- </div>
1411
- </button>
1412
- </li>
1413
- <li role="none">
1414
- <button
1415
- class="pf-v5-c-options-menu__menu-item"
1416
- type="button"
1417
- role="menuitem"
1418
- >20 per page</button>
1419
- </li>
1420
- </ul>
1376
+ <div class="pf-v5-c-pagination__page-menu">
1377
+ <div class="pf-v5-c-options-menu">
1378
+ <button
1379
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1380
+ type="button"
1381
+ id="data-list-actionable-example-toolbar-top-pagination-toggle"
1382
+ aria-haspopup="listbox"
1383
+ aria-expanded="false"
1384
+ >
1385
+ <span class="pf-v5-c-options-menu__toggle-text">
1386
+ <b>1 - 10</b>&nbsp;of&nbsp;
1387
+ <b>36</b>
1388
+ </span>
1389
+ <div class="pf-v5-c-options-menu__toggle-icon">
1390
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1391
+ </div>
1392
+ </button>
1393
+ <ul
1394
+ class="pf-v5-c-options-menu__menu"
1395
+ role="menu"
1396
+ aria-labelledby="data-list-actionable-example-toolbar-top-pagination-toggle"
1397
+ hidden
1398
+ >
1399
+ <li role="none">
1400
+ <button
1401
+ class="pf-v5-c-options-menu__menu-item"
1402
+ type="button"
1403
+ role="menuitem"
1404
+ >5 per page</button>
1405
+ </li>
1406
+ <li role="none">
1407
+ <button
1408
+ class="pf-v5-c-options-menu__menu-item"
1409
+ type="button"
1410
+ role="menuitem"
1411
+ >
1412
+ 10 per page
1413
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1414
+ <i class="fas fa-check" aria-hidden="true"></i>
1415
+ </div>
1416
+ </button>
1417
+ </li>
1418
+ <li role="none">
1419
+ <button
1420
+ class="pf-v5-c-options-menu__menu-item"
1421
+ type="button"
1422
+ role="menuitem"
1423
+ >20 per page</button>
1424
+ </li>
1425
+ </ul>
1426
+ </div>
1421
1427
  </div>
1422
1428
  <nav
1423
1429
  class="pf-v5-c-pagination__nav"
@@ -1750,55 +1756,57 @@ wrapperTag: div
1750
1756
  </li>
1751
1757
  </ul>
1752
1758
  <div class="pf-v5-c-pagination pf-m-bottom">
1753
- <div class="pf-v5-c-options-menu pf-m-top">
1754
- <button
1755
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1756
- type="button"
1757
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1758
- aria-haspopup="listbox"
1759
- aria-expanded="false"
1760
- >
1761
- <span class="pf-v5-c-options-menu__toggle-text">
1762
- <b>1 - 10</b>&nbsp;of&nbsp;
1763
- <b>36</b>
1764
- </span>
1765
- <div class="pf-v5-c-options-menu__toggle-icon">
1766
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1767
- </div>
1768
- </button>
1769
- <ul
1770
- class="pf-v5-c-options-menu__menu pf-m-top"
1771
- role="menu"
1772
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1773
- hidden
1774
- >
1775
- <li role="none">
1776
- <button
1777
- class="pf-v5-c-options-menu__menu-item"
1778
- type="button"
1779
- role="menuitem"
1780
- >5 per page</button>
1781
- </li>
1782
- <li role="none">
1783
- <button
1784
- class="pf-v5-c-options-menu__menu-item"
1785
- type="button"
1786
- role="menuitem"
1787
- >
1788
- 10 per page
1789
- <div class="pf-v5-c-options-menu__menu-item-icon">
1790
- <i class="fas fa-check" aria-hidden="true"></i>
1791
- </div>
1792
- </button>
1793
- </li>
1794
- <li role="none">
1795
- <button
1796
- class="pf-v5-c-options-menu__menu-item"
1797
- type="button"
1798
- role="menuitem"
1799
- >20 per page</button>
1800
- </li>
1801
- </ul>
1759
+ <div class="pf-v5-c-pagination__page-menu">
1760
+ <div class="pf-v5-c-options-menu pf-m-top">
1761
+ <button
1762
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1763
+ type="button"
1764
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1765
+ aria-haspopup="listbox"
1766
+ aria-expanded="false"
1767
+ >
1768
+ <span class="pf-v5-c-options-menu__toggle-text">
1769
+ <b>1 - 10</b>&nbsp;of&nbsp;
1770
+ <b>36</b>
1771
+ </span>
1772
+ <div class="pf-v5-c-options-menu__toggle-icon">
1773
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1774
+ </div>
1775
+ </button>
1776
+ <ul
1777
+ class="pf-v5-c-options-menu__menu pf-m-top"
1778
+ role="menu"
1779
+ aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1780
+ hidden
1781
+ >
1782
+ <li role="none">
1783
+ <button
1784
+ class="pf-v5-c-options-menu__menu-item"
1785
+ type="button"
1786
+ role="menuitem"
1787
+ >5 per page</button>
1788
+ </li>
1789
+ <li role="none">
1790
+ <button
1791
+ class="pf-v5-c-options-menu__menu-item"
1792
+ type="button"
1793
+ role="menuitem"
1794
+ >
1795
+ 10 per page
1796
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1797
+ <i class="fas fa-check" aria-hidden="true"></i>
1798
+ </div>
1799
+ </button>
1800
+ </li>
1801
+ <li role="none">
1802
+ <button
1803
+ class="pf-v5-c-options-menu__menu-item"
1804
+ type="button"
1805
+ role="menuitem"
1806
+ >20 per page</button>
1807
+ </li>
1808
+ </ul>
1809
+ </div>
1802
1810
  </div>
1803
1811
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1804
1812
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
@@ -2291,55 +2299,57 @@ wrapperTag: div
2291
2299
 
2292
2300
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2293
2301
  <div class="pf-v5-c-pagination pf-m-compact">
2294
- <div class="pf-v5-c-options-menu">
2295
- <button
2296
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2297
- type="button"
2298
- id="data-list-expandable-example-toolbar-top-pagination-toggle"
2299
- aria-haspopup="listbox"
2300
- aria-expanded="false"
2301
- >
2302
- <span class="pf-v5-c-options-menu__toggle-text">
2303
- <b>1 - 10</b>&nbsp;of&nbsp;
2304
- <b>36</b>
2305
- </span>
2306
- <div class="pf-v5-c-options-menu__toggle-icon">
2307
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2308
- </div>
2309
- </button>
2310
- <ul
2311
- class="pf-v5-c-options-menu__menu"
2312
- role="menu"
2313
- aria-labelledby="data-list-expandable-example-toolbar-top-pagination-toggle"
2314
- hidden
2315
- >
2316
- <li role="none">
2317
- <button
2318
- class="pf-v5-c-options-menu__menu-item"
2319
- type="button"
2320
- role="menuitem"
2321
- >5 per page</button>
2322
- </li>
2323
- <li role="none">
2324
- <button
2325
- class="pf-v5-c-options-menu__menu-item"
2326
- type="button"
2327
- role="menuitem"
2328
- >
2329
- 10 per page
2330
- <div class="pf-v5-c-options-menu__menu-item-icon">
2331
- <i class="fas fa-check" aria-hidden="true"></i>
2332
- </div>
2333
- </button>
2334
- </li>
2335
- <li role="none">
2336
- <button
2337
- class="pf-v5-c-options-menu__menu-item"
2338
- type="button"
2339
- role="menuitem"
2340
- >20 per page</button>
2341
- </li>
2342
- </ul>
2302
+ <div class="pf-v5-c-pagination__page-menu">
2303
+ <div class="pf-v5-c-options-menu">
2304
+ <button
2305
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2306
+ type="button"
2307
+ id="data-list-expandable-example-toolbar-top-pagination-toggle"
2308
+ aria-haspopup="listbox"
2309
+ aria-expanded="false"
2310
+ >
2311
+ <span class="pf-v5-c-options-menu__toggle-text">
2312
+ <b>1 - 10</b>&nbsp;of&nbsp;
2313
+ <b>36</b>
2314
+ </span>
2315
+ <div class="pf-v5-c-options-menu__toggle-icon">
2316
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2317
+ </div>
2318
+ </button>
2319
+ <ul
2320
+ class="pf-v5-c-options-menu__menu"
2321
+ role="menu"
2322
+ aria-labelledby="data-list-expandable-example-toolbar-top-pagination-toggle"
2323
+ hidden
2324
+ >
2325
+ <li role="none">
2326
+ <button
2327
+ class="pf-v5-c-options-menu__menu-item"
2328
+ type="button"
2329
+ role="menuitem"
2330
+ >5 per page</button>
2331
+ </li>
2332
+ <li role="none">
2333
+ <button
2334
+ class="pf-v5-c-options-menu__menu-item"
2335
+ type="button"
2336
+ role="menuitem"
2337
+ >
2338
+ 10 per page
2339
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2340
+ <i class="fas fa-check" aria-hidden="true"></i>
2341
+ </div>
2342
+ </button>
2343
+ </li>
2344
+ <li role="none">
2345
+ <button
2346
+ class="pf-v5-c-options-menu__menu-item"
2347
+ type="button"
2348
+ role="menuitem"
2349
+ >20 per page</button>
2350
+ </li>
2351
+ </ul>
2352
+ </div>
2343
2353
  </div>
2344
2354
  <nav
2345
2355
  class="pf-v5-c-pagination__nav"
@@ -3422,55 +3432,57 @@ wrapperTag: div
3422
3432
  </li>
3423
3433
  </ul>
3424
3434
  <div class="pf-v5-c-pagination pf-m-bottom">
3425
- <div class="pf-v5-c-options-menu pf-m-top">
3426
- <button
3427
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3428
- type="button"
3429
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3430
- aria-haspopup="listbox"
3431
- aria-expanded="false"
3432
- >
3433
- <span class="pf-v5-c-options-menu__toggle-text">
3434
- <b>1 - 10</b>&nbsp;of&nbsp;
3435
- <b>36</b>
3436
- </span>
3437
- <div class="pf-v5-c-options-menu__toggle-icon">
3438
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3439
- </div>
3440
- </button>
3441
- <ul
3442
- class="pf-v5-c-options-menu__menu pf-m-top"
3443
- role="menu"
3444
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3445
- hidden
3446
- >
3447
- <li role="none">
3448
- <button
3449
- class="pf-v5-c-options-menu__menu-item"
3450
- type="button"
3451
- role="menuitem"
3452
- >5 per page</button>
3453
- </li>
3454
- <li role="none">
3455
- <button
3456
- class="pf-v5-c-options-menu__menu-item"
3457
- type="button"
3458
- role="menuitem"
3459
- >
3460
- 10 per page
3461
- <div class="pf-v5-c-options-menu__menu-item-icon">
3462
- <i class="fas fa-check" aria-hidden="true"></i>
3463
- </div>
3464
- </button>
3465
- </li>
3466
- <li role="none">
3467
- <button
3468
- class="pf-v5-c-options-menu__menu-item"
3469
- type="button"
3470
- role="menuitem"
3471
- >20 per page</button>
3472
- </li>
3473
- </ul>
3435
+ <div class="pf-v5-c-pagination__page-menu">
3436
+ <div class="pf-v5-c-options-menu pf-m-top">
3437
+ <button
3438
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3439
+ type="button"
3440
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3441
+ aria-haspopup="listbox"
3442
+ aria-expanded="false"
3443
+ >
3444
+ <span class="pf-v5-c-options-menu__toggle-text">
3445
+ <b>1 - 10</b>&nbsp;of&nbsp;
3446
+ <b>36</b>
3447
+ </span>
3448
+ <div class="pf-v5-c-options-menu__toggle-icon">
3449
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3450
+ </div>
3451
+ </button>
3452
+ <ul
3453
+ class="pf-v5-c-options-menu__menu pf-m-top"
3454
+ role="menu"
3455
+ aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3456
+ hidden
3457
+ >
3458
+ <li role="none">
3459
+ <button
3460
+ class="pf-v5-c-options-menu__menu-item"
3461
+ type="button"
3462
+ role="menuitem"
3463
+ >5 per page</button>
3464
+ </li>
3465
+ <li role="none">
3466
+ <button
3467
+ class="pf-v5-c-options-menu__menu-item"
3468
+ type="button"
3469
+ role="menuitem"
3470
+ >
3471
+ 10 per page
3472
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3473
+ <i class="fas fa-check" aria-hidden="true"></i>
3474
+ </div>
3475
+ </button>
3476
+ </li>
3477
+ <li role="none">
3478
+ <button
3479
+ class="pf-v5-c-options-menu__menu-item"
3480
+ type="button"
3481
+ role="menuitem"
3482
+ >20 per page</button>
3483
+ </li>
3484
+ </ul>
3485
+ </div>
3474
3486
  </div>
3475
3487
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3476
3488
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
@@ -3925,55 +3937,57 @@ wrapperTag: div
3925
3937
 
3926
3938
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3927
3939
  <div class="pf-v5-c-pagination pf-m-compact">
3928
- <div class="pf-v5-c-options-menu">
3929
- <button
3930
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3931
- type="button"
3932
- id="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3933
- aria-haspopup="listbox"
3934
- aria-expanded="false"
3935
- >
3936
- <span class="pf-v5-c-options-menu__toggle-text">
3937
- <b>1 - 10</b>&nbsp;of&nbsp;
3938
- <b>36</b>
3939
- </span>
3940
- <div class="pf-v5-c-options-menu__toggle-icon">
3941
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3942
- </div>
3943
- </button>
3944
- <ul
3945
- class="pf-v5-c-options-menu__menu"
3946
- role="menu"
3947
- aria-labelledby="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3948
- hidden
3949
- >
3950
- <li role="none">
3951
- <button
3952
- class="pf-v5-c-options-menu__menu-item"
3953
- type="button"
3954
- role="menuitem"
3955
- >5 per page</button>
3956
- </li>
3957
- <li role="none">
3958
- <button
3959
- class="pf-v5-c-options-menu__menu-item"
3960
- type="button"
3961
- role="menuitem"
3962
- >
3963
- 10 per page
3964
- <div class="pf-v5-c-options-menu__menu-item-icon">
3965
- <i class="fas fa-check" aria-hidden="true"></i>
3966
- </div>
3967
- </button>
3968
- </li>
3969
- <li role="none">
3970
- <button
3971
- class="pf-v5-c-options-menu__menu-item"
3972
- type="button"
3973
- role="menuitem"
3974
- >20 per page</button>
3975
- </li>
3976
- </ul>
3940
+ <div class="pf-v5-c-pagination__page-menu">
3941
+ <div class="pf-v5-c-options-menu">
3942
+ <button
3943
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3944
+ type="button"
3945
+ id="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3946
+ aria-haspopup="listbox"
3947
+ aria-expanded="false"
3948
+ >
3949
+ <span class="pf-v5-c-options-menu__toggle-text">
3950
+ <b>1 - 10</b>&nbsp;of&nbsp;
3951
+ <b>36</b>
3952
+ </span>
3953
+ <div class="pf-v5-c-options-menu__toggle-icon">
3954
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3955
+ </div>
3956
+ </button>
3957
+ <ul
3958
+ class="pf-v5-c-options-menu__menu"
3959
+ role="menu"
3960
+ aria-labelledby="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3961
+ hidden
3962
+ >
3963
+ <li role="none">
3964
+ <button
3965
+ class="pf-v5-c-options-menu__menu-item"
3966
+ type="button"
3967
+ role="menuitem"
3968
+ >5 per page</button>
3969
+ </li>
3970
+ <li role="none">
3971
+ <button
3972
+ class="pf-v5-c-options-menu__menu-item"
3973
+ type="button"
3974
+ role="menuitem"
3975
+ >
3976
+ 10 per page
3977
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3978
+ <i class="fas fa-check" aria-hidden="true"></i>
3979
+ </div>
3980
+ </button>
3981
+ </li>
3982
+ <li role="none">
3983
+ <button
3984
+ class="pf-v5-c-options-menu__menu-item"
3985
+ type="button"
3986
+ role="menuitem"
3987
+ >20 per page</button>
3988
+ </li>
3989
+ </ul>
3990
+ </div>
3977
3991
  </div>
3978
3992
  <nav
3979
3993
  class="pf-v5-c-pagination__nav"
@@ -4341,55 +4355,57 @@ wrapperTag: div
4341
4355
  </li>
4342
4356
  </ul>
4343
4357
  <div class="pf-v5-c-pagination pf-m-bottom pf-m-static">
4344
- <div class="pf-v5-c-options-menu pf-m-top">
4345
- <button
4346
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4347
- type="button"
4348
- id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4349
- aria-haspopup="listbox"
4350
- aria-expanded="false"
4351
- >
4352
- <span class="pf-v5-c-options-menu__toggle-text">
4353
- <b>1 - 10</b>&nbsp;of&nbsp;
4354
- <b>36</b>
4355
- </span>
4356
- <div class="pf-v5-c-options-menu__toggle-icon">
4357
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4358
- </div>
4359
- </button>
4360
- <ul
4361
- class="pf-v5-c-options-menu__menu pf-m-top"
4362
- role="menu"
4363
- aria-labelledby="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4364
- hidden
4365
- >
4366
- <li role="none">
4367
- <button
4368
- class="pf-v5-c-options-menu__menu-item"
4369
- type="button"
4370
- role="menuitem"
4371
- >5 per page</button>
4372
- </li>
4373
- <li role="none">
4374
- <button
4375
- class="pf-v5-c-options-menu__menu-item"
4376
- type="button"
4377
- role="menuitem"
4378
- >
4379
- 10 per page
4380
- <div class="pf-v5-c-options-menu__menu-item-icon">
4381
- <i class="fas fa-check" aria-hidden="true"></i>
4382
- </div>
4383
- </button>
4384
- </li>
4385
- <li role="none">
4386
- <button
4387
- class="pf-v5-c-options-menu__menu-item"
4388
- type="button"
4389
- role="menuitem"
4390
- >20 per page</button>
4391
- </li>
4392
- </ul>
4358
+ <div class="pf-v5-c-pagination__page-menu">
4359
+ <div class="pf-v5-c-options-menu pf-m-top">
4360
+ <button
4361
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4362
+ type="button"
4363
+ id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4364
+ aria-haspopup="listbox"
4365
+ aria-expanded="false"
4366
+ >
4367
+ <span class="pf-v5-c-options-menu__toggle-text">
4368
+ <b>1 - 10</b>&nbsp;of&nbsp;
4369
+ <b>36</b>
4370
+ </span>
4371
+ <div class="pf-v5-c-options-menu__toggle-icon">
4372
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4373
+ </div>
4374
+ </button>
4375
+ <ul
4376
+ class="pf-v5-c-options-menu__menu pf-m-top"
4377
+ role="menu"
4378
+ aria-labelledby="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4379
+ hidden
4380
+ >
4381
+ <li role="none">
4382
+ <button
4383
+ class="pf-v5-c-options-menu__menu-item"
4384
+ type="button"
4385
+ role="menuitem"
4386
+ >5 per page</button>
4387
+ </li>
4388
+ <li role="none">
4389
+ <button
4390
+ class="pf-v5-c-options-menu__menu-item"
4391
+ type="button"
4392
+ role="menuitem"
4393
+ >
4394
+ 10 per page
4395
+ <div class="pf-v5-c-options-menu__menu-item-icon">
4396
+ <i class="fas fa-check" aria-hidden="true"></i>
4397
+ </div>
4398
+ </button>
4399
+ </li>
4400
+ <li role="none">
4401
+ <button
4402
+ class="pf-v5-c-options-menu__menu-item"
4403
+ type="button"
4404
+ role="menuitem"
4405
+ >20 per page</button>
4406
+ </li>
4407
+ </ul>
4408
+ </div>
4393
4409
  </div>
4394
4410
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
4395
4411
  <div class="pf-v5-c-pagination__nav-control pf-m-first">