@patternfly/patternfly 5.2.0-prerelease.3 → 5.2.0-prerelease.5

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.
@@ -193,7 +193,7 @@ wrapperTag: div
193
193
  class="pf-v5-c-page__main-section pf-m-limit-width pf-m-no-padding pf-m-padding-on-xl"
194
194
  >
195
195
  <div class="pf-v5-c-page__main-body">
196
- <div class="pf-v5-c-toolbar">
196
+ <div class="pf-v5-c-toolbar" id="basic-demo-toolbar">
197
197
  <div class="pf-v5-c-toolbar__content">
198
198
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
199
199
  <div
@@ -201,65 +201,46 @@ wrapperTag: div
201
201
  >
202
202
  <div class="pf-v5-c-toolbar__toggle">
203
203
  <button
204
- class="pf-v5-c-button pf-m-plain"
204
+ class="pf-v5-c-menu-toggle pf-m-plain"
205
205
  type="button"
206
- aria-label="Show filters"
207
206
  aria-expanded="false"
208
- aria-controls="-expandable-content"
207
+ aria-label="Show filters"
208
+ aria-controls="basic-demo-toolbar-expandable-content"
209
209
  >
210
210
  <i class="fas fa-filter" aria-hidden="true"></i>
211
211
  </button>
212
212
  </div>
213
213
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
214
- <div class="pf-v5-c-dropdown">
215
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
216
- <label
217
- class="pf-v5-c-dropdown__toggle-check"
218
- for="-bulk-select-toggle-check"
219
- >
220
- <div class="pf-v5-c-check pf-m-standalone">
221
- <input
222
- class="pf-v5-c-check__input"
223
- type="checkbox"
224
- id="-bulk-select-toggle-check"
225
- aria-label="Select all"
226
- />
227
- </div>
228
- </label>
229
-
230
- <button
231
- class="pf-v5-c-dropdown__toggle-button"
232
- type="button"
233
- aria-expanded="false"
234
- id="-bulk-select-toggle-button"
235
- aria-label="Dropdown toggle"
236
- >
237
- <i class="fas fa-caret-down" aria-hidden="true"></i>
238
- </button>
239
- </div>
240
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
241
- <li role="none">
242
- <button
243
- class="pf-v5-c-dropdown__menu-item"
244
- role="menuitem"
245
- type="button"
246
- >Select all</button>
247
- </li>
248
- <li role="none">
249
- <button
250
- class="pf-v5-c-dropdown__menu-item"
251
- role="menuitem"
252
- type="button"
253
- >Select none</button>
254
- </li>
255
- <li role="none">
256
- <button
257
- class="pf-v5-c-dropdown__menu-item"
258
- role="menuitem"
259
- type="button"
260
- >Other action</button>
261
- </li>
262
- </ul>
214
+ <div
215
+ class="pf-v5-c-menu-toggle pf-m-split-button"
216
+ id="basic-demo-toolbar-check"
217
+ >
218
+ <label
219
+ class="pf-v5-c-check pf-m-standalone"
220
+ id="basic-demo-toolbar-check-check"
221
+ for="basic-demo-toolbar-check-check-input"
222
+ >
223
+ <input
224
+ class="pf-v5-c-check__input"
225
+ type="checkbox"
226
+ id="basic-demo-toolbar-check-check-input"
227
+ name="basic-demo-toolbar-check-check-input"
228
+ aria-label="Standalone check"
229
+ />
230
+ </label>
231
+ <button
232
+ class="pf-v5-c-menu-toggle__button"
233
+ type="button"
234
+ aria-expanded="false"
235
+ id="basic-demo-toolbar-menu-toggle-toggle-button"
236
+ aria-label="Menu toggle"
237
+ >
238
+ <span class="pf-v5-c-menu-toggle__controls">
239
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
240
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
241
+ </span>
242
+ </span>
243
+ </button>
263
244
  </div>
264
245
  </div>
265
246
 
@@ -270,72 +251,22 @@ wrapperTag: div
270
251
  role="group"
271
252
  >
272
253
  <div class="pf-v5-c-input-group__item">
273
- <div class="pf-v5-c-select" style="width: 124px">
274
- <span id="-select-name-label" hidden>Choose one</span>
275
-
276
- <button
277
- class="pf-v5-c-select__toggle"
278
- type="button"
279
- id="-select-name-toggle"
280
- aria-haspopup="true"
281
- aria-expanded="false"
282
- aria-labelledby="-select-name-label -select-name-toggle"
283
- >
284
- <div class="pf-v5-c-select__toggle-wrapper">
285
- <span class="pf-v5-c-select__toggle-icon">
286
- <i class="fas fa-filter" aria-hidden="true"></i>
287
- </span>
288
- <span class="pf-v5-c-select__toggle-text">Name</span>
289
- </div>
290
- <span class="pf-v5-c-select__toggle-arrow">
254
+ <button
255
+ class="pf-v5-c-menu-toggle"
256
+ type="button"
257
+ aria-expanded="false"
258
+ id="basic-demo-toolbar-search-filter-menu"
259
+ >
260
+ <span class="pf-v5-c-menu-toggle__icon">
261
+ <i class="fas fa-filter" aria-hidden="true"></i>
262
+ </span>
263
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
264
+ <span class="pf-v5-c-menu-toggle__controls">
265
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
291
266
  <i class="fas fa-caret-down" aria-hidden="true"></i>
292
267
  </span>
293
- </button>
294
-
295
- <ul
296
- class="pf-v5-c-select__menu"
297
- role="listbox"
298
- aria-labelledby="-select-name-label"
299
- hidden
300
- >
301
- <li role="presentation">
302
- <button
303
- class="pf-v5-c-select__menu-item"
304
- role="option"
305
- >Running</button>
306
- </li>
307
- <li role="presentation">
308
- <button
309
- class="pf-v5-c-select__menu-item pf-m-selected"
310
- role="option"
311
- aria-selected="true"
312
- >
313
- Stopped
314
- <span class="pf-v5-c-select__menu-item-icon">
315
- <i class="fas fa-check" aria-hidden="true"></i>
316
- </span>
317
- </button>
318
- </li>
319
- <li role="presentation">
320
- <button
321
- class="pf-v5-c-select__menu-item"
322
- role="option"
323
- >Down</button>
324
- </li>
325
- <li role="presentation">
326
- <button
327
- class="pf-v5-c-select__menu-item"
328
- role="option"
329
- >Degraded</button>
330
- </li>
331
- <li role="presentation">
332
- <button
333
- class="pf-v5-c-select__menu-item"
334
- role="option"
335
- >Needs maintenance</button>
336
- </li>
337
- </ul>
338
- </div>
268
+ </span>
269
+ </button>
339
270
  </div>
340
271
  <div class="pf-v5-c-input-group__item pf-m-fill">
341
272
  <div class="pf-v5-c-text-input-group">
@@ -372,7 +303,10 @@ wrapperTag: div
372
303
  </button>
373
304
  </div>
374
305
 
375
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
306
+ <div
307
+ class="pf-v5-c-overflow-menu"
308
+ id="basic-demo-toolbar-overflow-menu"
309
+ >
376
310
  <div
377
311
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
378
312
  >
@@ -390,7 +324,7 @@ wrapperTag: div
390
324
  <button
391
325
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
392
326
  type="button"
393
- id="-overflow-menu-dropdown-toggle"
327
+ id="basic-demo-toolbar-overflow-menu-dropdown-toggle"
394
328
  aria-label="Dropdown with additional options"
395
329
  aria-expanded="false"
396
330
  >
@@ -399,7 +333,7 @@ wrapperTag: div
399
333
  <ul
400
334
  class="pf-v5-c-dropdown__menu"
401
335
  role="menu"
402
- aria-labelledby="-overflow-menu-dropdown-toggle"
336
+ aria-labelledby="basic-demo-toolbar-overflow-menu-dropdown-toggle"
403
337
  hidden
404
338
  >
405
339
  <li role="none">
@@ -419,7 +353,7 @@ wrapperTag: div
419
353
  <button
420
354
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
421
355
  type="button"
422
- id="-top-pagination-toggle"
356
+ id="basic-demo-toolbar-top-pagination-toggle"
423
357
  aria-haspopup="listbox"
424
358
  aria-expanded="false"
425
359
  >
@@ -434,7 +368,7 @@ wrapperTag: div
434
368
  <ul
435
369
  class="pf-v5-c-options-menu__menu"
436
370
  role="menu"
437
- aria-labelledby="-top-pagination-toggle"
371
+ aria-labelledby="basic-demo-toolbar-top-pagination-toggle"
438
372
  hidden
439
373
  >
440
374
  <li role="none">
@@ -495,7 +429,7 @@ wrapperTag: div
495
429
 
496
430
  <div
497
431
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
498
- id="-expandable-content"
432
+ id="basic-demo-toolbar-expandable-content"
499
433
  hidden
500
434
  ></div>
501
435
  </div>
@@ -1392,7 +1326,7 @@ wrapperTag: div
1392
1326
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1393
1327
  >
1394
1328
  <div class="pf-v5-c-card">
1395
- <div class="pf-v5-c-toolbar">
1329
+ <div class="pf-v5-c-toolbar" id="sortable-demo-toolbar">
1396
1330
  <div class="pf-v5-c-toolbar__content">
1397
1331
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1398
1332
  <div
@@ -1400,65 +1334,46 @@ wrapperTag: div
1400
1334
  >
1401
1335
  <div class="pf-v5-c-toolbar__toggle">
1402
1336
  <button
1403
- class="pf-v5-c-button pf-m-plain"
1337
+ class="pf-v5-c-menu-toggle pf-m-plain"
1404
1338
  type="button"
1405
- aria-label="Show filters"
1406
1339
  aria-expanded="false"
1407
- aria-controls="-expandable-content"
1340
+ aria-label="Show filters"
1341
+ aria-controls="sortable-demo-toolbar-expandable-content"
1408
1342
  >
1409
1343
  <i class="fas fa-filter" aria-hidden="true"></i>
1410
1344
  </button>
1411
1345
  </div>
1412
1346
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1413
- <div class="pf-v5-c-dropdown">
1414
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1415
- <label
1416
- class="pf-v5-c-dropdown__toggle-check"
1417
- for="-bulk-select-toggle-check"
1418
- >
1419
- <div class="pf-v5-c-check pf-m-standalone">
1420
- <input
1421
- class="pf-v5-c-check__input"
1422
- type="checkbox"
1423
- id="-bulk-select-toggle-check"
1424
- aria-label="Select all"
1425
- />
1426
- </div>
1427
- </label>
1428
-
1429
- <button
1430
- class="pf-v5-c-dropdown__toggle-button"
1431
- type="button"
1432
- aria-expanded="false"
1433
- id="-bulk-select-toggle-button"
1434
- aria-label="Dropdown toggle"
1435
- >
1436
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1437
- </button>
1438
- </div>
1439
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1440
- <li role="none">
1441
- <button
1442
- class="pf-v5-c-dropdown__menu-item"
1443
- role="menuitem"
1444
- type="button"
1445
- >Select all</button>
1446
- </li>
1447
- <li role="none">
1448
- <button
1449
- class="pf-v5-c-dropdown__menu-item"
1450
- role="menuitem"
1451
- type="button"
1452
- >Select none</button>
1453
- </li>
1454
- <li role="none">
1455
- <button
1456
- class="pf-v5-c-dropdown__menu-item"
1457
- role="menuitem"
1458
- type="button"
1459
- >Other action</button>
1460
- </li>
1461
- </ul>
1347
+ <div
1348
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1349
+ id="sortable-demo-toolbar-check"
1350
+ >
1351
+ <label
1352
+ class="pf-v5-c-check pf-m-standalone"
1353
+ id="sortable-demo-toolbar-check-check"
1354
+ for="sortable-demo-toolbar-check-check-input"
1355
+ >
1356
+ <input
1357
+ class="pf-v5-c-check__input"
1358
+ type="checkbox"
1359
+ id="sortable-demo-toolbar-check-check-input"
1360
+ name="sortable-demo-toolbar-check-check-input"
1361
+ aria-label="Standalone check"
1362
+ />
1363
+ </label>
1364
+ <button
1365
+ class="pf-v5-c-menu-toggle__button"
1366
+ type="button"
1367
+ aria-expanded="false"
1368
+ id="sortable-demo-toolbar-menu-toggle-toggle-button"
1369
+ aria-label="Menu toggle"
1370
+ >
1371
+ <span class="pf-v5-c-menu-toggle__controls">
1372
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1373
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1374
+ </span>
1375
+ </span>
1376
+ </button>
1462
1377
  </div>
1463
1378
  </div>
1464
1379
 
@@ -1469,72 +1384,22 @@ wrapperTag: div
1469
1384
  role="group"
1470
1385
  >
1471
1386
  <div class="pf-v5-c-input-group__item">
1472
- <div class="pf-v5-c-select" style="width: 124px">
1473
- <span id="-select-name-label" hidden>Choose one</span>
1474
-
1475
- <button
1476
- class="pf-v5-c-select__toggle"
1477
- type="button"
1478
- id="-select-name-toggle"
1479
- aria-haspopup="true"
1480
- aria-expanded="false"
1481
- aria-labelledby="-select-name-label -select-name-toggle"
1482
- >
1483
- <div class="pf-v5-c-select__toggle-wrapper">
1484
- <span class="pf-v5-c-select__toggle-icon">
1485
- <i class="fas fa-filter" aria-hidden="true"></i>
1486
- </span>
1487
- <span class="pf-v5-c-select__toggle-text">Name</span>
1488
- </div>
1489
- <span class="pf-v5-c-select__toggle-arrow">
1387
+ <button
1388
+ class="pf-v5-c-menu-toggle"
1389
+ type="button"
1390
+ aria-expanded="false"
1391
+ id="sortable-demo-toolbar-search-filter-menu"
1392
+ >
1393
+ <span class="pf-v5-c-menu-toggle__icon">
1394
+ <i class="fas fa-filter" aria-hidden="true"></i>
1395
+ </span>
1396
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1397
+ <span class="pf-v5-c-menu-toggle__controls">
1398
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1490
1399
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1491
1400
  </span>
1492
- </button>
1493
-
1494
- <ul
1495
- class="pf-v5-c-select__menu"
1496
- role="listbox"
1497
- aria-labelledby="-select-name-label"
1498
- hidden
1499
- >
1500
- <li role="presentation">
1501
- <button
1502
- class="pf-v5-c-select__menu-item"
1503
- role="option"
1504
- >Running</button>
1505
- </li>
1506
- <li role="presentation">
1507
- <button
1508
- class="pf-v5-c-select__menu-item pf-m-selected"
1509
- role="option"
1510
- aria-selected="true"
1511
- >
1512
- Stopped
1513
- <span class="pf-v5-c-select__menu-item-icon">
1514
- <i class="fas fa-check" aria-hidden="true"></i>
1515
- </span>
1516
- </button>
1517
- </li>
1518
- <li role="presentation">
1519
- <button
1520
- class="pf-v5-c-select__menu-item"
1521
- role="option"
1522
- >Down</button>
1523
- </li>
1524
- <li role="presentation">
1525
- <button
1526
- class="pf-v5-c-select__menu-item"
1527
- role="option"
1528
- >Degraded</button>
1529
- </li>
1530
- <li role="presentation">
1531
- <button
1532
- class="pf-v5-c-select__menu-item"
1533
- role="option"
1534
- >Needs maintenance</button>
1535
- </li>
1536
- </ul>
1537
- </div>
1401
+ </span>
1402
+ </button>
1538
1403
  </div>
1539
1404
  <div class="pf-v5-c-input-group__item pf-m-fill">
1540
1405
  <div class="pf-v5-c-text-input-group">
@@ -1649,7 +1514,10 @@ wrapperTag: div
1649
1514
  </div>
1650
1515
  </div>
1651
1516
 
1652
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
1517
+ <div
1518
+ class="pf-v5-c-overflow-menu"
1519
+ id="sortable-demo-toolbar-overflow-menu"
1520
+ >
1653
1521
  <div
1654
1522
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
1655
1523
  >
@@ -1674,7 +1542,7 @@ wrapperTag: div
1674
1542
  <button
1675
1543
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1676
1544
  type="button"
1677
- id="-overflow-menu-dropdown-toggle"
1545
+ id="sortable-demo-toolbar-overflow-menu-dropdown-toggle"
1678
1546
  aria-label="Dropdown with additional options"
1679
1547
  aria-expanded="false"
1680
1548
  >
@@ -1683,7 +1551,7 @@ wrapperTag: div
1683
1551
  <ul
1684
1552
  class="pf-v5-c-dropdown__menu"
1685
1553
  role="menu"
1686
- aria-labelledby="-overflow-menu-dropdown-toggle"
1554
+ aria-labelledby="sortable-demo-toolbar-overflow-menu-dropdown-toggle"
1687
1555
  hidden
1688
1556
  >
1689
1557
  <li role="none">
@@ -1733,7 +1601,7 @@ wrapperTag: div
1733
1601
  <button
1734
1602
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1735
1603
  type="button"
1736
- id="-top-pagination-toggle"
1604
+ id="sortable-demo-toolbar-top-pagination-toggle"
1737
1605
  aria-haspopup="listbox"
1738
1606
  aria-expanded="false"
1739
1607
  >
@@ -1748,7 +1616,7 @@ wrapperTag: div
1748
1616
  <ul
1749
1617
  class="pf-v5-c-options-menu__menu"
1750
1618
  role="menu"
1751
- aria-labelledby="-top-pagination-toggle"
1619
+ aria-labelledby="sortable-demo-toolbar-top-pagination-toggle"
1752
1620
  hidden
1753
1621
  >
1754
1622
  <li role="none">
@@ -1809,7 +1677,7 @@ wrapperTag: div
1809
1677
 
1810
1678
  <div
1811
1679
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1812
- id="-expandable-content"
1680
+ id="sortable-demo-toolbar-expandable-content"
1813
1681
  hidden
1814
1682
  ></div>
1815
1683
  </div>
@@ -2756,7 +2624,7 @@ wrapperTag: div
2756
2624
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
2757
2625
  >
2758
2626
  <div class="pf-v5-c-card">
2759
- <div class="pf-v5-c-toolbar">
2627
+ <div class="pf-v5-c-toolbar" id="expandable-demo-toolbar">
2760
2628
  <div class="pf-v5-c-toolbar__content">
2761
2629
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
2762
2630
  <div
@@ -2764,65 +2632,46 @@ wrapperTag: div
2764
2632
  >
2765
2633
  <div class="pf-v5-c-toolbar__toggle">
2766
2634
  <button
2767
- class="pf-v5-c-button pf-m-plain"
2635
+ class="pf-v5-c-menu-toggle pf-m-plain"
2768
2636
  type="button"
2769
- aria-label="Show filters"
2770
2637
  aria-expanded="false"
2771
- aria-controls="-expandable-content"
2638
+ aria-label="Show filters"
2639
+ aria-controls="expandable-demo-toolbar-expandable-content"
2772
2640
  >
2773
2641
  <i class="fas fa-filter" aria-hidden="true"></i>
2774
2642
  </button>
2775
2643
  </div>
2776
2644
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
2777
- <div class="pf-v5-c-dropdown">
2778
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
2779
- <label
2780
- class="pf-v5-c-dropdown__toggle-check"
2781
- for="-bulk-select-toggle-check"
2782
- >
2783
- <div class="pf-v5-c-check pf-m-standalone">
2784
- <input
2785
- class="pf-v5-c-check__input"
2786
- type="checkbox"
2787
- id="-bulk-select-toggle-check"
2788
- aria-label="Select all"
2789
- />
2790
- </div>
2791
- </label>
2792
-
2793
- <button
2794
- class="pf-v5-c-dropdown__toggle-button"
2795
- type="button"
2796
- aria-expanded="false"
2797
- id="-bulk-select-toggle-button"
2798
- aria-label="Dropdown toggle"
2799
- >
2800
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2801
- </button>
2802
- </div>
2803
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
2804
- <li role="none">
2805
- <button
2806
- class="pf-v5-c-dropdown__menu-item"
2807
- role="menuitem"
2808
- type="button"
2809
- >Select all</button>
2810
- </li>
2811
- <li role="none">
2812
- <button
2813
- class="pf-v5-c-dropdown__menu-item"
2814
- role="menuitem"
2815
- type="button"
2816
- >Select none</button>
2817
- </li>
2818
- <li role="none">
2819
- <button
2820
- class="pf-v5-c-dropdown__menu-item"
2821
- role="menuitem"
2822
- type="button"
2823
- >Other action</button>
2824
- </li>
2825
- </ul>
2645
+ <div
2646
+ class="pf-v5-c-menu-toggle pf-m-split-button"
2647
+ id="expandable-demo-toolbar-check"
2648
+ >
2649
+ <label
2650
+ class="pf-v5-c-check pf-m-standalone"
2651
+ id="expandable-demo-toolbar-check-check"
2652
+ for="expandable-demo-toolbar-check-check-input"
2653
+ >
2654
+ <input
2655
+ class="pf-v5-c-check__input"
2656
+ type="checkbox"
2657
+ id="expandable-demo-toolbar-check-check-input"
2658
+ name="expandable-demo-toolbar-check-check-input"
2659
+ aria-label="Standalone check"
2660
+ />
2661
+ </label>
2662
+ <button
2663
+ class="pf-v5-c-menu-toggle__button"
2664
+ type="button"
2665
+ aria-expanded="false"
2666
+ id="expandable-demo-toolbar-menu-toggle-toggle-button"
2667
+ aria-label="Menu toggle"
2668
+ >
2669
+ <span class="pf-v5-c-menu-toggle__controls">
2670
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2671
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2672
+ </span>
2673
+ </span>
2674
+ </button>
2826
2675
  </div>
2827
2676
  </div>
2828
2677
 
@@ -2833,72 +2682,22 @@ wrapperTag: div
2833
2682
  role="group"
2834
2683
  >
2835
2684
  <div class="pf-v5-c-input-group__item">
