@patternfly/patternfly 6.0.0-alpha.17 → 6.0.0-alpha.19

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 (68) hide show
  1. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  2. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  3. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  4. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  5. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  6. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  7. package/assets/images/pf_logo_white.hbs +35 -0
  8. package/assets/images/pf_logo_white.svg +38 -0
  9. package/base/_globals.scss +1 -1
  10. package/base/patternfly-variables.css +1 -1
  11. package/base/tokens/_tokens-font.scss +2 -2
  12. package/components/Accordion/accordion.css +10 -1
  13. package/components/Accordion/accordion.scss +13 -1
  14. package/components/Alert/alert.css +1 -1
  15. package/components/Alert/alert.scss +1 -1
  16. package/components/Button/button.css +1 -1
  17. package/components/Button/button.scss +1 -3
  18. package/components/Check/check.css +10 -8
  19. package/components/Check/check.scss +15 -10
  20. package/components/Dropdown/dropdown.css +1 -3
  21. package/components/Dropdown/dropdown.scss +2 -6
  22. package/components/Login/login.css +70 -97
  23. package/components/Login/login.scss +56 -64
  24. package/components/Menu/menu.css +3 -0
  25. package/components/Menu/menu.scss +7 -3
  26. package/components/MenuToggle/menu-toggle.css +2 -3
  27. package/components/MenuToggle/menu-toggle.scss +2 -6
  28. package/components/Page/page.css +1 -1
  29. package/components/Page/page.scss +1 -1
  30. package/components/Radio/radio.css +13 -10
  31. package/components/Radio/radio.scss +17 -11
  32. package/components/Switch/switch.css +1 -1
  33. package/components/Switch/switch.scss +1 -1
  34. package/components/Table/table.css +6 -2
  35. package/components/Table/table.scss +7 -2
  36. package/components/Toolbar/toolbar.css +9 -1
  37. package/components/Toolbar/toolbar.scss +16 -3
  38. package/docs/components/Accordion/examples/Accordion.md +95 -0
  39. package/docs/components/Brand/examples/Brand.css +12 -0
  40. package/docs/components/Brand/examples/Brand.md +75 -32
  41. package/docs/components/Card/examples/Card.md +110 -2
  42. package/docs/components/LogViewer/examples/LogViewer.md +130 -130
  43. package/docs/components/Login/examples/Login.md +5 -0
  44. package/docs/components/Menu/examples/Menu.md +507 -473
  45. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  46. package/docs/components/Nav/examples/Navigation.md +140 -113
  47. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  48. package/docs/components/Toolbar/examples/Toolbar.md +480 -2807
  49. package/docs/demos/CardView/examples/CardView.md +32 -51
  50. package/docs/demos/DataList/examples/DataList.md +184 -320
  51. package/docs/demos/Masthead/examples/Masthead.md +51 -210
  52. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  53. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +83 -271
  54. package/docs/demos/Table/examples/Table.md +1017 -1800
  55. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  56. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  57. package/docs/demos/Toolbar/examples/Toolbar.md +703 -1027
  58. package/package.json +2 -2
  59. package/patternfly-base-no-globals-theme-dark-unversioned.css +1 -1
  60. package/patternfly-base-no-globals.css +1 -1
  61. package/patternfly-base-theme-dark-unversioned.css +1 -1
  62. package/patternfly-base.css +1 -1
  63. package/patternfly-no-globals.css +176 -207
  64. package/patternfly-theme-dark-unversioned.css +176 -207
  65. package/patternfly.css +176 -207
  66. package/patternfly.min.css +1 -1
  67. package/patternfly.min.css.map +1 -1
  68. package/components/Login/themes/dark/login.scss +0 -12
@@ -268,7 +268,7 @@ wrapperTag: div
268
268
  class="pf-v5-c-page__main-section pf-m-limit-width pf-m-no-padding pf-m-padding-on-xl"
269
269
  >
270
270
  <div class="pf-v5-c-page__main-body">
271
- <div class="pf-v5-c-toolbar">
271
+ <div class="pf-v5-c-toolbar" id="basic-demo-toolbar">
272
272
  <div class="pf-v5-c-toolbar__content">
273
273
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
274
274
  <div
@@ -276,65 +276,46 @@ wrapperTag: div
276
276
  >
277
277
  <div class="pf-v5-c-toolbar__toggle">
278
278
  <button
279
- class="pf-v5-c-button pf-m-plain"
279
+ class="pf-v5-c-menu-toggle pf-m-plain"
280
280
  type="button"
281
- aria-label="Show filters"
282
281
  aria-expanded="false"
283
- aria-controls="-expandable-content"
282
+ aria-label="Show filters"
283
+ aria-controls="basic-demo-toolbar-expandable-content"
284
284
  >
285
285
  <i class="fas fa-filter" aria-hidden="true"></i>
286
286
  </button>
287
287
  </div>
288
288
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
289
- <div class="pf-v5-c-dropdown">
290
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
291
- <label
292
- class="pf-v5-c-dropdown__toggle-check"
293
- for="-bulk-select-toggle-check"
294
- >
295
- <div class="pf-v5-c-check pf-m-standalone">
296
- <input
297
- class="pf-v5-c-check__input"
298
- type="checkbox"
299
- id="-bulk-select-toggle-check"
300
- aria-label="Select all"
301
- />
302
- </div>
303
- </label>
304
-
305
- <button
306
- class="pf-v5-c-dropdown__toggle-button"
307
- type="button"
308
- aria-expanded="false"
309
- id="-bulk-select-toggle-button"
310
- aria-label="Dropdown toggle"
311
- >
312
- <i class="fas fa-caret-down" aria-hidden="true"></i>
313
- </button>
314
- </div>
315
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
316
- <li role="none">
317
- <button
318
- class="pf-v5-c-dropdown__menu-item"
319
- role="menuitem"
320
- type="button"
321
- >Select all</button>
322
- </li>
323
- <li role="none">
324
- <button
325
- class="pf-v5-c-dropdown__menu-item"
326
- role="menuitem"
327
- type="button"
328
- >Select none</button>
329
- </li>
330
- <li role="none">
331
- <button
332
- class="pf-v5-c-dropdown__menu-item"
333
- role="menuitem"
334
- type="button"
335
- >Other action</button>
336
- </li>
337
- </ul>
289
+ <div
290
+ class="pf-v5-c-menu-toggle pf-m-split-button"
291
+ id="basic-demo-toolbar-check"
292
+ >
293
+ <label
294
+ class="pf-v5-c-check pf-m-standalone"
295
+ id="basic-demo-toolbar-check-check"
296
+ for="basic-demo-toolbar-check-check-input"
297
+ >
298
+ <input
299
+ class="pf-v5-c-check__input"
300
+ type="checkbox"
301
+ id="basic-demo-toolbar-check-check-input"
302
+ name="basic-demo-toolbar-check-check-input"
303
+ aria-label="Standalone check"
304
+ />
305
+ </label>
306
+ <button
307
+ class="pf-v5-c-menu-toggle__button"
308
+ type="button"
309
+ aria-expanded="false"
310
+ id="basic-demo-toolbar-menu-toggle-toggle-button"
311
+ aria-label="Menu toggle"
312
+ >
313
+ <span class="pf-v5-c-menu-toggle__controls">
314
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
315
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
316
+ </span>
317
+ </span>
318
+ </button>
338
319
  </div>
339
320
  </div>
340
321
 
@@ -345,72 +326,22 @@ wrapperTag: div
345
326
  role="group"
346
327
  >
347
328
  <div class="pf-v5-c-input-group__item">
348
- <div class="pf-v5-c-select" style="width: 124px">
349
- <span id="-select-name-label" hidden>Choose one</span>
350
-
351
- <button
352
- class="pf-v5-c-select__toggle"
353
- type="button"
354
- id="-select-name-toggle"
355
- aria-haspopup="true"
356
- aria-expanded="false"
357
- aria-labelledby="-select-name-label -select-name-toggle"
358
- >
359
- <div class="pf-v5-c-select__toggle-wrapper">
360
- <span class="pf-v5-c-select__toggle-icon">
361
- <i class="fas fa-filter" aria-hidden="true"></i>
362
- </span>
363
- <span class="pf-v5-c-select__toggle-text">Name</span>
364
- </div>
365
- <span class="pf-v5-c-select__toggle-arrow">
366
- <i class="fas fa-caret-down" aria-hidden="true"></i>
329
+ <button
330
+ class="pf-v5-c-menu-toggle"
331
+ type="button"
332
+ aria-expanded="false"
333
+ id="basic-demo-toolbar-search-filter-menu"
334
+ >
335
+ <span class="pf-v5-c-menu-toggle__icon">
336
+ <i class="fas fa-filter" aria-hidden="true"></i>
337
+ </span>
338
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
339
+ <span class="pf-v5-c-menu-toggle__controls">
340
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
341
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
367
342
  </span>
368
- </button>
369
-
370
- <ul
371
- class="pf-v5-c-select__menu"
372
- role="listbox"
373
- aria-labelledby="-select-name-label"
374
- hidden
375
- >
376
- <li role="presentation">
377
- <button
378
- class="pf-v5-c-select__menu-item"
379
- role="option"
380
- >Running</button>
381
- </li>
382
- <li role="presentation">
383
- <button
384
- class="pf-v5-c-select__menu-item pf-m-selected"
385
- role="option"
386
- aria-selected="true"
387
- >
388
- Stopped
389
- <span class="pf-v5-c-select__menu-item-icon">
390
- <i class="fas fa-check" aria-hidden="true"></i>
391
- </span>
392
- </button>
393
- </li>
394
- <li role="presentation">
395
- <button
396
- class="pf-v5-c-select__menu-item"
397
- role="option"
398
- >Down</button>
399
- </li>
400
- <li role="presentation">
401
- <button
402
- class="pf-v5-c-select__menu-item"
403
- role="option"
404
- >Degraded</button>
405
- </li>
406
- <li role="presentation">
407
- <button
408
- class="pf-v5-c-select__menu-item"
409
- role="option"
410
- >Needs maintenance</button>
411
- </li>
412
- </ul>
413
- </div>
343
+ </span>
344
+ </button>
414
345
  </div>
415
346
  <div class="pf-v5-c-input-group__item pf-m-fill">
416
347
  <div class="pf-v5-c-text-input-group">
@@ -447,7 +378,10 @@ wrapperTag: div
447
378
  </button>
448
379
  </div>
449
380
 
450
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
381
+ <div
382
+ class="pf-v5-c-overflow-menu"
383
+ id="basic-demo-toolbar-overflow-menu"
384
+ >
451
385
  <div
452
386
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
453
387
  >
@@ -465,7 +399,7 @@ wrapperTag: div
465
399
  <button
466
400
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
467
401
  type="button"
468
- id="-overflow-menu-dropdown-toggle"
402
+ id="basic-demo-toolbar-overflow-menu-dropdown-toggle"
469
403
  aria-label="Dropdown with additional options"
470
404
  aria-expanded="false"
471
405
  >
@@ -474,7 +408,7 @@ wrapperTag: div
474
408
  <ul
475
409
  class="pf-v5-c-dropdown__menu"
476
410
  role="menu"
477
- aria-labelledby="-overflow-menu-dropdown-toggle"
411
+ aria-labelledby="basic-demo-toolbar-overflow-menu-dropdown-toggle"
478
412
  hidden
479
413
  >
480
414
  <li role="none">
@@ -494,7 +428,7 @@ wrapperTag: div
494
428
  <button
495
429
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
496
430
  type="button"
497
- id="-top-pagination-toggle"
431
+ id="basic-demo-toolbar-top-pagination-toggle"
498
432
  aria-haspopup="listbox"
499
433
  aria-expanded="false"
500
434
  >
@@ -509,7 +443,7 @@ wrapperTag: div
509
443
  <ul
510
444
  class="pf-v5-c-options-menu__menu"
511
445
  role="menu"
512
- aria-labelledby="-top-pagination-toggle"
446
+ aria-labelledby="basic-demo-toolbar-top-pagination-toggle"
513
447
  hidden
514
448
  >
515
449
  <li role="none">
@@ -570,7 +504,7 @@ wrapperTag: div
570
504
 
571
505
  <div
572
506
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
573
- id="-expandable-content"
507
+ id="basic-demo-toolbar-expandable-content"
574
508
  hidden
575
509
  ></div>
576
510
  </div>
@@ -1542,7 +1476,7 @@ wrapperTag: div
1542
1476
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1543
1477
  >
1544
1478
  <div class="pf-v5-c-card">
1545
- <div class="pf-v5-c-toolbar">
1479
+ <div class="pf-v5-c-toolbar" id="sortable-demo-toolbar">
1546
1480
  <div class="pf-v5-c-toolbar__content">
1547
1481
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1548
1482
  <div
@@ -1550,65 +1484,46 @@ wrapperTag: div
1550
1484
  >
1551
1485
  <div class="pf-v5-c-toolbar__toggle">
1552
1486
  <button
1553
- class="pf-v5-c-button pf-m-plain"
1487
+ class="pf-v5-c-menu-toggle pf-m-plain"
1554
1488
  type="button"
1555
- aria-label="Show filters"
1556
1489
  aria-expanded="false"
1557
- aria-controls="-expandable-content"
1490
+ aria-label="Show filters"
1491
+ aria-controls="sortable-demo-toolbar-expandable-content"
1558
1492
  >
1559
1493
  <i class="fas fa-filter" aria-hidden="true"></i>
1560
1494
  </button>
1561
1495
  </div>
1562
1496
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1563
- <div class="pf-v5-c-dropdown">
1564
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1565
- <label
1566
- class="pf-v5-c-dropdown__toggle-check"
1567
- for="-bulk-select-toggle-check"
1568
- >
1569
- <div class="pf-v5-c-check pf-m-standalone">
1570
- <input
1571
- class="pf-v5-c-check__input"
1572
- type="checkbox"
1573
- id="-bulk-select-toggle-check"
1574
- aria-label="Select all"
1575
- />
1576
- </div>
1577
- </label>
1578
-
1579
- <button
1580
- class="pf-v5-c-dropdown__toggle-button"
1581
- type="button"
1582
- aria-expanded="false"
1583
- id="-bulk-select-toggle-button"
1584
- aria-label="Dropdown toggle"
1585
- >
1586
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1587
- </button>
1588
- </div>
1589
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1590
- <li role="none">
1591
- <button
1592
- class="pf-v5-c-dropdown__menu-item"
1593
- role="menuitem"
1594
- type="button"
1595
- >Select all</button>
1596
- </li>
1597
- <li role="none">
1598
- <button
1599
- class="pf-v5-c-dropdown__menu-item"
1600
- role="menuitem"
1601
- type="button"
1602
- >Select none</button>
1603
- </li>
1604
- <li role="none">
1605
- <button
1606
- class="pf-v5-c-dropdown__menu-item"
1607
- role="menuitem"
1608
- type="button"
1609
- >Other action</button>
1610
- </li>
1611
- </ul>
1497
+ <div
1498
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1499
+ id="sortable-demo-toolbar-check"
1500
+ >
1501
+ <label
1502
+ class="pf-v5-c-check pf-m-standalone"
1503
+ id="sortable-demo-toolbar-check-check"
1504
+ for="sortable-demo-toolbar-check-check-input"
1505
+ >
1506
+ <input
1507
+ class="pf-v5-c-check__input"
1508
+ type="checkbox"
1509
+ id="sortable-demo-toolbar-check-check-input"
1510
+ name="sortable-demo-toolbar-check-check-input"
1511
+ aria-label="Standalone check"
1512
+ />
1513
+ </label>
1514
+ <button
1515
+ class="pf-v5-c-menu-toggle__button"
1516
+ type="button"
1517
+ aria-expanded="false"
1518
+ id="sortable-demo-toolbar-menu-toggle-toggle-button"
1519
+ aria-label="Menu toggle"
1520
+ >
1521
+ <span class="pf-v5-c-menu-toggle__controls">
1522
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1523
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1524
+ </span>
1525
+ </span>
1526
+ </button>
1612
1527
  </div>
1613
1528
  </div>
1614
1529
 
@@ -1619,72 +1534,22 @@ wrapperTag: div
1619
1534
  role="group"
1620
1535
  >
1621
1536
  <div class="pf-v5-c-input-group__item">
1622
- <div class="pf-v5-c-select" style="width: 124px">
1623
- <span id="-select-name-label" hidden>Choose one</span>
1624
-
1625
- <button
1626
- class="pf-v5-c-select__toggle"
1627
- type="button"
1628
- id="-select-name-toggle"
1629
- aria-haspopup="true"
1630
- aria-expanded="false"
1631
- aria-labelledby="-select-name-label -select-name-toggle"
1632
- >
1633
- <div class="pf-v5-c-select__toggle-wrapper">
1634
- <span class="pf-v5-c-select__toggle-icon">
1635
- <i class="fas fa-filter" aria-hidden="true"></i>
1636
- </span>
1637
- <span class="pf-v5-c-select__toggle-text">Name</span>
1638
- </div>
1639
- <span class="pf-v5-c-select__toggle-arrow">
1640
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1537
+ <button
1538
+ class="pf-v5-c-menu-toggle"
1539
+ type="button"
1540
+ aria-expanded="false"
1541
+ id="sortable-demo-toolbar-search-filter-menu"
1542
+ >
1543
+ <span class="pf-v5-c-menu-toggle__icon">
1544
+ <i class="fas fa-filter" aria-hidden="true"></i>
1545
+ </span>
1546
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1547
+ <span class="pf-v5-c-menu-toggle__controls">
1548
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1549
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1641
1550
  </span>
1642
- </button>
1643
-
1644
- <ul
1645
- class="pf-v5-c-select__menu"
1646
- role="listbox"
1647
- aria-labelledby="-select-name-label"
1648
- hidden
1649
- >
1650
- <li role="presentation">
1651
- <button
1652
- class="pf-v5-c-select__menu-item"
1653
- role="option"
1654
- >Running</button>
1655
- </li>
1656
- <li role="presentation">
1657
- <button
1658
- class="pf-v5-c-select__menu-item pf-m-selected"
1659
- role="option"
1660
- aria-selected="true"
1661
- >
1662
- Stopped
1663
- <span class="pf-v5-c-select__menu-item-icon">
1664
- <i class="fas fa-check" aria-hidden="true"></i>
1665
- </span>
1666
- </button>
1667
- </li>
1668
- <li role="presentation">
1669
- <button
1670
- class="pf-v5-c-select__menu-item"
1671
- role="option"
1672
- >Down</button>
1673
- </li>
1674
- <li role="presentation">
1675
- <button
1676
- class="pf-v5-c-select__menu-item"
1677
- role="option"
1678
- >Degraded</button>
1679
- </li>
1680
- <li role="presentation">
1681
- <button
1682
- class="pf-v5-c-select__menu-item"
1683
- role="option"
1684
- >Needs maintenance</button>
1685
- </li>
1686
- </ul>
1687
- </div>
1551
+ </span>
1552
+ </button>
1688
1553
  </div>
1689
1554
  <div class="pf-v5-c-input-group__item pf-m-fill">
1690
1555
  <div class="pf-v5-c-text-input-group">
@@ -1799,7 +1664,10 @@ wrapperTag: div
1799
1664
  </div>
1800
1665
  </div>
1801
1666
 
1802
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
1667
+ <div
1668
+ class="pf-v5-c-overflow-menu"
1669
+ id="sortable-demo-toolbar-overflow-menu"
1670
+ >
1803
1671
  <div
1804
1672
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
1805
1673
  >
@@ -1824,7 +1692,7 @@ wrapperTag: div
1824
1692
  <button
1825
1693
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1826
1694
  type="button"
1827
- id="-overflow-menu-dropdown-toggle"
1695
+ id="sortable-demo-toolbar-overflow-menu-dropdown-toggle"
1828
1696
  aria-label="Dropdown with additional options"
1829
1697
  aria-expanded="false"
1830
1698
  >
@@ -1833,7 +1701,7 @@ wrapperTag: div
1833
1701
  <ul
1834
1702
  class="pf-v5-c-dropdown__menu"
1835
1703
  role="menu"
1836
- aria-labelledby="-overflow-menu-dropdown-toggle"
1704
+ aria-labelledby="sortable-demo-toolbar-overflow-menu-dropdown-toggle"
1837
1705
  hidden
1838
1706
  >
1839
1707
  <li role="none">
@@ -1883,7 +1751,7 @@ wrapperTag: div
1883
1751
  <button
1884
1752
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1885
1753
  type="button"
1886
- id="-top-pagination-toggle"
1754
+ id="sortable-demo-toolbar-top-pagination-toggle"
1887
1755
  aria-haspopup="listbox"
1888
1756
  aria-expanded="false"
1889
1757
  >
@@ -1898,7 +1766,7 @@ wrapperTag: div
1898
1766
  <ul
1899
1767
  class="pf-v5-c-options-menu__menu"
1900
1768
  role="menu"
1901
- aria-labelledby="-top-pagination-toggle"
1769
+ aria-labelledby="sortable-demo-toolbar-top-pagination-toggle"
1902
1770
  hidden
1903
1771
  >
1904
1772
  <li role="none">
@@ -1959,7 +1827,7 @@ wrapperTag: div
1959
1827
 
1960
1828
  <div
1961
1829
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1962
- id="-expandable-content"
1830
+ id="sortable-demo-toolbar-expandable-content"
1963
1831
  hidden
1964
1832
  ></div>
1965
1833
  </div>
@@ -2981,7 +2849,7 @@ wrapperTag: div
2981
2849
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
2982
2850
  >
2983
2851
  <div class="pf-v5-c-card">
2984
- <div class="pf-v5-c-toolbar">
2852
+ <div class="pf-v5-c-toolbar" id="expandable-demo-toolbar">
2985
2853
  <div class="pf-v5-c-toolbar__content">
2986
2854
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
2987
2855
  <div
@@ -2989,65 +2857,46 @@ wrapperTag: div
2989
2857
  >
2990
2858
  <div class="pf-v5-c-toolbar__toggle">
2991
2859
  <button
2992
- class="pf-v5-c-button pf-m-plain"
2860
+ class="pf-v5-c-menu-toggle pf-m-plain"
2993
2861
  type="button"
2994
- aria-label="Show filters"
2995
2862
  aria-expanded="false"
2996
- aria-controls="-expandable-content"
2863
+ aria-label="Show filters"
2864
+ aria-controls="expandable-demo-toolbar-expandable-content"
2997
2865
  >
2998
2866
  <i class="fas fa-filter" aria-hidden="true"></i>
2999
2867
  </button>
3000
2868
  </div>
3001
2869
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3002
- <div class="pf-v5-c-dropdown">
3003
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3004
- <label
3005
- class="pf-v5-c-dropdown__toggle-check"
3006
- for="-bulk-select-toggle-check"
3007
- >
3008
- <div class="pf-v5-c-check pf-m-standalone">
3009
- <input
3010
- class="pf-v5-c-check__input"
3011
- type="checkbox"
3012
- id="-bulk-select-toggle-check"
3013
- aria-label="Select all"
3014
- />
3015
- </div>
3016
- </label>
3017
-
3018
- <button
3019
- class="pf-v5-c-dropdown__toggle-button"
3020
- type="button"
3021
- aria-expanded="false"
3022
- id="-bulk-select-toggle-button"
3023
- aria-label="Dropdown toggle"
3024
- >
3025
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3026
- </button>
3027
- </div>
3028
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3029
- <li role="none">
3030
- <button
3031
- class="pf-v5-c-dropdown__menu-item"
3032
- role="menuitem"
3033
- type="button"
3034
- >Select all</button>
3035
- </li>
3036
- <li role="none">
3037
- <button
3038
- class="pf-v5-c-dropdown__menu-item"
3039
- role="menuitem"
3040
- type="button"
3041
- >Select none</button>
3042
- </li>
3043
- <li role="none">
3044
- <button
3045
- class="pf-v5-c-dropdown__menu-item"
3046
- role="menuitem"
3047
- type="button"
3048
- >Other action</button>
3049
- </li>
3050
- </ul>
2870
+ <div
2871
+ class="pf-v5-c-menu-toggle pf-m-split-button"
2872
+ id="expandable-demo-toolbar-check"
2873
+ >
2874
+ <label
2875
+ class="pf-v5-c-check pf-m-standalone"
2876
+ id="expandable-demo-toolbar-check-check"
2877
+ for="expandable-demo-toolbar-check-check-input"
2878
+ >
2879
+ <input
2880
+ class="pf-v5-c-check__input"
2881
+ type="checkbox"
2882
+ id="expandable-demo-toolbar-check-check-input"
2883
+ name="expandable-demo-toolbar-check-check-input"
2884
+ aria-label="Standalone check"
2885
+ />
2886
+ </label>
2887
+ <button
2888
+ class="pf-v5-c-menu-toggle__button"
2889
+ type="button"
2890
+ aria-expanded="false"
2891
+ id="expandable-demo-toolbar-menu-toggle-toggle-button"
2892
+ aria-label="Menu toggle"
2893
+ >
2894
+ <span class="pf-v5-c-menu-toggle__controls">
2895
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2896
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2897
+ </span>
2898
+ </span>
2899
+ </button>
3051
2900
  </div>
3052
2901
  </div>
3053
2902
 
@@ -3058,72 +2907,22 @@ wrapperTag: div
3058
2907
  role="group"
3059
2908
  >
3060
2909
  <div class="pf-v5-c-input-group__item">
3061
- <div class="pf-v5-c-select" style="width: 124px">
3062
- <span id="-select-name-label" hidden>Choose one</span>
3063
-
3064
- <button
3065
- class="pf-v5-c-select__toggle"
3066
- type="button"
3067
- id="-select-name-toggle"
3068
- aria-haspopup="true"
3069
- aria-expanded="false"
3070
- aria-labelledby="-select-name-label -select-name-toggle"
3071
- >
3072
- <div class="pf-v5-c-select__toggle-wrapper">
3073
- <span class="pf-v5-c-select__toggle-icon">
3074
- <i class="fas fa-filter" aria-hidden="true"></i>
3075
- </span>
3076
- <span class="pf-v5-c-select__toggle-text">Name</span>
3077
- </div>
3078
- <span class="pf-v5-c-select__toggle-arrow">
3079
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2910
+ <button
2911
+ class="pf-v5-c-menu-toggle"
2912
+ type="button"
2913
+ aria-expanded="false"
2914
+ id="expandable-demo-toolbar-search-filter-menu"
2915
+ >
2916
+ <span class="pf-v5-c-menu-toggle__icon">
2917
+ <i class="fas fa-filter" aria-hidden="true"></i>
2918
+ </span>
2919
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
2920
+ <span class="pf-v5-c-menu-toggle__controls">
2921
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2922
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3080
2923
  </span>
3081
- </button>
3082
-
3083
- <ul
3084
- class="pf-v5-c-select__menu"
3085
- role="listbox"
3086
- aria-labelledby="-select-name-label"
3087
- hidden
3088
- >
3089
- <li role="presentation">
3090
- <button
3091
- class="pf-v5-c-select__menu-item"
3092
- role="option"
3093
- >Running</button>
3094
- </li>
3095
- <li role="presentation">
3096
- <button
3097
- class="pf-v5-c-select__menu-item pf-m-selected"
3098
- role="option"
3099
- aria-selected="true"
3100
- >
3101
- Stopped
3102
- <span class="pf-v5-c-select__menu-item-icon">
3103
- <i class="fas fa-check" aria-hidden="true"></i>
3104
- </span>
3105
- </button>
3106
- </li>
3107
- <li role="presentation">
3108
- <button
3109
- class="pf-v5-c-select__menu-item"
3110
- role="option"
3111
- >Down</button>
3112
- </li>
3113
- <li role="presentation">
3114
- <button
3115
- class="pf-v5-c-select__menu-item"
3116
- role="option"
3117
- >Degraded</button>
3118
- </li>
3119
- <li role="presentation">
3120
- <button
3121
- class="pf-v5-c-select__menu-item"
3122
- role="option"
3123
- >Needs maintenance</button>
3124
- </li>
3125
- </ul>
3126
- </div>
2924
+ </span>
2925
+ </button>
3127
2926
  </div>
3128
2927
  <div class="pf-v5-c-input-group__item pf-m-fill">
3129
2928
  <div class="pf-v5-c-text-input-group">
@@ -3150,17 +2949,17 @@ wrapperTag: div
3150
2949
  <div class="pf-v5-c-toolbar__item">
3151
2950
  <div class="pf-v5-c-select">
3152
2951
  <span
3153
- id="-select-checkbox-status-label"
2952
+ id="expandable-demo-toolbar-select-checkbox-status-label"
3154
2953
  hidden
3155
2954
  >Choose many</span>
3156
2955
 
3157
2956
  <button
3158
2957
  class="pf-v5-c-select__toggle"
3159
2958
  type="button"
3160
- id="-select-checkbox-status-toggle"
2959
+ id="expandable-demo-toolbar-select-checkbox-status-toggle"
3161
2960
  aria-haspopup="true"
3162
2961
  aria-expanded="false"
3163
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
2962
+ aria-labelledby="expandable-demo-toolbar-select-checkbox-status-label expandable-demo-toolbar-select-checkbox-status-toggle"
3164
2963
  >
3165
2964
  <div class="pf-v5-c-select__toggle-wrapper">
3166
2965
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -3177,76 +2976,76 @@ wrapperTag: div
3177
2976
  >
3178
2977
  <label
3179
2978
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3180
- id="-select-checkbox-status-active"
3181
- for="-select-checkbox-status-active-input"
2979
+ id="expandable-demo-toolbar-select-checkbox-status-active"
2980
+ for="expandable-demo-toolbar-select-checkbox-status-active-input"
3182
2981
  >
3183
2982
  <input
3184
2983
  class="pf-v5-c-check__input"
3185
2984
  type="checkbox"
3186
- aria-describedby="-select-checkbox-status-active-description"
3187
- id="-select-checkbox-status-active-input"
3188
- name="-select-checkbox-status-active-input"
2985
+ aria-describedby="expandable-demo-toolbar-select-checkbox-status-active-description"
2986
+ id="expandable-demo-toolbar-select-checkbox-status-active-input"
2987
+ name="expandable-demo-toolbar-select-checkbox-status-active-input"
3189
2988
  />
3190
2989
  <span class="pf-v5-c-check__label">Active</span>
3191
2990
  <span
3192
2991
  class="pf-v5-c-check__description"
3193
- id="-select-checkbox-status-active-description"
2992
+ id="expandable-demo-toolbar-select-checkbox-status-active-description"
3194
2993
  >This is a description</span>
3195
2994
  </label>
3196
2995
  <label
3197
2996
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3198
- id="-select-checkbox-status-canceled"
3199
- for="-select-checkbox-status-canceled-input"
2997
+ id="expandable-demo-toolbar-select-checkbox-status-canceled"
2998
+ for="expandable-demo-toolbar-select-checkbox-status-canceled-input"
3200
2999
  >
3201
3000
  <input
3202
3001
  class="pf-v5-c-check__input"
3203
3002
  type="checkbox"
3204
- aria-describedby="-select-checkbox-status-canceled-description"
3205
- id="-select-checkbox-status-canceled-input"
3206
- name="-select-checkbox-status-canceled-input"
3003
+ aria-describedby="expandable-demo-toolbar-select-checkbox-status-canceled-description"
3004
+ id="expandable-demo-toolbar-select-checkbox-status-canceled-input"
3005
+ name="expandable-demo-toolbar-select-checkbox-status-canceled-input"
3207
3006
  />
3208
3007
  <span class="pf-v5-c-check__label">Canceled</span>
3209
3008
  <span
3210
3009
  class="pf-v5-c-check__description"
3211
- id="-select-checkbox-status-canceled-description"
3010
+ id="expandable-demo-toolbar-select-checkbox-status-canceled-description"
3212
3011
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3213
3012
  </label>
3214
3013
  <label
3215
3014
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3216
- id="-select-checkbox-status-paused"
3217
- for="-select-checkbox-status-paused-input"
3015
+ id="expandable-demo-toolbar-select-checkbox-status-paused"
3016
+ for="expandable-demo-toolbar-select-checkbox-status-paused-input"
3218
3017
  >
3219
3018
  <input
3220
3019
  class="pf-v5-c-check__input"
3221
3020
  type="checkbox"
3222
- id="-select-checkbox-status-paused-input"
3223
- name="-select-checkbox-status-paused-input"
3021
+ id="expandable-demo-toolbar-select-checkbox-status-paused-input"
3022
+ name="expandable-demo-toolbar-select-checkbox-status-paused-input"
3224
3023
  />
3225
3024
  <span class="pf-v5-c-check__label">Paused</span>
3226
3025
  </label>
3227
3026
  <label
3228
3027
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3229
- id="-select-checkbox-status-warning"
3230
- for="-select-checkbox-status-warning-input"
3028
+ id="expandable-demo-toolbar-select-checkbox-status-warning"
3029
+ for="expandable-demo-toolbar-select-checkbox-status-warning-input"
3231
3030
  >
3232
3031
  <input
3233
3032
  class="pf-v5-c-check__input"
3234
3033
  type="checkbox"
3235
- id="-select-checkbox-status-warning-input"
3236
- name="-select-checkbox-status-warning-input"
3034
+ id="expandable-demo-toolbar-select-checkbox-status-warning-input"
3035
+ name="expandable-demo-toolbar-select-checkbox-status-warning-input"
3237
3036
  />
3238
3037
  <span class="pf-v5-c-check__label">Warning</span>
3239
3038
  </label>
3240
3039
  <label
3241
3040
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3242
- id="-select-checkbox-status-restarted"
3243
- for="-select-checkbox-status-restarted-input"
3041
+ id="expandable-demo-toolbar-select-checkbox-status-restarted"
3042
+ for="expandable-demo-toolbar-select-checkbox-status-restarted-input"
3244
3043
  >
3245
3044
  <input
3246
3045
  class="pf-v5-c-check__input"
3247
3046
  type="checkbox"
3248
- id="-select-checkbox-status-restarted-input"
3249
- name="-select-checkbox-status-restarted-input"
3047
+ id="expandable-demo-toolbar-select-checkbox-status-restarted-input"
3048
+ name="expandable-demo-toolbar-select-checkbox-status-restarted-input"
3250
3049
  />
3251
3050
  <span class="pf-v5-c-check__label">Restarted</span>
3252
3051
  </label>
@@ -3256,15 +3055,18 @@ wrapperTag: div
3256
3055
  </div>
3257
3056
  <div class="pf-v5-c-toolbar__item">
3258
3057
  <div class="pf-v5-c-select">
3259
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
3058
+ <span
3059
+ id="expandable-demo-toolbar-select-checkbox-risk-label"
3060
+ hidden
3061
+ >Choose many</span>
3260
3062
 
3261
3063
  <button
3262
3064
  class="pf-v5-c-select__toggle"
3263
3065
  type="button"
3264
- id="-select-checkbox-risk-toggle"
3066
+ id="expandable-demo-toolbar-select-checkbox-risk-toggle"
3265
3067
  aria-haspopup="true"
3266
3068
  aria-expanded="false"
3267
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
3069
+ aria-labelledby="expandable-demo-toolbar-select-checkbox-risk-label expandable-demo-toolbar-select-checkbox-risk-toggle"
3268
3070
  >
3269
3071
  <div class="pf-v5-c-select__toggle-wrapper">
3270
3072
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -3281,76 +3083,76 @@ wrapperTag: div
3281
3083
  >
3282
3084
  <label
3283
3085
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3284
- id="-select-checkbox-risk-active"
3285
- for="-select-checkbox-risk-active-input"
3086
+ id="expandable-demo-toolbar-select-checkbox-risk-active"
3087
+ for="expandable-demo-toolbar-select-checkbox-risk-active-input"
3286
3088
  >
3287
3089
  <input
3288
3090
  class="pf-v5-c-check__input"
3289
3091
  type="checkbox"
3290
- aria-describedby="-select-checkbox-risk-active-description"
3291
- id="-select-checkbox-risk-active-input"
3292
- name="-select-checkbox-risk-active-input"
3092
+ aria-describedby="expandable-demo-toolbar-select-checkbox-risk-active-description"
3093
+ id="expandable-demo-toolbar-select-checkbox-risk-active-input"
3094
+ name="expandable-demo-toolbar-select-checkbox-risk-active-input"
3293
3095
  />
3294
3096
  <span class="pf-v5-c-check__label">Active</span>
3295
3097
  <span
3296
3098
  class="pf-v5-c-check__description"
3297
- id="-select-checkbox-risk-active-description"
3099
+ id="expandable-demo-toolbar-select-checkbox-risk-active-description"
3298
3100
  >This is a description</span>
3299
3101
  </label>
3300
3102
  <label
3301
3103
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3302
- id="-select-checkbox-risk-canceled"
3303
- for="-select-checkbox-risk-canceled-input"
3104
+ id="expandable-demo-toolbar-select-checkbox-risk-canceled"
3105
+ for="expandable-demo-toolbar-select-checkbox-risk-canceled-input"
3304
3106
  >
3305
3107
  <input
3306
3108
  class="pf-v5-c-check__input"
3307
3109
  type="checkbox"
3308
- aria-describedby="-select-checkbox-risk-canceled-description"
3309
- id="-select-checkbox-risk-canceled-input"
3310
- name="-select-checkbox-risk-canceled-input"
3110
+ aria-describedby="expandable-demo-toolbar-select-checkbox-risk-canceled-description"
3111
+ id="expandable-demo-toolbar-select-checkbox-risk-canceled-input"
3112
+ name="expandable-demo-toolbar-select-checkbox-risk-canceled-input"
3311
3113
  />
3312
3114
  <span class="pf-v5-c-check__label">Canceled</span>
3313
3115
  <span
3314
3116
  class="pf-v5-c-check__description"
3315
- id="-select-checkbox-risk-canceled-description"
3117
+ id="expandable-demo-toolbar-select-checkbox-risk-canceled-description"
3316
3118
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3317
3119
  </label>
3318
3120
  <label
3319
3121
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3320
- id="-select-checkbox-risk-paused"
3321
- for="-select-checkbox-risk-paused-input"
3122
+ id="expandable-demo-toolbar-select-checkbox-risk-paused"
3123
+ for="expandable-demo-toolbar-select-checkbox-risk-paused-input"
3322
3124
  >
3323
3125
  <input
3324
3126
  class="pf-v5-c-check__input"
3325
3127
  type="checkbox"
3326
- id="-select-checkbox-risk-paused-input"
3327
- name="-select-checkbox-risk-paused-input"
3128
+ id="expandable-demo-toolbar-select-checkbox-risk-paused-input"
3129
+ name="expandable-demo-toolbar-select-checkbox-risk-paused-input"
3328
3130
  />
3329
3131
  <span class="pf-v5-c-check__label">Paused</span>
3330
3132
  </label>
3331
3133
  <label
3332
3134
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3333
- id="-select-checkbox-risk-warning"
3334
- for="-select-checkbox-risk-warning-input"
3135
+ id="expandable-demo-toolbar-select-checkbox-risk-warning"
3136
+ for="expandable-demo-toolbar-select-checkbox-risk-warning-input"
3335
3137
  >
3336
3138
  <input
3337
3139
  class="pf-v5-c-check__input"
3338
3140
  type="checkbox"
3339
- id="-select-checkbox-risk-warning-input"
3340
- name="-select-checkbox-risk-warning-input"
3141
+ id="expandable-demo-toolbar-select-checkbox-risk-warning-input"
3142
+ name="expandable-demo-toolbar-select-checkbox-risk-warning-input"
3341
3143
  />
3342
3144
  <span class="pf-v5-c-check__label">Warning</span>
3343
3145
  </label>
3344
3146
  <label
3345
3147
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3346
- id="-select-checkbox-risk-restarted"
3347
- for="-select-checkbox-risk-restarted-input"
3148
+ id="expandable-demo-toolbar-select-checkbox-risk-restarted"
3149
+ for="expandable-demo-toolbar-select-checkbox-risk-restarted-input"
3348
3150
  >
3349
3151
  <input
3350
3152
  class="pf-v5-c-check__input"
3351
3153
  type="checkbox"
3352
- id="-select-checkbox-risk-restarted-input"
3353
- name="-select-checkbox-risk-restarted-input"
3154
+ id="expandable-demo-toolbar-select-checkbox-risk-restarted-input"
3155
+ name="expandable-demo-toolbar-select-checkbox-risk-restarted-input"
3354
3156
  />
3355
3157
  <span class="pf-v5-c-check__label">Restarted</span>
3356
3158
  </label>
@@ -3380,7 +3182,7 @@ wrapperTag: div
3380
3182
  <button
3381
3183
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3382
3184
  type="button"
3383
- id="-top-pagination-toggle"
3185
+ id="expandable-demo-toolbar-top-pagination-toggle"
3384
3186
  aria-haspopup="listbox"
3385
3187
  aria-expanded="false"
3386
3188
  >
@@ -3395,7 +3197,7 @@ wrapperTag: div
3395
3197
  <ul
3396
3198
  class="pf-v5-c-options-menu__menu"
3397
3199
  role="menu"
3398
- aria-labelledby="-top-pagination-toggle"
3200
+ aria-labelledby="expandable-demo-toolbar-top-pagination-toggle"
3399
3201
  hidden
3400
3202
  >
3401
3203
  <li role="none">
@@ -3456,7 +3258,7 @@ wrapperTag: div
3456
3258
 
3457
3259
  <div
3458
3260
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
3459
- id="-expandable-content"
3261
+ id="expandable-demo-toolbar-expandable-content"
3460
3262
  hidden
3461
3263
  ></div>
3462
3264
  </div>
@@ -4663,7 +4465,7 @@ wrapperTag: div
4663
4465
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
4664
4466
  >
4665
4467
  <div class="pf-v5-c-card">
4666
- <div class="pf-v5-c-toolbar">
4468
+ <div class="pf-v5-c-toolbar" id="compact-demo-toolbar">
4667
4469
  <div class="pf-v5-c-toolbar__content">
4668
4470
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
4669
4471
  <div
@@ -4671,65 +4473,46 @@ wrapperTag: div
4671
4473
  >
4672
4474
  <div class="pf-v5-c-toolbar__toggle">
4673
4475
  <button
4674
- class="pf-v5-c-button pf-m-plain"
4476
+ class="pf-v5-c-menu-toggle pf-m-plain"
4675
4477
  type="button"
4676
- aria-label="Show filters"
4677
4478
  aria-expanded="false"
4678
- aria-controls="-expandable-content"
4479
+ aria-label="Show filters"
4480
+ aria-controls="compact-demo-toolbar-expandable-content"
4679
4481
  >
4680
4482
  <i class="fas fa-filter" aria-hidden="true"></i>
4681
4483
  </button>
4682
4484
  </div>
4683
4485
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
4684
- <div class="pf-v5-c-dropdown">
4685
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
4686
- <label
4687
- class="pf-v5-c-dropdown__toggle-check"
4688
- for="-bulk-select-toggle-check"
4689
- >
4690
- <div class="pf-v5-c-check pf-m-standalone">
4691
- <input
4692
- class="pf-v5-c-check__input"
4693
- type="checkbox"
4694
- id="-bulk-select-toggle-check"
4695
- aria-label="Select all"
4696
- />
4697
- </div>
4698
- </label>
4699
-
4700
- <button
4701
- class="pf-v5-c-dropdown__toggle-button"
4702
- type="button"
4703
- aria-expanded="false"
4704
- id="-bulk-select-toggle-button"
4705
- aria-label="Dropdown toggle"
4706
- >
4707
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4708
- </button>
4709
- </div>
4710
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
4711
- <li role="none">
4712
- <button
4713
- class="pf-v5-c-dropdown__menu-item"
4714
- role="menuitem"
4715
- type="button"
4716
- >Select all</button>
4717
- </li>
4718
- <li role="none">
4719
- <button
4720
- class="pf-v5-c-dropdown__menu-item"
4721
- role="menuitem"
4722
- type="button"
4723
- >Select none</button>
4724
- </li>
4725
- <li role="none">
4726
- <button
4727
- class="pf-v5-c-dropdown__menu-item"
4728
- role="menuitem"
4729
- type="button"
4730
- >Other action</button>
4731
- </li>
4732
- </ul>
4486
+ <div
4487
+ class="pf-v5-c-menu-toggle pf-m-split-button"
4488
+ id="compact-demo-toolbar-check"
4489
+ >
4490
+ <label
4491
+ class="pf-v5-c-check pf-m-standalone"
4492
+ id="compact-demo-toolbar-check-check"
4493
+ for="compact-demo-toolbar-check-check-input"
4494
+ >
4495
+ <input
4496
+ class="pf-v5-c-check__input"
4497
+ type="checkbox"
4498
+ id="compact-demo-toolbar-check-check-input"
4499
+ name="compact-demo-toolbar-check-check-input"
4500
+ aria-label="Standalone check"
4501
+ />
4502
+ </label>
4503
+ <button
4504
+ class="pf-v5-c-menu-toggle__button"
4505
+ type="button"
4506
+ aria-expanded="false"
4507
+ id="compact-demo-toolbar-menu-toggle-toggle-button"
4508
+ aria-label="Menu toggle"
4509
+ >
4510
+ <span class="pf-v5-c-menu-toggle__controls">
4511
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4512
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4513
+ </span>
4514
+ </span>
4515
+ </button>
4733
4516
  </div>