2836
- <div class="pf-v5-c-select" style="width: 124px">
2837
- <span id="-select-name-label" hidden>Choose one</span>
2838
-
2839
- <button
2840
- class="pf-v5-c-select__toggle"
2841
- type="button"
2842
- id="-select-name-toggle"
2843
- aria-haspopup="true"
2844
- aria-expanded="false"
2845
- aria-labelledby="-select-name-label -select-name-toggle"
2846
- >
2847
- <div class="pf-v5-c-select__toggle-wrapper">
2848
- <span class="pf-v5-c-select__toggle-icon">
2849
- <i class="fas fa-filter" aria-hidden="true"></i>
2850
- </span>
2851
- <span class="pf-v5-c-select__toggle-text">Name</span>
2852
- </div>
2853
- <span class="pf-v5-c-select__toggle-arrow">
2685
+ <button
2686
+ class="pf-v5-c-menu-toggle"
2687
+ type="button"
2688
+ aria-expanded="false"
2689
+ id="expandable-demo-toolbar-search-filter-menu"
2690
+ >
2691
+ <span class="pf-v5-c-menu-toggle__icon">
2692
+ <i class="fas fa-filter" aria-hidden="true"></i>
2693
+ </span>
2694
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
2695
+ <span class="pf-v5-c-menu-toggle__controls">
2696
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2854
2697
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2855
2698
  </span>
2856
- </button>
2857
-
2858
- <ul
2859
- class="pf-v5-c-select__menu"
2860
- role="listbox"
2861
- aria-labelledby="-select-name-label"
2862
- hidden
2863
- >
2864
- <li role="presentation">
2865
- <button
2866
- class="pf-v5-c-select__menu-item"
2867
- role="option"
2868
- >Running</button>
2869
- </li>
2870
- <li role="presentation">
2871
- <button
2872
- class="pf-v5-c-select__menu-item pf-m-selected"
2873
- role="option"
2874
- aria-selected="true"
2875
- >
2876
- Stopped
2877
- <span class="pf-v5-c-select__menu-item-icon">
2878
- <i class="fas fa-check" aria-hidden="true"></i>
2879
- </span>
2880
- </button>
2881
- </li>
2882
- <li role="presentation">
2883
- <button
2884
- class="pf-v5-c-select__menu-item"
2885
- role="option"
2886
- >Down</button>
2887
- </li>
2888
- <li role="presentation">
2889
- <button
2890
- class="pf-v5-c-select__menu-item"
2891
- role="option"
2892
- >Degraded</button>
2893
- </li>
2894
- <li role="presentation">
2895
- <button
2896
- class="pf-v5-c-select__menu-item"
2897
- role="option"
2898
- >Needs maintenance</button>
2899
- </li>
2900
- </ul>
2901
- </div>
2699
+ </span>
2700
+ </button>
2902
2701
  </div>
2903
2702
  <div class="pf-v5-c-input-group__item pf-m-fill">
2904
2703
  <div class="pf-v5-c-text-input-group">
@@ -2925,17 +2724,17 @@ wrapperTag: div
2925
2724
  <div class="pf-v5-c-toolbar__item">
2926
2725
  <div class="pf-v5-c-select">
2927
2726
  <span
2928
- id="-select-checkbox-status-label"
2727
+ id="expandable-demo-toolbar-select-checkbox-status-label"
2929
2728
  hidden
2930
2729
  >Choose many</span>
2931
2730
 
2932
2731
  <button
2933
2732
  class="pf-v5-c-select__toggle"
2934
2733
  type="button"
2935
- id="-select-checkbox-status-toggle"
2734
+ id="expandable-demo-toolbar-select-checkbox-status-toggle"
2936
2735
  aria-haspopup="true"
2937
2736
  aria-expanded="false"
2938
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
2737
+ aria-labelledby="expandable-demo-toolbar-select-checkbox-status-label expandable-demo-toolbar-select-checkbox-status-toggle"
2939
2738
  >
2940
2739
  <div class="pf-v5-c-select__toggle-wrapper">
2941
2740
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -2952,76 +2751,76 @@ wrapperTag: div
2952
2751
  >
2953
2752
  <label
2954
2753
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2955
- id="-select-checkbox-status-active"
2956
- for="-select-checkbox-status-active-input"
2754
+ id="expandable-demo-toolbar-select-checkbox-status-active"
2755
+ for="expandable-demo-toolbar-select-checkbox-status-active-input"
2957
2756
  >
2958
2757
  <input
2959
2758
  class="pf-v5-c-check__input"
2960
2759
  type="checkbox"
2961
- aria-describedby="-select-checkbox-status-active-description"
2962
- id="-select-checkbox-status-active-input"
2963
- name="-select-checkbox-status-active-input"
2760
+ aria-describedby="expandable-demo-toolbar-select-checkbox-status-active-description"
2761
+ id="expandable-demo-toolbar-select-checkbox-status-active-input"
2762
+ name="expandable-demo-toolbar-select-checkbox-status-active-input"
2964
2763
  />
2965
2764
  <span class="pf-v5-c-check__label">Active</span>
2966
2765
  <span
2967
2766
  class="pf-v5-c-check__description"
2968
- id="-select-checkbox-status-active-description"
2767
+ id="expandable-demo-toolbar-select-checkbox-status-active-description"
2969
2768
  >This is a description</span>
2970
2769
  </label>
2971
2770
  <label
2972
2771
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2973
- id="-select-checkbox-status-canceled"
2974
- for="-select-checkbox-status-canceled-input"
2772
+ id="expandable-demo-toolbar-select-checkbox-status-canceled"
2773
+ for="expandable-demo-toolbar-select-checkbox-status-canceled-input"
2975
2774
  >
2976
2775
  <input
2977
2776
  class="pf-v5-c-check__input"
2978
2777
  type="checkbox"
2979
- aria-describedby="-select-checkbox-status-canceled-description"
2980
- id="-select-checkbox-status-canceled-input"
2981
- name="-select-checkbox-status-canceled-input"
2778
+ aria-describedby="expandable-demo-toolbar-select-checkbox-status-canceled-description"
2779
+ id="expandable-demo-toolbar-select-checkbox-status-canceled-input"
2780
+ name="expandable-demo-toolbar-select-checkbox-status-canceled-input"
2982
2781
  />
2983
2782
  <span class="pf-v5-c-check__label">Canceled</span>
2984
2783
  <span
2985
2784
  class="pf-v5-c-check__description"
2986
- id="-select-checkbox-status-canceled-description"
2785
+ id="expandable-demo-toolbar-select-checkbox-status-canceled-description"
2987
2786
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2988
2787
  </label>
2989
2788
  <label
2990
2789
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2991
- id="-select-checkbox-status-paused"
2992
- for="-select-checkbox-status-paused-input"
2790
+ id="expandable-demo-toolbar-select-checkbox-status-paused"
2791
+ for="expandable-demo-toolbar-select-checkbox-status-paused-input"
2993
2792
  >
2994
2793
  <input
2995
2794
  class="pf-v5-c-check__input"
2996
2795
  type="checkbox"
2997
- id="-select-checkbox-status-paused-input"
2998
- name="-select-checkbox-status-paused-input"
2796
+ id="expandable-demo-toolbar-select-checkbox-status-paused-input"
2797
+ name="expandable-demo-toolbar-select-checkbox-status-paused-input"
2999
2798
  />
3000
2799
  <span class="pf-v5-c-check__label">Paused</span>
3001
2800
  </label>
3002
2801
  <label
3003
2802
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3004
- id="-select-checkbox-status-warning"
3005
- for="-select-checkbox-status-warning-input"
2803
+ id="expandable-demo-toolbar-select-checkbox-status-warning"
2804
+ for="expandable-demo-toolbar-select-checkbox-status-warning-input"
3006
2805
  >
3007
2806
  <input
3008
2807
  class="pf-v5-c-check__input"
3009
2808
  type="checkbox"
3010
- id="-select-checkbox-status-warning-input"
3011
- name="-select-checkbox-status-warning-input"
2809
+ id="expandable-demo-toolbar-select-checkbox-status-warning-input"
2810
+ name="expandable-demo-toolbar-select-checkbox-status-warning-input"
3012
2811
  />
3013
2812
  <span class="pf-v5-c-check__label">Warning</span>
3014
2813
  </label>
3015
2814
  <label
3016
2815
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3017
- id="-select-checkbox-status-restarted"
3018
- for="-select-checkbox-status-restarted-input"
2816
+ id="expandable-demo-toolbar-select-checkbox-status-restarted"
2817
+ for="expandable-demo-toolbar-select-checkbox-status-restarted-input"
3019
2818
  >
3020
2819
  <input
3021
2820
  class="pf-v5-c-check__input"
3022
2821
  type="checkbox"
3023
- id="-select-checkbox-status-restarted-input"
3024
- name="-select-checkbox-status-restarted-input"
2822
+ id="expandable-demo-toolbar-select-checkbox-status-restarted-input"
2823
+ name="expandable-demo-toolbar-select-checkbox-status-restarted-input"
3025
2824
  />
3026
2825
  <span class="pf-v5-c-check__label">Restarted</span>
3027
2826
  </label>
@@ -3031,15 +2830,18 @@ wrapperTag: div
3031
2830
  </div>
3032
2831
  <div class="pf-v5-c-toolbar__item">
3033
2832
  <div class="pf-v5-c-select">
3034
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
2833
+ <span
2834
+ id="expandable-demo-toolbar-select-checkbox-risk-label"
2835
+ hidden
2836
+ >Choose many</span>
3035
2837
 
3036
2838
  <button
3037
2839
  class="pf-v5-c-select__toggle"
3038
2840
  type="button"
3039
- id="-select-checkbox-risk-toggle"
2841
+ id="expandable-demo-toolbar-select-checkbox-risk-toggle"
3040
2842
  aria-haspopup="true"
3041
2843
  aria-expanded="false"
3042
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
2844
+ aria-labelledby="expandable-demo-toolbar-select-checkbox-risk-label expandable-demo-toolbar-select-checkbox-risk-toggle"
3043
2845
  >
3044
2846
  <div class="pf-v5-c-select__toggle-wrapper">
3045
2847
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -3056,76 +2858,76 @@ wrapperTag: div
3056
2858
  >
3057
2859
  <label
3058
2860
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3059
- id="-select-checkbox-risk-active"
3060
- for="-select-checkbox-risk-active-input"
2861
+ id="expandable-demo-toolbar-select-checkbox-risk-active"
2862
+ for="expandable-demo-toolbar-select-checkbox-risk-active-input"
3061
2863
  >
3062
2864
  <input
3063
2865
  class="pf-v5-c-check__input"
3064
2866
  type="checkbox"
3065
- aria-describedby="-select-checkbox-risk-active-description"
3066
- id="-select-checkbox-risk-active-input"
3067
- name="-select-checkbox-risk-active-input"
2867
+ aria-describedby="expandable-demo-toolbar-select-checkbox-risk-active-description"
2868
+ id="expandable-demo-toolbar-select-checkbox-risk-active-input"
2869
+ name="expandable-demo-toolbar-select-checkbox-risk-active-input"
3068
2870
  />
3069
2871
  <span class="pf-v5-c-check__label">Active</span>
3070
2872
  <span
3071
2873
  class="pf-v5-c-check__description"
3072
- id="-select-checkbox-risk-active-description"
2874
+ id="expandable-demo-toolbar-select-checkbox-risk-active-description"
3073
2875
  >This is a description</span>
3074
2876
  </label>
3075
2877
  <label
3076
2878
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3077
- id="-select-checkbox-risk-canceled"
3078
- for="-select-checkbox-risk-canceled-input"
2879
+ id="expandable-demo-toolbar-select-checkbox-risk-canceled"
2880
+ for="expandable-demo-toolbar-select-checkbox-risk-canceled-input"
3079
2881
  >
3080
2882
  <input
3081
2883
  class="pf-v5-c-check__input"
3082
2884
  type="checkbox"
3083
- aria-describedby="-select-checkbox-risk-canceled-description"
3084
- id="-select-checkbox-risk-canceled-input"
3085
- name="-select-checkbox-risk-canceled-input"
2885
+ aria-describedby="expandable-demo-toolbar-select-checkbox-risk-canceled-description"
2886
+ id="expandable-demo-toolbar-select-checkbox-risk-canceled-input"
2887
+ name="expandable-demo-toolbar-select-checkbox-risk-canceled-input"
3086
2888
  />
3087
2889
  <span class="pf-v5-c-check__label">Canceled</span>
3088
2890
  <span
3089
2891
  class="pf-v5-c-check__description"
3090
- id="-select-checkbox-risk-canceled-description"
2892
+ id="expandable-demo-toolbar-select-checkbox-risk-canceled-description"
3091
2893
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3092
2894
  </label>
3093
2895
  <label
3094
2896
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3095
- id="-select-checkbox-risk-paused"
3096
- for="-select-checkbox-risk-paused-input"
2897
+ id="expandable-demo-toolbar-select-checkbox-risk-paused"
2898
+ for="expandable-demo-toolbar-select-checkbox-risk-paused-input"
3097
2899
  >
3098
2900
  <input
3099
2901
  class="pf-v5-c-check__input"
3100
2902
  type="checkbox"
3101
- id="-select-checkbox-risk-paused-input"
3102
- name="-select-checkbox-risk-paused-input"
2903
+ id="expandable-demo-toolbar-select-checkbox-risk-paused-input"
2904
+ name="expandable-demo-toolbar-select-checkbox-risk-paused-input"
3103
2905
  />
3104
2906
  <span class="pf-v5-c-check__label">Paused</span>
3105
2907
  </label>
3106
2908
  <label
3107
2909
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3108
- id="-select-checkbox-risk-warning"
3109
- for="-select-checkbox-risk-warning-input"
2910
+ id="expandable-demo-toolbar-select-checkbox-risk-warning"
2911
+ for="expandable-demo-toolbar-select-checkbox-risk-warning-input"
3110
2912
  >
3111
2913
  <input
3112
2914
  class="pf-v5-c-check__input"
3113
2915
  type="checkbox"
3114
- id="-select-checkbox-risk-warning-input"
3115
- name="-select-checkbox-risk-warning-input"
2916
+ id="expandable-demo-toolbar-select-checkbox-risk-warning-input"
2917
+ name="expandable-demo-toolbar-select-checkbox-risk-warning-input"
3116
2918
  />
3117
2919
  <span class="pf-v5-c-check__label">Warning</span>
3118
2920
  </label>
3119
2921
  <label
3120
2922
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3121
- id="-select-checkbox-risk-restarted"
3122
- for="-select-checkbox-risk-restarted-input"
2923
+ id="expandable-demo-toolbar-select-checkbox-risk-restarted"
2924
+ for="expandable-demo-toolbar-select-checkbox-risk-restarted-input"
3123
2925
  >
3124
2926
  <input
3125
2927
  class="pf-v5-c-check__input"
3126
2928
  type="checkbox"
3127
- id="-select-checkbox-risk-restarted-input"
3128
- name="-select-checkbox-risk-restarted-input"
2929
+ id="expandable-demo-toolbar-select-checkbox-risk-restarted-input"
2930
+ name="expandable-demo-toolbar-select-checkbox-risk-restarted-input"
3129
2931
  />
3130
2932
  <span class="pf-v5-c-check__label">Restarted</span>
3131
2933
  </label>
@@ -3155,7 +2957,7 @@ wrapperTag: div
3155
2957
  <button
3156
2958
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3157
2959
  type="button"
3158
- id="-top-pagination-toggle"
2960
+ id="expandable-demo-toolbar-top-pagination-toggle"
3159
2961
  aria-haspopup="listbox"
3160
2962
  aria-expanded="false"
3161
2963
  >
@@ -3170,7 +2972,7 @@ wrapperTag: div
3170
2972
  <ul
3171
2973
  class="pf-v5-c-options-menu__menu"
3172
2974
  role="menu"
3173
- aria-labelledby="-top-pagination-toggle"
2975
+ aria-labelledby="expandable-demo-toolbar-top-pagination-toggle"
3174
2976
  hidden
3175
2977
  >
3176
2978
  <li role="none">
@@ -3231,7 +3033,7 @@ wrapperTag: div
3231
3033
 
3232
3034
  <div
3233
3035
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
3234
- id="-expandable-content"
3036
+ id="expandable-demo-toolbar-expandable-content"
3235
3037
  hidden
3236
3038
  ></div>
3237
3039
  </div>
@@ -4363,7 +4165,7 @@ wrapperTag: div
4363
4165
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
4364
4166
  >
4365
4167
  <div class="pf-v5-c-card">
4366
- <div class="pf-v5-c-toolbar">
4168
+ <div class="pf-v5-c-toolbar" id="compact-demo-toolbar">
4367
4169
  <div class="pf-v5-c-toolbar__content">
4368
4170
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
4369
4171
  <div
@@ -4371,65 +4173,46 @@ wrapperTag: div
4371
4173
  >
4372
4174
  <div class="pf-v5-c-toolbar__toggle">
4373
4175
  <button
4374
- class="pf-v5-c-button pf-m-plain"
4176
+ class="pf-v5-c-menu-toggle pf-m-plain"
4375
4177
  type="button"
4376
- aria-label="Show filters"
4377
4178
  aria-expanded="false"
4378
- aria-controls="-expandable-content"
4179
+ aria-label="Show filters"
4180
+ aria-controls="compact-demo-toolbar-expandable-content"
4379
4181
  >
4380
4182
  <i class="fas fa-filter" aria-hidden="true"></i>
4381
4183
  </button>
4382
4184
  </div>
4383
4185
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
4384
- <div class="pf-v5-c-dropdown">
4385
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
4386
- <label
4387
- class="pf-v5-c-dropdown__toggle-check"
4388
- for="-bulk-select-toggle-check"
4389
- >
4390
- <div class="pf-v5-c-check pf-m-standalone">
4391
- <input
4392
- class="pf-v5-c-check__input"
4393
- type="checkbox"
4394
- id="-bulk-select-toggle-check"
4395
- aria-label="Select all"
4396
- />
4397
- </div>
4398
- </label>
4399
-
4400
- <button
4401
- class="pf-v5-c-dropdown__toggle-button"
4402
- type="button"
4403
- aria-expanded="false"
4404
- id="-bulk-select-toggle-button"
4405
- aria-label="Dropdown toggle"
4406
- >
4407
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4408
- </button>
4409
- </div>
4410
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
4411
- <li role="none">
4412
- <button
4413
- class="pf-v5-c-dropdown__menu-item"
4414
- role="menuitem"
4415
- type="button"
4416
- >Select all</button>
4417
- </li>
4418
- <li role="none">
4419
- <button
4420
- class="pf-v5-c-dropdown__menu-item"
4421
- role="menuitem"
4422
- type="button"
4423
- >Select none</button>
4424
- </li>
4425
- <li role="none">
4426
- <button
4427
- class="pf-v5-c-dropdown__menu-item"
4428
- role="menuitem"
4429
- type="button"
4430
- >Other action</button>
4431
- </li>
4432
- </ul>
4186
+ <div
4187
+ class="pf-v5-c-menu-toggle pf-m-split-button"
4188
+ id="compact-demo-toolbar-check"
4189
+ >
4190
+ <label
4191
+ class="pf-v5-c-check pf-m-standalone"
4192
+ id="compact-demo-toolbar-check-check"
4193
+ for="compact-demo-toolbar-check-check-input"
4194
+ >
4195
+ <input
4196
+ class="pf-v5-c-check__input"
4197
+ type="checkbox"
4198
+ id="compact-demo-toolbar-check-check-input"
4199
+ name="compact-demo-toolbar-check-check-input"
4200
+ aria-label="Standalone check"
4201
+ />
4202
+ </label>
4203
+ <button
4204
+ class="pf-v5-c-menu-toggle__button"
4205
+ type="button"
4206
+ aria-expanded="false"
4207
+ id="compact-demo-toolbar-menu-toggle-toggle-button"
4208
+ aria-label="Menu toggle"
4209
+ >
4210
+ <span class="pf-v5-c-menu-toggle__controls">
4211
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4212
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4213
+ </span>
4214
+ </span>
4215
+ </button>
4433
4216
  </div>
4434
4217
  </div>
4435
4218
 
@@ -4440,72 +4223,22 @@ wrapperTag: div
4440
4223
  role="group"
4441
4224
  >
4442
4225
  <div class="pf-v5-c-input-group__item">
4443
- <div class="pf-v5-c-select" style="width: 124px">
4444
- <span id="-select-name-label" hidden>Choose one</span>
4445
-
4446
- <button
4447
- class="pf-v5-c-select__toggle"
4448
- type="button"
4449
- id="-select-name-toggle"
4450
- aria-haspopup="true"
4451
- aria-expanded="false"
4452
- aria-labelledby="-select-name-label -select-name-toggle"
4453
- >
4454
- <div class="pf-v5-c-select__toggle-wrapper">
4455
- <span class="pf-v5-c-select__toggle-icon">
4456
- <i class="fas fa-filter" aria-hidden="true"></i>
4457
- </span>
4458
- <span class="pf-v5-c-select__toggle-text">Name</span>
4459
- </div>
4460
- <span class="pf-v5-c-select__toggle-arrow">
4226
+ <button
4227
+ class="pf-v5-c-menu-toggle"
4228
+ type="button"
4229
+ aria-expanded="false"
4230
+ id="compact-demo-toolbar-search-filter-menu"
4231
+ >
4232
+ <span class="pf-v5-c-menu-toggle__icon">
4233
+ <i class="fas fa-filter" aria-hidden="true"></i>
4234
+ </span>
4235
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
4236
+ <span class="pf-v5-c-menu-toggle__controls">
4237
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4461
4238
  <i class="fas fa-caret-down" aria-hidden="true"></i>
4462
4239
  </span>
4463
- </button>
4464
-
4465
- <ul
4466
- class="pf-v5-c-select__menu"
4467
- role="listbox"
4468
- aria-labelledby="-select-name-label"
4469
- hidden
4470
- >
4471
- <li role="presentation">
4472
- <button
4473
- class="pf-v5-c-select__menu-item"
4474
- role="option"
4475
- >Running</button>
4476
- </li>
4477
- <li role="presentation">
4478
- <button
4479
- class="pf-v5-c-select__menu-item pf-m-selected"
4480
- role="option"
4481
- aria-selected="true"
4482
- >
4483
- Stopped
4484
- <span class="pf-v5-c-select__menu-item-icon">
4485
- <i class="fas fa-check" aria-hidden="true"></i>
4486
- </span>
4487
- </button>
4488
- </li>
4489
- <li role="presentation">
4490
- <button
4491
- class="pf-v5-c-select__menu-item"
4492
- role="option"
4493
- >Down</button>
4494
- </li>
4495
- <li role="presentation">
4496
- <button
4497
- class="pf-v5-c-select__menu-item"
4498
- role="option"
4499
- >Degraded</button>
4500
- </li>
4501
- <li role="presentation">
4502
- <button
4503
- class="pf-v5-c-select__menu-item"
4504
- role="option"
4505
- >Needs maintenance</button>
4506
- </li>
4507
- </ul>
4508
- </div>
4240
+ </span>
4241
+ </button>
4509
4242
  </div>
4510
4243
  <div class="pf-v5-c-input-group__item pf-m-fill">
4511
4244
  <div class="pf-v5-c-text-input-group">
@@ -4532,17 +4265,17 @@ wrapperTag: div
4532
4265
  <div class="pf-v5-c-toolbar__item">
4533
4266
  <div class="pf-v5-c-select">
4534
4267
  <span
4535
- id="-select-checkbox-status-label"
4268
+ id="compact-demo-toolbar-select-checkbox-status-label"
4536
4269
  hidden
4537
4270
  >Choose many</span>
4538
4271
 
4539
4272
  <button
4540
4273
  class="pf-v5-c-select__toggle"
4541
4274
  type="button"
4542
- id="-select-checkbox-status-toggle"
4275
+ id="compact-demo-toolbar-select-checkbox-status-toggle"
4543
4276
  aria-haspopup="true"
4544
4277
  aria-expanded="false"
4545
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
4278
+ aria-labelledby="compact-demo-toolbar-select-checkbox-status-label compact-demo-toolbar-select-checkbox-status-toggle"
4546
4279
  >
4547
4280
  <div class="pf-v5-c-select__toggle-wrapper">
4548
4281
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -4559,76 +4292,76 @@ wrapperTag: div
4559
4292
  >
4560
4293
  <label
4561
4294
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
4562
- id="-select-checkbox-status-active"
4563
- for="-select-checkbox-status-active-input"
4295
+ id="compact-demo-toolbar-select-checkbox-status-active"
4296
+ for="compact-demo-toolbar-select-checkbox-status-active-input"
4564
4297
  >
4565
4298
  <input
4566
4299
  class="pf-v5-c-check__input"
4567
4300
  type="checkbox"
4568
- aria-describedby="-select-checkbox-status-active-description"
4569
- id="-select-checkbox-status-active-input"
4570
- name="-select-checkbox-status-active-input"
4301
+ aria-describedby="compact-demo-toolbar-select-checkbox-status-active-description"
4302
+ id="compact-demo-toolbar-select-checkbox-status-active-input"
4303
+ name="compact-demo-toolbar-select-checkbox-status-active-input"
4571
4304
  />
4572
4305
  <span class="pf-v5-c-check__label">Active</span>
4573
4306
  <span
4574
4307
  class="pf-v5-c-check__description"
4575
- id="-select-checkbox-status-active-description"
4308
+ id="compact-demo-toolbar-select-checkbox-status-active-description"
4576
4309
  >This is a description</span>
4577
4310
  </label>
4578
4311
  <label
4579
4312
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
4580
- id="-select-checkbox-status-canceled"
4581
- for="-select-checkbox-status-canceled-input"
4313
+ id="compact-demo-toolbar-select-checkbox-status-canceled"
4314
+ for="compact-demo-toolbar-select-checkbox-status-canceled-input"
4582
4315
  >
4583
4316
  <input
4584
4317
  class="pf-v5-c-check__input"
4585
4318
  type="checkbox"
4586
- aria-describedby="-select-checkbox-status-canceled-description"
4587
- id="-select-checkbox-status-canceled-input"
4588
- name="-select-checkbox-status-canceled-input"
4319
+ aria-describedby="compact-demo-toolbar-select-checkbox-status-canceled-description"
4320
+ id="compact-demo-toolbar-select-checkbox-status-canceled-input"
4321
+ name="compact-demo-toolbar-select-checkbox-status-canceled-input"
4589
4322
  />
4590
4323
  <span class="pf-v5-c-check__label">Canceled</span>
4591
4324
  <span
4592
4325
  class="pf-v5-c-check__description"
4593
- id="-select-checkbox-status-canceled-description"
4326
+ id="compact-demo-toolbar-select-checkbox-status-canceled-description"
4594
4327
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
4595
4328
  </label>
4596
4329
  <label
4597
4330
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4598
- id="-select-checkbox-status-paused"
4599
- for="-select-checkbox-status-paused-input"
4331
+ id="compact-demo-toolbar-select-checkbox-status-paused"
4332
+ for="compact-demo-toolbar-select-checkbox-status-paused-input"
4600
4333
  >
4601
4334
  <input
4602
4335
  class="pf-v5-c-check__input"
4603
4336
  type="checkbox"
4604
- id="-select-checkbox-status-paused-input"
4605
- name="-select-checkbox-status-paused-input"
4337
+ id="compact-demo-toolbar-select-checkbox-status-paused-input"
4338
+ name="compact-demo-toolbar-select-checkbox-status-paused-input"
4606
4339
  />
4607
4340
  <span class="pf-v5-c-check__label">Paused</span>
4608
4341
  </label>
4609
4342
  <label
4610
4343
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4611
- id="-select-checkbox-status-warning"
4612
- for="-select-checkbox-status-warning-input"
4344
+ id="compact-demo-toolbar-select-checkbox-status-warning"
4345
+ for="compact-demo-toolbar-select-checkbox-status-warning-input"
4613
4346
  >
4614
4347
  <input
4615
4348
  class="pf-v5-c-check__input"
4616
4349
  type="checkbox"
4617
- id="-select-checkbox-status-warning-input"
4618
- name="-select-checkbox-status-warning-input"
4350
+ id="compact-demo-toolbar-select-checkbox-status-warning-input"
4351
+ name="compact-demo-toolbar-select-checkbox-status-warning-input"
4619
4352
  />
4620
4353
  <span class="pf-v5-c-check__label">Warning</span>
4621
4354
  </label>
4622
4355
  <label
4623
4356
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4624
- id="-select-checkbox-status-restarted"
4625
- for="-select-checkbox-status-restarted-input"
4357
+ id="compact-demo-toolbar-select-checkbox-status-restarted"
4358
+ for="compact-demo-toolbar-select-checkbox-status-restarted-input"
4626
4359
  >
4627
4360
  <input
4628
4361
  class="pf-v5-c-check__input"
4629
4362
  type="checkbox"
4630
- id="-select-checkbox-status-restarted-input"
4631
- name="-select-checkbox-status-restarted-input"
4363
+ id="compact-demo-toolbar-select-checkbox-status-restarted-input"
4364
+ name="compact-demo-toolbar-select-checkbox-status-restarted-input"
4632
4365
  />
4633
4366
  <span class="pf-v5-c-check__label">Restarted</span>
4634
4367
  </label>
@@ -4638,15 +4371,18 @@ wrapperTag: div
4638
4371
  </div>
4639
4372
  <div class="pf-v5-c-toolbar__item">
4640
4373
  <div class="pf-v5-c-select">
4641
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
4374
+ <span
4375
+ id="compact-demo-toolbar-select-checkbox-risk-label"
4376
+ hidden
4377
+ >Choose many</span>
4642
4378
 
4643
4379
  <button
4644
4380
  class="pf-v5-c-select__toggle"
4645
4381
  type="button"
4646
- id="-select-checkbox-risk-toggle"
4382
+ id="compact-demo-toolbar-select-checkbox-risk-toggle"
4647
4383
  aria-haspopup="true"
4648
4384
  aria-expanded="false"
4649
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
4385
+ aria-labelledby="compact-demo-toolbar-select-checkbox-risk-label compact-demo-toolbar-select-checkbox-risk-toggle"
4650
4386
  >
4651
4387
  <div class="pf-v5-c-select__toggle-wrapper">
4652
4388
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -4663,76 +4399,76 @@ wrapperTag: div
4663
4399
  >
4664
4400
  <label
4665
4401
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
4666
- id="-select-checkbox-risk-active"
4667
- for="-select-checkbox-risk-active-input"
4402
+ id="compact-demo-toolbar-select-checkbox-risk-active"
4403
+ for="compact-demo-toolbar-select-checkbox-risk-active-input"
4668
4404
  >
4669
4405
  <input
4670
4406
  class="pf-v5-c-check__input"
4671
4407
  type="checkbox"
4672
- aria-describedby="-select-checkbox-risk-active-description"
4673
- id="-select-checkbox-risk-active-input"
4674
- name="-select-checkbox-risk-active-input"
4408
+ aria-describedby="compact-demo-toolbar-select-checkbox-risk-active-description"
4409
+ id="compact-demo-toolbar-select-checkbox-risk-active-input"
4410
+ name="compact-demo-toolbar-select-checkbox-risk-active-input"
4675
4411
  />
4676
4412
  <span class="pf-v5-c-check__label">Active</span>
4677
4413
  <span
4678
4414
  class="pf-v5-c-check__description"
4679
- id="-select-checkbox-risk-active-description"
4415
+ id="compact-demo-toolbar-select-checkbox-risk-active-description"
4680
4416
  >This is a description</span>
4681
4417
  </label>
4682
4418
  <label
4683
4419
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
4684
- id="-select-checkbox-risk-canceled"
4685
- for="-select-checkbox-risk-canceled-input"
4420
+ id="compact-demo-toolbar-select-checkbox-risk-canceled"
4421
+ for="compact-demo-toolbar-select-checkbox-risk-canceled-input"
4686
4422
  >
4687
4423
  <input
4688
4424
  class="pf-v5-c-check__input"
4689
4425
  type="checkbox"
4690
- aria-describedby="-select-checkbox-risk-canceled-description"
4691
- id="-select-checkbox-risk-canceled-input"
4692
- name="-select-checkbox-risk-canceled-input"
4426
+ aria-describedby="compact-demo-toolbar-select-checkbox-risk-canceled-description"
4427
+ id="compact-demo-toolbar-select-checkbox-risk-canceled-input"
4428
+ name="compact-demo-toolbar-select-checkbox-risk-canceled-input"
4693
4429
  />
4694
4430
  <span class="pf-v5-c-check__label">Canceled</span>
4695
4431
  <span
4696
4432
  class="pf-v5-c-check__description"
4697
- id="-select-checkbox-risk-canceled-description"
4433
+ id="compact-demo-toolbar-select-checkbox-risk-canceled-description"
4698
4434
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
4699
4435
  </label>
4700
4436
  <label
4701
4437
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4702
- id="-select-checkbox-risk-paused"
4703
- for="-select-checkbox-risk-paused-input"
4438
+ id="compact-demo-toolbar-select-checkbox-risk-paused"
4439
+ for="compact-demo-toolbar-select-checkbox-risk-paused-input"
4704
4440
  >
4705
4441
  <input
4706
4442
  class="pf-v5-c-check__input"
4707
4443
  type="checkbox"
4708
- id="-select-checkbox-risk-paused-input"
4709
- name="-select-checkbox-risk-paused-input"
4444
+ id="compact-demo-toolbar-select-checkbox-risk-paused-input"
4445
+ name="compact-demo-toolbar-select-checkbox-risk-paused-input"
4710
4446
  />
4711
4447
  <span class="pf-v5-c-check__label">Paused</span>
4712
4448
  </label>
4713
4449
  <label
4714
4450
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4715
- id="-select-checkbox-risk-warning"
4716
- for="-select-checkbox-risk-warning-input"
4451
+ id="compact-demo-toolbar-select-checkbox-risk-warning"
4452
+ for="compact-demo-toolbar-select-checkbox-risk-warning-input"
4717
4453
  >
4718
4454
  <input
4719
4455
  class="pf-v5-c-check__input"
4720
4456
  type="checkbox"
4721
- id="-select-checkbox-risk-warning-input"
4722
- name="-select-checkbox-risk-warning-input"
4457
+ id="compact-demo-toolbar-select-checkbox-risk-warning-input"
4458
+ name="compact-demo-toolbar-select-checkbox-risk-warning-input"
4723
4459
  />
4724
4460
  <span class="pf-v5-c-check__label">Warning</span>
4725
4461
  </label>
4726
4462
  <label
4727
4463
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4728
- id="-select-checkbox-risk-restarted"
4729
- for="-select-checkbox-risk-restarted-input"
4464
+ id="compact-demo-toolbar-select-checkbox-risk-restarted"
4465
+ for="compact-demo-toolbar-select-checkbox-risk-restarted-input"
4730
4466
  >
4731
4467
  <input
4732
4468
  class="pf-v5-c-check__input"
4733
4469
  type="checkbox"
4734
- id="-select-checkbox-risk-restarted-input"
4735
- name="-select-checkbox-risk-restarted-input"
4470
+ id="compact-demo-toolbar-select-checkbox-risk-restarted-input"
4471
+ name="compact-demo-toolbar-select-checkbox-risk-restarted-input"
4736
4472
  />
4737
4473
  <span class="pf-v5-c-check__label">Restarted</span>
4738
4474
  </label>
@@ -4762,7 +4498,7 @@ wrapperTag: div
4762
4498
  <button
4763
4499
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4764
4500
  type="button"
4765
- id="-top-pagination-toggle"
4501
+ id="compact-demo-toolbar-top-pagination-toggle"
4766
4502
  aria-haspopup="listbox"
4767
4503
  aria-expanded="false"
4768
4504
  >
@@ -4777,7 +4513,7 @@ wrapperTag: div
4777
4513
  <ul
4778
4514
  class="pf-v5-c-options-menu__menu"
4779
4515
  role="menu"
4780
- aria-labelledby="-top-pagination-toggle"
4516
+ aria-labelledby="compact-demo-toolbar-top-pagination-toggle"
4781
4517
  hidden
4782
4518
  >
4783
4519
  <li role="none">
@@ -4838,7 +4574,7 @@ wrapperTag: div
4838
4574
 
4839
4575
  <div
4840
4576
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
4841
- id="-expandable-content"
4577
+ id="compact-demo-toolbar-expandable-content"
4842
4578
  hidden
4843
4579
  ></div>
4844
4580
  </div>
@@ -5631,7 +5367,7 @@ wrapperTag: div
5631
5367
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
5632
5368
  >
5633
5369
  <div class="pf-v5-c-card">
5634
- <div class="pf-v5-c-toolbar">
5370
+ <div class="pf-v5-c-toolbar" id="compound-expansion-demo-toolbar">
5635
5371
  <div class="pf-v5-c-toolbar__content">
5636
5372
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
5637
5373
  <div
@@ -5639,65 +5375,46 @@ wrapperTag: div
5639
5375
  >
5640
5376
  <div class="pf-v5-c-toolbar__toggle">
5641
5377
  <button
5642
- class="pf-v5-c-button pf-m-plain"
5378
+ class="pf-v5-c-menu-toggle pf-m-plain"
5643
5379
  type="button"
5644
- aria-label="Show filters"
5645
5380
  aria-expanded="false"
5646
- aria-controls="-expandable-content"
5381
+ aria-label="Show filters"
5382
+ aria-controls="compound-expansion-demo-toolbar-expandable-content"
5647
5383
  >
5648
5384
  <i class="fas fa-filter" aria-hidden="true"></i>
5649
5385
  </button>
5650
5386
  </div>
5651
5387
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
5652
- <div class="pf-v5-c-dropdown">
5653
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
5654
- <label
5655
- class="pf-v5-c-dropdown__toggle-check"
5656
- for="-bulk-select-toggle-check"
5657
- >
5658
- <div class="pf-v5-c-check pf-m-standalone">
5659
- <input
5660
- class="pf-v5-c-check__input"
5661
- type="checkbox"
5662
- id="-bulk-select-toggle-check"
5663
- aria-label="Select all"
5664
- />
5665
- </div>
5666
- </label>
5667
-
5668
- <button
5669
- class="pf-v5-c-dropdown__toggle-button"
5670
- type="button"
5671
- aria-expanded="false"
5672
- id="-bulk-select-toggle-button"
5673
- aria-label="Dropdown toggle"
5674
- >
5675
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5676
- </button>
5677
- </div>
5678
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
5679
- <li role="none">
5680
- <button
5681
- class="pf-v5-c-dropdown__menu-item"
5682
- role="menuitem"
5683
- type="button"
5684
- >Select all</button>
5685
- </li>
5686
- <li role="none">
5687
- <button
5688
- class="pf-v5-c-dropdown__menu-item"
5689
- role="menuitem"
5690
- type="button"
5691
- >Select none</button>
5692
- </li>
5693
- <li role="none">
5694
- <button
5695
- class="pf-v5-c-dropdown__menu-item"
5696
- role="menuitem"
5697
- type="button"
5698
- >Other action</button>
5699
- </li>
5700
- </ul>
5388
+ <div
5389
+ class="pf-v5-c-menu-toggle pf-m-split-button"
5390
+ id="compound-expansion-demo-toolbar-check"
5391
+ >
5392
+ <label
5393
+ class="pf-v5-c-check pf-m-standalone"
5394
+ id="compound-expansion-demo-toolbar-check-check"
5395
+ for="compound-expansion-demo-toolbar-check-check-input"
5396
+ >
5397
+ <input
5398
+ class="pf-v5-c-check__input"
5399
+ type="checkbox"
5400
+ id="compound-expansion-demo-toolbar-check-check-input"
5401
+ name="compound-expansion-demo-toolbar-check-check-input"
5402
+ aria-label="Standalone check"
5403
+ />
5404
+ </label>
5405
+ <button
5406
+ class="pf-v5-c-menu-toggle__button"
5407
+ type="button"
5408
+ aria-expanded="false"
5409
+ id="compound-expansion-demo-toolbar-menu-toggle-toggle-button"
5410
+ aria-label="Menu toggle"
5411
+ >
5412
+ <span class="pf-v5-c-menu-toggle__controls">
5413
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5414
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
5415
+ </span>
5416
+ </span>
5417
+ </button>
5701
5418
  </div>
5702
5419
  </div>
5703
5420
 
@@ -5708,72 +5425,22 @@ wrapperTag: div
5708
5425
  role="group"
5709
5426
  >
5710
5427
  <div class="pf-v5-c-input-group__item">
5711
- <div class="pf-v5-c-select" style="width: 124px">
5712
- <span id="-select-name-label" hidden>Choose one</span>
5713
-
5714
- <button
5715
- class="pf-v5-c-select__toggle"
5716
- type="button"
5717
- id="-select-name-toggle"
5718
- aria-haspopup="true"
5719
- aria-expanded="false"
5720
- aria-labelledby="-select-name-label -select-name-toggle"
5721
- >
5722
- <div class="pf-v5-c-select__toggle-wrapper">
5723
- <span class="pf-v5-c-select__toggle-icon">
5724
- <i class="fas fa-filter" aria-hidden="true"></i>
5725
- </span>
5726
- <span class="pf-v5-c-select__toggle-text">Name</span>
5727
- </div>
5728
- <span class="pf-v5-c-select__toggle-arrow">
5428
+ <button
5429
+ class="pf-v5-c-menu-toggle"
5430
+ type="button"
5431
+ aria-expanded="false"
5432
+ id="compound-expansion-demo-toolbar-search-filter-menu"
5433
+ >
5434
+ <span class="pf-v5-c-menu-toggle__icon">
5435
+ <i class="fas fa-filter" aria-hidden="true"></i>
5436
+ </span>
5437
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
5438
+ <span class="pf-v5-c-menu-toggle__controls">
5439
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5729
5440
  <i class="fas fa-caret-down" aria-hidden="true"></i>
5730
5441
  </span>
5731
- </button>
5732
-
5733
- <ul
5734
- class="pf-v5-c-select__menu"
5735
- role="listbox"
5736
- aria-labelledby="-select-name-label"
5737
- hidden
5738
- >
5739
- <li role="presentation">
5740
- <button
5741
- class="pf-v5-c-select__menu-item"
5742
- role="option"
5743
- >Running</button>
5744
- </li>
5745
- <li role="presentation">
5746
- <button
5747
- class="pf-v5-c-select__menu-item pf-m-selected"
5748
- role="option"
5749
- aria-selected="true"
5750
- >
5751
- Stopped
5752
- <span class="pf-v5-c-select__menu-item-icon">
5753
- <i class="fas fa-check" aria-hidden="true"></i>
5754
- </span>
5755
- </button>
5756
- </li>
5757
- <li role="presentation">
5758
- <button
5759
- class="pf-v5-c-select__menu-item"
5760
- role="option"
5761
- >Down</button>
5762
- </li>
5763
- <li role="presentation">
5764
- <button
5765
- class="pf-v5-c-select__menu-item"
5766
- role="option"
5767
- >Degraded</button>
5768
- </li>
5769
- <li role="presentation">
5770
- <button
5771
- class="pf-v5-c-select__menu-item"
5772
- role="option"
5773
- >Needs maintenance</button>
5774
- </li>
5775
- </ul>
5776
- </div>
5442
+ </span>
5443
+ </button>
5777
5444
  </div>
5778
5445
  <div class="pf-v5-c-input-group__item pf-m-fill">
5779
5446
  <div class="pf-v5-c-text-input-group">
@@ -5800,17 +5467,17 @@ wrapperTag: div
5800
5467
  <div class="pf-v5-c-toolbar__item">
5801
5468
  <div class="pf-v5-c-select">
5802
5469
  <span
5803
- id="-select-checkbox-status-label"
5470
+ id="compound-expansion-demo-toolbar-select-checkbox-status-label"
5804
5471
  hidden
5805
5472
  >Choose many</span>
5806
5473
 
5807
5474
  <button
5808
5475
  class="pf-v5-c-select__toggle"
5809
5476
  type="button"
5810
- id="-select-checkbox-status-toggle"
5477
+ id="compound-expansion-demo-toolbar-select-checkbox-status-toggle"
5811
5478
  aria-haspopup="true"
5812
5479
  aria-expanded="false"
5813
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
5480
+ aria-labelledby="compound-expansion-demo-toolbar-select-checkbox-status-label compound-expansion-demo-toolbar-select-checkbox-status-toggle"
5814
5481
  >