4734
4517
  </div>
4735
4518
 
@@ -4740,72 +4523,22 @@ wrapperTag: div
4740
4523
  role="group"
4741
4524
  >
4742
4525
  <div class="pf-v5-c-input-group__item">
4743
- <div class="pf-v5-c-select" style="width: 124px">
4744
- <span id="-select-name-label" hidden>Choose one</span>
4745
-
4746
- <button
4747
- class="pf-v5-c-select__toggle"
4748
- type="button"
4749
- id="-select-name-toggle"
4750
- aria-haspopup="true"
4751
- aria-expanded="false"
4752
- aria-labelledby="-select-name-label -select-name-toggle"
4753
- >
4754
- <div class="pf-v5-c-select__toggle-wrapper">
4755
- <span class="pf-v5-c-select__toggle-icon">
4756
- <i class="fas fa-filter" aria-hidden="true"></i>
4757
- </span>
4758
- <span class="pf-v5-c-select__toggle-text">Name</span>
4759
- </div>
4760
- <span class="pf-v5-c-select__toggle-arrow">
4761
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4762
- </span>
4763
- </button>
4764
-
4765
- <ul
4766
- class="pf-v5-c-select__menu"
4767
- role="listbox"
4768
- aria-labelledby="-select-name-label"
4769
- hidden
4770
- >
4771
- <li role="presentation">
4772
- <button
4773
- class="pf-v5-c-select__menu-item"
4774
- role="option"
4775
- >Running</button>
4776
- </li>
4777
- <li role="presentation">
4778
- <button
4779
- class="pf-v5-c-select__menu-item pf-m-selected"
4780
- role="option"
4781
- aria-selected="true"
4782
- >
4783
- Stopped
4784
- <span class="pf-v5-c-select__menu-item-icon">
4785
- <i class="fas fa-check" aria-hidden="true"></i>
4786
- </span>
4787
- </button>
4788
- </li>
4789
- <li role="presentation">
4790
- <button
4791
- class="pf-v5-c-select__menu-item"
4792
- role="option"
4793
- >Down</button>
4794
- </li>
4795
- <li role="presentation">
4796
- <button
4797
- class="pf-v5-c-select__menu-item"
4798
- role="option"
4799
- >Degraded</button>
4800
- </li>
4801
- <li role="presentation">
4802
- <button
4803
- class="pf-v5-c-select__menu-item"
4804
- role="option"
4805
- >Needs maintenance</button>
4806
- </li>
4807
- </ul>
4808
- </div>
4526
+ <button
4527
+ class="pf-v5-c-menu-toggle"
4528
+ type="button"
4529
+ aria-expanded="false"
4530
+ id="compact-demo-toolbar-search-filter-menu"
4531
+ >
4532
+ <span class="pf-v5-c-menu-toggle__icon">
4533
+ <i class="fas fa-filter" aria-hidden="true"></i>
4534
+ </span>
4535
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
4536
+ <span class="pf-v5-c-menu-toggle__controls">
4537
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4538
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4539
+ </span>
4540
+ </span>
4541
+ </button>
4809
4542
  </div>
4810
4543
  <div class="pf-v5-c-input-group__item pf-m-fill">
4811
4544
  <div class="pf-v5-c-text-input-group">
@@ -4832,17 +4565,17 @@ wrapperTag: div
4832
4565
  <div class="pf-v5-c-toolbar__item">
4833
4566
  <div class="pf-v5-c-select">
4834
4567
  <span
4835
- id="-select-checkbox-status-label"
4568
+ id="compact-demo-toolbar-select-checkbox-status-label"
4836
4569
  hidden
4837
4570
  >Choose many</span>
4838
4571
 
4839
4572
  <button
4840
4573
  class="pf-v5-c-select__toggle"
4841
4574
  type="button"
4842
- id="-select-checkbox-status-toggle"
4575
+ id="compact-demo-toolbar-select-checkbox-status-toggle"
4843
4576
  aria-haspopup="true"
4844
4577
  aria-expanded="false"
4845
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
4578
+ aria-labelledby="compact-demo-toolbar-select-checkbox-status-label compact-demo-toolbar-select-checkbox-status-toggle"
4846
4579
  >
4847
4580
  <div class="pf-v5-c-select__toggle-wrapper">
4848
4581
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -4859,76 +4592,76 @@ wrapperTag: div
4859
4592
  >
4860
4593
  <label
4861
4594
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
4862
- id="-select-checkbox-status-active"
4863
- for="-select-checkbox-status-active-input"
4595
+ id="compact-demo-toolbar-select-checkbox-status-active"
4596
+ for="compact-demo-toolbar-select-checkbox-status-active-input"
4864
4597
  >
4865
4598
  <input
4866
4599
  class="pf-v5-c-check__input"
4867
4600
  type="checkbox"
4868
- aria-describedby="-select-checkbox-status-active-description"
4869
- id="-select-checkbox-status-active-input"
4870
- name="-select-checkbox-status-active-input"
4601
+ aria-describedby="compact-demo-toolbar-select-checkbox-status-active-description"
4602
+ id="compact-demo-toolbar-select-checkbox-status-active-input"
4603
+ name="compact-demo-toolbar-select-checkbox-status-active-input"
4871
4604
  />
4872
4605
  <span class="pf-v5-c-check__label">Active</span>
4873
4606
  <span
4874
4607
  class="pf-v5-c-check__description"
4875
- id="-select-checkbox-status-active-description"
4608
+ id="compact-demo-toolbar-select-checkbox-status-active-description"
4876
4609
  >This is a description</span>
4877
4610
  </label>
4878
4611
  <label
4879
4612
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
4880
- id="-select-checkbox-status-canceled"
4881
- for="-select-checkbox-status-canceled-input"
4613
+ id="compact-demo-toolbar-select-checkbox-status-canceled"
4614
+ for="compact-demo-toolbar-select-checkbox-status-canceled-input"
4882
4615
  >
4883
4616
  <input
4884
4617
  class="pf-v5-c-check__input"
4885
4618
  type="checkbox"
4886
- aria-describedby="-select-checkbox-status-canceled-description"
4887
- id="-select-checkbox-status-canceled-input"
4888
- name="-select-checkbox-status-canceled-input"
4619
+ aria-describedby="compact-demo-toolbar-select-checkbox-status-canceled-description"
4620
+ id="compact-demo-toolbar-select-checkbox-status-canceled-input"
4621
+ name="compact-demo-toolbar-select-checkbox-status-canceled-input"
4889
4622
  />
4890
4623
  <span class="pf-v5-c-check__label">Canceled</span>
4891
4624
  <span
4892
4625
  class="pf-v5-c-check__description"
4893
- id="-select-checkbox-status-canceled-description"
4626
+ id="compact-demo-toolbar-select-checkbox-status-canceled-description"
4894
4627
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
4895
4628
  </label>
4896
4629
  <label
4897
4630
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4898
- id="-select-checkbox-status-paused"
4899
- for="-select-checkbox-status-paused-input"
4631
+ id="compact-demo-toolbar-select-checkbox-status-paused"
4632
+ for="compact-demo-toolbar-select-checkbox-status-paused-input"
4900
4633
  >
4901
4634
  <input
4902
4635
  class="pf-v5-c-check__input"
4903
4636
  type="checkbox"
4904
- id="-select-checkbox-status-paused-input"
4905
- name="-select-checkbox-status-paused-input"
4637
+ id="compact-demo-toolbar-select-checkbox-status-paused-input"
4638
+ name="compact-demo-toolbar-select-checkbox-status-paused-input"
4906
4639
  />
4907
4640
  <span class="pf-v5-c-check__label">Paused</span>
4908
4641
  </label>
4909
4642
  <label
4910
4643
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4911
- id="-select-checkbox-status-warning"
4912
- for="-select-checkbox-status-warning-input"
4644
+ id="compact-demo-toolbar-select-checkbox-status-warning"
4645
+ for="compact-demo-toolbar-select-checkbox-status-warning-input"
4913
4646
  >
4914
4647
  <input
4915
4648
  class="pf-v5-c-check__input"
4916
4649
  type="checkbox"
4917
- id="-select-checkbox-status-warning-input"
4918
- name="-select-checkbox-status-warning-input"
4650
+ id="compact-demo-toolbar-select-checkbox-status-warning-input"
4651
+ name="compact-demo-toolbar-select-checkbox-status-warning-input"
4919
4652
  />
4920
4653
  <span class="pf-v5-c-check__label">Warning</span>
4921
4654
  </label>
4922
4655
  <label
4923
4656
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4924
- id="-select-checkbox-status-restarted"
4925
- for="-select-checkbox-status-restarted-input"
4657
+ id="compact-demo-toolbar-select-checkbox-status-restarted"
4658
+ for="compact-demo-toolbar-select-checkbox-status-restarted-input"
4926
4659
  >
4927
4660
  <input
4928
4661
  class="pf-v5-c-check__input"
4929
4662
  type="checkbox"
4930
- id="-select-checkbox-status-restarted-input"
4931
- name="-select-checkbox-status-restarted-input"
4663
+ id="compact-demo-toolbar-select-checkbox-status-restarted-input"
4664
+ name="compact-demo-toolbar-select-checkbox-status-restarted-input"
4932
4665
  />
4933
4666
  <span class="pf-v5-c-check__label">Restarted</span>
4934
4667
  </label>
@@ -4938,15 +4671,18 @@ wrapperTag: div
4938
4671
  </div>
4939
4672
  <div class="pf-v5-c-toolbar__item">
4940
4673
  <div class="pf-v5-c-select">
4941
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
4674
+ <span
4675
+ id="compact-demo-toolbar-select-checkbox-risk-label"
4676
+ hidden
4677
+ >Choose many</span>
4942
4678
 
4943
4679
  <button
4944
4680
  class="pf-v5-c-select__toggle"
4945
4681
  type="button"
4946
- id="-select-checkbox-risk-toggle"
4682
+ id="compact-demo-toolbar-select-checkbox-risk-toggle"
4947
4683
  aria-haspopup="true"
4948
4684
  aria-expanded="false"
4949
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
4685
+ aria-labelledby="compact-demo-toolbar-select-checkbox-risk-label compact-demo-toolbar-select-checkbox-risk-toggle"
4950
4686
  >
4951
4687
  <div class="pf-v5-c-select__toggle-wrapper">
4952
4688
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -4963,76 +4699,76 @@ wrapperTag: div
4963
4699
  >
4964
4700
  <label
4965
4701
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
4966
- id="-select-checkbox-risk-active"
4967
- for="-select-checkbox-risk-active-input"
4702
+ id="compact-demo-toolbar-select-checkbox-risk-active"
4703
+ for="compact-demo-toolbar-select-checkbox-risk-active-input"
4968
4704
  >
4969
4705
  <input
4970
4706
  class="pf-v5-c-check__input"
4971
4707
  type="checkbox"
4972
- aria-describedby="-select-checkbox-risk-active-description"
4973
- id="-select-checkbox-risk-active-input"
4974
- name="-select-checkbox-risk-active-input"
4708
+ aria-describedby="compact-demo-toolbar-select-checkbox-risk-active-description"
4709
+ id="compact-demo-toolbar-select-checkbox-risk-active-input"
4710
+ name="compact-demo-toolbar-select-checkbox-risk-active-input"
4975
4711
  />
4976
4712
  <span class="pf-v5-c-check__label">Active</span>
4977
4713
  <span
4978
4714
  class="pf-v5-c-check__description"
4979
- id="-select-checkbox-risk-active-description"
4715
+ id="compact-demo-toolbar-select-checkbox-risk-active-description"
4980
4716
  >This is a description</span>
4981
4717
  </label>
4982
4718
  <label
4983
4719
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
4984
- id="-select-checkbox-risk-canceled"
4985
- for="-select-checkbox-risk-canceled-input"
4720
+ id="compact-demo-toolbar-select-checkbox-risk-canceled"
4721
+ for="compact-demo-toolbar-select-checkbox-risk-canceled-input"
4986
4722
  >
4987
4723
  <input
4988
4724
  class="pf-v5-c-check__input"
4989
4725
  type="checkbox"
4990
- aria-describedby="-select-checkbox-risk-canceled-description"
4991
- id="-select-checkbox-risk-canceled-input"
4992
- name="-select-checkbox-risk-canceled-input"
4726
+ aria-describedby="compact-demo-toolbar-select-checkbox-risk-canceled-description"
4727
+ id="compact-demo-toolbar-select-checkbox-risk-canceled-input"
4728
+ name="compact-demo-toolbar-select-checkbox-risk-canceled-input"
4993
4729
  />
4994
4730
  <span class="pf-v5-c-check__label">Canceled</span>
4995
4731
  <span
4996
4732
  class="pf-v5-c-check__description"
4997
- id="-select-checkbox-risk-canceled-description"
4733
+ id="compact-demo-toolbar-select-checkbox-risk-canceled-description"
4998
4734
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
4999
4735
  </label>
5000
4736
  <label
5001
4737
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5002
- id="-select-checkbox-risk-paused"
5003
- for="-select-checkbox-risk-paused-input"
4738
+ id="compact-demo-toolbar-select-checkbox-risk-paused"
4739
+ for="compact-demo-toolbar-select-checkbox-risk-paused-input"
5004
4740
  >
5005
4741
  <input
5006
4742
  class="pf-v5-c-check__input"
5007
4743
  type="checkbox"
5008
- id="-select-checkbox-risk-paused-input"
5009
- name="-select-checkbox-risk-paused-input"
4744
+ id="compact-demo-toolbar-select-checkbox-risk-paused-input"
4745
+ name="compact-demo-toolbar-select-checkbox-risk-paused-input"
5010
4746
  />
5011
4747
  <span class="pf-v5-c-check__label">Paused</span>
5012
4748
  </label>
5013
4749
  <label
5014
4750
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5015
- id="-select-checkbox-risk-warning"
5016
- for="-select-checkbox-risk-warning-input"
4751
+ id="compact-demo-toolbar-select-checkbox-risk-warning"
4752
+ for="compact-demo-toolbar-select-checkbox-risk-warning-input"
5017
4753
  >
5018
4754
  <input
5019
4755
  class="pf-v5-c-check__input"
5020
4756
  type="checkbox"
5021
- id="-select-checkbox-risk-warning-input"
5022
- name="-select-checkbox-risk-warning-input"
4757
+ id="compact-demo-toolbar-select-checkbox-risk-warning-input"
4758
+ name="compact-demo-toolbar-select-checkbox-risk-warning-input"
5023
4759
  />
5024
4760
  <span class="pf-v5-c-check__label">Warning</span>
5025
4761
  </label>
5026
4762
  <label
5027
4763
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5028
- id="-select-checkbox-risk-restarted"
5029
- for="-select-checkbox-risk-restarted-input"
4764
+ id="compact-demo-toolbar-select-checkbox-risk-restarted"
4765
+ for="compact-demo-toolbar-select-checkbox-risk-restarted-input"
5030
4766
  >
5031
4767
  <input
5032
4768
  class="pf-v5-c-check__input"
5033
4769
  type="checkbox"
5034
- id="-select-checkbox-risk-restarted-input"
5035
- name="-select-checkbox-risk-restarted-input"
4770
+ id="compact-demo-toolbar-select-checkbox-risk-restarted-input"
4771
+ name="compact-demo-toolbar-select-checkbox-risk-restarted-input"
5036
4772
  />
5037
4773
  <span class="pf-v5-c-check__label">Restarted</span>
5038
4774
  </label>
@@ -5062,7 +4798,7 @@ wrapperTag: div
5062
4798
  <button
5063
4799
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
5064
4800
  type="button"
5065
- id="-top-pagination-toggle"
4801
+ id="compact-demo-toolbar-top-pagination-toggle"
5066
4802
  aria-haspopup="listbox"
5067
4803
  aria-expanded="false"
5068
4804
  >
@@ -5077,7 +4813,7 @@ wrapperTag: div
5077
4813
  <ul
5078
4814
  class="pf-v5-c-options-menu__menu"
5079
4815
  role="menu"
5080
- aria-labelledby="-top-pagination-toggle"
4816
+ aria-labelledby="compact-demo-toolbar-top-pagination-toggle"
5081
4817
  hidden
5082
4818
  >
5083
4819
  <li role="none">
@@ -5138,7 +4874,7 @@ wrapperTag: div
5138
4874
 
5139
4875
  <div
5140
4876
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
5141
- id="-expandable-content"
4877
+ id="compact-demo-toolbar-expandable-content"
5142
4878
  hidden
5143
4879
  ></div>
5144
4880
  </div>
@@ -6006,7 +5742,7 @@ wrapperTag: div
6006
5742
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
6007
5743
  >
6008
5744
  <div class="pf-v5-c-card">
6009
- <div class="pf-v5-c-toolbar">
5745
+ <div class="pf-v5-c-toolbar" id="compound-expansion-demo-toolbar">
6010
5746
  <div class="pf-v5-c-toolbar__content">
6011
5747
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
6012
5748
  <div
@@ -6014,65 +5750,46 @@ wrapperTag: div
6014
5750
  >
6015
5751
  <div class="pf-v5-c-toolbar__toggle">
6016
5752
  <button
6017
- class="pf-v5-c-button pf-m-plain"
5753
+ class="pf-v5-c-menu-toggle pf-m-plain"
6018
5754
  type="button"
6019
- aria-label="Show filters"
6020
5755
  aria-expanded="false"
6021
- aria-controls="-expandable-content"
5756
+ aria-label="Show filters"
5757
+ aria-controls="compound-expansion-demo-toolbar-expandable-content"
6022
5758
  >
6023
5759
  <i class="fas fa-filter" aria-hidden="true"></i>
6024
5760
  </button>
6025
5761
  </div>
6026
5762
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
6027
- <div class="pf-v5-c-dropdown">
6028
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
6029
- <label
6030
- class="pf-v5-c-dropdown__toggle-check"
6031
- for="-bulk-select-toggle-check"
6032
- >
6033
- <div class="pf-v5-c-check pf-m-standalone">
6034
- <input
6035
- class="pf-v5-c-check__input"
6036
- type="checkbox"
6037
- id="-bulk-select-toggle-check"
6038
- aria-label="Select all"
6039
- />
6040
- </div>
6041
- </label>
6042
-
6043
- <button
6044
- class="pf-v5-c-dropdown__toggle-button"
6045
- type="button"
6046
- aria-expanded="false"
6047
- id="-bulk-select-toggle-button"
6048
- aria-label="Dropdown toggle"
6049
- >
6050
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6051
- </button>
6052
- </div>
6053
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
6054
- <li role="none">
6055
- <button
6056
- class="pf-v5-c-dropdown__menu-item"
6057
- role="menuitem"
6058
- type="button"
6059
- >Select all</button>
6060
- </li>
6061
- <li role="none">
6062
- <button
6063
- class="pf-v5-c-dropdown__menu-item"
6064
- role="menuitem"
6065
- type="button"
6066
- >Select none</button>
6067
- </li>
6068
- <li role="none">
6069
- <button
6070
- class="pf-v5-c-dropdown__menu-item"
6071
- role="menuitem"
6072
- type="button"
6073
- >Other action</button>
6074
- </li>
6075
- </ul>
5763
+ <div
5764
+ class="pf-v5-c-menu-toggle pf-m-split-button"
5765
+ id="compound-expansion-demo-toolbar-check"
5766
+ >
5767
+ <label
5768
+ class="pf-v5-c-check pf-m-standalone"
5769
+ id="compound-expansion-demo-toolbar-check-check"
5770
+ for="compound-expansion-demo-toolbar-check-check-input"
5771
+ >
5772
+ <input
5773
+ class="pf-v5-c-check__input"
5774
+ type="checkbox"
5775
+ id="compound-expansion-demo-toolbar-check-check-input"
5776
+ name="compound-expansion-demo-toolbar-check-check-input"
5777
+ aria-label="Standalone check"
5778
+ />
5779
+ </label>
5780
+ <button
5781
+ class="pf-v5-c-menu-toggle__button"
5782
+ type="button"
5783
+ aria-expanded="false"
5784
+ id="compound-expansion-demo-toolbar-menu-toggle-toggle-button"
5785
+ aria-label="Menu toggle"
5786
+ >
5787
+ <span class="pf-v5-c-menu-toggle__controls">
5788
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5789
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5790
+ </span>
5791
+ </span>
5792
+ </button>
6076
5793
  </div>
6077
5794
  </div>
6078
5795
 
@@ -6083,72 +5800,22 @@ wrapperTag: div
6083
5800
  role="group"
6084
5801
  >
6085
5802
  <div class="pf-v5-c-input-group__item">
6086
- <div class="pf-v5-c-select" style="width: 124px">
6087
- <span id="-select-name-label" hidden>Choose one</span>
6088
-
6089
- <button
6090
- class="pf-v5-c-select__toggle"
6091
- type="button"
6092
- id="-select-name-toggle"
6093
- aria-haspopup="true"
6094
- aria-expanded="false"
6095
- aria-labelledby="-select-name-label -select-name-toggle"
6096
- >
6097
- <div class="pf-v5-c-select__toggle-wrapper">
6098
- <span class="pf-v5-c-select__toggle-icon">
6099
- <i class="fas fa-filter" aria-hidden="true"></i>
6100
- </span>
6101
- <span class="pf-v5-c-select__toggle-text">Name</span>
6102
- </div>
6103
- <span class="pf-v5-c-select__toggle-arrow">
6104
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5803
+ <button
5804
+ class="pf-v5-c-menu-toggle"
5805
+ type="button"
5806
+ aria-expanded="false"
5807
+ id="compound-expansion-demo-toolbar-search-filter-menu"
5808
+ >
5809
+ <span class="pf-v5-c-menu-toggle__icon">
5810
+ <i class="fas fa-filter" aria-hidden="true"></i>
5811
+ </span>
5812
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
5813
+ <span class="pf-v5-c-menu-toggle__controls">
5814
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5815
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
6105
5816
  </span>