5815
5482
  <div class="pf-v5-c-select__toggle-wrapper">
5816
5483
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -5827,76 +5494,76 @@ wrapperTag: div
5827
5494
  >
5828
5495
  <label
5829
5496
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
5830
- id="-select-checkbox-status-active"
5831
- for="-select-checkbox-status-active-input"
5497
+ id="compound-expansion-demo-toolbar-select-checkbox-status-active"
5498
+ for="compound-expansion-demo-toolbar-select-checkbox-status-active-input"
5832
5499
  >
5833
5500
  <input
5834
5501
  class="pf-v5-c-check__input"
5835
5502
  type="checkbox"
5836
- aria-describedby="-select-checkbox-status-active-description"
5837
- id="-select-checkbox-status-active-input"
5838
- name="-select-checkbox-status-active-input"
5503
+ aria-describedby="compound-expansion-demo-toolbar-select-checkbox-status-active-description"
5504
+ id="compound-expansion-demo-toolbar-select-checkbox-status-active-input"
5505
+ name="compound-expansion-demo-toolbar-select-checkbox-status-active-input"
5839
5506
  />
5840
5507
  <span class="pf-v5-c-check__label">Active</span>
5841
5508
  <span
5842
5509
  class="pf-v5-c-check__description"
5843
- id="-select-checkbox-status-active-description"
5510
+ id="compound-expansion-demo-toolbar-select-checkbox-status-active-description"
5844
5511
  >This is a description</span>
5845
5512
  </label>
5846
5513
  <label
5847
5514
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
5848
- id="-select-checkbox-status-canceled"
5849
- for="-select-checkbox-status-canceled-input"
5515
+ id="compound-expansion-demo-toolbar-select-checkbox-status-canceled"
5516
+ for="compound-expansion-demo-toolbar-select-checkbox-status-canceled-input"
5850
5517
  >
5851
5518
  <input
5852
5519
  class="pf-v5-c-check__input"
5853
5520
  type="checkbox"
5854
- aria-describedby="-select-checkbox-status-canceled-description"
5855
- id="-select-checkbox-status-canceled-input"
5856
- name="-select-checkbox-status-canceled-input"
5521
+ aria-describedby="compound-expansion-demo-toolbar-select-checkbox-status-canceled-description"
5522
+ id="compound-expansion-demo-toolbar-select-checkbox-status-canceled-input"
5523
+ name="compound-expansion-demo-toolbar-select-checkbox-status-canceled-input"
5857
5524
  />
5858
5525
  <span class="pf-v5-c-check__label">Canceled</span>
5859
5526
  <span
5860
5527
  class="pf-v5-c-check__description"
5861
- id="-select-checkbox-status-canceled-description"
5528
+ id="compound-expansion-demo-toolbar-select-checkbox-status-canceled-description"
5862
5529
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
5863
5530
  </label>
5864
5531
  <label
5865
5532
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5866
- id="-select-checkbox-status-paused"
5867
- for="-select-checkbox-status-paused-input"
5533
+ id="compound-expansion-demo-toolbar-select-checkbox-status-paused"
5534
+ for="compound-expansion-demo-toolbar-select-checkbox-status-paused-input"
5868
5535
  >
5869
5536
  <input
5870
5537
  class="pf-v5-c-check__input"
5871
5538
  type="checkbox"
5872
- id="-select-checkbox-status-paused-input"
5873
- name="-select-checkbox-status-paused-input"
5539
+ id="compound-expansion-demo-toolbar-select-checkbox-status-paused-input"
5540
+ name="compound-expansion-demo-toolbar-select-checkbox-status-paused-input"
5874
5541
  />
5875
5542
  <span class="pf-v5-c-check__label">Paused</span>
5876
5543
  </label>
5877
5544
  <label
5878
5545
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5879
- id="-select-checkbox-status-warning"
5880
- for="-select-checkbox-status-warning-input"
5546
+ id="compound-expansion-demo-toolbar-select-checkbox-status-warning"
5547
+ for="compound-expansion-demo-toolbar-select-checkbox-status-warning-input"
5881
5548
  >
5882
5549
  <input
5883
5550
  class="pf-v5-c-check__input"
5884
5551
  type="checkbox"
5885
- id="-select-checkbox-status-warning-input"
5886
- name="-select-checkbox-status-warning-input"
5552
+ id="compound-expansion-demo-toolbar-select-checkbox-status-warning-input"
5553
+ name="compound-expansion-demo-toolbar-select-checkbox-status-warning-input"
5887
5554
  />
5888
5555
  <span class="pf-v5-c-check__label">Warning</span>
5889
5556
  </label>
5890
5557
  <label
5891
5558
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5892
- id="-select-checkbox-status-restarted"
5893
- for="-select-checkbox-status-restarted-input"
5559
+ id="compound-expansion-demo-toolbar-select-checkbox-status-restarted"
5560
+ for="compound-expansion-demo-toolbar-select-checkbox-status-restarted-input"
5894
5561
  >
5895
5562
  <input
5896
5563
  class="pf-v5-c-check__input"
5897
5564
  type="checkbox"
5898
- id="-select-checkbox-status-restarted-input"
5899
- name="-select-checkbox-status-restarted-input"
5565
+ id="compound-expansion-demo-toolbar-select-checkbox-status-restarted-input"
5566
+ name="compound-expansion-demo-toolbar-select-checkbox-status-restarted-input"
5900
5567
  />
5901
5568
  <span class="pf-v5-c-check__label">Restarted</span>
5902
5569
  </label>
@@ -5906,15 +5573,18 @@ wrapperTag: div
5906
5573
  </div>
5907
5574
  <div class="pf-v5-c-toolbar__item">
5908
5575
  <div class="pf-v5-c-select">
5909
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
5576
+ <span
5577
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-label"
5578
+ hidden
5579
+ >Choose many</span>
5910
5580
 
5911
5581
  <button
5912
5582
  class="pf-v5-c-select__toggle"
5913
5583
  type="button"
5914
- id="-select-checkbox-risk-toggle"
5584
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-toggle"
5915
5585
  aria-haspopup="true"
5916
5586
  aria-expanded="false"
5917
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
5587
+ aria-labelledby="compound-expansion-demo-toolbar-select-checkbox-risk-label compound-expansion-demo-toolbar-select-checkbox-risk-toggle"
5918
5588
  >
5919
5589
  <div class="pf-v5-c-select__toggle-wrapper">
5920
5590
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -5931,76 +5601,76 @@ wrapperTag: div
5931
5601
  >
5932
5602
  <label
5933
5603
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
5934
- id="-select-checkbox-risk-active"
5935
- for="-select-checkbox-risk-active-input"
5604
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-active"
5605
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-active-input"
5936
5606
  >
5937
5607
  <input
5938
5608
  class="pf-v5-c-check__input"
5939
5609
  type="checkbox"
5940
- aria-describedby="-select-checkbox-risk-active-description"
5941
- id="-select-checkbox-risk-active-input"
5942
- name="-select-checkbox-risk-active-input"
5610
+ aria-describedby="compound-expansion-demo-toolbar-select-checkbox-risk-active-description"
5611
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-active-input"
5612
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-active-input"
5943
5613
  />
5944
5614
  <span class="pf-v5-c-check__label">Active</span>
5945
5615
  <span
5946
5616
  class="pf-v5-c-check__description"
5947
- id="-select-checkbox-risk-active-description"
5617
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-active-description"
5948
5618
  >This is a description</span>
5949
5619
  </label>
5950
5620
  <label
5951
5621
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
5952
- id="-select-checkbox-risk-canceled"
5953
- for="-select-checkbox-risk-canceled-input"
5622
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-canceled"
5623
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-input"
5954
5624
  >
5955
5625
  <input
5956
5626
  class="pf-v5-c-check__input"
5957
5627
  type="checkbox"
5958
- aria-describedby="-select-checkbox-risk-canceled-description"
5959
- id="-select-checkbox-risk-canceled-input"
5960
- name="-select-checkbox-risk-canceled-input"
5628
+ aria-describedby="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-description"
5629
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-input"
5630
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-input"
5961
5631
  />
5962
5632
  <span class="pf-v5-c-check__label">Canceled</span>
5963
5633
  <span
5964
5634
  class="pf-v5-c-check__description"
5965
- id="-select-checkbox-risk-canceled-description"
5635
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-canceled-description"
5966
5636
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
5967
5637
  </label>
5968
5638
  <label
5969
5639
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5970
- id="-select-checkbox-risk-paused"
5971
- for="-select-checkbox-risk-paused-input"
5640
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-paused"
5641
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-paused-input"
5972
5642
  >
5973
5643
  <input
5974
5644
  class="pf-v5-c-check__input"
5975
5645
  type="checkbox"
5976
- id="-select-checkbox-risk-paused-input"
5977
- name="-select-checkbox-risk-paused-input"
5646
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-paused-input"
5647
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-paused-input"
5978
5648
  />
5979
5649
  <span class="pf-v5-c-check__label">Paused</span>
5980
5650
  </label>
5981
5651
  <label
5982
5652
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5983
- id="-select-checkbox-risk-warning"
5984
- for="-select-checkbox-risk-warning-input"
5653
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-warning"
5654
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-warning-input"
5985
5655
  >
5986
5656
  <input
5987
5657
  class="pf-v5-c-check__input"
5988
5658
  type="checkbox"
5989
- id="-select-checkbox-risk-warning-input"
5990
- name="-select-checkbox-risk-warning-input"
5659
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-warning-input"
5660
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-warning-input"
5991
5661
  />
5992
5662
  <span class="pf-v5-c-check__label">Warning</span>
5993
5663
  </label>
5994
5664
  <label
5995
5665
  class="pf-v5-c-check pf-v5-c-select__menu-item"
5996
- id="-select-checkbox-risk-restarted"
5997
- for="-select-checkbox-risk-restarted-input"
5666
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-restarted"
5667
+ for="compound-expansion-demo-toolbar-select-checkbox-risk-restarted-input"
5998
5668
  >
5999
5669
  <input
6000
5670
  class="pf-v5-c-check__input"
6001
5671
  type="checkbox"
6002
- id="-select-checkbox-risk-restarted-input"
6003
- name="-select-checkbox-risk-restarted-input"
5672
+ id="compound-expansion-demo-toolbar-select-checkbox-risk-restarted-input"
5673
+ name="compound-expansion-demo-toolbar-select-checkbox-risk-restarted-input"
6004
5674
  />
6005
5675
  <span class="pf-v5-c-check__label">Restarted</span>
6006
5676
  </label>
@@ -6030,7 +5700,7 @@ wrapperTag: div
6030
5700
  <button
6031
5701
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6032
5702
  type="button"
6033
- id="-top-pagination-toggle"
5703
+ id="compound-expansion-demo-toolbar-top-pagination-toggle"
6034
5704
  aria-haspopup="listbox"
6035
5705
  aria-expanded="false"
6036
5706
  >
@@ -6045,7 +5715,7 @@ wrapperTag: div
6045
5715
  <ul
6046
5716
  class="pf-v5-c-options-menu__menu"
6047
5717
  role="menu"
6048
- aria-labelledby="-top-pagination-toggle"
5718
+ aria-labelledby="compound-expansion-demo-toolbar-top-pagination-toggle"
6049
5719
  hidden
6050
5720
  >
6051
5721
  <li role="none">
@@ -6106,7 +5776,7 @@ wrapperTag: div
6106
5776
 
6107
5777
  <div
6108
5778
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
6109
- id="-expandable-content"
5779
+ id="compound-expansion-demo-toolbar-expandable-content"
6110
5780
  hidden
6111
5781
  ></div>
6112
5782
  </div>
@@ -11584,7 +11254,7 @@ wrapperTag: div
11584
11254
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
11585
11255
  >
11586
11256
  <div class="pf-v5-c-card">
11587
- <div class="pf-v5-c-toolbar">
11257
+ <div class="pf-v5-c-toolbar" id="static-bottom-pagination-demo-toolbar">
11588
11258
  <div class="pf-v5-c-toolbar__content">
11589
11259
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
11590
11260
  <div
@@ -11592,65 +11262,46 @@ wrapperTag: div
11592
11262
  >
11593
11263
  <div class="pf-v5-c-toolbar__toggle">
11594
11264
  <button
11595
- class="pf-v5-c-button pf-m-plain"
11265
+ class="pf-v5-c-menu-toggle pf-m-plain"
11596
11266
  type="button"
11597
- aria-label="Show filters"
11598
11267
  aria-expanded="false"
11599
- aria-controls="-expandable-content"
11268
+ aria-label="Show filters"
11269
+ aria-controls="static-bottom-pagination-demo-toolbar-expandable-content"
11600
11270
  >
11601
11271
  <i class="fas fa-filter" aria-hidden="true"></i>
11602
11272
  </button>
11603
11273
  </div>
11604
11274
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
11605
- <div class="pf-v5-c-dropdown">
11606
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
11607
- <label
11608
- class="pf-v5-c-dropdown__toggle-check"
11609
- for="-bulk-select-toggle-check"
11610
- >
11611
- <div class="pf-v5-c-check pf-m-standalone">
11612
- <input
11613
- class="pf-v5-c-check__input"
11614
- type="checkbox"
11615
- id="-bulk-select-toggle-check"
11616
- aria-label="Select all"
11617
- />
11618
- </div>
11619
- </label>
11620
-
11621
- <button
11622
- class="pf-v5-c-dropdown__toggle-button"
11623
- type="button"
11624
- aria-expanded="false"
11625
- id="-bulk-select-toggle-button"
11626
- aria-label="Dropdown toggle"
11627
- >
11628
- <i class="fas fa-caret-down" aria-hidden="true"></i>
11629
- </button>
11630
- </div>
11631
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
11632
- <li role="none">
11633
- <button
11634
- class="pf-v5-c-dropdown__menu-item"
11635
- role="menuitem"
11636
- type="button"
11637
- >Select all</button>
11638
- </li>
11639
- <li role="none">
11640
- <button
11641
- class="pf-v5-c-dropdown__menu-item"
11642
- role="menuitem"
11643
- type="button"
11644
- >Select none</button>
11645
- </li>
11646
- <li role="none">
11647
- <button
11648
- class="pf-v5-c-dropdown__menu-item"
11649
- role="menuitem"
11650
- type="button"
11651
- >Other action</button>
11652
- </li>
11653
- </ul>
11275
+ <div
11276
+ class="pf-v5-c-menu-toggle pf-m-split-button"
11277
+ id="static-bottom-pagination-demo-toolbar-check"
11278
+ >
11279
+ <label
11280
+ class="pf-v5-c-check pf-m-standalone"
11281
+ id="static-bottom-pagination-demo-toolbar-check-check"
11282
+ for="static-bottom-pagination-demo-toolbar-check-check-input"
11283
+ >
11284
+ <input
11285
+ class="pf-v5-c-check__input"
11286
+ type="checkbox"
11287
+ id="static-bottom-pagination-demo-toolbar-check-check-input"
11288
+ name="static-bottom-pagination-demo-toolbar-check-check-input"
11289
+ aria-label="Standalone check"
11290
+ />
11291
+ </label>
11292
+ <button
11293
+ class="pf-v5-c-menu-toggle__button"
11294
+ type="button"
11295
+ aria-expanded="false"
11296
+ id="static-bottom-pagination-demo-toolbar-menu-toggle-toggle-button"
11297
+ aria-label="Menu toggle"
11298
+ >
11299
+ <span class="pf-v5-c-menu-toggle__controls">
11300
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11301
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
11302
+ </span>
11303
+ </span>
11304
+ </button>
11654
11305
  </div>
11655
11306
  </div>
11656
11307
 
@@ -11661,72 +11312,22 @@ wrapperTag: div
11661
11312
  role="group"
11662
11313
  >
11663
11314
  <div class="pf-v5-c-input-group__item">
11664
- <div class="pf-v5-c-select" style="width: 124px">
11665
- <span id="-select-name-label" hidden>Choose one</span>
11666
-
11667
- <button
11668
- class="pf-v5-c-select__toggle"
11669
- type="button"
11670
- id="-select-name-toggle"
11671
- aria-haspopup="true"
11672
- aria-expanded="false"
11673
- aria-labelledby="-select-name-label -select-name-toggle"
11674
- >
11675
- <div class="pf-v5-c-select__toggle-wrapper">
11676
- <span class="pf-v5-c-select__toggle-icon">
11677
- <i class="fas fa-filter" aria-hidden="true"></i>
11678
- </span>
11679
- <span class="pf-v5-c-select__toggle-text">Name</span>
11680
- </div>
11681
- <span class="pf-v5-c-select__toggle-arrow">
11315
+ <button
11316
+ class="pf-v5-c-menu-toggle"
11317
+ type="button"
11318
+ aria-expanded="false"
11319
+ id="static-bottom-pagination-demo-toolbar-search-filter-menu"
11320
+ >
11321
+ <span class="pf-v5-c-menu-toggle__icon">
11322
+ <i class="fas fa-filter" aria-hidden="true"></i>
11323
+ </span>
11324
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
11325
+ <span class="pf-v5-c-menu-toggle__controls">
11326
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11682
11327
  <i class="fas fa-caret-down" aria-hidden="true"></i>
11683
11328
  </span>
11684
- </button>
11685
-
11686
- <ul
11687
- class="pf-v5-c-select__menu"
11688
- role="listbox"
11689
- aria-labelledby="-select-name-label"
11690
- hidden
11691
- >
11692
- <li role="presentation">
11693
- <button
11694
- class="pf-v5-c-select__menu-item"
11695
- role="option"
11696
- >Running</button>
11697
- </li>
11698
- <li role="presentation">
11699
- <button
11700
- class="pf-v5-c-select__menu-item pf-m-selected"
11701
- role="option"
11702
- aria-selected="true"
11703
- >
11704
- Stopped
11705
- <span class="pf-v5-c-select__menu-item-icon">
11706
- <i class="fas fa-check" aria-hidden="true"></i>
11707
- </span>
11708
- </button>
11709
- </li>
11710
- <li role="presentation">
11711
- <button
11712
- class="pf-v5-c-select__menu-item"
11713
- role="option"
11714
- >Down</button>
11715
- </li>
11716
- <li role="presentation">
11717
- <button
11718
- class="pf-v5-c-select__menu-item"
11719
- role="option"
11720
- >Degraded</button>
11721
- </li>
11722
- <li role="presentation">
11723
- <button
11724
- class="pf-v5-c-select__menu-item"
11725
- role="option"
11726
- >Needs maintenance</button>
11727
- </li>
11728
- </ul>
11729
- </div>
11329
+ </span>
11330
+ </button>
11730
11331
  </div>
11731
11332
  <div class="pf-v5-c-input-group__item pf-m-fill">
11732
11333
  <div class="pf-v5-c-text-input-group">
@@ -11753,17 +11354,17 @@ wrapperTag: div
11753
11354
  <div class="pf-v5-c-toolbar__item">
11754
11355
  <div class="pf-v5-c-select">
11755
11356
  <span
11756
- id="-select-checkbox-status-label"
11357
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-label"
11757
11358
  hidden
11758
11359
  >Choose many</span>
11759
11360
 
11760
11361
  <button
11761
11362
  class="pf-v5-c-select__toggle"
11762
11363
  type="button"
11763
- id="-select-checkbox-status-toggle"
11364
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-toggle"
11764
11365
  aria-haspopup="true"
11765
11366
  aria-expanded="false"
11766
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
11367
+ aria-labelledby="static-bottom-pagination-demo-toolbar-select-checkbox-status-label static-bottom-pagination-demo-toolbar-select-checkbox-status-toggle"
11767
11368
  >
11768
11369
  <div class="pf-v5-c-select__toggle-wrapper">
11769
11370
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -11780,76 +11381,76 @@ wrapperTag: div
11780
11381
  >
11781
11382
  <label
11782
11383
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
11783
- id="-select-checkbox-status-active"
11784
- for="-select-checkbox-status-active-input"
11384
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-active"
11385
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-input"
11785
11386
  >
11786
11387
  <input
11787
11388
  class="pf-v5-c-check__input"
11788
11389
  type="checkbox"
11789
- aria-describedby="-select-checkbox-status-active-description"
11790
- id="-select-checkbox-status-active-input"
11791
- name="-select-checkbox-status-active-input"
11390
+ aria-describedby="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-description"
11391
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-input"
11392
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-input"
11792
11393
  />
11793
11394
  <span class="pf-v5-c-check__label">Active</span>
11794
11395
  <span
11795
11396
  class="pf-v5-c-check__description"
11796
- id="-select-checkbox-status-active-description"
11397
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-active-description"
11797
11398
  >This is a description</span>
11798
11399
  </label>
11799
11400
  <label
11800
11401
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
11801
- id="-select-checkbox-status-canceled"
11802
- for="-select-checkbox-status-canceled-input"
11402
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled"
11403
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-input"
11803
11404
  >
11804
11405
  <input
11805
11406
  class="pf-v5-c-check__input"
11806
11407
  type="checkbox"
11807
- aria-describedby="-select-checkbox-status-canceled-description"
11808
- id="-select-checkbox-status-canceled-input"
11809
- name="-select-checkbox-status-canceled-input"
11408
+ aria-describedby="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-description"
11409
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-input"
11410
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-input"
11810
11411
  />
11811
11412
  <span class="pf-v5-c-check__label">Canceled</span>
11812
11413
  <span
11813
11414
  class="pf-v5-c-check__description"
11814
- id="-select-checkbox-status-canceled-description"
11415
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-canceled-description"
11815
11416
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
11816
11417
  </label>
11817
11418
  <label
11818
11419
  class="pf-v5-c-check pf-v5-c-select__menu-item"
11819
- id="-select-checkbox-status-paused"
11820
- for="-select-checkbox-status-paused-input"
11420
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-paused"
11421
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-paused-input"
11821
11422
  >
11822
11423
  <input
11823
11424
  class="pf-v5-c-check__input"
11824
11425
  type="checkbox"
11825
- id="-select-checkbox-status-paused-input"
11826
- name="-select-checkbox-status-paused-input"
11426
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-paused-input"
11427
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-paused-input"
11827
11428
  />
11828
11429
  <span class="pf-v5-c-check__label">Paused</span>
11829
11430
  </label>
11830
11431
  <label
11831
11432
  class="pf-v5-c-check pf-v5-c-select__menu-item"
11832
- id="-select-checkbox-status-warning"
11833
- for="-select-checkbox-status-warning-input"
11433
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-warning"
11434
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-warning-input"
11834
11435
  >
11835
11436
  <input
11836
11437
  class="pf-v5-c-check__input"
11837
11438
  type="checkbox"
11838
- id="-select-checkbox-status-warning-input"
11839
- name="-select-checkbox-status-warning-input"
11439
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-warning-input"
11440
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-warning-input"
11840
11441
  />
11841
11442
  <span class="pf-v5-c-check__label">Warning</span>
11842
11443
  </label>
11843
11444
  <label
11844
11445
  class="pf-v5-c-check pf-v5-c-select__menu-item"
11845
- id="-select-checkbox-status-restarted"
11846
- for="-select-checkbox-status-restarted-input"
11446
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-restarted"
11447
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-status-restarted-input"
11847
11448
  >
11848
11449
  <input
11849
11450
  class="pf-v5-c-check__input"
11850
11451
  type="checkbox"
11851
- id="-select-checkbox-status-restarted-input"
11852
- name="-select-checkbox-status-restarted-input"
11452
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-status-restarted-input"
11453
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-status-restarted-input"
11853
11454
  />
11854
11455
  <span class="pf-v5-c-check__label">Restarted</span>
11855
11456
  </label>
@@ -11859,15 +11460,18 @@ wrapperTag: div
11859
11460
  </div>
11860
11461
  <div class="pf-v5-c-toolbar__item">
11861
11462
  <div class="pf-v5-c-select">
11862
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
11463
+ <span
11464
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-label"
11465
+ hidden
11466
+ >Choose many</span>
11863
11467
 
11864
11468
  <button
11865
11469
  class="pf-v5-c-select__toggle"
11866
11470
  type="button"
11867
- id="-select-checkbox-risk-toggle"
11471
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-toggle"
11868
11472
  aria-haspopup="true"
11869
11473
  aria-expanded="false"
11870
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
11474
+ aria-labelledby="static-bottom-pagination-demo-toolbar-select-checkbox-risk-label static-bottom-pagination-demo-toolbar-select-checkbox-risk-toggle"
11871
11475
  >
11872
11476
  <div class="pf-v5-c-select__toggle-wrapper">
11873
11477
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -11884,76 +11488,76 @@ wrapperTag: div
11884
11488
  >
11885
11489
  <label
11886
11490
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
11887
- id="-select-checkbox-risk-active"
11888
- for="-select-checkbox-risk-active-input"
11491
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active"
11492
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-input"
11889
11493
  >
11890
11494
  <input
11891
11495
  class="pf-v5-c-check__input"
11892
11496
  type="checkbox"
11893
- aria-describedby="-select-checkbox-risk-active-description"
11894
- id="-select-checkbox-risk-active-input"
11895
- name="-select-checkbox-risk-active-input"
11497
+ aria-describedby="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-description"
11498
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-input"
11499
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-input"
11896
11500
  />
11897
11501
  <span class="pf-v5-c-check__label">Active</span>
11898
11502
  <span
11899
11503
  class="pf-v5-c-check__description"
11900
- id="-select-checkbox-risk-active-description"
11504
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-active-description"
11901
11505
  >This is a description</span>
11902
11506
  </label>
11903
11507
  <label
11904
11508
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
11905
- id="-select-checkbox-risk-canceled"
11906
- for="-select-checkbox-risk-canceled-input"
11509
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled"
11510
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-input"
11907
11511
  >
11908
11512
  <input
11909
11513
  class="pf-v5-c-check__input"
11910
11514
  type="checkbox"
11911
- aria-describedby="-select-checkbox-risk-canceled-description"
11912
- id="-select-checkbox-risk-canceled-input"
11913
- name="-select-checkbox-risk-canceled-input"
11515
+ aria-describedby="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-description"
11516
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-input"
11517
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-input"
11914
11518
  />
11915
11519
  <span class="pf-v5-c-check__label">Canceled</span>
11916
11520
  <span
11917
11521
  class="pf-v5-c-check__description"
11918
- id="-select-checkbox-risk-canceled-description"
11522
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-canceled-description"
11919
11523
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
11920
11524
  </label>
11921
11525
  <label
11922
11526
  class="pf-v5-c-check pf-v5-c-select__menu-item"
11923
- id="-select-checkbox-risk-paused"
11924
- for="-select-checkbox-risk-paused-input"
11527
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-paused"
11528
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-paused-input"
11925
11529
  >
11926
11530
  <input
11927
11531
  class="pf-v5-c-check__input"
11928
11532
  type="checkbox"
11929
- id="-select-checkbox-risk-paused-input"
11930
- name="-select-checkbox-risk-paused-input"
11533
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-paused-input"
11534
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-paused-input"
11931
11535
  />
11932
11536
  <span class="pf-v5-c-check__label">Paused</span>
11933
11537
  </label>
11934
11538
  <label
11935
11539
  class="pf-v5-c-check pf-v5-c-select__menu-item"
11936
- id="-select-checkbox-risk-warning"
11937
- for="-select-checkbox-risk-warning-input"
11540
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-warning"
11541
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-warning-input"
11938
11542
  >
11939
11543
  <input
11940
11544
  class="pf-v5-c-check__input"
11941
11545
  type="checkbox"
11942
- id="-select-checkbox-risk-warning-input"
11943
- name="-select-checkbox-risk-warning-input"
11546
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-warning-input"
11547
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-warning-input"
11944
11548
  />
11945
11549
  <span class="pf-v5-c-check__label">Warning</span>
11946
11550
  </label>
11947
11551
  <label
11948
11552
  class="pf-v5-c-check pf-v5-c-select__menu-item"
11949
- id="-select-checkbox-risk-restarted"
11950
- for="-select-checkbox-risk-restarted-input"
11553
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-restarted"
11554
+ for="static-bottom-pagination-demo-toolbar-select-checkbox-risk-restarted-input"
11951
11555
  >
11952
11556
  <input
11953
11557
  class="pf-v5-c-check__input"
11954
11558
  type="checkbox"
11955
- id="-select-checkbox-risk-restarted-input"
11956
- name="-select-checkbox-risk-restarted-input"
11559
+ id="static-bottom-pagination-demo-toolbar-select-checkbox-risk-restarted-input"
11560
+ name="static-bottom-pagination-demo-toolbar-select-checkbox-risk-restarted-input"
11957
11561
  />
11958
11562
  <span class="pf-v5-c-check__label">Restarted</span>
11959
11563
  </label>
@@ -11983,7 +11587,7 @@ wrapperTag: div
11983
11587
  <button
11984
11588
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
11985
11589
  type="button"
11986
- id="-top-pagination-toggle"
11590
+ id="static-bottom-pagination-demo-toolbar-top-pagination-toggle"
11987
11591
  aria-haspopup="listbox"
11988
11592
  aria-expanded="false"
11989
11593
  >
@@ -11998,7 +11602,7 @@ wrapperTag: div
11998
11602
  <ul
11999
11603
  class="pf-v5-c-options-menu__menu"
12000
11604
  role="menu"
12001
- aria-labelledby="-top-pagination-toggle"
11605
+ aria-labelledby="static-bottom-pagination-demo-toolbar-top-pagination-toggle"
12002
11606
  hidden
12003
11607
  >
12004
11608
  <li role="none">
@@ -12059,7 +11663,7 @@ wrapperTag: div
12059
11663
 
12060
11664
  <div
12061
11665
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
12062
- id="-expandable-content"
11666
+ id="static-bottom-pagination-demo-toolbar-expandable-content"
12063
11667
  hidden
12064
11668
  ></div>
12065
11669
  </div>
@@ -12956,7 +12560,7 @@ wrapperTag: div
12956
12560
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
12957
12561
  >
12958
12562
  <div class="pf-v5-c-card">
12959
- <div class="pf-v5-c-toolbar">
12563
+ <div class="pf-v5-c-toolbar" id="column-management-demo-toolbar">
12960
12564
  <div class="pf-v5-c-toolbar__content">
12961
12565
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
12962
12566
  <div
@@ -12964,65 +12568,46 @@ wrapperTag: div
12964
12568
  >
12965
12569
  <div class="pf-v5-c-toolbar__toggle">
12966
12570
  <button
12967
- class="pf-v5-c-button pf-m-plain"
12571
+ class="pf-v5-c-menu-toggle pf-m-plain"
12968
12572
  type="button"
12969
- aria-label="Show filters"
12970
12573
  aria-expanded="false"
12971
- aria-controls="-expandable-content"
12574
+ aria-label="Show filters"
12575
+ aria-controls="column-management-demo-toolbar-expandable-content"
12972
12576
  >
12973
12577
  <i class="fas fa-filter" aria-hidden="true"></i>
12974
12578
  </button>
12975
12579
  </div>
12976
12580
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
12977
- <div class="pf-v5-c-dropdown">
12978
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
12979
- <label
12980
- class="pf-v5-c-dropdown__toggle-check"
12981
- for="-bulk-select-toggle-check"
12982
- >
12983
- <div class="pf-v5-c-check pf-m-standalone">
12984
- <input
12985
- class="pf-v5-c-check__input"
12986
- type="checkbox"
12987
- id="-bulk-select-toggle-check"
12988
- aria-label="Select all"
12989
- />
12990
- </div>
12991
- </label>
12992
-
12993
- <button
12994
- class="pf-v5-c-dropdown__toggle-button"
12995
- type="button"
12996
- aria-expanded="false"
12997
- id="-bulk-select-toggle-button"
12998
- aria-label="Dropdown toggle"
12999
- >
13000
- <i class="fas fa-caret-down" aria-hidden="true"></i>
13001
- </button>
13002
- </div>
13003
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
13004
- <li role="none">
13005
- <button
13006
- class="pf-v5-c-dropdown__menu-item"
13007
- role="menuitem"
13008
- type="button"
13009
- >Select all</button>
13010
- </li>
13011
- <li role="none">
13012
- <button
13013
- class="pf-v5-c-dropdown__menu-item"
13014
- role="menuitem"
13015
- type="button"
13016
- >Select none</button>
13017
- </li>
13018
- <li role="none">
13019
- <button
13020
- class="pf-v5-c-dropdown__menu-item"
13021
- role="menuitem"
13022
- type="button"
13023
- >Other action</button>
13024
- </li>
13025
- </ul>
12581
+ <div
12582
+ class="pf-v5-c-menu-toggle pf-m-split-button"
12583
+ id="column-management-demo-toolbar-check"
12584
+ >
12585
+ <label
12586
+ class="pf-v5-c-check pf-m-standalone"
12587
+ id="column-management-demo-toolbar-check-check"
12588
+ for="column-management-demo-toolbar-check-check-input"
12589
+ >
12590
+ <input
12591
+ class="pf-v5-c-check__input"
12592
+ type="checkbox"
12593
+ id="column-management-demo-toolbar-check-check-input"
12594
+ name="column-management-demo-toolbar-check-check-input"
12595
+ aria-label="Standalone check"
12596
+ />
12597
+ </label>
12598
+ <button
12599
+ class="pf-v5-c-menu-toggle__button"
12600
+ type="button"
12601
+ aria-expanded="false"
12602
+ id="column-management-demo-toolbar-menu-toggle-toggle-button"
12603
+ aria-label="Menu toggle"
12604
+ >
12605
+ <span class="pf-v5-c-menu-toggle__controls">
12606
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
12607
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
12608
+ </span>
12609
+ </span>
12610
+ </button>
13026
12611
  </div>
13027
12612
  </div>
13028
12613
 
@@ -13033,72 +12618,22 @@ wrapperTag: div
13033
12618
  role="group"
13034
12619
  >
13035
12620
  <div class="pf-v5-c-input-group__item">
13036
- <div class="pf-v5-c-select" style="width: 124px">
13037
- <span id="-select-name-label" hidden>Choose one</span>
13038
-
13039
- <button
13040
- class="pf-v5-c-select__toggle"
13041
- type="button"
13042
- id="-select-name-toggle"
13043
- aria-haspopup="true"
13044
- aria-expanded="false"
13045
- aria-labelledby="-select-name-label -select-name-toggle"
13046
- >
13047
- <div class="pf-v5-c-select__toggle-wrapper">
13048
- <span class="pf-v5-c-select__toggle-icon">
13049
- <i class="fas fa-filter" aria-hidden="true"></i>
13050
- </span>
13051
- <span class="pf-v5-c-select__toggle-text">Name</span>
13052
- </div>
13053
- <span class="pf-v5-c-select__toggle-arrow">
12621
+ <button
12622
+ class="pf-v5-c-menu-toggle"
12623
+ type="button"
12624
+ aria-expanded="false"
12625
+ id="column-management-demo-toolbar-search-filter-menu"
12626
+ >
12627
+ <span class="pf-v5-c-menu-toggle__icon">
12628
+ <i class="fas fa-filter" aria-hidden="true"></i>
12629
+ </span>
12630
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
12631
+ <span class="pf-v5-c-menu-toggle__controls">
12632
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
13054
12633
  <i class="fas fa-caret-down" aria-hidden="true"></i>
13055
12634
  </span>
13056
- </button>
13057
-
13058
- <ul
13059
- class="pf-v5-c-select__menu"
13060
- role="listbox"
13061
- aria-labelledby="-select-name-label"
13062
- hidden
13063
- >
13064
- <li role="presentation">
13065
- <button
13066
- class="pf-v5-c-select__menu-item"
13067
- role="option"
13068
- >Running</button>
13069
- </li>
13070
- <li role="presentation">
13071
- <button
13072
- class="pf-v5-c-select__menu-item pf-m-selected"
13073
- role="option"
13074
- aria-selected="true"
13075
- >
13076
- Stopped
13077
- <span class="pf-v5-c-select__menu-item-icon">
13078
- <i class="fas fa-check" aria-hidden="true"></i>
13079
- </span>
13080
- </button>
13081
- </li>
13082
- <li role="presentation">
13083
- <button
13084
- class="pf-v5-c-select__menu-item"
13085
- role="option"
13086
- >Down</button>
13087
- </li>
13088
- <li role="presentation">
13089
- <button
13090
- class="pf-v5-c-select__menu-item"
13091
- role="option"
13092
- >Degraded</button>
13093
- </li>
13094
- <li role="presentation">
13095
- <button
13096
- class="pf-v5-c-select__menu-item"
13097
- role="option"
13098
- >Needs maintenance</button>
13099
- </li>
13100
- </ul>
13101
- </div>
12635
+ </span>
12636
+ </button>
13102
12637
  </div>
13103
12638
  <div class="pf-v5-c-input-group__item pf-m-fill">
13104
12639
  <div class="pf-v5-c-text-input-group">
@@ -13125,17 +12660,17 @@ wrapperTag: div
13125
12660
  <div class="pf-v5-c-toolbar__item">
13126
12661
  <div class="pf-v5-c-select">
13127
12662
  <span
13128
- id="-select-checkbox-status-label"
12663
+ id="column-management-demo-toolbar-select-checkbox-status-label"
13129
12664
  hidden
13130
12665
  >Choose many</span>
13131
12666
 
13132
12667
  <button
13133
12668
  class="pf-v5-c-select__toggle"
13134
12669
  type="button"
13135
- id="-select-checkbox-status-toggle"
12670
+ id="column-management-demo-toolbar-select-checkbox-status-toggle"
13136
12671
  aria-haspopup="true"
13137
12672
  aria-expanded="false"
13138
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
12673
+ aria-labelledby="column-management-demo-toolbar-select-checkbox-status-label column-management-demo-toolbar-select-checkbox-status-toggle"
13139
12674
  >
13140
12675
  <div class="pf-v5-c-select__toggle-wrapper">
13141
12676
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -13152,76 +12687,76 @@ wrapperTag: div
13152
12687
  >
13153
12688
  <label
13154
12689
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
13155
- id="-select-checkbox-status-active"
13156
- for="-select-checkbox-status-active-input"
12690
+ id="column-management-demo-toolbar-select-checkbox-status-active"
12691
+ for="column-management-demo-toolbar-select-checkbox-status-active-input"
13157
12692
  >
13158
12693
  <input
13159
12694
  class="pf-v5-c-check__input"
13160
12695
  type="checkbox"
13161
- aria-describedby="-select-checkbox-status-active-description"
13162
- id="-select-checkbox-status-active-input"
13163
- name="-select-checkbox-status-active-input"
12696
+ aria-describedby="column-management-demo-toolbar-select-checkbox-status-active-description"
12697
+ id="column-management-demo-toolbar-select-checkbox-status-active-input"
12698
+ name="column-management-demo-toolbar-select-checkbox-status-active-input"
13164
12699
  />
13165
12700
  <span class="pf-v5-c-check__label">Active</span>
13166
12701
  <span
13167
12702
  class="pf-v5-c-check__description"
13168
- id="-select-checkbox-status-active-description"
12703
+ id="column-management-demo-toolbar-select-checkbox-status-active-description"
13169
12704
  >This is a description</span>
13170
12705
  </label>
13171
12706
  <label
13172
12707
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
13173
- id="-select-checkbox-status-canceled"
13174
- for="-select-checkbox-status-canceled-input"
12708
+ id="column-management-demo-toolbar-select-checkbox-status-canceled"
12709
+ for="column-management-demo-toolbar-select-checkbox-status-canceled-input"
13175
12710
  >
13176
12711
  <input
13177
12712
  class="pf-v5-c-check__input"
13178
12713
  type="checkbox"
13179
- aria-describedby="-select-checkbox-status-canceled-description"
13180
- id="-select-checkbox-status-canceled-input"
13181
- name="-select-checkbox-status-canceled-input"
12714
+ aria-describedby="column-management-demo-toolbar-select-checkbox-status-canceled-description"
12715
+ id="column-management-demo-toolbar-select-checkbox-status-canceled-input"
12716
+ name="column-management-demo-toolbar-select-checkbox-status-canceled-input"
13182
12717
  />
13183
12718
  <span class="pf-v5-c-check__label">Canceled</span>
13184
12719
  <span
13185
12720
  class="pf-v5-c-check__description"
13186
- id="-select-checkbox-status-canceled-description"
12721
+ id="column-management-demo-toolbar-select-checkbox-status-canceled-description"
13187
12722
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
13188
12723
  </label>
13189
12724
  <label
13190
12725
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13191
- id="-select-checkbox-status-paused"
13192
- for="-select-checkbox-status-paused-input"
12726
+ id="column-management-demo-toolbar-select-checkbox-status-paused"
12727
+ for="column-management-demo-toolbar-select-checkbox-status-paused-input"
13193
12728
  >
13194
12729
  <input
13195
12730
  class="pf-v5-c-check__input"
13196
12731
  type="checkbox"
13197
- id="-select-checkbox-status-paused-input"
13198
- name="-select-checkbox-status-paused-input"
12732
+ id="column-management-demo-toolbar-select-checkbox-status-paused-input"
12733
+ name="column-management-demo-toolbar-select-checkbox-status-paused-input"
13199
12734
  />
13200
12735
  <span class="pf-v5-c-check__label">Paused</span>
13201
12736
  </label>
13202
12737
  <label
13203
12738
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13204
- id="-select-checkbox-status-warning"
13205
- for="-select-checkbox-status-warning-input"
12739
+ id="column-management-demo-toolbar-select-checkbox-status-warning"
12740
+ for="column-management-demo-toolbar-select-checkbox-status-warning-input"
13206
12741
  >
13207
12742
  <input
13208
12743
  class="pf-v5-c-check__input"
13209
12744
  type="checkbox"
13210
- id="-select-checkbox-status-warning-input"
13211
- name="-select-checkbox-status-warning-input"
12745
+ id="column-management-demo-toolbar-select-checkbox-status-warning-input"
12746
+ name="column-management-demo-toolbar-select-checkbox-status-warning-input"
13212
12747
  />
13213
12748
  <span class="pf-v5-c-check__label">Warning</span>
13214
12749
  </label>
13215
12750
  <label
13216
12751
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13217
- id="-select-checkbox-status-restarted"
13218
- for="-select-checkbox-status-restarted-input"
12752
+ id="column-management-demo-toolbar-select-checkbox-status-restarted"
12753
+ for="column-management-demo-toolbar-select-checkbox-status-restarted-input"
13219
12754
  >
13220
12755
  <input
13221
12756
  class="pf-v5-c-check__input"
13222
12757
  type="checkbox"
13223
- id="-select-checkbox-status-restarted-input"
13224
- name="-select-checkbox-status-restarted-input"
12758
+ id="column-management-demo-toolbar-select-checkbox-status-restarted-input"
12759
+ name="column-management-demo-toolbar-select-checkbox-status-restarted-input"
13225
12760
  />
13226
12761
  <span class="pf-v5-c-check__label">Restarted</span>
13227
12762
  </label>
@@ -13231,15 +12766,18 @@ wrapperTag: div
13231
12766
  </div>
13232
12767
  <div class="pf-v5-c-toolbar__item">
13233
12768
  <div class="pf-v5-c-select">
13234
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
12769
+ <span
12770
+ id="column-management-demo-toolbar-select-checkbox-risk-label"
12771
+ hidden
12772
+ >Choose many</span>
13235
12773
 
13236
12774
  <button
13237
12775
  class="pf-v5-c-select__toggle"
13238
12776
  type="button"
13239
- id="-select-checkbox-risk-toggle"
12777
+ id="column-management-demo-toolbar-select-checkbox-risk-toggle"
13240
12778
  aria-haspopup="true"
13241
12779
  aria-expanded="false"
13242
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
12780
+ aria-labelledby="column-management-demo-toolbar-select-checkbox-risk-label column-management-demo-toolbar-select-checkbox-risk-toggle"
13243
12781
  >
13244
12782
  <div class="pf-v5-c-select__toggle-wrapper">
13245
12783
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -13256,76 +12794,76 @@ wrapperTag: div
13256
12794
  >
13257
12795
  <label
13258
12796
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
13259
- id="-select-checkbox-risk-active"
13260
- for="-select-checkbox-risk-active-input"
12797
+ id="column-management-demo-toolbar-select-checkbox-risk-active"
12798
+ for="column-management-demo-toolbar-select-checkbox-risk-active-input"
13261
12799
  >