6106
- </button>
6107
-
6108
- <ul
6109
- class="pf-v5-c-select__menu"
6110
- role="listbox"
6111
- aria-labelledby="-select-name-label"
6112
- hidden
6113
- >
6114
- <li role="presentation">
6115
- <button
6116
- class="pf-v5-c-select__menu-item"
6117
- role="option"
6118
- >Running</button>
6119
- </li>
6120
- <li role="presentation">
6121
- <button
6122
- class="pf-v5-c-select__menu-item pf-m-selected"
6123
- role="option"
6124
- aria-selected="true"
6125
- >
6126
- Stopped
6127
- <span class="pf-v5-c-select__menu-item-icon">
6128
- <i class="fas fa-check" aria-hidden="true"></i>
6129
- </span>
6130
- </button>
6131
- </li>
6132
- <li role="presentation">
6133
- <button
6134
- class="pf-v5-c-select__menu-item"
6135
- role="option"
6136
- >Down</button>
6137
- </li>
6138
- <li role="presentation">
6139
- <button
6140
- class="pf-v5-c-select__menu-item"
6141
- role="option"
6142
- >Degraded</button>
6143
- </li>
6144
- <li role="presentation">
6145
- <button
6146
- class="pf-v5-c-select__menu-item"
6147
- role="option"
6148
- >Needs maintenance</button>
6149
- </li>
6150
- </ul>
6151
- </div>
5817
+ </span>
5818
+ </button>
6152
5819
  </div>
6153
5820
  <div class="pf-v5-c-input-group__item pf-m-fill">
6154
5821
  <div class="pf-v5-c-text-input-group">
@@ -6175,17 +5842,17 @@ wrapperTag: div
6175
5842
  <div class="pf-v5-c-toolbar__item">
6176
5843
  <div class="pf-v5-c-select">
6177
5844
  <span
6178
- id="-select-checkbox-status-label"
5845
+ id="compound-expansion-demo-toolbar-select-checkbox-status-label"
6179
5846
  hidden
6180
5847
  >Choose many</span>
6181
5848
 
6182
5849
  <button
6183
5850
  class="pf-v5-c-select__toggle"
6184
5851
  type="button"
6185
- id="-select-checkbox-status-toggle"
5852
+ id="compound-expansion-demo-toolbar-select-checkbox-status-toggle"
6186
5853
  aria-haspopup="true"
6187
5854
  aria-expanded="false"
6188
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
5855
+ aria-labelledby="compound-expansion-demo-toolbar-select-checkbox-status-label compound-expansion-demo-toolbar-select-checkbox-status-toggle"
6189
5856
  >
6190
5857
  <div class="pf-v5-c-select__toggle-wrapper">
6191
5858
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -6202,76 +5869,76 @@ wrapperTag: div
6202
5869
  >
6203
5870
  <label
6204
5871
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
6205
- id="-select-checkbox-status-active"
6206
- for="-select-checkbox-status-active-input"
5872
+ id="compound-expansion-demo-toolbar-select-checkbox-status-active"
5873
+ for="compound-expansion-demo-toolbar-select-checkbox-status-active-input"
6207
5874
  >
6208
5875
  <input
6209
5876
  class="pf-v5-c-check__input"
6210
5877
  type="checkbox"
6211
- aria-describedby="-select-checkbox-status-active-description"
6212
- id="-select-checkbox-status-active-input"
6213
- name="-select-checkbox-status-active-input"
5878
+ aria-describedby="compound-expansion-demo-toolbar-select-checkbox-status-active-description"
5879
+ id="compound-expansion-demo-toolbar-select-checkbox-status-active-input"
5880
+ name="compound-expansion-demo-toolbar-select-checkbox-status-active-input"
6214
5881
  />
6215
5882
  <span class="pf-v5-c-check__label">Active</span>
6216
5883
  <span
6217
5884
  class="pf-v5-c-check__description"
6218
- id="-select-checkbox-status-active-description"
5885
+ id="compound-expansion-demo-toolbar-select-checkbox-status-active-description"
6219
5886
  >This is a description</span>
6220
5887
  </label>
6221
5888
  <label
6222
5889
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
6223
- id="-select-checkbox-status-canceled"
6224
- for="-select-checkbox-status-canceled-input"
5890
+ id="compound-expansion-demo-toolbar-select-checkbox-status-canceled"
5891
+ for="compound-expansion-demo-toolbar-select-checkbox-status-canceled-input"
6225
5892
  >
6226
5893
  <input
6227
5894
  class="pf-v5-c-check__input"
6228
5895
  type="checkbox"
6229
- aria-describedby="-select-checkbox-status-canceled-description"
6230
- id="-select-checkbox-status-canceled-input"
6231
- name="-select-checkbox-status-canceled-input"
5896
+ aria-describedby="compound-expansion-demo-toolbar-select-checkbox-status-canceled-description"
5897
+ id="compound-expansion-demo-toolbar-select-checkbox-status-canceled-input"
5898
+ name="compound-expansion-demo-toolbar-select-checkbox-status-canceled-input"
6232
5899
  />
6233
5900
  <span class="pf-v5-c-check__label">Canceled</span>
6234
5901
  <span
6235
5902
  class="pf-v5-c-check__description"
6236
- id="-select-checkbox-status-canceled-description"
5903
+ id="compound-expansion-demo-toolbar-select-checkbox-status-canceled-description"
6237
5904
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
6238
5905
  </label>
6239
5906
  <label
6240
5907
  class="pf-v5-c-check pf-v5-c-select__menu-item"
6241
- id="-select-checkbox-status-paused"
6242
- for="-select-checkbox-status-paused-input"
5908
+ id="compound-expansion-demo-toolbar-select-checkbox-status-paused"
5909
+ for="compound-expansion-demo-toolbar-select-checkbox-status-paused-input"
6243
5910
  >
6244
5911
  <input
6245
5912
  class="pf-v5-c-check__input"
6246
5913
  type="checkbox"
6247
- id="-select-checkbox-status-paused-input"
6248
- name="-select-checkbox-status-paused-input"
5914
+ id="compound-expansion-demo-toolbar-select-checkbox-status-paused-input"
5915
+ name="compound-expansion-demo-toolbar-select-checkbox-status-paused-input"
6249
5916
  />
6250
5917
  <span class="pf-v5-c-check__label">Paused</span>
6251
5918
  </label>
6252
5919
  <label
6253
5920
  class="pf-v5-c-check pf-v5-c-select__menu-item"
6254
- id="-select-checkbox-status-warning"
6255
- for="-select-checkbox-status-warning-input"
5921
+ id="compound-expansion-demo-toolbar-select-checkbox-status-warning"
5922
+ for="compound-expansion-demo-toolbar-select-checkbox-status-warning-input"
6256
5923
  >
6257
5924
  <input
6258
5925
  class="pf-v5-c-check__input"
6259
5926
  type="checkbox"
6260
- id="-select-checkbox-status-warning-input"
6261
- name="-select-checkbox-status-warning-input"
5927
+ id="compound-expansion-demo-toolbar-select-checkbox-status-warning-input"
5928
+ name="compound-expansion-demo-toolbar-select-checkbox-status-warning-input"
6262
5929
  />
6263
5930
  <span class="pf-v5-c-check__label">Warning</span>
6264
5931
  </label>
6265
5932
  <label
6266
5933
  class="pf-v5-c-check pf-v5-c-select__menu-item"
6267
- id="-select-checkbox-status-restarted"
6268
- for="-select-checkbox-status-restarted-input"
5934
+ id="compound-expansion-demo-toolbar-select-checkbox-status-restarted"
5935
+ for="compound-expansion-demo-toolbar-select-checkbox-status-restarted-input"
6269
5936
  >
6270
5937
  <input
6271
5938
  class="pf-v5-c-check__input"
6272
5939
  type="checkbox"
6273
- id="-select-checkbox-status-restarted-input"
6274
- name="-select-checkbox-status-restarted-input"
5940
+ id="compound-expansion-demo-toolbar-select-checkbox-status-restarted-input"
5941
+ name="compound-expansion-demo-toolbar-select-checkbox-status-restarted-input"
6275
5942
  />
6276
5943
  <span class="pf-v5-c-check__label">Restarted</span>
6277
5944
  </label>
@@ -6281,15 +5948,18 @@ wrapperTag: div
6281
5948
  </div>
6282
5949
  <div class="pf-v5-c-toolbar__item">
6283
5950
  <div class="pf-v5-c-select">
6284
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
5951
+ <span
5952
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-label"
5953
+ hidden
5954
+ >Choose many</span>
6285
5955
 
6286
5956
  <button
6287
5957
  class="pf-v5-c-select__toggle"
6288
5958
  type="button"
6289
- id="-select-checkbox-risk-toggle"
5959
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-toggle"
6290
5960
  aria-haspopup="true"
6291
5961
  aria-expanded="false"
6292
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
5962
+ aria-labelledby="compound-expansion-demo-toolbar-select-checkbox-risk-label compound-expansion-demo-toolbar-select-checkbox-risk-toggle"
6293
5963
  >
6294
5964
  <div class="pf-v5-c-select__toggle-wrapper">
6295
5965
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -6306,76 +5976,76 @@ wrapperTag: div
6306
5976
  >
6307
5977
  <label
6308
5978
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
6309
- id="-select-checkbox-risk-active"
6310
- for="-select-checkbox-risk-active-input"
5979
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-active"
5980
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-active-input"
6311
5981
  >
6312
5982
  <input
6313
5983
  class="pf-v5-c-check__input"
6314
5984
  type="checkbox"
6315
- aria-describedby="-select-checkbox-risk-active-description"
6316
- id="-select-checkbox-risk-active-input"
6317
- name="-select-checkbox-risk-active-input"
5985
+ aria-describedby="compound-expansion-demo-toolbar-select-checkbox-risk-active-description"
5986
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-active-input"
5987
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-active-input"
6318
5988
  />
6319
5989
  <span class="pf-v5-c-check__label">Active</span>
6320
5990
  <span
6321
5991
  class="pf-v5-c-check__description"
6322
- id="-select-checkbox-risk-active-description"
5992
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-active-description"
6323
5993
  >This is a description</span>
6324
5994
  </label>
6325
5995
  <label
6326
5996
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
6327
- id="-select-checkbox-risk-canceled"
6328
- for="-select-checkbox-risk-canceled-input"
5997
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-canceled"
5998
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-input"
6329
5999
  >
6330
6000
  <input
6331
6001
  class="pf-v5-c-check__input"
6332
6002
  type="checkbox"
6333
- aria-describedby="-select-checkbox-risk-canceled-description"
6334
- id="-select-checkbox-risk-canceled-input"
6335
- name="-select-checkbox-risk-canceled-input"
6003
+ aria-describedby="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-description"
6004
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-input"
6005
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-input"
6336
6006
  />
6337
6007
  <span class="pf-v5-c-check__label">Canceled</span>
6338
6008
  <span
6339
6009
  class="pf-v5-c-check__description"
6340
- id="-select-checkbox-risk-canceled-description"
6010
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-description"
6341
6011
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
6342
6012
  </label>
6343
6013
  <label
6344
6014
  class="pf-v5-c-check pf-v5-c-select__menu-item"
6345
- id="-select-checkbox-risk-paused"
6346
- for="-select-checkbox-risk-paused-input"
6015
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-paused"
6016
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-paused-input"
6347
6017
  >
6348
6018
  <input
6349
6019
  class="pf-v5-c-check__input"
6350
6020
  type="checkbox"
6351
- id="-select-checkbox-risk-paused-input"
6352
- name="-select-checkbox-risk-paused-input"
6021
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-paused-input"
6022
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-paused-input"
6353
6023
  />
6354
6024
  <span class="pf-v5-c-check__label">Paused</span>
6355
6025
  </label>
6356
6026
  <label
6357
6027
  class="pf-v5-c-check pf-v5-c-select__menu-item"
6358
- id="-select-checkbox-risk-warning"
6359
- for="-select-checkbox-risk-warning-input"
6028
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-warning"
6029
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-warning-input"
6360
6030
  >
6361
6031
  <input
6362
6032
  class="pf-v5-c-check__input"
6363
6033
  type="checkbox"
6364
- id="-select-checkbox-risk-warning-input"
6365
- name="-select-checkbox-risk-warning-input"
6034
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-warning-input"
6035
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-warning-input"
6366
6036
  />
6367
6037
  <span class="pf-v5-c-check__label">Warning</span>
6368
6038
  </label>
6369
6039
  <label
6370
6040
  class="pf-v5-c-check pf-v5-c-select__menu-item"
6371
- id="-select-checkbox-risk-restarted"
6372
- for="-select-checkbox-risk-restarted-input"
6041
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-restarted"
6042
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-restarted-input"
6373
6043
  >
6374
6044
  <input
6375
6045
  class="pf-v5-c-check__input"
6376
6046
  type="checkbox"
6377
- id="-select-checkbox-risk-restarted-input"
6378
- name="-select-checkbox-risk-restarted-input"
6047
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-restarted-input"
6048
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-restarted-input"
6379
6049
  />
6380
6050
  <span class="pf-v5-c-check__label">Restarted</span>
6381
6051
  </label>
@@ -6405,7 +6075,7 @@ wrapperTag: div
6405
6075
  <button
6406
6076
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6407
6077
  type="button"
6408
- id="-top-pagination-toggle"
6078
+ id="compound-expansion-demo-toolbar-top-pagination-toggle"
6409
6079
  aria-haspopup="listbox"
6410
6080
  aria-expanded="false"
6411
6081
  >
@@ -6420,7 +6090,7 @@ wrapperTag: div
6420
6090
  <ul
6421
6091
  class="pf-v5-c-options-menu__menu"
6422
6092
  role="menu"
6423
- aria-labelledby="-top-pagination-toggle"
6093
+ aria-labelledby="compound-expansion-demo-toolbar-top-pagination-toggle"
6424
6094
  hidden
6425
6095
  >
6426
6096
  <li role="none">
@@ -6481,7 +6151,7 @@ wrapperTag: div
6481
6151
 
6482
6152
  <div
6483
6153
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
6484
- id="-expandable-content"
6154
+ id="compound-expansion-demo-toolbar-expandable-content"
6485
6155
  hidden
6486
6156
  ></div>
6487
6157
  </div>
@@ -12184,7 +11854,7 @@ wrapperTag: div
12184
11854
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
12185
11855
  >
12186
11856
  <div class="pf-v5-c-card">
12187
- <div class="pf-v5-c-toolbar">
11857
+ <div class="pf-v5-c-toolbar" id="static-bottom-pagination-demo-toolbar">
12188
11858
  <div class="pf-v5-c-toolbar__content">
12189
11859
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
12190
11860
  <div
@@ -12192,65 +11862,46 @@ wrapperTag: div
12192
11862
  >
12193
11863
  <div class="pf-v5-c-toolbar__toggle">
12194
11864
  <button
12195
- class="pf-v5-c-button pf-m-plain"
11865
+ class="pf-v5-c-menu-toggle pf-m-plain"
12196
11866
  type="button"
12197
- aria-label="Show filters"
12198
11867
  aria-expanded="false"
12199
- aria-controls="-expandable-content"
11868
+ aria-label="Show filters"
11869
+ aria-controls="static-bottom-pagination-demo-toolbar-expandable-content"
12200
11870
  >
12201
11871
  <i class="fas fa-filter" aria-hidden="true"></i>
12202
11872
  </button>
12203
11873
  </div>
12204
11874
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
12205
- <div class="pf-v5-c-dropdown">
12206
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
12207
- <label
12208
- class="pf-v5-c-dropdown__toggle-check"
12209
- for="-bulk-select-toggle-check"
12210
- >
12211
- <div class="pf-v5-c-check pf-m-standalone">
12212
- <input
12213
- class="pf-v5-c-check__input"
12214
- type="checkbox"
12215
- id="-bulk-select-toggle-check"
12216
- aria-label="Select all"
12217
- />
12218
- </div>
12219
- </label>
12220
-
12221
- <button
12222
- class="pf-v5-c-dropdown__toggle-button"
12223
- type="button"
12224
- aria-expanded="false"
12225
- id="-bulk-select-toggle-button"
12226
- aria-label="Dropdown toggle"
12227
- >
12228
- <i class="fas fa-caret-down" aria-hidden="true"></i>
12229
- </button>
12230
- </div>
12231
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
12232
- <li role="none">
12233
- <button
12234
- class="pf-v5-c-dropdown__menu-item"
12235
- role="menuitem"
12236
- type="button"
12237
- >Select all</button>
12238
- </li>
12239
- <li role="none">
12240
- <button
12241
- class="pf-v5-c-dropdown__menu-item"
12242
- role="menuitem"
12243
- type="button"
12244
- >Select none</button>
12245
- </li>
12246
- <li role="none">
12247
- <button
12248
- class="pf-v5-c-dropdown__menu-item"
12249
- role="menuitem"
12250
- type="button"
12251
- >Other action</button>
12252
- </li>
12253
- </ul>
11875
+ <div
11876
+ class="pf-v5-c-menu-toggle pf-m-split-button"
11877
+ id="static-bottom-pagination-demo-toolbar-check"
11878
+ >
11879
+ <label
11880
+ class="pf-v5-c-check pf-m-standalone"
11881
+ id="static-bottom-pagination-demo-toolbar-check-check"
11882
+ for="static-bottom-pagination-demo-toolbar-check-check-input"
11883
+ >
11884
+ <input
11885
+ class="pf-v5-c-check__input"
11886
+ type="checkbox"
11887
+ id="static-bottom-pagination-demo-toolbar-check-check-input"
11888
+ name="static-bottom-pagination-demo-toolbar-check-check-input"
11889
+ aria-label="Standalone check"
11890
+ />
11891
+ </label>
11892
+ <button
11893
+ class="pf-v5-c-menu-toggle__button"
11894
+ type="button"
11895
+ aria-expanded="false"
11896
+ id="static-bottom-pagination-demo-toolbar-menu-toggle-toggle-button"
11897
+ aria-label="Menu toggle"
11898
+ >
11899
+ <span class="pf-v5-c-menu-toggle__controls">
11900
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11901
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
11902
+ </span>
11903
+ </span>
11904
+ </button>
12254
11905
  </div>
12255
11906
  </div>
12256
11907
 
@@ -12261,72 +11912,22 @@ wrapperTag: div
12261
11912
  role="group"
12262
11913
  >
12263
11914
  <div class="pf-v5-c-input-group__item">
12264
- <div class="pf-v5-c-select" style="width: 124px">
12265
- <span id="-select-name-label" hidden>Choose one</span>
12266
-
12267
- <button
12268
- class="pf-v5-c-select__toggle"
12269
- type="button"
12270
- id="-select-name-toggle"
12271
- aria-haspopup="true"
12272
- aria-expanded="false"
12273
- aria-labelledby="-select-name-label -select-name-toggle"
12274
- >
12275
- <div class="pf-v5-c-select__toggle-wrapper">
12276
- <span class="pf-v5-c-select__toggle-icon">
12277
- <i class="fas fa-filter" aria-hidden="true"></i>
12278
- </span>
12279
- <span class="pf-v5-c-select__toggle-text">Name</span>
12280
- </div>
12281
- <span class="pf-v5-c-select__toggle-arrow">
12282
- <i class="fas fa-caret-down" aria-hidden="true"></i>
11915
+ <button
11916
+ class="pf-v5-c-menu-toggle"
11917
+ type="button"
11918
+ aria-expanded="false"
11919
+ id="static-bottom-pagination-demo-toolbar-search-filter-menu"
11920
+ >
11921
+ <span class="pf-v5-c-menu-toggle__icon">
11922
+ <i class="fas fa-filter" aria-hidden="true"></i>
11923
+ </span>
11924
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
11925
+ <span class="pf-v5-c-menu-toggle__controls">
11926
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11927
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
12283
11928
  </span>
12284
- </button>
12285
-
12286
- <ul
12287
- class="pf-v5-c-select__menu"
12288
- role="listbox"
12289
- aria-labelledby="-select-name-label"
12290
- hidden
12291
- >
12292
- <li role="presentation">
12293
- <button
12294
- class="pf-v5-c-select__menu-item"
12295
- role="option"
12296
- >Running</button>
12297
- </li>
12298
- <li role="presentation">
12299
- <button
12300
- class="pf-v5-c-select__menu-item pf-m-selected"
12301
- role="option"
12302
- aria-selected="true"
12303
- >
12304
- Stopped
12305
- <span class="pf-v5-c-select__menu-item-icon">
12306
- <i class="fas fa-check" aria-hidden="true"></i>
12307
- </span>
12308
- </button>
12309
- </li>
12310
- <li role="presentation">
12311
- <button
12312
- class="pf-v5-c-select__menu-item"
12313
- role="option"
12314
- >Down</button>
12315
- </li>
12316
- <li role="presentation">
12317
- <button
12318
- class="pf-v5-c-select__menu-item"
12319
- role="option"
12320
- >Degraded</button>
12321
- </li>
12322
- <li role="presentation">
12323
- <button
12324
- class="pf-v5-c-select__menu-item"
12325
- role="option"
12326
- >Needs maintenance</button>
12327
- </li>
12328
- </ul>
12329
- </div>
11929
+ </span>
11930
+ </button>
12330
11931
  </div>
12331
11932
  <div class="pf-v5-c-input-group__item pf-m-fill">
12332
11933
  <div class="pf-v5-c-text-input-group">
@@ -12353,17 +11954,17 @@ wrapperTag: div
12353
11954
  <div class="pf-v5-c-toolbar__item">
12354
11955
  <div class="pf-v5-c-select">
12355
11956
  <span
12356
- id="-select-checkbox-status-label"
11957
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-label"
12357
11958
  hidden
12358
11959
  >Choose many</span>
12359
11960
 
12360
11961
  <button
12361
11962
  class="pf-v5-c-select__toggle"
12362
11963
  type="button"
12363
- id="-select-checkbox-status-toggle"
11964
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-toggle"
12364
11965
  aria-haspopup="true"
12365
11966
  aria-expanded="false"
12366
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
11967
+ aria-labelledby="static-bottom-pagination-demo-toolbar-select-checkbox-status-label static-bottom-pagination-demo-toolbar-select-checkbox-status-toggle"
12367
11968
  >
12368
11969
  <div class="pf-v5-c-select__toggle-wrapper">
12369
11970
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -12380,76 +11981,76 @@ wrapperTag: div
12380
11981
  >
12381
11982
  <label
12382
11983
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
12383
- id="-select-checkbox-status-active"
12384
- for="-select-checkbox-status-active-input"
11984
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-active"
11985
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-input"
12385
11986
  >
12386
11987
  <input
12387
11988
  class="pf-v5-c-check__input"
12388
11989
  type="checkbox"