13262
12800
  <input
13263
12801
  class="pf-v5-c-check__input"
13264
12802
  type="checkbox"
13265
- aria-describedby="-select-checkbox-risk-active-description"
13266
- id="-select-checkbox-risk-active-input"
13267
- name="-select-checkbox-risk-active-input"
12803
+ aria-describedby="column-management-demo-toolbar-select-checkbox-risk-active-description"
12804
+ id="column-management-demo-toolbar-select-checkbox-risk-active-input"
12805
+ name="column-management-demo-toolbar-select-checkbox-risk-active-input"
13268
12806
  />
13269
12807
  <span class="pf-v5-c-check__label">Active</span>
13270
12808
  <span
13271
12809
  class="pf-v5-c-check__description"
13272
- id="-select-checkbox-risk-active-description"
12810
+ id="column-management-demo-toolbar-select-checkbox-risk-active-description"
13273
12811
  >This is a description</span>
13274
12812
  </label>
13275
12813
  <label
13276
12814
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
13277
- id="-select-checkbox-risk-canceled"
13278
- for="-select-checkbox-risk-canceled-input"
12815
+ id="column-management-demo-toolbar-select-checkbox-risk-canceled"
12816
+ for="column-management-demo-toolbar-select-checkbox-risk-canceled-input"
13279
12817
  >
13280
12818
  <input
13281
12819
  class="pf-v5-c-check__input"
13282
12820
  type="checkbox"
13283
- aria-describedby="-select-checkbox-risk-canceled-description"
13284
- id="-select-checkbox-risk-canceled-input"
13285
- name="-select-checkbox-risk-canceled-input"
12821
+ aria-describedby="column-management-demo-toolbar-select-checkbox-risk-canceled-description"
12822
+ id="column-management-demo-toolbar-select-checkbox-risk-canceled-input"
12823
+ name="column-management-demo-toolbar-select-checkbox-risk-canceled-input"
13286
12824
  />
13287
12825
  <span class="pf-v5-c-check__label">Canceled</span>
13288
12826
  <span
13289
12827
  class="pf-v5-c-check__description"
13290
- id="-select-checkbox-risk-canceled-description"
12828
+ id="column-management-demo-toolbar-select-checkbox-risk-canceled-description"
13291
12829
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
13292
12830
  </label>
13293
12831
  <label
13294
12832
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13295
- id="-select-checkbox-risk-paused"
13296
- for="-select-checkbox-risk-paused-input"
12833
+ id="column-management-demo-toolbar-select-checkbox-risk-paused"
12834
+ for="column-management-demo-toolbar-select-checkbox-risk-paused-input"
13297
12835
  >
13298
12836
  <input
13299
12837
  class="pf-v5-c-check__input"
13300
12838
  type="checkbox"
13301
- id="-select-checkbox-risk-paused-input"
13302
- name="-select-checkbox-risk-paused-input"
12839
+ id="column-management-demo-toolbar-select-checkbox-risk-paused-input"
12840
+ name="column-management-demo-toolbar-select-checkbox-risk-paused-input"
13303
12841
  />
13304
12842
  <span class="pf-v5-c-check__label">Paused</span>
13305
12843
  </label>
13306
12844
  <label
13307
12845
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13308
- id="-select-checkbox-risk-warning"
13309
- for="-select-checkbox-risk-warning-input"
12846
+ id="column-management-demo-toolbar-select-checkbox-risk-warning"
12847
+ for="column-management-demo-toolbar-select-checkbox-risk-warning-input"
13310
12848
  >
13311
12849
  <input
13312
12850
  class="pf-v5-c-check__input"
13313
12851
  type="checkbox"
13314
- id="-select-checkbox-risk-warning-input"
13315
- name="-select-checkbox-risk-warning-input"
12852
+ id="column-management-demo-toolbar-select-checkbox-risk-warning-input"
12853
+ name="column-management-demo-toolbar-select-checkbox-risk-warning-input"
13316
12854
  />
13317
12855
  <span class="pf-v5-c-check__label">Warning</span>
13318
12856
  </label>
13319
12857
  <label
13320
12858
  class="pf-v5-c-check pf-v5-c-select__menu-item"
13321
- id="-select-checkbox-risk-restarted"
13322
- for="-select-checkbox-risk-restarted-input"
12859
+ id="column-management-demo-toolbar-select-checkbox-risk-restarted"
12860
+ for="column-management-demo-toolbar-select-checkbox-risk-restarted-input"
13323
12861
  >
13324
12862
  <input
13325
12863
  class="pf-v5-c-check__input"
13326
12864
  type="checkbox"
13327
- id="-select-checkbox-risk-restarted-input"
13328
- name="-select-checkbox-risk-restarted-input"
12865
+ id="column-management-demo-toolbar-select-checkbox-risk-restarted-input"
12866
+ name="column-management-demo-toolbar-select-checkbox-risk-restarted-input"
13329
12867
  />
13330
12868
  <span class="pf-v5-c-check__label">Restarted</span>
13331
12869
  </label>
@@ -13355,7 +12893,7 @@ wrapperTag: div
13355
12893
  <button
13356
12894
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
13357
12895
  type="button"
13358
- id="-top-pagination-toggle"
12896
+ id="column-management-demo-toolbar-top-pagination-toggle"
13359
12897
  aria-haspopup="listbox"
13360
12898
  aria-expanded="false"
13361
12899
  >
@@ -13370,7 +12908,7 @@ wrapperTag: div
13370
12908
  <ul
13371
12909
  class="pf-v5-c-options-menu__menu"
13372
12910
  role="menu"
13373
- aria-labelledby="-top-pagination-toggle"
12911
+ aria-labelledby="column-management-demo-toolbar-top-pagination-toggle"
13374
12912
  hidden
13375
12913
  >
13376
12914
  <li role="none">
@@ -13431,7 +12969,7 @@ wrapperTag: div
13431
12969
 
13432
12970
  <div
13433
12971
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
13434
- id="-expandable-content"
12972
+ id="column-management-demo-toolbar-expandable-content"
13435
12973
  hidden
13436
12974
  ></div>
13437
12975
  </div>
@@ -14424,7 +13962,7 @@ wrapperTag: div
14424
13962
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
14425
13963
  >
14426
13964
  <div class="pf-v5-c-card">
14427
- <div class="pf-v5-c-toolbar">
13965
+ <div class="pf-v5-c-toolbar" id="sticky-header-demo-toolbar">
14428
13966
  <div class="pf-v5-c-toolbar__content">
14429
13967
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
14430
13968
  <div
@@ -14432,141 +13970,72 @@ wrapperTag: div
14432
13970
  >
14433
13971
  <div class="pf-v5-c-toolbar__toggle">
14434
13972
  <button
14435
- class="pf-v5-c-button pf-m-plain"
13973
+ class="pf-v5-c-menu-toggle pf-m-plain"
14436
13974
  type="button"
14437
- aria-label="Show filters"
14438
13975
  aria-expanded="false"
14439
- aria-controls="-expandable-content"
13976
+ aria-label="Show filters"
13977
+ aria-controls="sticky-header-demo-toolbar-expandable-content"
14440
13978
  >
14441
13979
  <i class="fas fa-filter" aria-hidden="true"></i>
14442
13980
  </button>
14443
13981
  </div>
14444
13982
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
14445
- <div class="pf-v5-c-dropdown">
14446
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
14447
- <label
14448
- class="pf-v5-c-dropdown__toggle-check"
14449
- for="-bulk-select-toggle-check"
14450
- >
14451
- <div class="pf-v5-c-check pf-m-standalone">
14452
- <input
14453
- class="pf-v5-c-check__input"
14454
- type="checkbox"
14455
- id="-bulk-select-toggle-check"
14456
- aria-label="Select all"
14457
- />
14458
- </div>
14459
- </label>
13983
+ <div
13984
+ class="pf-v5-c-menu-toggle pf-m-split-button"
13985
+ id="sticky-header-demo-toolbar-check"
13986
+ >
13987
+ <label
13988
+ class="pf-v5-c-check pf-m-standalone"
13989
+ id="sticky-header-demo-toolbar-check-check"
13990
+ for="sticky-header-demo-toolbar-check-check-input"
13991
+ >
13992
+ <input
13993
+ class="pf-v5-c-check__input"
13994
+ type="checkbox"
13995
+ id="sticky-header-demo-toolbar-check-check-input"
13996
+ name="sticky-header-demo-toolbar-check-check-input"
13997
+ aria-label="Standalone check"
13998
+ />
13999
+ </label>
14000
+ <button
14001
+ class="pf-v5-c-menu-toggle__button"
14002
+ type="button"
14003
+ aria-expanded="false"
14004
+ id="sticky-header-demo-toolbar-menu-toggle-toggle-button"
14005
+ aria-label="Menu toggle"
14006
+ >
14007
+ <span class="pf-v5-c-menu-toggle__controls">
14008
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
14009
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
14010
+ </span>
14011
+ </span>
14012
+ </button>
14013
+ </div>
14014
+ </div>
14460
14015
 
14016
+ <div class="pf-v5-c-toolbar__item pf-m-search-filter">
14017
+ <div
14018
+ class="pf-v5-c-input-group"
14019
+ aria-label="search filter"
14020
+ role="group"
14021
+ >
14022
+ <div class="pf-v5-c-input-group__item">
14461
14023
  <button
14462
- class="pf-v5-c-dropdown__toggle-button"
14024
+ class="pf-v5-c-menu-toggle"
14463
14025
  type="button"
14464
14026
  aria-expanded="false"
14465
- id="-bulk-select-toggle-button"
14466
- aria-label="Dropdown toggle"
14027
+ id="sticky-header-demo-toolbar-search-filter-menu"
14467
14028
  >
14468
- <i class="fas fa-caret-down" aria-hidden="true"></i>
14469
- </button>
14470
- </div>
14471
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
14472
- <li role="none">
14473
- <button
14474
- class="pf-v5-c-dropdown__menu-item"
14475
- role="menuitem"
14476
- type="button"
14477
- >Select all</button>
14478
- </li>
14479
- <li role="none">
14480
- <button
14481
- class="pf-v5-c-dropdown__menu-item"
14482
- role="menuitem"
14483
- type="button"
14484
- >Select none</button>
14485
- </li>
14486
- <li role="none">
14487
- <button
14488
- class="pf-v5-c-dropdown__menu-item"
14489
- role="menuitem"
14490
- type="button"
14491
- >Other action</button>
14492
- </li>
14493
- </ul>
14494
- </div>
14495
- </div>
14496
-
14497
- <div class="pf-v5-c-toolbar__item pf-m-search-filter">
14498
- <div
14499
- class="pf-v5-c-input-group"
14500
- aria-label="search filter"
14501
- role="group"
14502
- >
14503
- <div class="pf-v5-c-input-group__item">
14504
- <div class="pf-v5-c-select" style="width: 124px">
14505
- <span id="-select-name-label" hidden>Choose one</span>
14506
-
14507
- <button
14508
- class="pf-v5-c-select__toggle"
14509
- type="button"
14510
- id="-select-name-toggle"
14511
- aria-haspopup="true"
14512
- aria-expanded="false"
14513
- aria-labelledby="-select-name-label -select-name-toggle"
14514
- >
14515
- <div class="pf-v5-c-select__toggle-wrapper">
14516
- <span class="pf-v5-c-select__toggle-icon">
14517
- <i class="fas fa-filter" aria-hidden="true"></i>
14518
- </span>
14519
- <span class="pf-v5-c-select__toggle-text">Name</span>
14520
- </div>
14521
- <span class="pf-v5-c-select__toggle-arrow">
14029
+ <span class="pf-v5-c-menu-toggle__icon">
14030
+ <i class="fas fa-filter" aria-hidden="true"></i>
14031
+ </span>
14032
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
14033
+ <span class="pf-v5-c-menu-toggle__controls">
14034
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
14522
14035
  <i class="fas fa-caret-down" aria-hidden="true"></i>
14523
14036
  </span>
14524
- </button>
14525
-
14526
- <ul
14527
- class="pf-v5-c-select__menu"
14528
- role="listbox"
14529
- aria-labelledby="-select-name-label"
14530
- hidden
14531
- >
14532
- <li role="presentation">
14533
- <button
14534
- class="pf-v5-c-select__menu-item"
14535
- role="option"
14536
- >Running</button>
14537
- </li>
14538
- <li role="presentation">
14539
- <button
14540
- class="pf-v5-c-select__menu-item pf-m-selected"
14541
- role="option"
14542
- aria-selected="true"
14543
- >
14544
- Stopped
14545
- <span class="pf-v5-c-select__menu-item-icon">
14546
- <i class="fas fa-check" aria-hidden="true"></i>
14547
- </span>
14548
- </button>
14549
- </li>
14550
- <li role="presentation">
14551
- <button
14552
- class="pf-v5-c-select__menu-item"
14553
- role="option"
14554
- >Down</button>
14555
- </li>
14556
- <li role="presentation">
14557
- <button
14558
- class="pf-v5-c-select__menu-item"
14559
- role="option"
14560
- >Degraded</button>
14561
- </li>
14562
- <li role="presentation">
14563
- <button
14564
- class="pf-v5-c-select__menu-item"
14565
- role="option"
14566
- >Needs maintenance</button>
14567
- </li>
14568
- </ul>
14569
- </div>
14037
+ </span>
14038
+ </button>
14570
14039
  </div>
14571
14040
  <div class="pf-v5-c-input-group__item pf-m-fill">
14572
14041
  <div class="pf-v5-c-text-input-group">
@@ -14593,17 +14062,17 @@ wrapperTag: div
14593
14062
  <div class="pf-v5-c-toolbar__item">
14594
14063
  <div class="pf-v5-c-select">
14595
14064
  <span
14596
- id="-select-checkbox-status-label"
14065
+ id="sticky-header-demo-toolbar-select-checkbox-status-label"
14597
14066
  hidden
14598
14067
  >Choose many</span>
14599
14068
 
14600
14069
  <button
14601
14070
  class="pf-v5-c-select__toggle"
14602
14071
  type="button"
14603
- id="-select-checkbox-status-toggle"
14072
+ id="sticky-header-demo-toolbar-select-checkbox-status-toggle"
14604
14073
  aria-haspopup="true"
14605
14074
  aria-expanded="false"
14606
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
14075
+ aria-labelledby="sticky-header-demo-toolbar-select-checkbox-status-label sticky-header-demo-toolbar-select-checkbox-status-toggle"
14607
14076
  >
14608
14077
  <div class="pf-v5-c-select__toggle-wrapper">
14609
14078
  <span class="pf-v5-c-select__toggle-text">Status</span>
@@ -14620,76 +14089,76 @@ wrapperTag: div
14620
14089
  >
14621
14090
  <label
14622
14091
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
14623
- id="-select-checkbox-status-active"
14624
- for="-select-checkbox-status-active-input"
14092
+ id="sticky-header-demo-toolbar-select-checkbox-status-active"
14093
+ for="sticky-header-demo-toolbar-select-checkbox-status-active-input"
14625
14094
  >
14626
14095
  <input
14627
14096
  class="pf-v5-c-check__input"
14628
14097
  type="checkbox"
14629
- aria-describedby="-select-checkbox-status-active-description"
14630
- id="-select-checkbox-status-active-input"
14631
- name="-select-checkbox-status-active-input"
14098
+ aria-describedby="sticky-header-demo-toolbar-select-checkbox-status-active-description"
14099
+ id="sticky-header-demo-toolbar-select-checkbox-status-active-input"
14100
+ name="sticky-header-demo-toolbar-select-checkbox-status-active-input"
14632
14101
  />
14633
14102
  <span class="pf-v5-c-check__label">Active</span>
14634
14103
  <span
14635
14104
  class="pf-v5-c-check__description"
14636
- id="-select-checkbox-status-active-description"
14105
+ id="sticky-header-demo-toolbar-select-checkbox-status-active-description"
14637
14106
  >This is a description</span>
14638
14107
  </label>
14639
14108
  <label
14640
14109
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
14641
- id="-select-checkbox-status-canceled"
14642
- for="-select-checkbox-status-canceled-input"
14110
+ id="sticky-header-demo-toolbar-select-checkbox-status-canceled"
14111
+ for="sticky-header-demo-toolbar-select-checkbox-status-canceled-input"
14643
14112
  >
14644
14113
  <input
14645
14114
  class="pf-v5-c-check__input"
14646
14115
  type="checkbox"
14647
- aria-describedby="-select-checkbox-status-canceled-description"
14648
- id="-select-checkbox-status-canceled-input"
14649
- name="-select-checkbox-status-canceled-input"
14116
+ aria-describedby="sticky-header-demo-toolbar-select-checkbox-status-canceled-description"
14117
+ id="sticky-header-demo-toolbar-select-checkbox-status-canceled-input"
14118
+ name="sticky-header-demo-toolbar-select-checkbox-status-canceled-input"
14650
14119
  />
14651
14120
  <span class="pf-v5-c-check__label">Canceled</span>
14652
14121
  <span
14653
14122
  class="pf-v5-c-check__description"
14654
- id="-select-checkbox-status-canceled-description"
14123
+ id="sticky-header-demo-toolbar-select-checkbox-status-canceled-description"
14655
14124
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
14656
14125
  </label>
14657
14126
  <label
14658
14127
  class="pf-v5-c-check pf-v5-c-select__menu-item"
14659
- id="-select-checkbox-status-paused"
14660
- for="-select-checkbox-status-paused-input"
14128
+ id="sticky-header-demo-toolbar-select-checkbox-status-paused"
14129
+ for="sticky-header-demo-toolbar-select-checkbox-status-paused-input"
14661
14130
  >
14662
14131
  <input
14663
14132
  class="pf-v5-c-check__input"
14664
14133
  type="checkbox"
14665
- id="-select-checkbox-status-paused-input"
14666
- name="-select-checkbox-status-paused-input"
14134
+ id="sticky-header-demo-toolbar-select-checkbox-status-paused-input"
14135
+ name="sticky-header-demo-toolbar-select-checkbox-status-paused-input"
14667
14136
  />
14668
14137
  <span class="pf-v5-c-check__label">Paused</span>
14669
14138
  </label>
14670
14139
  <label
14671
14140
  class="pf-v5-c-check pf-v5-c-select__menu-item"
14672
- id="-select-checkbox-status-warning"
14673
- for="-select-checkbox-status-warning-input"
14141
+ id="sticky-header-demo-toolbar-select-checkbox-status-warning"
14142
+ for="sticky-header-demo-toolbar-select-checkbox-status-warning-input"
14674
14143
  >
14675
14144
  <input
14676
14145
  class="pf-v5-c-check__input"
14677
14146
  type="checkbox"
14678
- id="-select-checkbox-status-warning-input"
14679
- name="-select-checkbox-status-warning-input"
14147
+ id="sticky-header-demo-toolbar-select-checkbox-status-warning-input"
14148
+ name="sticky-header-demo-toolbar-select-checkbox-status-warning-input"
14680
14149
  />
14681
14150
  <span class="pf-v5-c-check__label">Warning</span>
14682
14151
  </label>
14683
14152
  <label
14684
14153
  class="pf-v5-c-check pf-v5-c-select__menu-item"
14685
- id="-select-checkbox-status-restarted"
14686
- for="-select-checkbox-status-restarted-input"
14154
+ id="sticky-header-demo-toolbar-select-checkbox-status-restarted"
14155
+ for="sticky-header-demo-toolbar-select-checkbox-status-restarted-input"
14687
14156
  >
14688
14157
  <input
14689
14158
  class="pf-v5-c-check__input"
14690
14159
  type="checkbox"
14691
- id="-select-checkbox-status-restarted-input"
14692
- name="-select-checkbox-status-restarted-input"
14160
+ id="sticky-header-demo-toolbar-select-checkbox-status-restarted-input"
14161
+ name="sticky-header-demo-toolbar-select-checkbox-status-restarted-input"
14693
14162
  />
14694
14163
  <span class="pf-v5-c-check__label">Restarted</span>
14695
14164
  </label>
@@ -14699,15 +14168,18 @@ wrapperTag: div
14699
14168
  </div>
14700
14169
  <div class="pf-v5-c-toolbar__item">
14701
14170
  <div class="pf-v5-c-select">
14702
- <span id="-select-checkbox-risk-label" hidden>Choose many</span>
14171
+ <span
14172
+ id="sticky-header-demo-toolbar-select-checkbox-risk-label"
14173
+ hidden
14174
+ >Choose many</span>
14703
14175
 
14704
14176
  <button
14705
14177
  class="pf-v5-c-select__toggle"
14706
14178
  type="button"
14707
- id="-select-checkbox-risk-toggle"
14179
+ id="sticky-header-demo-toolbar-select-checkbox-risk-toggle"
14708
14180
  aria-haspopup="true"
14709
14181
  aria-expanded="false"
14710
- aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
14182
+ aria-labelledby="sticky-header-demo-toolbar-select-checkbox-risk-label sticky-header-demo-toolbar-select-checkbox-risk-toggle"
14711
14183
  >
14712
14184
  <div class="pf-v5-c-select__toggle-wrapper">
14713
14185
  <span class="pf-v5-c-select__toggle-text">Risk</span>
@@ -14724,76 +14196,76 @@ wrapperTag: div
14724
14196
  >
14725
14197
  <label
14726
14198
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
14727
- id="-select-checkbox-risk-active"
14728
- for="-select-checkbox-risk-active-input"
14199
+ id="sticky-header-demo-toolbar-select-checkbox-risk-active"
14200
+ for="sticky-header-demo-toolbar-select-checkbox-risk-active-input"
14729
14201
  >
14730
14202
  <input
14731
14203
  class="pf-v5-c-check__input"
14732
14204
  type="checkbox"
14733
- aria-describedby="-select-checkbox-risk-active-description"
14734
- id="-select-checkbox-risk-active-input"
14735
- name="-select-checkbox-risk-active-input"
14205
+ aria-describedby="sticky-header-demo-toolbar-select-checkbox-risk-active-description"
14206
+ id="sticky-header-demo-toolbar-select-checkbox-risk-active-input"
14207
+ name="sticky-header-demo-toolbar-select-checkbox-risk-active-input"
14736
14208
  />
14737
14209
  <span class="pf-v5-c-check__label">Active</span>
14738
14210
  <span
14739
14211
  class="pf-v5-c-check__description"
14740
- id="-select-checkbox-risk-active-description"
14212
+ id="sticky-header-demo-toolbar-select-checkbox-risk-active-description"
14741
14213
  >This is a description</span>
14742
14214
  </label>
14743
14215
  <label
14744
14216
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
14745
- id="-select-checkbox-risk-canceled"
14746
- for="-select-checkbox-risk-canceled-input"
14217
+ id="sticky-header-demo-toolbar-select-checkbox-risk-canceled"
14218
+ for="sticky-header-demo-toolbar-select-checkbox-risk-canceled-input"
14747
14219
  >
14748
14220
  <input
14749
14221
  class="pf-v5-c-check__input"
14750
14222
  type="checkbox"
14751
- aria-describedby="-select-checkbox-risk-canceled-description"
14752
- id="-select-checkbox-risk-canceled-input"
14753
- name="-select-checkbox-risk-canceled-input"
14223
+ aria-describedby="sticky-header-demo-toolbar-select-checkbox-risk-canceled-description"
14224
+ id="sticky-header-demo-toolbar-select-checkbox-risk-canceled-input"
14225
+ name="sticky-header-demo-toolbar-select-checkbox-risk-canceled-input"
14754
14226
  />
14755
14227
  <span class="pf-v5-c-check__label">Canceled</span>
14756
14228
  <span
14757
14229
  class="pf-v5-c-check__description"
14758
- id="-select-checkbox-risk-canceled-description"
14230
+ id="sticky-header-demo-toolbar-select-checkbox-risk-canceled-description"
14759
14231
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
14760
14232
  </label>
14761
14233
  <label
14762
14234
  class="pf-v5-c-check pf-v5-c-select__menu-item"
14763
- id="-select-checkbox-risk-paused"
14764
- for="-select-checkbox-risk-paused-input"
14235
+ id="sticky-header-demo-toolbar-select-checkbox-risk-paused"
14236
+ for="sticky-header-demo-toolbar-select-checkbox-risk-paused-input"
14765
14237
  >
14766
14238
  <input
14767
14239
  class="pf-v5-c-check__input"
14768
14240
  type="checkbox"
14769
- id="-select-checkbox-risk-paused-input"
14770
- name="-select-checkbox-risk-paused-input"
14241
+ id="sticky-header-demo-toolbar-select-checkbox-risk-paused-input"
14242
+ name="sticky-header-demo-toolbar-select-checkbox-risk-paused-input"
14771
14243
  />
14772
14244
  <span class="pf-v5-c-check__label">Paused</span>
14773
14245
  </label>
14774
14246
  <label
14775
14247
  class="pf-v5-c-check pf-v5-c-select__menu-item"
14776
- id="-select-checkbox-risk-warning"
14777
- for="-select-checkbox-risk-warning-input"
14248
+ id="sticky-header-demo-toolbar-select-checkbox-risk-warning"
14249
+ for="sticky-header-demo-toolbar-select-checkbox-risk-warning-input"
14778
14250
  >
14779
14251
  <input
14780
14252
  class="pf-v5-c-check__input"
14781
14253
  type="checkbox"
14782
- id="-select-checkbox-risk-warning-input"
14783
- name="-select-checkbox-risk-warning-input"
14254
+ id="sticky-header-demo-toolbar-select-checkbox-risk-warning-input"
14255
+ name="sticky-header-demo-toolbar-select-checkbox-risk-warning-input"
14784
14256
  />
14785
14257
  <span class="pf-v5-c-check__label">Warning</span>
14786
14258
  </label>
14787
14259
  <label
14788
14260
  class="pf-v5-c-check pf-v5-c-select__menu-item"
14789
- id="-select-checkbox-risk-restarted"
14790
- for="-select-checkbox-risk-restarted-input"
14261
+ id="sticky-header-demo-toolbar-select-checkbox-risk-restarted"
14262
+ for="sticky-header-demo-toolbar-select-checkbox-risk-restarted-input"
14791
14263
  >
14792
14264
  <input
14793
14265
  class="pf-v5-c-check__input"
14794
14266
  type="checkbox"
14795
- id="-select-checkbox-risk-restarted-input"
14796
- name="-select-checkbox-risk-restarted-input"
14267
+ id="sticky-header-demo-toolbar-select-checkbox-risk-restarted-input"
14268
+ name="sticky-header-demo-toolbar-select-checkbox-risk-restarted-input"
14797
14269
  />
14798
14270
  <span class="pf-v5-c-check__label">Restarted</span>
14799
14271
  </label>
@@ -14823,7 +14295,7 @@ wrapperTag: div
14823
14295
  <button
14824
14296
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
14825
14297
  type="button"
14826
- id="-top-pagination-toggle"
14298
+ id="sticky-header-demo-toolbar-top-pagination-toggle"
14827
14299
  aria-haspopup="listbox"
14828
14300
  aria-expanded="false"
14829
14301
  >
@@ -14838,7 +14310,7 @@ wrapperTag: div
14838
14310
  <ul
14839
14311
  class="pf-v5-c-options-menu__menu"
14840
14312
  role="menu"
14841
- aria-labelledby="-top-pagination-toggle"
14313
+ aria-labelledby="sticky-header-demo-toolbar-top-pagination-toggle"
14842
14314
  hidden
14843
14315
  >
14844
14316
  <li role="none">
@@ -14899,7 +14371,7 @@ wrapperTag: div
14899
14371
 
14900
14372
  <div
14901
14373
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
14902
- id="-expandable-content"
14374
+ id="sticky-header-demo-toolbar-expandable-content"
14903
14375
  hidden
14904
14376
  ></div>
14905
14377
  </div>
@@ -15797,7 +15269,7 @@ wrapperTag: div
15797
15269
  >
15798
15270
  <div class="pf-v5-c-page__main-body">
15799
15271
  <div class="pf-v5-c-scroll-outer-wrapper">
15800
- <div class="pf-v5-c-toolbar">
15272
+ <div class="pf-v5-c-toolbar" id="sticky-first-column-demo-toolbar">
15801
15273
  <div class="pf-v5-c-toolbar__content">
15802
15274
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
15803
15275
  <div
@@ -15805,65 +15277,46 @@ wrapperTag: div
15805
15277
  >
15806
15278
  <div class="pf-v5-c-toolbar__toggle">
15807
15279
  <button
15808
- class="pf-v5-c-button pf-m-plain"
15280
+ class="pf-v5-c-menu-toggle pf-m-plain"
15809
15281
  type="button"
15810
- aria-label="Show filters"
15811
15282
  aria-expanded="false"
15812
- aria-controls="-expandable-content"
15283
+ aria-label="Show filters"
15284
+ aria-controls="sticky-first-column-demo-toolbar-expandable-content"
15813
15285
  >
15814
15286
  <i class="fas fa-filter" aria-hidden="true"></i>
15815
15287
  </button>
15816
15288
  </div>
15817
15289
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
15818
- <div class="pf-v5-c-dropdown">
15819
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
15820
- <label
15821
- class="pf-v5-c-dropdown__toggle-check"
15822
- for="-bulk-select-toggle-check"
15823
- >
15824
- <div class="pf-v5-c-check pf-m-standalone">
15825
- <input
15826
- class="pf-v5-c-check__input"
15827
- type="checkbox"
15828
- id="-bulk-select-toggle-check"
15829
- aria-label="Select all"
15830
- />
15831
- </div>
15832
- </label>
15833
-
15834
- <button
15835
- class="pf-v5-c-dropdown__toggle-button"
15836
- type="button"
15837
- aria-expanded="false"
15838
- id="-bulk-select-toggle-button"
15839
- aria-label="Dropdown toggle"
15840
- >
15841
- <i class="fas fa-caret-down" aria-hidden="true"></i>
15842
- </button>
15843
- </div>
15844
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
15845
- <li role="none">
15846
- <button
15847
- class="pf-v5-c-dropdown__menu-item"
15848
- role="menuitem"
15849
- type="button"
15850
- >Select all</button>
15851
- </li>
15852
- <li role="none">
15853
- <button
15854
- class="pf-v5-c-dropdown__menu-item"
15855
- role="menuitem"
15856
- type="button"
15857
- >Select none</button>
15858
- </li>
15859
- <li role="none">
15860
- <button
15861
- class="pf-v5-c-dropdown__menu-item"
15862
- role="menuitem"
15863
- type="button"
15864
- >Other action</button>
15865
- </li>
15866
- </ul>
15290
+ <div
15291
+ class="pf-v5-c-menu-toggle pf-m-split-button"
15292
+ id="sticky-first-column-demo-toolbar-check"
15293
+ >
15294
+ <label
15295
+ class="pf-v5-c-check pf-m-standalone"
15296
+ id="sticky-first-column-demo-toolbar-check-check"
15297
+ for="sticky-first-column-demo-toolbar-check-check-input"
15298
+ >
15299
+ <input
15300
+ class="pf-v5-c-check__input"
15301
+ type="checkbox"
15302
+ id="sticky-first-column-demo-toolbar-check-check-input"
15303
+ name="sticky-first-column-demo-toolbar-check-check-input"
15304
+ aria-label="Standalone check"
15305
+ />
15306
+ </label>
15307
+ <button
15308
+ class="pf-v5-c-menu-toggle__button"
15309
+ type="button"
15310
+ aria-expanded="false"
15311
+ id="sticky-first-column-demo-toolbar-menu-toggle-toggle-button"
15312
+ aria-label="Menu toggle"
15313
+ >
15314
+ <span class="pf-v5-c-menu-toggle__controls">
15315
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
15316
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
15317
+ </span>
15318
+ </span>
15319
+ </button>
15867
15320
  </div>
15868
15321
  </div>
15869
15322
 
@@ -15874,72 +15327,22 @@ wrapperTag: div
15874
15327
  role="group"
15875
15328
  >
15876
15329
  <div class="pf-v5-c-input-group__item">
15877
- <div class="pf-v5-c-select" style="width: 124px">
15878
- <span id="-select-name-label" hidden>Choose one</span>
15879
-
15880
- <button
15881
- class="pf-v5-c-select__toggle"
15882
- type="button"
15883
- id="-select-name-toggle"
15884
- aria-haspopup="true"
15885
- aria-expanded="false"
15886
- aria-labelledby="-select-name-label -select-name-toggle"
15887
- >
15888
- <div class="pf-v5-c-select__toggle-wrapper">
15889
- <span class="pf-v5-c-select__toggle-icon">
15890
- <i class="fas fa-filter" aria-hidden="true"></i>
15891
- </span>
15892
- <span class="pf-v5-c-select__toggle-text">Name</span>
15893
- </div>
15894
- <span class="pf-v5-c-select__toggle-arrow">
15330
+ <button
15331
+ class="pf-v5-c-menu-toggle"
15332
+ type="button"
15333
+ aria-expanded="false"
15334
+ id="sticky-first-column-demo-toolbar-search-filter-menu"
15335
+ >
15336
+ <span class="pf-v5-c-menu-toggle__icon">
15337
+ <i class="fas fa-filter" aria-hidden="true"></i>
15338
+ </span>
15339
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
15340
+ <span class="pf-v5-c-menu-toggle__controls">
15341
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
15895
15342
  <i class="fas fa-caret-down" aria-hidden="true"></i>
15896
15343
  </span>
15897
- </button>
15898
-
15899
- <ul
15900
- class="pf-v5-c-select__menu"
15901
- role="listbox"
15902
- aria-labelledby="-select-name-label"
15903
- hidden
15904
- >
15905
- <li role="presentation">
15906
- <button
15907
- class="pf-v5-c-select__menu-item"
15908
- role="option"
15909
- >Running</button>
15910
- </li>
15911
- <li role="presentation">
15912
- <button
15913
- class="pf-v5-c-select__menu-item pf-m-selected"
15914
- role="option"
15915
- aria-selected="true"
15916
- >
15917
- Stopped
15918
- <span class="pf-v5-c-select__menu-item-icon">
15919
- <i class="fas fa-check" aria-hidden="true"></i>
15920
- </span>
15921
- </button>
15922
- </li>
15923
- <li role="presentation">
15924
- <button
15925
- class="pf-v5-c-select__menu-item"
15926
- role="option"
15927
- >Down</button>
15928
- </li>
15929
- <li role="presentation">
15930
- <button
15931
- class="pf-v5-c-select__menu-item"
15932
- role="option"
15933
- >Degraded</button>
15934
- </li>
15935
- <li role="presentation">
15936
- <button
15937
- class="pf-v5-c-select__menu-item"
15938
- role="option"
15939
- >Needs maintenance</button>
15940
- </li>
15941
- </ul>
15942
- </div>
15344
+ </span>
15345
+ </button>
15943
15346
  </div>
15944
15347
  <div class="pf-v5-c-input-group__item pf-m-fill">
15945
15348
  <div class="pf-v5-c-text-input-group">
@@ -15976,7 +15379,10 @@ wrapperTag: div
15976
15379
  </button>
15977
15380
  </div>
15978
15381
 
15979
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
15382
+ <div
15383
+ class="pf-v5-c-overflow-menu"
15384
+ id="sticky-first-column-demo-toolbar-overflow-menu"
15385
+ >
15980
15386
  <div
15981
15387
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
15982
15388
  >
@@ -15994,7 +15400,7 @@ wrapperTag: div
15994
15400
  <button
15995
15401
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
15996
15402
  type="button"
15997
- id="-overflow-menu-dropdown-toggle"
15403
+ id="sticky-first-column-demo-toolbar-overflow-menu-dropdown-toggle"
15998
15404
  aria-label="Dropdown with additional options"
15999
15405
  aria-expanded="false"
16000
15406
  >
@@ -16003,7 +15409,7 @@ wrapperTag: div
16003
15409
  <ul
16004
15410
  class="pf-v5-c-dropdown__menu"
16005
15411
  role="menu"
16006
- aria-labelledby="-overflow-menu-dropdown-toggle"
15412
+ aria-labelledby="sticky-first-column-demo-toolbar-overflow-menu-dropdown-toggle"
16007
15413
  hidden
16008
15414
  >
16009
15415
  <li role="none">
@@ -16023,7 +15429,7 @@ wrapperTag: div
16023
15429
  <button
16024
15430
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
16025
15431
  type="button"
16026
- id="-top-pagination-toggle"
15432
+ id="sticky-first-column-demo-toolbar-top-pagination-toggle"
16027
15433
  aria-haspopup="listbox"
16028
15434
  aria-expanded="false"
16029
15435
  >
@@ -16038,7 +15444,7 @@ wrapperTag: div
16038
15444
  <ul
16039
15445
  class="pf-v5-c-options-menu__menu"
16040
15446
  role="menu"
16041
- aria-labelledby="-top-pagination-toggle"
15447
+ aria-labelledby="sticky-first-column-demo-toolbar-top-pagination-toggle"
16042
15448
  hidden
16043
15449
  >
16044
15450
  <li role="none">
@@ -16099,7 +15505,7 @@ wrapperTag: div
16099
15505
 
16100
15506
  <div
16101
15507
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
16102
- id="-expandable-content"
15508
+ id="sticky-first-column-demo-toolbar-expandable-content"
16103
15509
  hidden
16104
15510
  ></div>
16105
15511
  </div>
@@ -16954,7 +16360,10 @@ wrapperTag: div
16954
16360
  >
16955
16361
  <div class="pf-v5-c-page__main-body">
16956
16362
  <div class="pf-v5-c-scroll-outer-wrapper">
16957
- <div class="pf-v5-c-toolbar">
16363
+ <div
16364
+ class="pf-v5-c-toolbar"
16365
+ id="sticky-multiple-columns-demo-toolbar"
16366
+ >
16958
16367
  <div class="pf-v5-c-toolbar__content">
16959
16368
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
16960
16369
  <div
@@ -16962,65 +16371,46 @@ wrapperTag: div
16962
16371
  >
16963
16372
  <div class="pf-v5-c-toolbar__toggle">
16964
16373
  <button
16965
- class="pf-v5-c-button pf-m-plain"
16374
+ class="pf-v5-c-menu-toggle pf-m-plain"
16966
16375
  type="button"
16967
- aria-label="Show filters"
16968
16376
  aria-expanded="false"
16969
- aria-controls="-expandable-content"
16377
+ aria-label="Show filters"
16378
+ aria-controls="sticky-multiple-columns-demo-toolbar-expandable-content"
16970
16379
  >
16971
16380
  <i class="fas fa-filter" aria-hidden="true"></i>
16972
16381
  </button>
16973
16382
  </div>
16974
16383
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
16975
- <div class="pf-v5-c-dropdown">
16976
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
16977
- <label
16978
- class="pf-v5-c-dropdown__toggle-check"
16979
- for="-bulk-select-toggle-check"
16980
- >
16981
- <div class="pf-v5-c-check pf-m-standalone">
16982
- <input
16983
- class="pf-v5-c-check__input"
16984
- type="checkbox"
16985
- id="-bulk-select-toggle-check"
16986
- aria-label="Select all"
16987
- />
16988
- </div>
16989
- </label>
16990
-
16991
- <button
16992
- class="pf-v5-c-dropdown__toggle-button"
16993
- type="button"
16994
- aria-expanded="false"
16995
- id="-bulk-select-toggle-button"
16996
- aria-label="Dropdown toggle"
16997
- >
16998
- <i class="fas fa-caret-down" aria-hidden="true"></i>
16999
- </button>
17000
- </div>
17001
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
17002
- <li role="none">
17003
- <button
17004
- class="pf-v5-c-dropdown__menu-item"
17005
- role="menuitem"
17006
- type="button"
17007
- >Select all</button>
17008
- </li>
17009
- <li role="none">
17010
- <button
17011
- class="pf-v5-c-dropdown__menu-item"
17012
- role="menuitem"
17013
- type="button"
17014
- >Select none</button>
17015
- </li>
17016
- <li role="none">
17017
- <button
17018
- class="pf-v5-c-dropdown__menu-item"
17019
- role="menuitem"
17020
- type="button"
17021
- >Other action</button>
17022
- </li>
17023
- </ul>
16384
+ <div
16385
+ class="pf-v5-c-menu-toggle pf-m-split-button"
16386
+ id="sticky-multiple-columns-demo-toolbar-check"
16387
+ >
16388
+ <label
16389
+ class="pf-v5-c-check pf-m-standalone"
16390
+ id="sticky-multiple-columns-demo-toolbar-check-check"
16391
+ for="sticky-multiple-columns-demo-toolbar-check-check-input"
16392
+ >
16393
+ <input
16394
+ class="pf-v5-c-check__input"
16395
+ type="checkbox"
16396
+ id="sticky-multiple-columns-demo-toolbar-check-check-input"
16397
+ name="sticky-multiple-columns-demo-toolbar-check-check-input"
16398
+ aria-label="Standalone check"
16399
+ />
16400
+ </label>
16401
+ <button
16402
+ class="pf-v5-c-menu-toggle__button"
16403
+ type="button"
16404
+ aria-expanded="false"
16405
+ id="sticky-multiple-columns-demo-toolbar-menu-toggle-toggle-button"
16406
+ aria-label="Menu toggle"
16407
+ >
16408
+ <span class="pf-v5-c-menu-toggle__controls">
16409
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
16410
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
16411
+ </span>
16412
+ </span>
16413
+ </button>
17024
16414
  </div>
17025
16415
  </div>
17026
16416
 
@@ -17031,72 +16421,22 @@ wrapperTag: div
17031
16421
  role="group"
17032
16422
  >
17033
16423
  <div class="pf-v5-c-input-group__item">
17034
- <div class="pf-v5-c-select" style="width: 124px">
17035
- <span id="-select-name-label" hidden>Choose one</span>
17036
-
17037
- <button
17038
- class="pf-v5-c-select__toggle"
17039
- type="button"
17040
- id="-select-name-toggle"
17041
- aria-haspopup="true"
17042
- aria-expanded="false"
17043
- aria-labelledby="-select-name-label -select-name-toggle"
17044
- >
17045
- <div class="pf-v5-c-select__toggle-wrapper">
17046
- <span class="pf-v5-c-select__toggle-icon">
17047
- <i class="fas fa-filter" aria-hidden="true"></i>
17048
- </span>
17049
- <span class="pf-v5-c-select__toggle-text">Name</span>
17050
- </div>
17051
- <span class="pf-v5-c-select__toggle-arrow">
16424
+ <button
16425
+ class="pf-v5-c-menu-toggle"
16426
+ type="button"
16427
+ aria-expanded="false"
16428
+ id="sticky-multiple-columns-demo-toolbar-search-filter-menu"
16429
+ >
16430
+ <span class="pf-v5-c-menu-toggle__icon">
16431
+ <i class="fas fa-filter" aria-hidden="true"></i>
16432
+ </span>
16433
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
16434
+ <span class="pf-v5-c-menu-toggle__controls">
16435
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
17052
16436
  <i class="fas fa-caret-down" aria-hidden="true"></i>
17053
16437
  </span>
17054
- </button>
17055
-
17056
- <ul
17057
- class="pf-v5-c-select__menu"
17058
- role="listbox"
17059
- aria-labelledby="-select-name-label"
17060
- hidden
17061
- >
17062
- <li role="presentation">
17063
- <button
17064
- class="pf-v5-c-select__menu-item"
17065
- role="option"
17066
- >Running</button>
17067
- </li>
17068
- <li role="presentation">
17069
- <button
17070
- class="pf-v5-c-select__menu-item pf-m-selected"
17071
- role="option"
17072
- aria-selected="true"
17073
- >
17074
- Stopped
17075
- <span class="pf-v5-c-select__menu-item-icon">
17076
- <i class="fas fa-check" aria-hidden="true"></i>
17077
- </span>
17078
- </button>
17079
- </li>
17080
- <li role="presentation">
17081
- <button
17082
- class="pf-v5-c-select__menu-item"
17083
- role="option"
17084
- >Down</button>
17085
- </li>
17086
- <li role="presentation">
17087
- <button
17088
- class="pf-v5-c-select__menu-item"
17089
- role="option"
17090
- >Degraded</button>
17091
- </li>
17092
- <li role="presentation">
17093
- <button
17094
- class="pf-v5-c-select__menu-item"
17095
- role="option"
17096
- >Needs maintenance</button>
17097
- </li>
17098
- </ul>
17099
- </div>
16438
+ </span>
16439
+ </button>
17100
16440
  </div>