12389
- aria-describedby="-select-checkbox-status-active-description"
12390
- id="-select-checkbox-status-active-input"
12391
- name="-select-checkbox-status-active-input"
11990
+ aria-describedby="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-description"
11991
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-input"
11992
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-input"
12392
11993
  />
12393
11994
  <span class="pf-v5-c-check__label">Active</span>
12394
11995
  <span
12395
11996
  class="pf-v5-c-check__description"
12396
- id="-select-checkbox-status-active-description"
11997
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-description"
12397
11998
  >This is a description</span>
12398
11999
  </label>
12399
12000
  <label
12400
12001
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
12401
- id="-select-checkbox-status-canceled"
12402
- for="-select-checkbox-status-canceled-input"
12002
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled"
12003
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-input"
12403
12004
  >
12404
12005
  <input
12405
12006
  class="pf-v5-c-check__input"
12406
12007
  type="checkbox"
12407
- aria-describedby="-select-checkbox-status-canceled-description"
12408
- id="-select-checkbox-status-canceled-input"
12409
- name="-select-checkbox-status-canceled-input"
12008
+ aria-describedby="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-description"
12009
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-input"
12010
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-input"
12410
12011
  />
12411
12012
  <span class="pf-v5-c-check__label">Canceled</span>
12412
12013
  <span
12413
12014
  class="pf-v5-c-check__description"
12414
- id="-select-checkbox-status-canceled-description"
12015
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-description"
12415
12016
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
12416
12017
  </label>
12417
12018
  <label
12418
12019
  class="pf-v5-c-check pf-v5-c-select__menu-item"
12419
- id="-select-checkbox-status-paused"
12420
- for="-select-checkbox-status-paused-input"
12020
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-paused"
12021
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-paused-input"
12421
12022
  >
12422
12023
  <input
12423
12024
  class="pf-v5-c-check__input"
12424
12025
  type="checkbox"
12425
- id="-select-checkbox-status-paused-input"
12426
- name="-select-checkbox-status-paused-input"
12026
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-paused-input"
12027
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-paused-input"
12427
12028
  />
12428
12029
  <span class="pf-v5-c-check__label">Paused</span>
12429
12030
  </label>
12430
12031
  <label
12431
12032
  class="pf-v5-c-check pf-v5-c-select__menu-item"
12432
- id="-select-checkbox-status-warning"
12433
- for="-select-checkbox-status-warning-input"
12033
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-warning"
12034
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-warning-input"
12434
12035
  >
12435
12036
  <input
12436
12037
  class="pf-v5-c-check__input"
12437
12038
  type="checkbox"
12438
- id="-select-checkbox-status-warning-input"
12439
- name="-select-checkbox-status-warning-input"
12039
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-warning-input"
12040
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-warning-input"
12440
12041
  />
12441
12042
  <span class="pf-v5-c-check__label">Warning</span>
12442
12043
  </label>
12443
12044
  <label
12444
12045
  class="pf-v5-c-check pf-v5-c-select__menu-item"
12445
- id="-select-checkbox-status-restarted"
12446
- for="-select-checkbox-status-restarted-input"
12046
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-restarted"
12047
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-restarted-input"
12447
12048
  >
12448
12049
  <input
12449
12050
  class="pf-v5-c-check__input"
12450
12051
  type="checkbox"
12451
- id="-select-checkbox-status-restarted-input"
12452
- name="-select-checkbox-status-restarted-input"
12052
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-restarted-input"
12053
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-restarted-input"
12453
12054
  />
12454
12055
  <span class="pf-v5-c-check__label">Restarted</span>
12455
12056
  </label>
@@ -12459,15 +12060,18 @@ wrapperTag: div
12459
12060
  </div>
12460
12061
  <div class="pf-v5-c-toolbar__item">
12461
12062
  <div class="pf-v5-c-select">
12462
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
12063
+ <span
12064
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-label"
12065
+ hidden
12066
+ >Choose many</span>
12463
12067
 
12464
12068
  <button
12465
12069
  class="pf-v5-c-select__toggle"
12466
12070
  type="button"
12467
- id="-select-checkbox-risk-toggle"
12071
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-toggle"
12468
12072
  aria-haspopup="true"
12469
12073
  aria-expanded="false"
12470
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
12074
+ aria-labelledby="static-bottom-pagination-demo-toolbar-select-checkbox-risk-label static-bottom-pagination-demo-toolbar-select-checkbox-risk-toggle"
12471
12075
  >
12472
12076
  <div class="pf-v5-c-select__toggle-wrapper">
12473
12077
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -12484,76 +12088,76 @@ wrapperTag: div
12484
12088
  >
12485
12089
  <label
12486
12090
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
12487
- id="-select-checkbox-risk-active"
12488
- for="-select-checkbox-risk-active-input"
12091
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active"
12092
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-input"
12489
12093
  >
12490
12094
  <input
12491
12095
  class="pf-v5-c-check__input"
12492
12096
  type="checkbox"
12493
- aria-describedby="-select-checkbox-risk-active-description"
12494
- id="-select-checkbox-risk-active-input"
12495
- name="-select-checkbox-risk-active-input"
12097
+ aria-describedby="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-description"
12098
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-input"
12099
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-input"
12496
12100
  />
12497
12101
  <span class="pf-v5-c-check__label">Active</span>
12498
12102
  <span
12499
12103
  class="pf-v5-c-check__description"
12500
- id="-select-checkbox-risk-active-description"
12104
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-description"
12501
12105
  >This is a description</span>
12502
12106
  </label>
12503
12107
  <label
12504
12108
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
12505
- id="-select-checkbox-risk-canceled"
12506
- for="-select-checkbox-risk-canceled-input"
12109
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled"
12110
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-input"
12507
12111
  >
12508
12112
  <input
12509
12113
  class="pf-v5-c-check__input"
12510
12114
  type="checkbox"
12511
- aria-describedby="-select-checkbox-risk-canceled-description"
12512
- id="-select-checkbox-risk-canceled-input"
12513
- name="-select-checkbox-risk-canceled-input"
12115
+ aria-describedby="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-description"
12116
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-input"
12117
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-input"
12514
12118
  />
12515
12119
  <span class="pf-v5-c-check__label">Canceled</span>
12516
12120
  <span
12517
12121
  class="pf-v5-c-check__description"
12518
- id="-select-checkbox-risk-canceled-description"
12122
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-description"
12519
12123
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
12520
12124
  </label>
12521
12125
  <label
12522
12126
  class="pf-v5-c-check pf-v5-c-select__menu-item"
12523
- id="-select-checkbox-risk-paused"
12524
- for="-select-checkbox-risk-paused-input"
12127
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-paused"
12128
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-paused-input"
12525
12129
  >
12526
12130
  <input
12527
12131
  class="pf-v5-c-check__input"
12528
12132
  type="checkbox"
12529
- id="-select-checkbox-risk-paused-input"
12530
- name="-select-checkbox-risk-paused-input"
12133
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-paused-input"
12134
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-paused-input"
12531
12135
  />
12532
12136
  <span class="pf-v5-c-check__label">Paused</span>
12533
12137
  </label>
12534
12138
  <label
12535
12139
  class="pf-v5-c-check pf-v5-c-select__menu-item"
12536
- id="-select-checkbox-risk-warning"
12537
- for="-select-checkbox-risk-warning-input"
12140
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-warning"
12141
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-warning-input"
12538
12142
  >
12539
12143
  <input
12540
12144
  class="pf-v5-c-check__input"
12541
12145
  type="checkbox"
12542
- id="-select-checkbox-risk-warning-input"
12543
- name="-select-checkbox-risk-warning-input"
12146
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-warning-input"
12147
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-warning-input"
12544
12148
  />
12545
12149
  <span class="pf-v5-c-check__label">Warning</span>
12546
12150
  </label>
12547
12151
  <label
12548
12152
  class="pf-v5-c-check pf-v5-c-select__menu-item"
12549
- id="-select-checkbox-risk-restarted"
12550
- for="-select-checkbox-risk-restarted-input"
12153
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-restarted"
12154
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-restarted-input"
12551
12155
  >
12552
12156
  <input
12553
12157
  class="pf-v5-c-check__input"
12554
12158
  type="checkbox"
12555
- id="-select-checkbox-risk-restarted-input"
12556
- name="-select-checkbox-risk-restarted-input"
12159
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-restarted-input"
12160
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-restarted-input"
12557
12161
  />
12558
12162
  <span class="pf-v5-c-check__label">Restarted</span>
12559
12163
  </label>
@@ -12583,7 +12187,7 @@ wrapperTag: div
12583
12187
  <button
12584
12188
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
12585
12189
  type="button"
12586
- id="-top-pagination-toggle"
12190
+ id="static-bottom-pagination-demo-toolbar-top-pagination-toggle"
12587
12191
  aria-haspopup="listbox"
12588
12192
  aria-expanded="false"
12589
12193
  >
@@ -12598,7 +12202,7 @@ wrapperTag: div
12598
12202
  <ul
12599
12203
  class="pf-v5-c-options-menu__menu"
12600
12204
  role="menu"
12601
- aria-labelledby="-top-pagination-toggle"
12205
+ aria-labelledby="static-bottom-pagination-demo-toolbar-top-pagination-toggle"
12602
12206
  hidden
12603
12207
  >
12604
12208
  <li role="none">
@@ -12659,7 +12263,7 @@ wrapperTag: div
12659
12263
 
12660
12264
  <div
12661
12265
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
12662
- id="-expandable-content"
12266
+ id="static-bottom-pagination-demo-toolbar-expandable-content"
12663
12267
  hidden
12664
12268
  ></div>
12665
12269
  </div>
@@ -13631,7 +13235,7 @@ wrapperTag: div
13631
13235
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
13632
13236
  >
13633
13237
  <div class="pf-v5-c-card">
13634
- <div class="pf-v5-c-toolbar">
13238
+ <div class="pf-v5-c-toolbar" id="column-management-demo-toolbar">
13635
13239
  <div class="pf-v5-c-toolbar__content">
13636
13240
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
13637
13241
  <div
@@ -13639,65 +13243,46 @@ wrapperTag: div
13639
13243
  >
13640
13244
  <div class="pf-v5-c-toolbar__toggle">
13641
13245
  <button
13642
- class="pf-v5-c-button pf-m-plain"
13246
+ class="pf-v5-c-menu-toggle pf-m-plain"
13643
13247
  type="button"
13644
- aria-label="Show filters"
13645
13248
  aria-expanded="false"
13646
- aria-controls="-expandable-content"
13249
+ aria-label="Show filters"
13250
+ aria-controls="column-management-demo-toolbar-expandable-content"
13647
13251
  >
13648
13252
  <i class="fas fa-filter" aria-hidden="true"></i>
13649
13253
  </button>
13650
13254
  </div>
13651
13255
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
13652
- <div class="pf-v5-c-dropdown">
13653
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
13654
- <label
13655
- class="pf-v5-c-dropdown__toggle-check"
13656
- for="-bulk-select-toggle-check"
13657
- >
13658
- <div class="pf-v5-c-check pf-m-standalone">
13659
- <input
13660
- class="pf-v5-c-check__input"
13661
- type="checkbox"
13662
- id="-bulk-select-toggle-check"
13663
- aria-label="Select all"
13664
- />
13665
- </div>
13666
- </label>
13667
-
13668
- <button
13669
- class="pf-v5-c-dropdown__toggle-button"
13670
- type="button"
13671
- aria-expanded="false"
13672
- id="-bulk-select-toggle-button"
13673
- aria-label="Dropdown toggle"
13674
- >
13675
- <i class="fas fa-caret-down" aria-hidden="true"></i>
13676
- </button>
13677
- </div>
13678
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
13679
- <li role="none">
13680
- <button
13681
- class="pf-v5-c-dropdown__menu-item"
13682
- role="menuitem"
13683
- type="button"
13684
- >Select all</button>
13685
- </li>
13686
- <li role="none">
13687
- <button
13688
- class="pf-v5-c-dropdown__menu-item"
13689
- role="menuitem"
13690
- type="button"
13691
- >Select none</button>
13692
- </li>
13693
- <li role="none">
13694
- <button
13695
- class="pf-v5-c-dropdown__menu-item"
13696
- role="menuitem"
13697
- type="button"
13698
- >Other action</button>
13699
- </li>
13700
- </ul>
13256
+ <div
13257
+ class="pf-v5-c-menu-toggle pf-m-split-button"
13258
+ id="column-management-demo-toolbar-check"
13259
+ >
13260
+ <label
13261
+ class="pf-v5-c-check pf-m-standalone"
13262
+ id="column-management-demo-toolbar-check-check"
13263
+ for="column-management-demo-toolbar-check-check-input"
13264
+ >
13265
+ <input
13266
+ class="pf-v5-c-check__input"
13267
+ type="checkbox"
13268
+ id="column-management-demo-toolbar-check-check-input"
13269
+ name="column-management-demo-toolbar-check-check-input"
13270
+ aria-label="Standalone check"
13271
+ />
13272
+ </label>
13273
+ <button
13274
+ class="pf-v5-c-menu-toggle__button"
13275
+ type="button"
13276
+ aria-expanded="false"
13277
+ id="column-management-demo-toolbar-menu-toggle-toggle-button"
13278
+ aria-label="Menu toggle"
13279
+ >
13280
+ <span class="pf-v5-c-menu-toggle__controls">
13281
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
13282
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
13283
+ </span>
13284
+ </span>
13285
+ </button>
13701
13286
  </div>
13702
13287
  </div>
13703
13288
 
@@ -13708,72 +13293,22 @@ wrapperTag: div
13708
13293
  role="group"
13709
13294
  >
13710
13295
  <div class="pf-v5-c-input-group__item">
13711
- <div class="pf-v5-c-select" style="width: 124px">
13712
- <span id="-select-name-label" hidden>Choose one</span>
13713
-
13714
- <button
13715
- class="pf-v5-c-select__toggle"
13716
- type="button"
13717
- id="-select-name-toggle"
13718
- aria-haspopup="true"
13719
- aria-expanded="false"
13720
- aria-labelledby="-select-name-label -select-name-toggle"
13721
- >
13722
- <div class="pf-v5-c-select__toggle-wrapper">
13723
- <span class="pf-v5-c-select__toggle-icon">
13724
- <i class="fas fa-filter" aria-hidden="true"></i>
13725
- </span>
13726
- <span class="pf-v5-c-select__toggle-text">Name</span>
13727
- </div>
13728
- <span class="pf-v5-c-select__toggle-arrow">
13729
- <i class="fas fa-caret-down" aria-hidden="true"></i>
13296
+ <button
13297
+ class="pf-v5-c-menu-toggle"
13298
+ type="button"
13299
+ aria-expanded="false"
13300
+ id="column-management-demo-toolbar-search-filter-menu"
13301
+ >
13302
+ <span class="pf-v5-c-menu-toggle__icon">
13303
+ <i class="fas fa-filter" aria-hidden="true"></i>
13304
+ </span>
13305
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
13306
+ <span class="pf-v5-c-menu-toggle__controls">
13307
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
13308
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
13730
13309
  </span>
13731
- </button>
13732
-
13733
- <ul
13734
- class="pf-v5-c-select__menu"
13735
- role="listbox"
13736
- aria-labelledby="-select-name-label"
13737
- hidden
13738
- >
13739
- <li role="presentation">
13740
- <button
13741
- class="pf-v5-c-select__menu-item"
13742
- role="option"
13743
- >Running</button>
13744
- </li>
13745
- <li role="presentation">
13746
- <button
13747
- class="pf-v5-c-select__menu-item pf-m-selected"
13748
- role="option"
13749
- aria-selected="true"
13750
- >
13751
- Stopped
13752
- <span class="pf-v5-c-select__menu-item-icon">
13753
- <i class="fas fa-check" aria-hidden="true"></i>
13754
- </span>
13755
- </button>
13756
- </li>
13757
- <li role="presentation">
13758
- <button
13759
- class="pf-v5-c-select__menu-item"
13760
- role="option"
13761
- >Down</button>
13762
- </li>
13763
- <li role="presentation">
13764
- <button
13765
- class="pf-v5-c-select__menu-item"
13766
- role="option"
13767
- >Degraded</button>
13768
- </li>
13769
- <li role="presentation">
13770
- <button
13771
- class="pf-v5-c-select__menu-item"
13772
- role="option"
13773
- >Needs maintenance</button>
13774
- </li>
13775
- </ul>
13776
- </div>
13310
+ </span>
13311
+ </button>
13777
13312
  </div>
13778
13313
  <div class="pf-v5-c-input-group__item pf-m-fill">
13779
13314
  <div class="pf-v5-c-text-input-group">
@@ -13800,17 +13335,17 @@ wrapperTag: div
13800
13335
  <div class="pf-v5-c-toolbar__item">
13801
13336
  <div class="pf-v5-c-select">
13802
13337
  <span
13803
- id="-select-checkbox-status-label"
13338
+ id="column-management-demo-toolbar-select-checkbox-status-label"
13804
13339
  hidden
13805
13340
  >Choose many</span>
13806
13341
 
13807
13342
  <button
13808
13343
  class="pf-v5-c-select__toggle"
13809
13344
  type="button"
13810
- id="-select-checkbox-status-toggle"
13345
+ id="column-management-demo-toolbar-select-checkbox-status-toggle"
13811
13346
  aria-haspopup="true"
13812
13347
  aria-expanded="false"
13813
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
13348
+ aria-labelledby="column-management-demo-toolbar-select-checkbox-status-label column-management-demo-toolbar-select-checkbox-status-toggle"
13814
13349
  >
13815
13350
  <div class="pf-v5-c-select__toggle-wrapper">
13816
13351
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -13827,76 +13362,76 @@ wrapperTag: div
13827
13362
  >
13828
13363
  <label
13829
13364
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
13830
- id="-select-checkbox-status-active"
13831
- for="-select-checkbox-status-active-input"
13365
+ id="column-management-demo-toolbar-select-checkbox-status-active"
13366
+ for="column-management-demo-toolbar-select-checkbox-status-active-input"
13832
13367
  >
13833
13368
  <input
13834
13369
  class="pf-v5-c-check__input"
13835
13370
  type="checkbox"
13836
- aria-describedby="-select-checkbox-status-active-description"
13837
- id="-select-checkbox-status-active-input"
13838
- name="-select-checkbox-status-active-input"
13371
+ aria-describedby="column-management-demo-toolbar-select-checkbox-status-active-description"
13372
+ id="column-management-demo-toolbar-select-checkbox-status-active-input"
13373
+ name="column-management-demo-toolbar-select-checkbox-status-active-input"
13839
13374
  />
13840
13375
  <span class="pf-v5-c-check__label">Active</span>
13841
13376
  <span
13842
13377
  class="pf-v5-c-check__description"
13843
- id="-select-checkbox-status-active-description"
13378
+ id="column-management-demo-toolbar-select-checkbox-status-active-description"
13844
13379
  >This is a description</span>
13845
13380
  </label>
13846
13381
  <label
13847
13382
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
13848
- id="-select-checkbox-status-canceled"
13849
- for="-select-checkbox-status-canceled-input"
13383
+ id="column-management-demo-toolbar-select-checkbox-status-canceled"
13384
+ for="column-management-demo-toolbar-select-checkbox-status-canceled-input"
13850
13385
  >
13851
13386
  <input
13852
13387
  class="pf-v5-c-check__input"
13853
13388
  type="checkbox"
13854
- aria-describedby="-select-checkbox-status-canceled-description"
13855
- id="-select-checkbox-status-canceled-input"
13856
- name="-select-checkbox-status-canceled-input"
13389
+ aria-describedby="column-management-demo-toolbar-select-checkbox-status-canceled-description"
13390
+ id="column-management-demo-toolbar-select-checkbox-status-canceled-input"
13391
+ name="column-management-demo-toolbar-select-checkbox-status-canceled-input"
13857
13392
  />
13858
13393
  <span class="pf-v5-c-check__label">Canceled</span>
13859
13394
  <span
13860
13395
  class="pf-v5-c-check__description"
13861
- id="-select-checkbox-status-canceled-description"
13396
+ id="column-management-demo-toolbar-select-checkbox-status-canceled-description"
13862
13397
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
13863
13398
  </label>
13864
13399
  <label
13865
13400
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13866
- id="-select-checkbox-status-paused"
13867
- for="-select-checkbox-status-paused-input"
13401
+ id="column-management-demo-toolbar-select-checkbox-status-paused"
13402
+ for="column-management-demo-toolbar-select-checkbox-status-paused-input"
13868
13403
  >
13869
13404
  <input
13870
13405
  class="pf-v5-c-check__input"
13871
13406
  type="checkbox"
13872
- id="-select-checkbox-status-paused-input"
13873
- name="-select-checkbox-status-paused-input"
13407
+ id="column-management-demo-toolbar-select-checkbox-status-paused-input"
13408
+ name="column-management-demo-toolbar-select-checkbox-status-paused-input"
13874
13409
  />
13875
13410
  <span class="pf-v5-c-check__label">Paused</span>
13876
13411
  </label>
13877
13412
  <label
13878
13413
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13879
- id="-select-checkbox-status-warning"
13880
- for="-select-checkbox-status-warning-input"
13414
+ id="column-management-demo-toolbar-select-checkbox-status-warning"
13415
+ for="column-management-demo-toolbar-select-checkbox-status-warning-input"
13881
13416
  >
13882
13417
  <input
13883
13418
  class="pf-v5-c-check__input"
13884
13419
  type="checkbox"
13885
- id="-select-checkbox-status-warning-input"
13886
- name="-select-checkbox-status-warning-input"
13420
+ id="column-management-demo-toolbar-select-checkbox-status-warning-input"
13421
+ name="column-management-demo-toolbar-select-checkbox-status-warning-input"
13887
13422
  />
13888
13423
  <span class="pf-v5-c-check__label">Warning</span>
13889
13424
  </label>
13890
13425
  <label
13891
13426
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13892
- id="-select-checkbox-status-restarted"
13893
- for="-select-checkbox-status-restarted-input"
13427
+ id="column-management-demo-toolbar-select-checkbox-status-restarted"
13428
+ for="column-management-demo-toolbar-select-checkbox-status-restarted-input"
13894
13429
  >
13895
13430
  <input
13896
13431
  class="pf-v5-c-check__input"
13897
13432
  type="checkbox"
13898
- id="-select-checkbox-status-restarted-input"
13899
- name="-select-checkbox-status-restarted-input"
13433
+ id="column-management-demo-toolbar-select-checkbox-status-restarted-input"
13434
+ name="column-management-demo-toolbar-select-checkbox-status-restarted-input"
13900
13435
  />
13901
13436
  <span class="pf-v5-c-check__label">Restarted</span>
13902
13437
  </label>
@@ -13906,15 +13441,18 @@ wrapperTag: div
13906
13441
  </div>
13907
13442
  <div class="pf-v5-c-toolbar__item">
13908
13443
  <div class="pf-v5-c-select">
13909
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
13444
+ <span
13445
+ id="column-management-demo-toolbar-select-checkbox-risk-label"
13446
+ hidden
13447
+ >Choose many</span>
13910
13448
 
13911
13449
  <button
13912
13450
  class="pf-v5-c-select__toggle"
13913
13451
  type="button"
13914
- id="-select-checkbox-risk-toggle"
13452
+ id="column-management-demo-toolbar-select-checkbox-risk-toggle"
13915
13453
  aria-haspopup="true"
13916
13454
  aria-expanded="false"
13917
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
13455
+ aria-labelledby="column-management-demo-toolbar-select-checkbox-risk-label column-management-demo-toolbar-select-checkbox-risk-toggle"
13918
13456
  >
13919
13457
  <div class="pf-v5-c-select__toggle-wrapper">
13920
13458
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -13931,76 +13469,76 @@ wrapperTag: div
13931
13469
  >
13932
13470
  <label
13933
13471
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
13934
- id="-select-checkbox-risk-active"
13935
- for="-select-checkbox-risk-active-input"
13472
+ id="column-management-demo-toolbar-select-checkbox-risk-active"
13473
+ for="column-management-demo-toolbar-select-checkbox-risk-active-input"
13936
13474
  >
13937
13475
  <input
13938
13476
  class="pf-v5-c-check__input"
13939
13477
  type="checkbox"
13940
- aria-describedby="-select-checkbox-risk-active-description"
13941
- id="-select-checkbox-risk-active-input"
13942
- name="-select-checkbox-risk-active-input"
13478
+ aria-describedby="column-management-demo-toolbar-select-checkbox-risk-active-description"
13479
+ id="column-management-demo-toolbar-select-checkbox-risk-active-input"
13480
+ name="column-management-demo-toolbar-select-checkbox-risk-active-input"
13943
13481
  />
13944
13482
  <span class="pf-v5-c-check__label">Active</span>
13945
13483
  <span
13946
13484
  class="pf-v5-c-check__description"
13947
- id="-select-checkbox-risk-active-description"
13485
+ id="column-management-demo-toolbar-select-checkbox-risk-active-description"
13948
13486
  >This is a description</span>
13949
13487
  </label>
13950
13488
  <label
13951
13489
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
13952
- id="-select-checkbox-risk-canceled"
13953
- for="-select-checkbox-risk-canceled-input"
13490
+ id="column-management-demo-toolbar-select-checkbox-risk-canceled"
13491
+ for="column-management-demo-toolbar-select-checkbox-risk-canceled-input"
13954
13492
  >
13955
13493
  <input
13956
13494
  class="pf-v5-c-check__input"
13957
13495
  type="checkbox"
13958
- aria-describedby="-select-checkbox-risk-canceled-description"
13959
- id="-select-checkbox-risk-canceled-input"
13960
- name="-select-checkbox-risk-canceled-input"
13496
+ aria-describedby="column-management-demo-toolbar-select-checkbox-risk-canceled-description"
13497
+ id="column-management-demo-toolbar-select-checkbox-risk-canceled-input"
13498
+ name="column-management-demo-toolbar-select-checkbox-risk-canceled-input"
13961
13499
  />
13962
13500
  <span class="pf-v5-c-check__label">Canceled</span>
13963
13501
  <span
13964
13502
  class="pf-v5-c-check__description"
13965
- id="-select-checkbox-risk-canceled-description"
13503
+ id="column-management-demo-toolbar-select-checkbox-risk-canceled-description"
13966
13504
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
13967
13505
  </label>
13968
13506
  <label
13969
13507
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13970
- id="-select-checkbox-risk-paused"
13971
- for="-select-checkbox-risk-paused-input"
13508
+ id="column-management-demo-toolbar-select-checkbox-risk-paused"
13509
+ for="column-management-demo-toolbar-select-checkbox-risk-paused-input"
13972
13510
  >
13973
13511
  <input
13974
13512
  class="pf-v5-c-check__input"
13975
13513
  type="checkbox"
13976
- id="-select-checkbox-risk-paused-input"
13977
- name="-select-checkbox-risk-paused-input"
13514
+ id="column-management-demo-toolbar-select-checkbox-risk-paused-input"
13515
+ name="column-management-demo-toolbar-select-checkbox-risk-paused-input"
13978
13516
  />
13979
13517
  <span class="pf-v5-c-check__label">Paused</span>
13980
13518
  </label>
13981
13519
  <label
13982
13520
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13983
- id="-select-checkbox-risk-warning"
13984
- for="-select-checkbox-risk-warning-input"
13521
+ id="column-management-demo-toolbar-select-checkbox-risk-warning"
13522
+ for="column-management-demo-toolbar-select-checkbox-risk-warning-input"
13985
13523
  >
13986
13524
  <input
13987
13525
  class="pf-v5-c-check__input"
13988
13526
  type="checkbox"
13989
- id="-select-checkbox-risk-warning-input"
13990
- name="-select-checkbox-risk-warning-input"
13527
+ id="column-management-demo-toolbar-select-checkbox-risk-warning-input"
13528
+ name="column-management-demo-toolbar-select-checkbox-risk-warning-input"
13991
13529
  />
13992
13530
  <span class="pf-v5-c-check__label">Warning</span>
13993
13531
  </label>
13994
13532
  <label
13995
13533
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13996
- id="-select-checkbox-risk-restarted"
13997
- for="-select-checkbox-risk-restarted-input"
13534
+ id="column-management-demo-toolbar-select-checkbox-risk-restarted"
13535
+ for="column-management-demo-toolbar-select-checkbox-risk-restarted-input"
13998
13536
  >
13999
13537
  <input
14000
13538
  class="pf-v5-c-check__input"
14001
13539
  type="checkbox"
14002
- id="-select-checkbox-risk-restarted-input"
14003
- name="-select-checkbox-risk-restarted-input"
13540
+ id="column-management-demo-toolbar-select-checkbox-risk-restarted-input"
13541
+ name="column-management-demo-toolbar-select-checkbox-risk-restarted-input"
14004
13542
  />
14005
13543
  <span class="pf-v5-c-check__label">Restarted</span>
14006
13544
  </label>
@@ -14030,7 +13568,7 @@ wrapperTag: div
14030
13568
  <button
14031
13569
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
14032
13570
  type="button"
14033
- id="-top-pagination-toggle"
13571
+ id="column-management-demo-toolbar-top-pagination-toggle"
14034
13572
  aria-haspopup="listbox"
14035
13573
  aria-expanded="false"
14036
13574
  >
@@ -14045,7 +13583,7 @@ wrapperTag: div
14045
13583
  <ul
14046
13584
  class="pf-v5-c-options-menu__menu"
14047
13585
  role="menu"
14048
- aria-labelledby="-top-pagination-toggle"
13586
+ aria-labelledby="column-management-demo-toolbar-top-pagination-toggle"
14049
13587
  hidden
14050
13588
  >
14051
13589
  <li role="none">
@@ -14106,7 +13644,7 @@ wrapperTag: div
14106
13644
 
14107
13645
  <div
14108
13646
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
14109
- id="-expandable-content"
13647
+ id="column-management-demo-toolbar-expandable-content"
14110
13648
  hidden
14111
13649
  ></div>
14112
13650
  </div>
@@ -15174,7 +14712,7 @@ wrapperTag: div
15174
14712
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
15175
14713
  >
15176
14714
  <div class="pf-v5-c-card">
15177
- <div class="pf-v5-c-toolbar">
14715
+ <div class="pf-v5-c-toolbar" id="sticky-header-demo-toolbar">
15178
14716
  <div class="pf-v5-c-toolbar__content">
15179
14717
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
15180
14718
  <div
@@ -15182,142 +14720,73 @@ wrapperTag: div
15182
14720
  >
15183
14721
  <div class="pf-v5-c-toolbar__toggle">
15184
14722
  <button
15185
- class="pf-v5-c-button pf-m-plain"
14723
+ class="pf-v5-c-menu-toggle pf-m-plain"
15186
14724
  type="button"
15187
- aria-label="Show filters"
15188
14725
  aria-expanded="false"
15189
- aria-controls="-expandable-content"
14726
+ aria-label="Show filters"
14727
+ aria-controls="sticky-header-demo-toolbar-expandable-content"
15190
14728
  >
15191
14729
  <i class="fas fa-filter" aria-hidden="true"></i>
15192
14730
  </button>
15193
14731
  </div>
15194
14732
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
15195
- <div class="pf-v5-c-dropdown">
15196
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
15197
- <label
15198
- class="pf-v5-c-dropdown__toggle-check"
15199
- for="-bulk-select-toggle-check"
15200
- >
15201
- <div class="pf-v5-c-check pf-m-standalone">
15202
- <input
15203
- class="pf-v5-c-check__input"
15204
- type="checkbox"
15205
- id="-bulk-select-toggle-check"
15206
- aria-label="Select all"
15207
- />
15208
- </div>
15209
- </label>
14733
+ <div
14734
+ class="pf-v5-c-menu-toggle pf-m-split-button"
14735
+ id="sticky-header-demo-toolbar-check"
14736
+ >
14737
+ <label
14738
+ class="pf-v5-c-check pf-m-standalone"
14739
+ id="sticky-header-demo-toolbar-check-check"
14740
+ for="sticky-header-demo-toolbar-check-check-input"
14741
+ >
14742
+ <input
14743
+ class="pf-v5-c-check__input"
14744
+ type="checkbox"
14745
+ id="sticky-header-demo-toolbar-check-check-input"
14746
+ name="sticky-header-demo-toolbar-check-check-input"
14747
+ aria-label="Standalone check"
14748
+ />
14749
+ </label>
14750
+ <button
14751
+ class="pf-v5-c-menu-toggle__button"
14752
+ type="button"
14753
+ aria-expanded="false"
14754
+ id="sticky-header-demo-toolbar-menu-toggle-toggle-button"
14755
+ aria-label="Menu toggle"
14756
+ >
14757
+ <span class="pf-v5-c-menu-toggle__controls">
14758
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
14759
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
14760
+ </span>
14761
+ </span>
14762
+ </button>
14763
+ </div>
14764
+ </div>
15210
14765
 
14766
+ <div class="pf-v5-c-toolbar__item pf-m-search-filter">
14767
+ <div
14768
+ class="pf-v5-c-input-group"
14769
+ aria-label="search filter"
14770
+ role="group"
14771
+ >
14772
+ <div class="pf-v5-c-input-group__item">
15211
14773
  <button
15212
- class="pf-v5-c-dropdown__toggle-button"
14774
+ class="pf-v5-c-menu-toggle"
15213
14775
  type="button"
15214
14776
  aria-expanded="false"
15215
- id="-bulk-select-toggle-button"
15216
- aria-label="Dropdown toggle"
14777
+ id="sticky-header-demo-toolbar-search-filter-menu"
15217
14778
  >
15218
- <i class="fas fa-caret-down" aria-hidden="true"></i>
14779
+ <span class="pf-v5-c-menu-toggle__icon">
14780
+ <i class="fas fa-filter" aria-hidden="true"></i>
14781
+ </span>
14782
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
14783
+ <span class="pf-v5-c-menu-toggle__controls">
14784
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
14785
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
14786
+ </span>
14787
+ </span>
15219
14788
  </button>
15220
14789
  </div>
15221
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
15222
- <li role="none">
15223
- <button
15224
- class="pf-v5-c-dropdown__menu-item"
15225
- role="menuitem"
15226
- type="button"
15227
- >Select all</button>
15228
- </li>
15229
- <li role="none">
15230
- <button
15231
- class="pf-v5-c-dropdown__menu-item"
15232
- role="menuitem"
15233
- type="button"
15234
- >Select none</button>
15235
- </li>
15236
- <li role="none">
15237
- <button
15238
- class="pf-v5-c-dropdown__menu-item"
15239
- role="menuitem"
15240
- type="button"
15241
- >Other action</button>
15242
- </li>
15243
- </ul>
15244
- </div>
15245
- </div>
15246
-
15247
- <div class="pf-v5-c-toolbar__item pf-m-search-filter">
15248
- <div
15249
- class="pf-v5-c-input-group"
15250
- aria-label="search filter"
15251
- role="group"
15252
- >
15253
- <div class="pf-v5-c-input-group__item">
15254
- <div class="pf-v5-c-select" style="width: 124px">
15255
- <span id="-select-name-label" hidden>Choose one</span>
15256
-
15257
- <button
15258
- class="pf-v5-c-select__toggle"
15259
- type="button"
15260
- id="-select-name-toggle"
15261
- aria-haspopup="true"
15262
- aria-expanded="false"
15263
- aria-labelledby="-select-name-label -select-name-toggle"
15264
- >
15265
- <div class="pf-v5-c-select__toggle-wrapper">
15266
- <span class="pf-v5-c-select__toggle-icon">
15267
- <i class="fas fa-filter" aria-hidden="true"></i>
15268
- </span>
15269
- <span class="pf-v5-c-select__toggle-text">Name</span>
15270
- </div>
15271
- <span class="pf-v5-c-select__toggle-arrow">
15272
- <i class="fas fa-caret-down" aria-hidden="true"></i>
15273
- </span>
15274
- </button>
15275
-
15276
- <ul
15277
- class="pf-v5-c-select__menu"
15278
- role="listbox"
15279
- aria-labelledby="-select-name-label"
15280
- hidden
15281
- >
15282
- <li role="presentation">
15283
- <button
15284
- class="pf-v5-c-select__menu-item"
15285
- role="option"
15286
- >Running</button>
15287
- </li>
15288
- <li role="presentation">
15289
- <button
15290
- class="pf-v5-c-select__menu-item pf-m-selected"
15291
- role="option"
15292
- aria-selected="true"
15293
- >
15294
- Stopped
15295
- <span class="pf-v5-c-select__menu-item-icon">
15296
- <i class="fas fa-check" aria-hidden="true"></i>
15297
- </span>
15298
- </button>
15299
- </li>
15300
- <li role="presentation">
15301
- <button
15302
- class="pf-v5-c-select__menu-item"
15303
- role="option"
15304
- >Down</button>
15305
- </li>
15306
- <li role="presentation">
15307
- <button
15308
- class="pf-v5-c-select__menu-item"
15309
- role="option"
15310
- >Degraded</button>
15311
- </li>
15312
- <li role="presentation">
15313
- <button
15314
- class="pf-v5-c-select__menu-item"
15315
- role="option"
15316
- >Needs maintenance</button>
15317
- </li>
15318
- </ul>
15319
- </div>
15320
- </div>
15321
14790
  <div class="pf-v5-c-input-group__item pf-m-fill">
15322
14791
  <div class="pf-v5-c-text-input-group">
15323
14792
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
@@ -15343,17 +14812,17 @@ wrapperTag: div
15343
14812
  <div class="pf-v5-c-toolbar__item">
15344
14813
  <div class="pf-v5-c-select">
15345
14814
  <span
15346
- id="-select-checkbox-status-label"
14815
+ id="sticky-header-demo-toolbar-select-checkbox-status-label"
15347
14816
  hidden
15348
14817
  >Choose many</span>
15349
14818
 
15350
14819
  <button
15351
14820
  class="pf-v5-c-select__toggle"
15352
14821
  type="button"
15353
- id="-select-checkbox-status-toggle"
14822
+ id="sticky-header-demo-toolbar-select-checkbox-status-toggle"
15354
14823
  aria-haspopup="true"
15355
14824
  aria-expanded="false"
15356
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
14825
+ aria-labelledby="sticky-header-demo-toolbar-select-checkbox-status-label sticky-header-demo-toolbar-select-checkbox-status-toggle"
15357
14826
  >
15358
14827
  <div class="pf-v5-c-select__toggle-wrapper">
15359
14828
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -15370,76 +14839,76 @@ wrapperTag: div
15370
14839
  >
15371
14840
  <label
15372
14841
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
15373
- id="-select-checkbox-status-active"
15374
- for="-select-checkbox-status-active-input"
14842
+ id="sticky-header-demo-toolbar-select-checkbox-status-active"
14843
+ for="sticky-header-demo-toolbar-select-checkbox-status-active-input"
15375
14844
  >
15376
14845
  <input
15377
14846
  class="pf-v5-c-check__input"
15378
14847
  type="checkbox"
15379
- aria-describedby="-select-checkbox-status-active-description"
15380
- id="-select-checkbox-status-active-input"
15381
- name="-select-checkbox-status-active-input"
14848
+ aria-describedby="sticky-header-demo-toolbar-select-checkbox-status-active-description"
14849
+ id="sticky-header-demo-toolbar-select-checkbox-status-active-input"
14850
+ name="sticky-header-demo-toolbar-select-checkbox-status-active-input"
15382
14851
  />
15383
14852
  <span class="pf-v5-c-check__label">Active</span>
15384
14853
  <span
15385
14854
  class="pf-v5-c-check__description"
15386
- id="-select-checkbox-status-active-description"
14855
+ id="sticky-header-demo-toolbar-select-checkbox-status-active-description"
15387
14856
  >This is a description</span>
15388
14857
  </label>
15389
14858
  <label
15390
14859
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
15391
- id="-select-checkbox-status-canceled"
15392
- for="-select-checkbox-status-canceled-input"
14860
+ id="sticky-header-demo-toolbar-select-checkbox-status-canceled"
14861
+ for="sticky-header-demo-toolbar-select-checkbox-status-canceled-input"
15393
14862
  >
15394
14863
  <input
15395
14864
  class="pf-v5-c-check__input"
15396
14865
  type="checkbox"
15397
- aria-describedby="-select-checkbox-status-canceled-description"
15398
- id="-select-checkbox-status-canceled-input"
15399
- name="-select-checkbox-status-canceled-input"
14866
+ aria-describedby="sticky-header-demo-toolbar-select-checkbox-status-canceled-description"
14867
+ id="sticky-header-demo-toolbar-select-checkbox-status-canceled-input"
14868
+ name="sticky-header-demo-toolbar-select-checkbox-status-canceled-input"
15400
14869
  />
15401
14870
  <span class="pf-v5-c-check__label">Canceled</span>
15402
14871
  <span
15403
14872
  class="pf-v5-c-check__description"
15404
- id="-select-checkbox-status-canceled-description"
14873
+ id="sticky-header-demo-toolbar-select-checkbox-status-canceled-description"
15405
14874
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
15406
14875
  </label>
15407
14876
  <label
15408
14877
  class="pf-v5-c-check pf-v5-c-select__menu-item"
15409
- id="-select-checkbox-status-paused"
15410
- for="-select-checkbox-status-paused-input"
14878
+ id="sticky-header-demo-toolbar-select-checkbox-status-paused"
14879
+ for="sticky-header-demo-toolbar-select-checkbox-status-paused-input"
15411
14880
  >
15412
14881
  <input
15413
14882
  class="pf-v5-c-check__input"
15414
14883
  type="checkbox"
15415
- id="-select-checkbox-status-paused-input"
15416
- name="-select-checkbox-status-paused-input"
14884
+ id="sticky-header-demo-toolbar-select-checkbox-status-paused-input"
14885
+ name="sticky-header-demo-toolbar-select-checkbox-status-paused-input"
15417
14886
  />
15418
14887
  <span class="pf-v5-c-check__label">Paused</span>
15419
14888
  </label>
15420
14889
  <label
15421
14890
  class="pf-v5-c-check pf-v5-c-select__menu-item"
15422
- id="-select-checkbox-status-warning"
15423
- for="-select-checkbox-status-warning-input"
14891
+ id="sticky-header-demo-toolbar-select-checkbox-status-warning"
14892
+ for="sticky-header-demo-toolbar-select-checkbox-status-warning-input"
15424
14893
  >
15425
14894
  <input
15426
14895
  class="pf-v5-c-check__input"
15427
14896
  type="checkbox"
15428
- id="-select-checkbox-status-warning-input"
15429
- name="-select-checkbox-status-warning-input"
14897
+ id="sticky-header-demo-toolbar-select-checkbox-status-warning-input"
14898
+ name="sticky-header-demo-toolbar-select-checkbox-status-warning-input"
15430
14899
  />
15431
14900
  <span class="pf-v5-c-check__label">Warning</span>
15432
14901
  </label>
15433
14902
  <label
15434
14903
  class="pf-v5-c-check pf-v5-c-select__menu-item"
15435
- id="-select-checkbox-status-restarted"
15436
- for="-select-checkbox-status-restarted-input"
14904
+ id="sticky-header-demo-toolbar-select-checkbox-status-restarted"
14905
+ for="sticky-header-demo-toolbar-select-checkbox-status-restarted-input"
15437
14906
  >
15438
14907
  <input
15439
14908
  class="pf-v5-c-check__input"
15440
14909
  type="checkbox"
15441
- id="-select-checkbox-status-restarted-input"
15442
- name="-select-checkbox-status-restarted-input"
14910
+ id="sticky-header-demo-toolbar-select-checkbox-status-restarted-input"
14911
+ name="sticky-header-demo-toolbar-select-checkbox-status-restarted-input"
15443
14912
  />
15444
14913
  <span class="pf-v5-c-check__label">Restarted</span>
15445
14914
  </label>
@@ -15449,15 +14918,18 @@ wrapperTag: div
15449
14918
  </div>
15450
14919
  <div class="pf-v5-c-toolbar__item">
15451
14920
  <div class="pf-v5-c-select">
15452
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
14921
+ <span
14922
+ id="sticky-header-demo-toolbar-select-checkbox-risk-label"
14923
+ hidden
14924
+ >Choose many</span>
15453
14925
 
15454
14926
  <button
15455
14927
  class="pf-v5-c-select__toggle"
15456
14928
  type="button"
15457
- id="-select-checkbox-risk-toggle"
14929
+ id="sticky-header-demo-toolbar-select-checkbox-risk-toggle"
15458
14930
  aria-haspopup="true"
15459
14931
  aria-expanded="false"
15460
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
14932
+ aria-labelledby="sticky-header-demo-toolbar-select-checkbox-risk-label sticky-header-demo-toolbar-select-checkbox-risk-toggle"
15461
14933
  >
15462
14934
  <div class="pf-v5-c-select__toggle-wrapper">
15463
14935
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -15474,76 +14946,76 @@ wrapperTag: div
15474
14946
  >
15475
14947
  <label