17101
16441
  <div class="pf-v5-c-input-group__item pf-m-fill">
17102
16442
  <div class="pf-v5-c-text-input-group">
@@ -17133,7 +16473,10 @@ wrapperTag: div
17133
16473
  </button>
17134
16474
  </div>
17135
16475
 
17136
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
16476
+ <div
16477
+ class="pf-v5-c-overflow-menu"
16478
+ id="sticky-multiple-columns-demo-toolbar-overflow-menu"
16479
+ >
17137
16480
  <div
17138
16481
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
17139
16482
  >
@@ -17151,7 +16494,7 @@ wrapperTag: div
17151
16494
  <button
17152
16495
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
17153
16496
  type="button"
17154
- id="-overflow-menu-dropdown-toggle"
16497
+ id="sticky-multiple-columns-demo-toolbar-overflow-menu-dropdown-toggle"
17155
16498
  aria-label="Dropdown with additional options"
17156
16499
  aria-expanded="false"
17157
16500
  >
@@ -17160,7 +16503,7 @@ wrapperTag: div
17160
16503
  <ul
17161
16504
  class="pf-v5-c-dropdown__menu"
17162
16505
  role="menu"
17163
- aria-labelledby="-overflow-menu-dropdown-toggle"
16506
+ aria-labelledby="sticky-multiple-columns-demo-toolbar-overflow-menu-dropdown-toggle"
17164
16507
  hidden
17165
16508
  >
17166
16509
  <li role="none">
@@ -17180,7 +16523,7 @@ wrapperTag: div
17180
16523
  <button
17181
16524
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
17182
16525
  type="button"
17183
- id="-top-pagination-toggle"
16526
+ id="sticky-multiple-columns-demo-toolbar-top-pagination-toggle"
17184
16527
  aria-haspopup="listbox"
17185
16528
  aria-expanded="false"
17186
16529
  >
@@ -17195,7 +16538,7 @@ wrapperTag: div
17195
16538
  <ul
17196
16539
  class="pf-v5-c-options-menu__menu"
17197
16540
  role="menu"
17198
- aria-labelledby="-top-pagination-toggle"
16541
+ aria-labelledby="sticky-multiple-columns-demo-toolbar-top-pagination-toggle"
17199
16542
  hidden
17200
16543
  >
17201
16544
  <li role="none">
@@ -17256,7 +16599,7 @@ wrapperTag: div
17256
16599
 
17257
16600
  <div
17258
16601
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
17259
- id="-expandable-content"
16602
+ id="sticky-multiple-columns-demo-toolbar-expandable-content"
17260
16603
  hidden
17261
16604
  ></div>
17262
16605
  </div>
@@ -18132,7 +17475,10 @@ wrapperTag: div
18132
17475
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll"
18133
17476
  >
18134
17477
  <div class="pf-v5-c-scroll-outer-wrapper">
18135
- <div class="pf-v5-c-toolbar">
17478
+ <div
17479
+ class="pf-v5-c-toolbar"
17480
+ id="sticky-header-and-multiple columns-demo-toolbar"
17481
+ >
18136
17482
  <div class="pf-v5-c-toolbar__content">
18137
17483
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
18138
17484
  <div
@@ -18140,65 +17486,46 @@ wrapperTag: div
18140
17486
  >
18141
17487
  <div class="pf-v5-c-toolbar__toggle">
18142
17488
  <button
18143
- class="pf-v5-c-button pf-m-plain"
17489
+ class="pf-v5-c-menu-toggle pf-m-plain"
18144
17490
  type="button"
18145
- aria-label="Show filters"
18146
17491
  aria-expanded="false"
18147
- aria-controls="-expandable-content"
17492
+ aria-label="Show filters"
17493
+ aria-controls="sticky-header-and-multiple columns-demo-toolbar-expandable-content"
18148
17494
  >
18149
17495
  <i class="fas fa-filter" aria-hidden="true"></i>
18150
17496
  </button>
18151
17497
  </div>
18152
17498
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
18153
- <div class="pf-v5-c-dropdown">
18154
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
18155
- <label
18156
- class="pf-v5-c-dropdown__toggle-check"
18157
- for="-bulk-select-toggle-check"
18158
- >
18159
- <div class="pf-v5-c-check pf-m-standalone">
18160
- <input
18161
- class="pf-v5-c-check__input"
18162
- type="checkbox"
18163
- id="-bulk-select-toggle-check"
18164
- aria-label="Select all"
18165
- />
18166
- </div>
18167
- </label>
18168
-
18169
- <button
18170
- class="pf-v5-c-dropdown__toggle-button"
18171
- type="button"
18172
- aria-expanded="false"
18173
- id="-bulk-select-toggle-button"
18174
- aria-label="Dropdown toggle"
18175
- >
18176
- <i class="fas fa-caret-down" aria-hidden="true"></i>
18177
- </button>
18178
- </div>
18179
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
18180
- <li role="none">
18181
- <button
18182
- class="pf-v5-c-dropdown__menu-item"
18183
- role="menuitem"
18184
- type="button"
18185
- >Select all</button>
18186
- </li>
18187
- <li role="none">
18188
- <button
18189
- class="pf-v5-c-dropdown__menu-item"
18190
- role="menuitem"
18191
- type="button"
18192
- >Select none</button>
18193
- </li>
18194
- <li role="none">
18195
- <button
18196
- class="pf-v5-c-dropdown__menu-item"
18197
- role="menuitem"
18198
- type="button"
18199
- >Other action</button>
18200
- </li>
18201
- </ul>
17499
+ <div
17500
+ class="pf-v5-c-menu-toggle pf-m-split-button"
17501
+ id="sticky-header-and-multiple columns-demo-toolbar-check"
17502
+ >
17503
+ <label
17504
+ class="pf-v5-c-check pf-m-standalone"
17505
+ id="sticky-header-and-multiple columns-demo-toolbar-check-check"
17506
+ for="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
17507
+ >
17508
+ <input
17509
+ class="pf-v5-c-check__input"
17510
+ type="checkbox"
17511
+ id="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
17512
+ name="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
17513
+ aria-label="Standalone check"
17514
+ />
17515
+ </label>
17516
+ <button
17517
+ class="pf-v5-c-menu-toggle__button"
17518
+ type="button"
17519
+ aria-expanded="false"
17520
+ id="sticky-header-and-multiple columns-demo-toolbar-menu-toggle-toggle-button"
17521
+ aria-label="Menu toggle"
17522
+ >
17523
+ <span class="pf-v5-c-menu-toggle__controls">
17524
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
17525
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
17526
+ </span>
17527
+ </span>
17528
+ </button>
18202
17529
  </div>
18203
17530
  </div>
18204
17531
 
@@ -18209,72 +17536,22 @@ wrapperTag: div
18209
17536
  role="group"
18210
17537
  >
18211
17538
  <div class="pf-v5-c-input-group__item">
18212
- <div class="pf-v5-c-select" style="width: 124px">
18213
- <span id="-select-name-label" hidden>Choose one</span>
18214
-
18215
- <button
18216
- class="pf-v5-c-select__toggle"
18217
- type="button"
18218
- id="-select-name-toggle"
18219
- aria-haspopup="true"
18220
- aria-expanded="false"
18221
- aria-labelledby="-select-name-label -select-name-toggle"
18222
- >
18223
- <div class="pf-v5-c-select__toggle-wrapper">
18224
- <span class="pf-v5-c-select__toggle-icon">
18225
- <i class="fas fa-filter" aria-hidden="true"></i>
18226
- </span>
18227
- <span class="pf-v5-c-select__toggle-text">Name</span>
18228
- </div>
18229
- <span class="pf-v5-c-select__toggle-arrow">
17539
+ <button
17540
+ class="pf-v5-c-menu-toggle"
17541
+ type="button"
17542
+ aria-expanded="false"
17543
+ id="sticky-header-and-multiple columns-demo-toolbar-search-filter-menu"
17544
+ >
17545
+ <span class="pf-v5-c-menu-toggle__icon">
17546
+ <i class="fas fa-filter" aria-hidden="true"></i>
17547
+ </span>
17548
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
17549
+ <span class="pf-v5-c-menu-toggle__controls">
17550
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
18230
17551
  <i class="fas fa-caret-down" aria-hidden="true"></i>
18231
17552
  </span>
18232
- </button>
18233
-
18234
- <ul
18235
- class="pf-v5-c-select__menu"
18236
- role="listbox"
18237
- aria-labelledby="-select-name-label"
18238
- hidden
18239
- >
18240
- <li role="presentation">
18241
- <button
18242
- class="pf-v5-c-select__menu-item"
18243
- role="option"
18244
- >Running</button>
18245
- </li>
18246
- <li role="presentation">
18247
- <button
18248
- class="pf-v5-c-select__menu-item pf-m-selected"
18249
- role="option"
18250
- aria-selected="true"
18251
- >
18252
- Stopped
18253
- <span class="pf-v5-c-select__menu-item-icon">
18254
- <i class="fas fa-check" aria-hidden="true"></i>
18255
- </span>
18256
- </button>
18257
- </li>
18258
- <li role="presentation">
18259
- <button
18260
- class="pf-v5-c-select__menu-item"
18261
- role="option"
18262
- >Down</button>
18263
- </li>
18264
- <li role="presentation">
18265
- <button
18266
- class="pf-v5-c-select__menu-item"
18267
- role="option"
18268
- >Degraded</button>
18269
- </li>
18270
- <li role="presentation">
18271
- <button
18272
- class="pf-v5-c-select__menu-item"
18273
- role="option"
18274
- >Needs maintenance</button>
18275
- </li>
18276
- </ul>
18277
- </div>
17553
+ </span>
17554
+ </button>
18278
17555
  </div>
18279
17556
  <div class="pf-v5-c-input-group__item pf-m-fill">
18280
17557
  <div class="pf-v5-c-text-input-group">
@@ -18311,7 +17588,10 @@ wrapperTag: div
18311
17588
  </button>
18312
17589
  </div>
18313
17590
 
18314
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
17591
+ <div
17592
+ class="pf-v5-c-overflow-menu"
17593
+ id="sticky-header-and-multiple columns-demo-toolbar-overflow-menu"
17594
+ >
18315
17595
  <div
18316
17596
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
18317
17597
  >
@@ -18329,7 +17609,7 @@ wrapperTag: div
18329
17609
  <button
18330
17610
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
18331
17611
  type="button"
18332
- id="-overflow-menu-dropdown-toggle"
17612
+ id="sticky-header-and-multiple columns-demo-toolbar-overflow-menu-dropdown-toggle"
18333
17613
  aria-label="Dropdown with additional options"
18334
17614
  aria-expanded="false"
18335
17615
  >
@@ -18338,7 +17618,7 @@ wrapperTag: div
18338
17618
  <ul
18339
17619
  class="pf-v5-c-dropdown__menu"
18340
17620
  role="menu"
18341
- aria-labelledby="-overflow-menu-dropdown-toggle"
17621
+ aria-labelledby="sticky-header-and-multiple columns-demo-toolbar-overflow-menu-dropdown-toggle"
18342
17622
  hidden
18343
17623
  >
18344
17624
  <li role="none">
@@ -18358,7 +17638,7 @@ wrapperTag: div
18358
17638
  <button
18359
17639
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
18360
17640
  type="button"
18361
- id="-top-pagination-toggle"
17641
+ id="sticky-header-and-multiple columns-demo-toolbar-top-pagination-toggle"
18362
17642
  aria-haspopup="listbox"
18363
17643
  aria-expanded="false"
18364
17644
  >
@@ -18373,7 +17653,7 @@ wrapperTag: div
18373
17653
  <ul
18374
17654
  class="pf-v5-c-options-menu__menu"
18375
17655
  role="menu"
18376
- aria-labelledby="-top-pagination-toggle"
17656
+ aria-labelledby="sticky-header-and-multiple columns-demo-toolbar-top-pagination-toggle"
18377
17657
  hidden
18378
17658
  >
18379
17659
  <li role="none">
@@ -18434,7 +17714,7 @@ wrapperTag: div
18434
17714
 
18435
17715
  <div
18436
17716
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
18437
- id="-expandable-content"
17717
+ id="sticky-header-and-multiple columns-demo-toolbar-expandable-content"
18438
17718
  hidden
18439
17719
  ></div>
18440
17720
  </div>
@@ -19309,7 +18589,10 @@ wrapperTag: div
19309
18589
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll"
19310
18590
  >
19311
18591
  <div class="pf-v5-c-scroll-outer-wrapper">
19312
- <div class="pf-v5-c-toolbar">
18592
+ <div
18593
+ class="pf-v5-c-toolbar"
18594
+ id="sticky-header-and-multiple columns-demo-toolbar"
18595
+ >
19313
18596
  <div class="pf-v5-c-toolbar__content">
19314
18597
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
19315
18598
  <div
@@ -19317,65 +18600,46 @@ wrapperTag: div
19317
18600
  >
19318
18601
  <div class="pf-v5-c-toolbar__toggle">
19319
18602
  <button
19320
- class="pf-v5-c-button pf-m-plain"
18603
+ class="pf-v5-c-menu-toggle pf-m-plain"
19321
18604
  type="button"
19322
- aria-label="Show filters"
19323
18605
  aria-expanded="false"
19324
- aria-controls="-expandable-content"
18606
+ aria-label="Show filters"
18607
+ aria-controls="sticky-header-and-multiple columns-demo-toolbar-expandable-content"
19325
18608
  >
19326
18609
  <i class="fas fa-filter" aria-hidden="true"></i>
19327
18610
  </button>
19328
18611
  </div>
19329
18612
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
19330
- <div class="pf-v5-c-dropdown">
19331
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
19332
- <label
19333
- class="pf-v5-c-dropdown__toggle-check"
19334
- for="-bulk-select-toggle-check"
19335
- >
19336
- <div class="pf-v5-c-check pf-m-standalone">
19337
- <input
19338
- class="pf-v5-c-check__input"
19339
- type="checkbox"
19340
- id="-bulk-select-toggle-check"
19341
- aria-label="Select all"
19342
- />
19343
- </div>
19344
- </label>
19345
-
19346
- <button
19347
- class="pf-v5-c-dropdown__toggle-button"
19348
- type="button"
19349
- aria-expanded="false"
19350
- id="-bulk-select-toggle-button"
19351
- aria-label="Dropdown toggle"
19352
- >
19353
- <i class="fas fa-caret-down" aria-hidden="true"></i>
19354
- </button>
19355
- </div>
19356
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
19357
- <li role="none">
19358
- <button
19359
- class="pf-v5-c-dropdown__menu-item"
19360
- role="menuitem"
19361
- type="button"
19362
- >Select all</button>
19363
- </li>
19364
- <li role="none">
19365
- <button
19366
- class="pf-v5-c-dropdown__menu-item"
19367
- role="menuitem"
19368
- type="button"
19369
- >Select none</button>
19370
- </li>
19371
- <li role="none">
19372
- <button
19373
- class="pf-v5-c-dropdown__menu-item"
19374
- role="menuitem"
19375
- type="button"
19376
- >Other action</button>
19377
- </li>
19378
- </ul>
18613
+ <div
18614
+ class="pf-v5-c-menu-toggle pf-m-split-button"
18615
+ id="sticky-header-and-multiple columns-demo-toolbar-check"
18616
+ >
18617
+ <label
18618
+ class="pf-v5-c-check pf-m-standalone"
18619
+ id="sticky-header-and-multiple columns-demo-toolbar-check-check"
18620
+ for="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
18621
+ >
18622
+ <input
18623
+ class="pf-v5-c-check__input"
18624
+ type="checkbox"
18625
+ id="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
18626
+ name="sticky-header-and-multiple columns-demo-toolbar-check-check-input"
18627
+ aria-label="Standalone check"
18628
+ />
18629
+ </label>
18630
+ <button
18631
+ class="pf-v5-c-menu-toggle__button"
18632
+ type="button"
18633
+ aria-expanded="false"
18634
+ id="sticky-header-and-multiple columns-demo-toolbar-menu-toggle-toggle-button"
18635
+ aria-label="Menu toggle"
18636
+ >
18637
+ <span class="pf-v5-c-menu-toggle__controls">
18638
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
18639
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
18640
+ </span>
18641
+ </span>
18642
+ </button>
19379
18643
  </div>
19380
18644
  </div>
19381
18645
 
@@ -19386,72 +18650,22 @@ wrapperTag: div
19386
18650
  role="group"
19387
18651
  >
19388
18652
  <div class="pf-v5-c-input-group__item">
19389
- <div class="pf-v5-c-select" style="width: 124px">
19390
- <span id="-select-name-label" hidden>Choose one</span>
19391
-
19392
- <button
19393
- class="pf-v5-c-select__toggle"
19394
- type="button"
19395
- id="-select-name-toggle"
19396
- aria-haspopup="true"
19397
- aria-expanded="false"
19398
- aria-labelledby="-select-name-label -select-name-toggle"
19399
- >
19400
- <div class="pf-v5-c-select__toggle-wrapper">
19401
- <span class="pf-v5-c-select__toggle-icon">
19402
- <i class="fas fa-filter" aria-hidden="true"></i>
19403
- </span>
19404
- <span class="pf-v5-c-select__toggle-text">Name</span>
19405
- </div>
19406
- <span class="pf-v5-c-select__toggle-arrow">
18653
+ <button
18654
+ class="pf-v5-c-menu-toggle"
18655
+ type="button"
18656
+ aria-expanded="false"
18657
+ id="sticky-header-and-multiple columns-demo-toolbar-search-filter-menu"
18658
+ >
18659
+ <span class="pf-v5-c-menu-toggle__icon">
18660
+ <i class="fas fa-filter" aria-hidden="true"></i>
18661
+ </span>
18662
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
18663
+ <span class="pf-v5-c-menu-toggle__controls">
18664
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
19407
18665
  <i class="fas fa-caret-down" aria-hidden="true"></i>
19408
18666
  </span>
19409
- </button>
19410
-
19411
- <ul
19412
- class="pf-v5-c-select__menu"
19413
- role="listbox"
19414
- aria-labelledby="-select-name-label"
19415
- hidden
19416
- >
19417
- <li role="presentation">
19418
- <button
19419
- class="pf-v5-c-select__menu-item"
19420
- role="option"
19421
- >Running</button>
19422
- </li>
19423
- <li role="presentation">
19424
- <button
19425
- class="pf-v5-c-select__menu-item pf-m-selected"
19426
- role="option"
19427
- aria-selected="true"
19428
- >
19429
- Stopped
19430
- <span class="pf-v5-c-select__menu-item-icon">
19431
- <i class="fas fa-check" aria-hidden="true"></i>
19432
- </span>
19433
- </button>
19434
- </li>
19435
- <li role="presentation">
19436
- <button
19437
- class="pf-v5-c-select__menu-item"
19438
- role="option"
19439
- >Down</button>
19440
- </li>
19441
- <li role="presentation">
19442
- <button
19443
- class="pf-v5-c-select__menu-item"
19444
- role="option"
19445
- >Degraded</button>
19446
- </li>
19447
- <li role="presentation">
19448
- <button
19449
- class="pf-v5-c-select__menu-item"
19450
- role="option"
19451
- >Needs maintenance</button>
19452
- </li>
19453
- </ul>
19454
- </div>
18667
+ </span>
18668
+ </button>
19455
18669
  </div>
19456
18670
  <div class="pf-v5-c-input-group__item pf-m-fill">
19457
18671
  <div class="pf-v5-c-text-input-group">
@@ -19488,7 +18702,10 @@ wrapperTag: div
19488
18702
  </button>
19489
18703
  </div>
19490
18704
 
19491
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
18705
+ <div
18706
+ class="pf-v5-c-overflow-menu"
18707
+ id="sticky-header-and-multiple columns-demo-toolbar-overflow-menu"
18708
+ >
19492
18709
  <div
19493
18710
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
19494
18711
  >
@@ -19506,7 +18723,7 @@ wrapperTag: div
19506
18723
  <button
19507
18724
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
19508
18725
  type="button"
19509
- id="-overflow-menu-dropdown-toggle"
18726
+ id="sticky-header-and-multiple columns-demo-toolbar-overflow-menu-dropdown-toggle"
19510
18727
  aria-label="Dropdown with additional options"
19511
18728
  aria-expanded="false"
19512
18729
  >
@@ -19515,7 +18732,7 @@ wrapperTag: div
19515
18732
  <ul
19516
18733
  class="pf-v5-c-dropdown__menu"
19517
18734
  role="menu"
19518
- aria-labelledby="-overflow-menu-dropdown-toggle"
18735
+ aria-labelledby="sticky-header-and-multiple columns-demo-toolbar-overflow-menu-dropdown-toggle"
19519
18736
  hidden
19520
18737
  >
19521
18738
  <li role="none">
@@ -19535,7 +18752,7 @@ wrapperTag: div
19535
18752
  <button
19536
18753
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
19537
18754
  type="button"
19538
- id="-top-pagination-toggle"
18755
+ id="sticky-header-and-multiple columns-demo-toolbar-top-pagination-toggle"
19539
18756
  aria-haspopup="listbox"
19540
18757
  aria-expanded="false"
19541
18758
  >
@@ -19550,7 +18767,7 @@ wrapperTag: div
19550
18767
  <ul
19551
18768
  class="pf-v5-c-options-menu__menu"
19552
18769
  role="menu"
19553
- aria-labelledby="-top-pagination-toggle"
18770
+ aria-labelledby="sticky-header-and-multiple columns-demo-toolbar-top-pagination-toggle"
19554
18771
  hidden
19555
18772
  >
19556
18773
  <li role="none">
@@ -19611,7 +18828,7 @@ wrapperTag: div
19611
18828
 
19612
18829
  <div
19613
18830
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
19614
- id="-expandable-content"
18831
+ id="sticky-header-and-multiple columns-demo-toolbar-expandable-content"
19615
18832
  hidden
19616
18833
  ></div>
19617
18834
  </div>