15476
14948
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
15477
- id="-select-checkbox-risk-active"
15478
- for="-select-checkbox-risk-active-input"
14949
+ id="sticky-header-demo-toolbar-select-checkbox-risk-active"
14950
+ for="sticky-header-demo-toolbar-select-checkbox-risk-active-input"
15479
14951
  >
15480
14952
  <input
15481
14953
  class="pf-v5-c-check__input"
15482
14954
  type="checkbox"
15483
- aria-describedby="-select-checkbox-risk-active-description"
15484
- id="-select-checkbox-risk-active-input"
15485
- name="-select-checkbox-risk-active-input"
14955
+ aria-describedby="sticky-header-demo-toolbar-select-checkbox-risk-active-description"
14956
+ id="sticky-header-demo-toolbar-select-checkbox-risk-active-input"
14957
+ name="sticky-header-demo-toolbar-select-checkbox-risk-active-input"
15486
14958
  />
15487
14959
  <span class="pf-v5-c-check__label">Active</span>
15488
14960
  <span
15489
14961
  class="pf-v5-c-check__description"
15490
- id="-select-checkbox-risk-active-description"
14962
+ id="sticky-header-demo-toolbar-select-checkbox-risk-active-description"
15491
14963
  >This is a description</span>
15492
14964
  </label>
15493
14965
  <label
15494
14966
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
15495
- id="-select-checkbox-risk-canceled"
15496
- for="-select-checkbox-risk-canceled-input"
14967
+ id="sticky-header-demo-toolbar-select-checkbox-risk-canceled"
14968
+ for="sticky-header-demo-toolbar-select-checkbox-risk-canceled-input"
15497
14969
  >
15498
14970
  <input
15499
14971
  class="pf-v5-c-check__input"
15500
14972
  type="checkbox"
15501
- aria-describedby="-select-checkbox-risk-canceled-description"
15502
- id="-select-checkbox-risk-canceled-input"
15503
- name="-select-checkbox-risk-canceled-input"
14973
+ aria-describedby="sticky-header-demo-toolbar-select-checkbox-risk-canceled-description"
14974
+ id="sticky-header-demo-toolbar-select-checkbox-risk-canceled-input"
14975
+ name="sticky-header-demo-toolbar-select-checkbox-risk-canceled-input"
15504
14976
  />
15505
14977
  <span class="pf-v5-c-check__label">Canceled</span>
15506
14978
  <span
15507
14979
  class="pf-v5-c-check__description"
15508
- id="-select-checkbox-risk-canceled-description"
14980
+ id="sticky-header-demo-toolbar-select-checkbox-risk-canceled-description"
15509
14981
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
15510
14982
  </label>
15511
14983
  <label
15512
14984
  class="pf-v5-c-check pf-v5-c-select__menu-item"
15513
- id="-select-checkbox-risk-paused"
15514
- for="-select-checkbox-risk-paused-input"
14985
+ id="sticky-header-demo-toolbar-select-checkbox-risk-paused"
14986
+ for="sticky-header-demo-toolbar-select-checkbox-risk-paused-input"
15515
14987
  >
15516
14988
  <input
15517
14989
  class="pf-v5-c-check__input"
15518
14990
  type="checkbox"
15519
- id="-select-checkbox-risk-paused-input"
15520
- name="-select-checkbox-risk-paused-input"
14991
+ id="sticky-header-demo-toolbar-select-checkbox-risk-paused-input"
14992
+ name="sticky-header-demo-toolbar-select-checkbox-risk-paused-input"
15521
14993
  />
15522
14994
  <span class="pf-v5-c-check__label">Paused</span>
15523
14995
  </label>
15524
14996
  <label
15525
14997
  class="pf-v5-c-check pf-v5-c-select__menu-item"
15526
- id="-select-checkbox-risk-warning"
15527
- for="-select-checkbox-risk-warning-input"
14998
+ id="sticky-header-demo-toolbar-select-checkbox-risk-warning"
14999
+ for="sticky-header-demo-toolbar-select-checkbox-risk-warning-input"
15528
15000
  >
15529
15001
  <input
15530
15002
  class="pf-v5-c-check__input"
15531
15003
  type="checkbox"
15532
- id="-select-checkbox-risk-warning-input"
15533
- name="-select-checkbox-risk-warning-input"
15004
+ id="sticky-header-demo-toolbar-select-checkbox-risk-warning-input"
15005
+ name="sticky-header-demo-toolbar-select-checkbox-risk-warning-input"
15534
15006
  />
15535
15007
  <span class="pf-v5-c-check__label">Warning</span>
15536
15008
  </label>
15537
15009
  <label
15538
15010
  class="pf-v5-c-check pf-v5-c-select__menu-item"
15539
- id="-select-checkbox-risk-restarted"
15540
- for="-select-checkbox-risk-restarted-input"
15011
+ id="sticky-header-demo-toolbar-select-checkbox-risk-restarted"
15012
+ for="sticky-header-demo-toolbar-select-checkbox-risk-restarted-input"
15541
15013
  >
15542
15014
  <input
15543
15015
  class="pf-v5-c-check__input"
15544
15016
  type="checkbox"
15545
- id="-select-checkbox-risk-restarted-input"
15546
- name="-select-checkbox-risk-restarted-input"
15017
+ id="sticky-header-demo-toolbar-select-checkbox-risk-restarted-input"
15018
+ name="sticky-header-demo-toolbar-select-checkbox-risk-restarted-input"
15547
15019
  />
15548
15020
  <span class="pf-v5-c-check__label">Restarted</span>
15549
15021
  </label>
@@ -15573,7 +15045,7 @@ wrapperTag: div
15573
15045
  <button
15574
15046
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
15575
15047
  type="button"
15576
- id="-top-pagination-toggle"
15048
+ id="sticky-header-demo-toolbar-top-pagination-toggle"
15577
15049
  aria-haspopup="listbox"
15578
15050
  aria-expanded="false"
15579
15051
  >
@@ -15588,7 +15060,7 @@ wrapperTag: div
15588
15060
  <ul
15589
15061
  class="pf-v5-c-options-menu__menu"
15590
15062
  role="menu"
15591
- aria-labelledby="-top-pagination-toggle"
15063
+ aria-labelledby="sticky-header-demo-toolbar-top-pagination-toggle"
15592
15064
  hidden
15593
15065
  >
15594
15066
  <li role="none">
@@ -15649,7 +15121,7 @@ wrapperTag: div
15649
15121
 
15650
15122
  <div
15651
15123
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
15652
- id="-expandable-content"
15124
+ id="sticky-header-demo-toolbar-expandable-content"
15653
15125
  hidden
15654
15126
  ></div>
15655
15127
  </div>
@@ -16622,7 +16094,7 @@ wrapperTag: div
16622
16094
  >
16623
16095
  <div class="pf-v5-c-page__main-body">
16624
16096
  <div class="pf-v5-c-scroll-outer-wrapper">
16625
- <div class="pf-v5-c-toolbar">
16097
+ <div class="pf-v5-c-toolbar" id="sticky-first-column-demo-toolbar">
16626
16098
  <div class="pf-v5-c-toolbar__content">
16627
16099
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
16628
16100
  <div
@@ -16630,65 +16102,46 @@ wrapperTag: div
16630
16102
  >
16631
16103
  <div class="pf-v5-c-toolbar__toggle">
16632
16104
  <button
16633
- class="pf-v5-c-button pf-m-plain"
16105
+ class="pf-v5-c-menu-toggle pf-m-plain"
16634
16106
  type="button"
16635
- aria-label="Show filters"
16636
16107
  aria-expanded="false"
16637
- aria-controls="-expandable-content"
16108
+ aria-label="Show filters"
16109
+ aria-controls="sticky-first-column-demo-toolbar-expandable-content"
16638
16110
  >
16639
16111
  <i class="fas fa-filter" aria-hidden="true"></i>
16640
16112
  </button>
16641
16113
  </div>
16642
16114
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
16643
- <div class="pf-v5-c-dropdown">
16644
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
16645
- <label
16646
- class="pf-v5-c-dropdown__toggle-check"
16647
- for="-bulk-select-toggle-check"
16648
- >
16649
- <div class="pf-v5-c-check pf-m-standalone">
16650
- <input
16651
- class="pf-v5-c-check__input"
16652
- type="checkbox"
16653
- id="-bulk-select-toggle-check"
16654
- aria-label="Select all"
16655
- />
16656
- </div>
16657
- </label>
16658
-
16659
- <button
16660
- class="pf-v5-c-dropdown__toggle-button"
16661
- type="button"
16662
- aria-expanded="false"
16663
- id="-bulk-select-toggle-button"
16664
- aria-label="Dropdown toggle"
16665
- >
16666
- <i class="fas fa-caret-down" aria-hidden="true"></i>
16667
- </button>
16668
- </div>
16669
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
16670
- <li role="none">
16671
- <button
16672
- class="pf-v5-c-dropdown__menu-item"
16673
- role="menuitem"
16674
- type="button"
16675
- >Select all</button>
16676
- </li>
16677
- <li role="none">
16678
- <button
16679
- class="pf-v5-c-dropdown__menu-item"
16680
- role="menuitem"
16681
- type="button"
16682
- >Select none</button>
16683
- </li>
16684
- <li role="none">
16685
- <button
16686
- class="pf-v5-c-dropdown__menu-item"
16687
- role="menuitem"
16688
- type="button"
16689
- >Other action</button>
16690
- </li>
16691
- </ul>
16115
+ <div
16116
+ class="pf-v5-c-menu-toggle pf-m-split-button"
16117
+ id="sticky-first-column-demo-toolbar-check"
16118
+ >
16119
+ <label
16120
+ class="pf-v5-c-check pf-m-standalone"
16121
+ id="sticky-first-column-demo-toolbar-check-check"
16122
+ for="sticky-first-column-demo-toolbar-check-check-input"
16123
+ >
16124
+ <input
16125
+ class="pf-v5-c-check__input"
16126
+ type="checkbox"
16127
+ id="sticky-first-column-demo-toolbar-check-check-input"
16128
+ name="sticky-first-column-demo-toolbar-check-check-input"
16129
+ aria-label="Standalone check"
16130
+ />
16131
+ </label>
16132
+ <button
16133
+ class="pf-v5-c-menu-toggle__button"
16134
+ type="button"
16135
+ aria-expanded="false"
16136
+ id="sticky-first-column-demo-toolbar-menu-toggle-toggle-button"
16137
+ aria-label="Menu toggle"
16138
+ >
16139
+ <span class="pf-v5-c-menu-toggle__controls">
16140
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
16141
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
16142
+ </span>
16143
+ </span>
16144
+ </button>
16692
16145
  </div>
16693
16146
  </div>
16694
16147
 
@@ -16699,72 +16152,22 @@ wrapperTag: div
16699
16152
  role="group"
16700
16153
  >
16701
16154
  <div class="pf-v5-c-input-group__item">
16702
- <div class="pf-v5-c-select" style="width: 124px">
16703
- <span id="-select-name-label" hidden>Choose one</span>
16704
-
16705
- <button
16706
- class="pf-v5-c-select__toggle"
16707
- type="button"
16708
- id="-select-name-toggle"
16709
- aria-haspopup="true"
16710
- aria-expanded="false"
16711
- aria-labelledby="-select-name-label -select-name-toggle"
16712
- >
16713
- <div class="pf-v5-c-select__toggle-wrapper">
16714
- <span class="pf-v5-c-select__toggle-icon">
16715
- <i class="fas fa-filter" aria-hidden="true"></i>
16716
- </span>
16717
- <span class="pf-v5-c-select__toggle-text">Name</span>
16718
- </div>
16719
- <span class="pf-v5-c-select__toggle-arrow">
16720
- <i class="fas fa-caret-down" aria-hidden="true"></i>
16155
+ <button
16156
+ class="pf-v5-c-menu-toggle"
16157
+ type="button"
16158
+ aria-expanded="false"
16159
+ id="sticky-first-column-demo-toolbar-search-filter-menu"
16160
+ >
16161
+ <span class="pf-v5-c-menu-toggle__icon">
16162
+ <i class="fas fa-filter" aria-hidden="true"></i>
16163
+ </span>
16164
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
16165
+ <span class="pf-v5-c-menu-toggle__controls">
16166
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
16167
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
16721
16168
  </span>
16722
- </button>
16723
-
16724
- <ul
16725
- class="pf-v5-c-select__menu"
16726
- role="listbox"
16727
- aria-labelledby="-select-name-label"
16728
- hidden
16729
- >
16730
- <li role="presentation">
16731
- <button
16732
- class="pf-v5-c-select__menu-item"
16733
- role="option"
16734
- >Running</button>
16735
- </li>
16736
- <li role="presentation">
16737
- <button
16738
- class="pf-v5-c-select__menu-item pf-m-selected"
16739
- role="option"
16740
- aria-selected="true"
16741
- >
16742
- Stopped
16743
- <span class="pf-v5-c-select__menu-item-icon">
16744
- <i class="fas fa-check" aria-hidden="true"></i>
16745
- </span>
16746
- </button>
16747
- </li>
16748
- <li role="presentation">
16749
- <button
16750
- class="pf-v5-c-select__menu-item"
16751
- role="option"
16752
- >Down</button>
16753
- </li>
16754
- <li role="presentation">
16755
- <button
16756
- class="pf-v5-c-select__menu-item"
16757
- role="option"
16758
- >Degraded</button>
16759
- </li>
16760
- <li role="presentation">
16761
- <button
16762
- class="pf-v5-c-select__menu-item"
16763
- role="option"
16764
- >Needs maintenance</button>
16765
- </li>
16766
- </ul>
16767
- </div>
16169
+ </span>
16170
+ </button>
16768
16171
  </div>
16769
16172
  <div class="pf-v5-c-input-group__item pf-m-fill">
16770
16173
  <div class="pf-v5-c-text-input-group">
@@ -16801,7 +16204,10 @@ wrapperTag: div
16801
16204
  </button>
16802
16205
  </div>
16803
16206
 
16804
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
16207
+ <div
16208
+ class="pf-v5-c-overflow-menu"
16209
+ id="sticky-first-column-demo-toolbar-overflow-menu"
16210
+ >
16805
16211
  <div
16806
16212
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
16807
16213
  >
@@ -16819,7 +16225,7 @@ wrapperTag: div
16819
16225
  <button
16820
16226
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
16821
16227
  type="button"
16822
- id="-overflow-menu-dropdown-toggle"
16228
+ id="sticky-first-column-demo-toolbar-overflow-menu-dropdown-toggle"
16823
16229
  aria-label="Dropdown with additional options"
16824
16230
  aria-expanded="false"
16825
16231
  >
@@ -16828,7 +16234,7 @@ wrapperTag: div
16828
16234
  <ul
16829
16235
  class="pf-v5-c-dropdown__menu"
16830
16236
  role="menu"
16831
- aria-labelledby="-overflow-menu-dropdown-toggle"
16237
+ aria-labelledby="sticky-first-column-demo-toolbar-overflow-menu-dropdown-toggle"
16832
16238
  hidden
16833
16239
  >
16834
16240
  <li role="none">
@@ -16848,7 +16254,7 @@ wrapperTag: div
16848
16254
  <button
16849
16255
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
16850
16256
  type="button"
16851
- id="-top-pagination-toggle"
16257
+ id="sticky-first-column-demo-toolbar-top-pagination-toggle"
16852
16258
  aria-haspopup="listbox"
16853
16259
  aria-expanded="false"
16854
16260
  >
@@ -16863,7 +16269,7 @@ wrapperTag: div
16863
16269
  <ul
16864
16270
  class="pf-v5-c-options-menu__menu"
16865
16271
  role="menu"
16866
- aria-labelledby="-top-pagination-toggle"
16272
+ aria-labelledby="sticky-first-column-demo-toolbar-top-pagination-toggle"
16867
16273
  hidden
16868
16274
  >
16869
16275
  <li role="none">
@@ -16924,7 +16330,7 @@ wrapperTag: div
16924
16330
 
16925
16331
  <div
16926
16332
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
16927
- id="-expandable-content"
16333
+ id="sticky-first-column-demo-toolbar-expandable-content"
16928
16334
  hidden
16929
16335
  ></div>
16930
16336
  </div>
@@ -17854,7 +17260,10 @@ wrapperTag: div
17854
17260
  >
17855
17261
  <div class="pf-v5-c-page__main-body">
17856
17262
  <div class="pf-v5-c-scroll-outer-wrapper">
17857
- <div class="pf-v5-c-toolbar">
17263
+ <div
17264
+ class="pf-v5-c-toolbar"
17265
+ id="sticky-multiple-columns-demo-toolbar"
17266
+ >
17858
17267
  <div class="pf-v5-c-toolbar__content">
17859
17268
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
17860
17269
  <div
@@ -17862,65 +17271,46 @@ wrapperTag: div
17862
17271
  >
17863
17272
  <div class="pf-v5-c-toolbar__toggle">
17864
17273
  <button
17865
- class="pf-v5-c-button pf-m-plain"
17274
+ class="pf-v5-c-menu-toggle pf-m-plain"
17866
17275
  type="button"
17867
- aria-label="Show filters"
17868
17276
  aria-expanded="false"
17869
- aria-controls="-expandable-content"
17277
+ aria-label="Show filters"
17278
+ aria-controls="sticky-multiple-columns-demo-toolbar-expandable-content"
17870
17279
  >
17871
17280
  <i class="fas fa-filter" aria-hidden="true"></i>
17872
17281
  </button>
17873
17282
  </div>
17874
17283
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
17875
- <div class="pf-v5-c-dropdown">
17876
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
17877
- <label
17878
- class="pf-v5-c-dropdown__toggle-check"
17879
- for="-bulk-select-toggle-check"
17880
- >
17881
- <div class="pf-v5-c-check pf-m-standalone">
17882
- <input
17883
- class="pf-v5-c-check__input"
17884
- type="checkbox"
17885
- id="-bulk-select-toggle-check"
17886
- aria-label="Select all"
17887
- />
17888
- </div>
17889
- </label>
17890
-
17891
- <button
17892
- class="pf-v5-c-dropdown__toggle-button"
17893
- type="button"
17894
- aria-expanded="false"
17895
- id="-bulk-select-toggle-button"
17896
- aria-label="Dropdown toggle"
17897
- >
17898
- <i class="fas fa-caret-down" aria-hidden="true"></i>
17899
- </button>
17900
- </div>
17901
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
17902
- <li role="none">
17903
- <button
17904
- class="pf-v5-c-dropdown__menu-item"
17905
- role="menuitem"
17906
- type="button"
17907
- >Select all</button>
17908
- </li>
17909
- <li role="none">
17910
- <button
17911
- class="pf-v5-c-dropdown__menu-item"
17912
- role="menuitem"
17913
- type="button"
17914
- >Select none</button>
17915
- </li>
17916
- <li role="none">
17917
- <button
17918
- class="pf-v5-c-dropdown__menu-item"
17919
- role="menuitem"
17920
- type="button"
17921
- >Other action</button>
17922
- </li>
17923
- </ul>
17284
+ <div
17285
+ class="pf-v5-c-menu-toggle pf-m-split-button"
17286
+ id="sticky-multiple-columns-demo-toolbar-check"
17287
+ >
17288
+ <label
17289
+ class="pf-v5-c-check pf-m-standalone"
17290
+ id="sticky-multiple-columns-demo-toolbar-check-check"
17291
+ for="sticky-multiple-columns-demo-toolbar-check-check-input"
17292
+ >
17293
+ <input
17294
+ class="pf-v5-c-check__input"
17295
+ type="checkbox"
17296
+ id="sticky-multiple-columns-demo-toolbar-check-check-input"
17297
+ name="sticky-multiple-columns-demo-toolbar-check-check-input"
17298
+ aria-label="Standalone check"
17299
+ />
17300
+ </label>
17301
+ <button
17302
+ class="pf-v5-c-menu-toggle__button"
17303
+ type="button"
17304
+ aria-expanded="false"
17305
+ id="sticky-multiple-columns-demo-toolbar-menu-toggle-toggle-button"
17306
+ aria-label="Menu toggle"
17307
+ >
17308
+ <span class="pf-v5-c-menu-toggle__controls">
17309
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
17310
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
17311
+ </span>
17312
+ </span>
17313
+ </button>
17924
17314
  </div>
17925
17315
  </div>
17926
17316
 
@@ -17931,72 +17321,22 @@ wrapperTag: div
17931
17321
  role="group"
17932
17322
  >
17933
17323
  <div class="pf-v5-c-input-group__item">
17934
- <div class="pf-v5-c-select" style="width: 124px">
17935
- <span id="-select-name-label" hidden>Choose one</span>
17936
-
17937
- <button
17938
- class="pf-v5-c-select__toggle"
17939
- type="button"
17940
- id="-select-name-toggle"
17941
- aria-haspopup="true"
17942
- aria-expanded="false"
17943
- aria-labelledby="-select-name-label -select-name-toggle"
17944
- >
17945
- <div class="pf-v5-c-select__toggle-wrapper">
17946
- <span class="pf-v5-c-select__toggle-icon">
17947
- <i class="fas fa-filter" aria-hidden="true"></i>
17948
- </span>
17949
- <span class="pf-v5-c-select__toggle-text">Name</span>
17950
- </div>
17951
- <span class="pf-v5-c-select__toggle-arrow">
17952
- <i class="fas fa-caret-down" aria-hidden="true"></i>
17324
+ <button
17325
+ class="pf-v5-c-menu-toggle"
17326
+ type="button"
17327
+ aria-expanded="false"
17328
+ id="sticky-multiple-columns-demo-toolbar-search-filter-menu"
17329
+ >
17330
+ <span class="pf-v5-c-menu-toggle__icon">
17331
+ <i class="fas fa-filter" aria-hidden="true"></i>
17332
+ </span>
17333
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
17334
+ <span class="pf-v5-c-menu-toggle__controls">
17335
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
17336
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
17953
17337
  </span>
17954
- </button>
17955
-
17956
- <ul
17957
- class="pf-v5-c-select__menu"
17958
- role="listbox"
17959
- aria-labelledby="-select-name-label"
17960
- hidden
17961
- >
17962
- <li role="presentation">
17963
- <button
17964
- class="pf-v5-c-select__menu-item"
17965
- role="option"
17966
- >Running</button>
17967
- </li>
17968
- <li role="presentation">
17969
- <button
17970
- class="pf-v5-c-select__menu-item pf-m-selected"
17971
- role="option"
17972
- aria-selected="true"
17973
- >
17974
- Stopped
17975
- <span class="pf-v5-c-select__menu-item-icon">
17976
- <i class="fas fa-check" aria-hidden="true"></i>
17977
- </span>
17978
- </button>
17979
- </li>
17980
- <li role="presentation">
17981
- <button
17982
- class="pf-v5-c-select__menu-item"
17983
- role="option"
17984
- >Down</button>
17985
- </li>
17986
- <li role="presentation">
17987
- <button
17988
- class="pf-v5-c-select__menu-item"
17989
- role="option"
17990
- >Degraded</button>
17991
- </li>
17992
- <li role="presentation">
17993
- <button
17994
- class="pf-v5-c-select__menu-item"
17995
- role="option"
17996
- >Needs maintenance</button>
17997
- </li>
17998
- </ul>
17999
- </div>
17338
+ </span>
17339
+ </button>
18000
17340
  </div>
18001
17341
  <div class="pf-v5-c-input-group__item pf-m-fill">
18002
17342
  <div class="pf-v5-c-text-input-group">
@@ -18033,7 +17373,10 @@ wrapperTag: div
18033
17373
  </button>
18034
17374
  </div>
18035
17375
 
18036
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
17376
+ <div
17377
+ class="pf-v5-c-overflow-menu"
17378
+ id="sticky-multiple-columns-demo-toolbar-overflow-menu"
17379
+ >
18037
17380
  <div
18038
17381
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
18039
17382
  >
@@ -18051,7 +17394,7 @@ wrapperTag: div
18051
17394
  <button
18052
17395
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
18053
17396
  type="button"
18054
- id="-overflow-menu-dropdown-toggle"
17397
+ id="sticky-multiple-columns-demo-toolbar-overflow-menu-dropdown-toggle"
18055
17398
  aria-label="Dropdown with additional options"
18056
17399
  aria-expanded="false"
18057
17400
  >
@@ -18060,7 +17403,7 @@ wrapperTag: div
18060
17403
  <ul
18061
17404
  class="pf-v5-c-dropdown__menu"
18062
17405
  role="menu"
18063
- aria-labelledby="-overflow-menu-dropdown-toggle"
17406
+ aria-labelledby="sticky-multiple-columns-demo-toolbar-overflow-menu-dropdown-toggle"
18064
17407
  hidden
18065
17408
  >
18066
17409
  <li role="none">
@@ -18080,7 +17423,7 @@ wrapperTag: div
18080
17423
  <button
18081
17424
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
18082
17425
  type="button"
18083
- id="-top-pagination-toggle"
17426
+ id="sticky-multiple-columns-demo-toolbar-top-pagination-toggle"
18084
17427
  aria-haspopup="listbox"
18085
17428
  aria-expanded="false"
18086
17429
  >
@@ -18095,7 +17438,7 @@ wrapperTag: div
18095
17438
  <ul
18096
17439
  class="pf-v5-c-options-menu__menu"
18097
17440
  role="menu"
18098
- aria-labelledby="-top-pagination-toggle"
17441
+ aria-labelledby="sticky-multiple-columns-demo-toolbar-top-pagination-toggle"
18099
17442
  hidden
18100
17443
  >
18101
17444
  <li role="none">
@@ -18156,7 +17499,7 @@ wrapperTag: div
18156
17499
 
18157
17500
  <div
18158
17501
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
18159
- id="-expandable-content"
17502
+ id="sticky-multiple-columns-demo-toolbar-expandable-content"
18160
17503
  hidden
18161
17504
  ></div>
18162
17505
  </div>
@@ -19107,7 +18450,10 @@ wrapperTag: div
19107
18450
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll"
19108
18451
  >
19109
18452
  <div class="pf-v5-c-scroll-outer-wrapper">
19110
- <div class="pf-v5-c-toolbar">
18453
+ <div
18454
+ class="pf-v5-c-toolbar"
18455
+ id="sticky-header-and-multiple columns-demo-toolbar"
18456
+ >
19111
18457
  <div class="pf-v5-c-toolbar__content">
19112
18458
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
19113
18459
  <div
@@ -19115,65 +18461,46 @@ wrapperTag: div
19115
18461
  >
19116
18462
  <div class="pf-v5-c-toolbar__toggle">
19117
18463
  <button
19118
- class="pf-v5-c-button pf-m-plain"
18464
+ class="pf-v5-c-menu-toggle pf-m-plain"
19119
18465
  type="button"
19120
- aria-label="Show filters"
19121
18466
  aria-expanded="false"
19122
- aria-controls="-expandable-content"
18467
+ aria-label="Show filters"
18468
+ aria-controls="sticky-header-and-multiple columns-demo-toolbar-expandable-content"
19123
18469
  >
19124
18470
  <i class="fas fa-filter" aria-hidden="true"></i>
19125
18471
  </button>
19126
18472
  </div>
19127
18473
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
19128
- <div class="pf-v5-c-dropdown">
19129
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
19130
- <label
19131
- class="pf-v5-c-dropdown__toggle-check"
19132
- for="-bulk-select-toggle-check"
19133
- >
19134
- <div class="pf-v5-c-check pf-m-standalone">
19135
- <input
19136
- class="pf-v5-c-check__input"
19137
- type="checkbox"
19138
- id="-bulk-select-toggle-check"
19139
- aria-label="Select all"
19140
- />
19141
- </div>
19142
- </label>
19143
-
19144
- <button
19145
- class="pf-v5-c-dropdown__toggle-button"
19146
- type="button"
19147
- aria-expanded="false"
19148
- id="-bulk-select-toggle-button"
19149
- aria-label="Dropdown toggle"
19150
- >
19151
- <i class="fas fa-caret-down" aria-hidden="true"></i>
19152
- </button>
19153
- </div>
19154
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
19155
- <li role="none">
19156
- <button
19157
- class="pf-v5-c-dropdown__menu-item"
19158
- role="menuitem"
19159
- type="button"
19160
- >Select all</button>
19161
- </li>
19162
- <li role="none">
19163
- <button
19164
- class="pf-v5-c-dropdown__menu-item"
19165
- role="menuitem"
19166
- type="button"
19167
- >Select none</button>
19168
- </li>
19169
- <li role="none">
19170
- <button
19171
- class="pf-v5-c-dropdown__menu-item"
19172
- role="menuitem"
19173
- type="button"
19174
- >Other action</button>
19175
- </li>
19176
- </ul>
18474
+ <div
18475
+ class="pf-v5-c-menu-toggle pf-m-split-button"
18476
+ id="sticky-header-and-multiple columns-demo-toolbar-check"
18477
+ >
18478
+ <label
18479
+ class="pf-v5-c-check pf-m-standalone"
18480
+ id="sticky-header-and-multiple columns-demo-toolbar-check-check"
18481
+ for="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
18482
+ >
18483
+ <input
18484
+ class="pf-v5-c-check__input"
18485
+ type="checkbox"
18486
+ id="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
18487
+ name="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
18488
+ aria-label="Standalone check"
18489
+ />
18490
+ </label>
18491
+ <button
18492
+ class="pf-v5-c-menu-toggle__button"
18493
+ type="button"
18494
+ aria-expanded="false"
18495
+ id="sticky-header-and-multiple columns-demo-toolbar-menu-toggle-toggle-button"
18496
+ aria-label="Menu toggle"
18497
+ >
18498
+ <span class="pf-v5-c-menu-toggle__controls">
18499
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
18500
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
18501
+ </span>
18502
+ </span>
18503
+ </button>
19177
18504
  </div>
19178
18505
  </div>
19179
18506
 
@@ -19184,72 +18511,22 @@ wrapperTag: div
19184
18511
  role="group"
19185
18512
  >
19186
18513
  <div class="pf-v5-c-input-group__item">
19187
- <div class="pf-v5-c-select" style="width: 124px">
19188
- <span id="-select-name-label" hidden>Choose one</span>
19189
-
19190
- <button
19191
- class="pf-v5-c-select__toggle"
19192
- type="button"
19193
- id="-select-name-toggle"
19194
- aria-haspopup="true"
19195
- aria-expanded="false"
19196
- aria-labelledby="-select-name-label -select-name-toggle"
19197
- >
19198
- <div class="pf-v5-c-select__toggle-wrapper">
19199
- <span class="pf-v5-c-select__toggle-icon">
19200
- <i class="fas fa-filter" aria-hidden="true"></i>
19201
- </span>
19202
- <span class="pf-v5-c-select__toggle-text">Name</span>
19203
- </div>
19204
- <span class="pf-v5-c-select__toggle-arrow">
19205
- <i class="fas fa-caret-down" aria-hidden="true"></i>
18514
+ <button
18515
+ class="pf-v5-c-menu-toggle"
18516
+ type="button"
18517
+ aria-expanded="false"
18518
+ id="sticky-header-and-multiple columns-demo-toolbar-search-filter-menu"
18519
+ >
18520
+ <span class="pf-v5-c-menu-toggle__icon">
18521
+ <i class="fas fa-filter" aria-hidden="true"></i>
18522
+ </span>
18523
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
18524
+ <span class="pf-v5-c-menu-toggle__controls">
18525
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
18526
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
19206
18527
  </span>
19207
- </button>
19208
-
19209
- <ul
19210
- class="pf-v5-c-select__menu"
19211
- role="listbox"
19212
- aria-labelledby="-select-name-label"
19213
- hidden
19214
- >
19215
- <li role="presentation">
19216
- <button
19217
- class="pf-v5-c-select__menu-item"
19218
- role="option"
19219
- >Running</button>
19220
- </li>
19221
- <li role="presentation">
19222
- <button
19223
- class="pf-v5-c-select__menu-item pf-m-selected"
19224
- role="option"
19225
- aria-selected="true"
19226
- >
19227
- Stopped
19228
- <span class="pf-v5-c-select__menu-item-icon">
19229
- <i class="fas fa-check" aria-hidden="true"></i>
19230
- </span>
19231
- </button>
19232
- </li>
19233
- <li role="presentation">
19234
- <button
19235
- class="pf-v5-c-select__menu-item"
19236
- role="option"
19237
- >Down</button>
19238
- </li>
19239
- <li role="presentation">
19240
- <button
19241
- class="pf-v5-c-select__menu-item"
19242
- role="option"
19243
- >Degraded</button>
19244
- </li>
19245
- <li role="presentation">
19246
- <button
19247
- class="pf-v5-c-select__menu-item"
19248
- role="option"
19249
- >Needs maintenance</button>
19250
- </li>
19251
- </ul>
19252
- </div>
18528
+ </span>
18529
+ </button>
19253
18530
  </div>
19254
18531
  <div class="pf-v5-c-input-group__item pf-m-fill">
19255
18532
  <div class="pf-v5-c-text-input-group">
@@ -19286,7 +18563,10 @@ wrapperTag: div
19286
18563
  </button>
19287
18564
  </div>
19288
18565
 
19289
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
18566
+ <div
18567
+ class="pf-v5-c-overflow-menu"
18568
+ id="sticky-header-and-multiple columns-demo-toolbar-overflow-menu"
18569
+ >
19290
18570
  <div
19291
18571
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
19292
18572
  >
@@ -19304,7 +18584,7 @@ wrapperTag: div
19304
18584
  <button
19305
18585
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
19306
18586
  type="button"
19307
- id="-overflow-menu-dropdown-toggle"
18587
+ id="sticky-header-and-multiple columns-demo-toolbar-overflow-menu-dropdown-toggle"
19308
18588
  aria-label="Dropdown with additional options"
19309
18589
  aria-expanded="false"
19310
18590
  >
@@ -19313,7 +18593,7 @@ wrapperTag: div
19313
18593
  <ul
19314
18594
  class="pf-v5-c-dropdown__menu"
19315
18595
  role="menu"
19316
- aria-labelledby="-overflow-menu-dropdown-toggle"
18596
+ aria-labelledby="sticky-header-and-multiple columns-demo-toolbar-overflow-menu-dropdown-toggle"
19317
18597
  hidden
19318
18598
  >
19319
18599
  <li role="none">
@@ -19333,7 +18613,7 @@ wrapperTag: div
19333
18613
  <button
19334
18614
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
19335
18615
  type="button"
19336
- id="-top-pagination-toggle"
18616
+ id="sticky-header-and-multiple columns-demo-toolbar-top-pagination-toggle"
19337
18617
  aria-haspopup="listbox"
19338
18618
  aria-expanded="false"
19339
18619
  >
@@ -19348,7 +18628,7 @@ wrapperTag: div
19348
18628
  <ul
19349
18629
  class="pf-v5-c-options-menu__menu"
19350
18630
  role="menu"
19351
- aria-labelledby="-top-pagination-toggle"
18631
+ aria-labelledby="sticky-header-and-multiple columns-demo-toolbar-top-pagination-toggle"
19352
18632
  hidden
19353
18633
  >
19354
18634
  <li role="none">
@@ -19409,7 +18689,7 @@ wrapperTag: div
19409
18689
 
19410
18690
  <div
19411
18691
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
19412
- id="-expandable-content"
18692
+ id="sticky-header-and-multiple columns-demo-toolbar-expandable-content"
19413
18693
  hidden
19414
18694
  ></div>
19415
18695
  </div>
@@ -20359,7 +19639,10 @@ wrapperTag: div
20359
19639
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll"
20360
19640
  >
20361
19641
  <div class="pf-v5-c-scroll-outer-wrapper">
20362
- <div class="pf-v5-c-toolbar">
19642
+ <div
19643
+ class="pf-v5-c-toolbar"
19644
+ id="sticky-header-and-multiple columns-demo-toolbar"
19645
+ >
20363
19646
  <div class="pf-v5-c-toolbar__content">
20364
19647
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
20365
19648
  <div
@@ -20367,65 +19650,46 @@ wrapperTag: div
20367
19650
  >
20368
19651
  <div class="pf-v5-c-toolbar__toggle">
20369
19652
  <button
20370
- class="pf-v5-c-button pf-m-plain"
19653
+ class="pf-v5-c-menu-toggle pf-m-plain"
20371
19654
  type="button"
20372
- aria-label="Show filters"
20373
19655
  aria-expanded="false"
20374
- aria-controls="-expandable-content"
19656
+ aria-label="Show filters"
19657
+ aria-controls="sticky-header-and-multiple columns-demo-toolbar-expandable-content"
20375
19658
  >
20376
19659
  <i class="fas fa-filter" aria-hidden="true"></i>
20377
19660
  </button>
20378
19661
  </div>
20379
19662
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
20380
- <div class="pf-v5-c-dropdown">
20381
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
20382
- <label
20383
- class="pf-v5-c-dropdown__toggle-check"
20384
- for="-bulk-select-toggle-check"
20385
- >
20386
- <div class="pf-v5-c-check pf-m-standalone">
20387
- <input
20388
- class="pf-v5-c-check__input"
20389
- type="checkbox"
20390
- id="-bulk-select-toggle-check"
20391
- aria-label="Select all"
20392
- />
20393
- </div>
20394
- </label>
20395
-
20396
- <button
20397
- class="pf-v5-c-dropdown__toggle-button"
20398
- type="button"
20399
- aria-expanded="false"
20400
- id="-bulk-select-toggle-button"
20401
- aria-label="Dropdown toggle"
20402
- >
20403
- <i class="fas fa-caret-down" aria-hidden="true"></i>
20404
- </button>
20405
- </div>
20406
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
20407
- <li role="none">
20408
- <button
20409
- class="pf-v5-c-dropdown__menu-item"
20410
- role="menuitem"
20411
- type="button"
20412
- >Select all</button>
20413
- </li>
20414
- <li role="none">
20415
- <button
20416
- class="pf-v5-c-dropdown__menu-item"
20417
- role="menuitem"
20418
- type="button"
20419
- >Select none</button>
20420
- </li>
20421
- <li role="none">
20422
- <button
20423
- class="pf-v5-c-dropdown__menu-item"
20424
- role="menuitem"
20425
- type="button"
20426
- >Other action</button>
20427
- </li>
20428
- </ul>
19663
+ <div
19664
+ class="pf-v5-c-menu-toggle pf-m-split-button"
19665
+ id="sticky-header-and-multiple columns-demo-toolbar-check"
19666
+ >
19667
+ <label
19668
+ class="pf-v5-c-check pf-m-standalone"
19669
+ id="sticky-header-and-multiple columns-demo-toolbar-check-check"
19670
+ for="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
19671
+ >
19672
+ <input
19673
+ class="pf-v5-c-check__input"
19674
+ type="checkbox"
19675
+ id="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
19676
+ name="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
19677
+ aria-label="Standalone check"
19678
+ />
19679
+ </label>
19680
+ <button
19681
+ class="pf-v5-c-menu-toggle__button"
19682
+ type="button"
19683
+ aria-expanded="false"
19684
+ id="sticky-header-and-multiple columns-demo-toolbar-menu-toggle-toggle-button"
19685
+ aria-label="Menu toggle"
19686
+ >
19687
+ <span class="pf-v5-c-menu-toggle__controls">
19688
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
19689
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
19690
+ </span>
19691
+ </span>
19692
+ </button>
20429
19693
  </div>
20430
19694
  </div>
20431
19695
 
@@ -20436,72 +19700,22 @@ wrapperTag: div
20436
19700
  role="group"
20437
19701
  >
20438
19702
  <div class="pf-v5-c-input-group__item">
20439
- <div class="pf-v5-c-select" style="width: 124px">
20440
- <span id="-select-name-label" hidden>Choose one</span>
20441
-
20442
- <button
20443
- class="pf-v5-c-select__toggle"
20444
- type="button"
20445
- id="-select-name-toggle"
20446
- aria-haspopup="true"
20447
- aria-expanded="false"
20448
- aria-labelledby="-select-name-label -select-name-toggle"
20449
- >
20450
- <div class="pf-v5-c-select__toggle-wrapper">
20451
- <span class="pf-v5-c-select__toggle-icon">
20452
- <i class="fas fa-filter" aria-hidden="true"></i>
20453
- </span>
20454
- <span class="pf-v5-c-select__toggle-text">Name</span>
20455
- </div>
20456
- <span class="pf-v5-c-select__toggle-arrow">
20457
- <i class="fas fa-caret-down" aria-hidden="true"></i>
19703
+ <button
19704
+ class="pf-v5-c-menu-toggle"
19705
+ type="button"
19706
+ aria-expanded="false"
19707
+ id="sticky-header-and-multiple columns-demo-toolbar-search-filter-menu"
19708
+ >
19709
+ <span class="pf-v5-c-menu-toggle__icon">
19710
+ <i class="fas fa-filter" aria-hidden="true"></i>
19711
+ </span>
19712
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
19713
+ <span class="pf-v5-c-menu-toggle__controls">
19714
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
19715
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
20458
19716
  </span>
20459
- </button>
20460
-
20461
- <ul
20462
- class="pf-v5-c-select__menu"
20463
- role="listbox"
20464
- aria-labelledby="-select-name-label"
20465
- hidden
20466
- >
20467
- <li role="presentation">
20468
- <button
20469
- class="pf-v5-c-select__menu-item"
20470
- role="option"
20471
- >Running</button>
20472
- </li>
20473
- <li role="presentation">
20474
- <button
20475
- class="pf-v5-c-select__menu-item pf-m-selected"
20476
- role="option"
20477
- aria-selected="true"
20478
- >
20479
- Stopped
20480
- <span class="pf-v5-c-select__menu-item-icon">
20481
- <i class="fas fa-check" aria-hidden="true"></i>
20482
- </span>
20483
- </button>
20484
- </li>
20485
- <li role="presentation">
20486
- <button
20487
- class="pf-v5-c-select__menu-item"
20488
- role="option"
20489
- >Down</button>
20490
- </li>
20491
- <li role="presentation">
20492
- <button
20493
- class="pf-v5-c-select__menu-item"
20494
- role="option"
20495
- >Degraded</button>
20496
- </li>
20497
- <li role="presentation">
20498
- <button
20499
- class="pf-v5-c-select__menu-item"
20500
- role="option"
20501
- >Needs maintenance</button>
20502
- </li>
20503
- </ul>
20504
- </div>
19717
+ </span>
19718
+ </button>
20505
19719
  </div>
20506
19720
  <div class="pf-v5-c-input-group__item pf-m-fill">
20507
19721
  <div class="pf-v5-c-text-input-group">
@@ -20538,7 +19752,10 @@ wrapperTag: div
20538
19752
  </button>
20539
19753
  </div>
20540
19754
 
20541
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
19755
+ <div
19756
+ class="pf-v5-c-overflow-menu"
19757
+ id="sticky-header-and-multiple columns-demo-toolbar-overflow-menu"
19758
+ >
20542
19759
  <div
20543
19760
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
20544
19761
  >
@@ -20556,7 +19773,7 @@ wrapperTag: div
20556
19773
  <button
20557
19774
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
20558
19775
  type="button"
20559
- id="-overflow-menu-dropdown-toggle"
19776
+ id="sticky-header-and-multiple columns-demo-toolbar-overflow-menu-dropdown-toggle"
20560
19777
  aria-label="Dropdown with additional options"
20561
19778
  aria-expanded="false"
20562
19779
  >
@@ -20565,7 +19782,7 @@ wrapperTag: div
20565
19782
  <ul
20566
19783
  class="pf-v5-c-dropdown__menu"
20567
19784
  role="menu"
20568
- aria-labelledby="-overflow-menu-dropdown-toggle"
19785
+ aria-labelledby="sticky-header-and-multiple columns-demo-toolbar-overflow-menu-dropdown-toggle"
20569
19786
  hidden
20570
19787
  >
20571
19788
  <li role="none">
@@ -20585,7 +19802,7 @@ wrapperTag: div
20585
19802
  <button
20586
19803
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
20587
19804
  type="button"
20588
- id="-top-pagination-toggle"
19805
+ id="sticky-header-and-multiple columns-demo-toolbar-top-pagination-toggle"
20589
19806
  aria-haspopup="listbox"
20590
19807
  aria-expanded="false"
20591
19808
  >
@@ -20600,7 +19817,7 @@ wrapperTag: div
20600
19817
  <ul
20601
19818
  class="pf-v5-c-options-menu__menu"
20602
19819
  role="menu"
20603
- aria-labelledby="-top-pagination-toggle"
19820
+ aria-labelledby="sticky-header-and-multiple columns-demo-toolbar-top-pagination-toggle"
20604
19821
  hidden
20605
19822
  >
20606
19823
  <li role="none">
@@ -20661,7 +19878,7 @@ wrapperTag: div
20661
19878
 
20662
19879
  <div
20663
19880
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
20664
- id="-expandable-content"
19881
+ id="sticky-header-and-multiple columns-demo-toolbar-expandable-content"
20665
19882
  hidden
20666
19883
  ></div>
20667
19884
  </div>