@patternfly/patternfly 6.0.0-alpha.97 → 6.0.0-alpha.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/components/Card/card.css +1 -0
  2. package/components/Card/card.scss +1 -0
  3. package/components/Check/check.css +10 -3
  4. package/components/Check/check.scss +17 -4
  5. package/components/Masthead/masthead.css +17 -9
  6. package/components/Masthead/masthead.scss +18 -9
  7. package/components/MenuToggle/menu-toggle.css +20 -6
  8. package/components/MenuToggle/menu-toggle.scss +32 -6
  9. package/components/ModalBox/modal-box.css +11 -7
  10. package/components/ModalBox/modal-box.scss +27 -12
  11. package/components/Nav/nav.css +64 -110
  12. package/components/Nav/nav.scss +70 -143
  13. package/components/Page/page.css +9 -17
  14. package/components/Page/page.scss +10 -23
  15. package/components/Radio/radio.css +12 -5
  16. package/components/Radio/radio.scss +21 -6
  17. package/components/Table/table-grid.css +30 -35
  18. package/components/Table/table-grid.scss +44 -32
  19. package/components/Table/table-scrollable.css +14 -6
  20. package/components/Table/table-scrollable.scss +6 -1
  21. package/components/Table/table-tree-view.css +5 -5
  22. package/components/Table/table-tree-view.scss +14 -8
  23. package/components/Table/table.css +90 -254
  24. package/components/Table/table.scss +158 -347
  25. package/components/Toolbar/toolbar.css +66 -2
  26. package/components/Toolbar/toolbar.scss +21 -2
  27. package/docs/components/AboutModalBox/examples/AboutModalBox.md +12 -12
  28. package/docs/components/Accordion/examples/Accordion.md +19 -19
  29. package/docs/components/ActionList/examples/ActionList.md +5 -5
  30. package/docs/components/Alert/examples/Alert.md +26 -26
  31. package/docs/components/AppLauncher/deprecated/application-launcher.md +31 -31
  32. package/docs/components/Avatar/examples/Avatar.md +8 -8
  33. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  34. package/docs/components/Backdrop/examples/Backdrop.md +3 -3
  35. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  36. package/docs/components/Badge/examples/Badge.md +6 -6
  37. package/docs/components/Banner/examples/Banner.md +17 -17
  38. package/docs/components/Brand/examples/Brand.css +3 -3
  39. package/docs/components/Brand/examples/Brand.md +7 -7
  40. package/docs/components/Breadcrumb/examples/Breadcrumb.md +12 -12
  41. package/docs/components/Button/examples/Button.css +2 -2
  42. package/docs/components/Button/examples/Button.md +35 -35
  43. package/docs/components/CalendarMonth/examples/CalendarMonth.md +29 -29
  44. package/docs/components/Card/examples/Card.md +30 -30
  45. package/docs/components/Check/examples/Check.md +12 -12
  46. package/docs/components/Chip/examples/Chip.md +21 -21
  47. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +19 -19
  48. package/docs/components/CodeBlock/examples/CodeBlock.md +8 -8
  49. package/docs/components/CodeEditor/examples/CodeEditor.md +14 -14
  50. package/docs/components/Content/examples/Content.md +5 -5
  51. package/docs/components/ContextSelector/deprecated/context-selector.md +23 -23
  52. package/docs/components/DataList/examples/DataList.md +177 -112
  53. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  54. package/docs/components/DescriptionList/examples/DescriptionList.md +29 -29
  55. package/docs/components/Divider/examples/Divider.md +7 -7
  56. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  57. package/docs/components/Drawer/examples/Drawer.md +36 -36
  58. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  59. package/docs/components/Dropdown/deprecated/Dropdown.md +47 -47
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +41 -41
  61. package/docs/components/EmptyState/examples/EmptyState.md +21 -21
  62. package/docs/components/ExpandableSection/examples/ExpandableSection.md +18 -18
  63. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  64. package/docs/components/Form/examples/Form.md +52 -52
  65. package/docs/components/FormControl/examples/FormControl.md +22 -22
  66. package/docs/components/HelperText/examples/HelperText.md +11 -11
  67. package/docs/components/Hint/examples/Hint.md +6 -6
  68. package/docs/components/Icon/examples/Icon.md +13 -13
  69. package/docs/components/InlineEdit/examples/InlineEdit.md +54 -138
  70. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  71. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  72. package/docs/components/Label/examples/Label.css +4 -4
  73. package/docs/components/Label/examples/Label.md +45 -45
  74. package/docs/components/List/examples/List.md +6 -6
  75. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  76. package/docs/components/LogViewer/examples/LogViewer.md +35 -35
  77. package/docs/components/Login/examples/Login.md +21 -21
  78. package/docs/components/Masthead/examples/masthead.md +7 -7
  79. package/docs/components/Menu/examples/Menu.md +60 -60
  80. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -22
  81. package/docs/components/ModalBox/examples/ModalBox.md +75 -34
  82. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +21 -21
  83. package/docs/components/Nav/examples/Navigation.css +20 -3
  84. package/docs/components/Nav/examples/Navigation.md +44 -50
  85. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  86. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +36 -36
  87. package/docs/components/NumberInput/examples/NumberInput.md +13 -13
  88. package/docs/components/OptionsMenu/deprecated/options-menu.md +22 -22
  89. package/docs/components/OverflowMenu/examples/overflow-menu.md +20 -20
  90. package/docs/components/Page/deprecated/PageHeader.md +30 -30
  91. package/docs/components/Page/examples/Page.md +55 -54
  92. package/docs/components/Pagination/examples/Pagination.md +25 -25
  93. package/docs/components/Panel/examples/Panel.md +10 -10
  94. package/docs/components/Popover/examples/Popover.md +30 -30
  95. package/docs/components/Progress/examples/Progress.md +31 -31
  96. package/docs/components/ProgressStepper/examples/ProgressStepper.md +17 -17
  97. package/docs/components/Radio/examples/Radio.md +9 -9
  98. package/docs/components/Select/deprecated/Select.md +110 -110
  99. package/docs/components/Sidebar/examples/Sidebar.md +16 -16
  100. package/docs/components/SimpleList/examples/SimpleList.md +9 -9
  101. package/docs/components/Skeleton/examples/Skeleton.md +14 -14
  102. package/docs/components/SkipToContent/examples/SkipToContent.md +4 -4
  103. package/docs/components/Slider/examples/Slider.md +33 -33
  104. package/docs/components/Spinner/examples/Spinner.md +14 -14
  105. package/docs/components/Switch/examples/Switch.md +14 -14
  106. package/docs/components/TabContent/examples/TabContent.md +10 -10
  107. package/docs/components/Table/examples/Table.md +5395 -15077
  108. package/docs/components/Tabs/examples/Tabs.md +39 -39
  109. package/docs/components/TextInputGroup/examples/TextInputGroup.md +1 -1
  110. package/docs/components/Tile/examples/Tile.md +12 -12
  111. package/docs/components/Timestamp/examples/Timestamp.md +4 -4
  112. package/docs/components/Title/examples/Title.md +20 -20
  113. package/docs/components/ToggleGroup/examples/toggle-group.md +10 -10
  114. package/docs/components/Toolbar/examples/Toolbar.md +57 -57
  115. package/docs/components/Tooltip/examples/Tooltip.md +9 -9
  116. package/docs/components/TreeView/examples/TreeView.md +31 -31
  117. package/docs/components/Truncate/examples/Truncate.md +8 -8
  118. package/docs/components/Wizard/examples/Wizard.md +46 -46
  119. package/docs/demos/Banner/examples/Banner.md +1 -1
  120. package/docs/demos/Card/examples/Card.md +12 -19
  121. package/docs/demos/DataList/examples/DataList.md +179 -280
  122. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -0
  123. package/docs/demos/Masthead/examples/Masthead.md +4 -8
  124. package/docs/demos/Nav/examples/Nav.md +45 -149
  125. package/docs/demos/Page/examples/Page.md +3 -37
  126. package/docs/demos/Page/examples/Penta.md +119 -40
  127. package/docs/demos/Table/examples/Table.md +1531 -4970
  128. package/docs/demos/Tabs/examples/Tabs.md +118 -174
  129. package/docs/demos/Toolbar/examples/Toolbar.md +220 -600
  130. package/docs/layouts/Bullseye/examples/Bullseye.md +3 -3
  131. package/docs/layouts/Flex/examples/Flex.md +76 -76
  132. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  133. package/docs/layouts/Grid/examples/Grid.md +8 -8
  134. package/docs/layouts/Level/examples/Level.md +4 -4
  135. package/docs/layouts/Split/examples/Split.md +6 -6
  136. package/docs/layouts/Stack/examples/Stack.md +5 -5
  137. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  138. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  139. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +10 -10
  140. package/docs/utilities/BoxShadow/examples/box-shadow.md +20 -20
  141. package/docs/utilities/Display/examples/Display.md +9 -9
  142. package/docs/utilities/Flex/examples/Flex.md +32 -32
  143. package/docs/utilities/Float/examples/Float.md +2 -2
  144. package/docs/utilities/Sizing/examples/Sizing.md +41 -41
  145. package/docs/utilities/Spacing/examples/Spacing.md +11 -11
  146. package/docs/utilities/Text/examples/Text.md +28 -28
  147. package/package.json +2 -1
  148. package/patternfly-no-globals.css +363 -465
  149. package/patternfly-theme-dark-unversioned.css +363 -465
  150. package/patternfly.css +363 -465
  151. package/patternfly.min.css +1 -1
  152. package/patternfly.min.css.map +1 -1
  153. package/components/Table/themes/dark/table.scss +0 -16
@@ -1376,14 +1376,19 @@ wrapperTag: div
1376
1376
  <div class="pf-v6-c-data-list__item-row">
1377
1377
  <div class="pf-v6-c-data-list__item-control">
1378
1378
  <div class="pf-v6-c-data-list__check">
1379
- <div class="pf-v6-c-check pf-m-standalone">
1379
+ <label
1380
+ class="pf-v6-c-check pf-m-standalone"
1381
+ id="data-list-actionable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check1&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-1&quot;"
1382
+ for="data-list-actionable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check1&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-1&quot;-input"
1383
+ >
1380
1384
  <input
1381
1385
  class="pf-v6-c-check__input"
1382
1386
  type="checkbox"
1383
- name="check-action-check1"
1384
- aria-labelledby="data-list-actionable-example-data-list-item-1"
1387
+ id="data-list-actionable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check1&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-1&quot;-input"
1388
+ name="data-list-actionable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check1&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-1&quot;-input"
1389
+ aria-label="Standalone check"
1385
1390
  />
1386
- </div>
1391
+ </label>
1387
1392
  </div>
1388
1393
  </div>
1389
1394
  <div class="pf-v6-c-data-list__item-content">
@@ -1451,14 +1456,19 @@ wrapperTag: div
1451
1456
  <div class="pf-v6-c-data-list__item-row">
1452
1457
  <div class="pf-v6-c-data-list__item-control">
1453
1458
  <div class="pf-v6-c-data-list__check">
1454
- <div class="pf-v6-c-check pf-m-standalone">
1459
+ <label
1460
+ class="pf-v6-c-check pf-m-standalone"
1461
+ id="data-list-actionable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check2&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-2&quot;"
1462
+ for="data-list-actionable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check2&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-2&quot;-input"
1463
+ >
1455
1464
  <input
1456
1465
  class="pf-v6-c-check__input"
1457
1466
  type="checkbox"
1458
- name="check-action-check2"
1459
- aria-labelledby="data-list-actionable-example-data-list-item-2"
1467
+ id="data-list-actionable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check2&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-2&quot;-input"
1468
+ name="data-list-actionable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check2&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-2&quot;-input"
1469
+ aria-label="Standalone check"
1460
1470
  />
1461
- </div>
1471
+ </label>
1462
1472
  </div>
1463
1473
  </div>
1464
1474
  <div class="pf-v6-c-data-list__item-content">
@@ -1550,14 +1560,19 @@ wrapperTag: div
1550
1560
  <div class="pf-v6-c-data-list__item-row">
1551
1561
  <div class="pf-v6-c-data-list__item-control">
1552
1562
  <div class="pf-v6-c-data-list__check">
1553
- <div class="pf-v6-c-check pf-m-standalone">
1563
+ <label
1564
+ class="pf-v6-c-check pf-m-standalone"
1565
+ id="data-list-actionable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check3&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-3&quot;"
1566
+ for="data-list-actionable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check3&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-3&quot;-input"
1567
+ >
1554
1568
  <input
1555
1569
  class="pf-v6-c-check__input"
1556
1570
  type="checkbox"
1557
- name="check-action-check3"
1558
- aria-labelledby="data-list-actionable-example-data-list-item-3"
1571
+ id="data-list-actionable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check3&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-3&quot;-input"
1572
+ name="data-list-actionable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check3&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-3&quot;-input"
1573
+ aria-label="Standalone check"
1559
1574
  />
1560
- </div>
1575
+ </label>
1561
1576
  </div>
1562
1577
  </div>
1563
1578
  <div class="pf-v6-c-data-list__item-content">
@@ -1588,14 +1603,19 @@ wrapperTag: div
1588
1603
  <div class="pf-v6-c-data-list__item-row">
1589
1604
  <div class="pf-v6-c-data-list__item-control">
1590
1605
  <div class="pf-v6-c-data-list__check">
1591
- <div class="pf-v6-c-check pf-m-standalone">
1606
+ <label
1607
+ class="pf-v6-c-check pf-m-standalone"
1608
+ id="data-list-actionable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check4&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-4&quot;"
1609
+ for="data-list-actionable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check4&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-4&quot;-input"
1610
+ >
1592
1611
  <input
1593
1612
  class="pf-v6-c-check__input"
1594
1613
  type="checkbox"
1595
- name="check-action-check4"
1596
- aria-labelledby="data-list-actionable-example-data-list-item-4"
1614
+ id="data-list-actionable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check4&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-4&quot;-input"
1615
+ name="data-list-actionable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check4&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-4&quot;-input"
1616
+ aria-label="Standalone check"
1597
1617
  />
1598
- </div>
1618
+ </label>
1599
1619
  </div>
1600
1620
  </div>
1601
1621
  <div class="pf-v6-c-data-list__item-content">
@@ -2326,14 +2346,19 @@ wrapperTag: div
2326
2346
  </div>
2327
2347
 
2328
2348
  <div class="pf-v6-c-data-list__check">
2329
- <div class="pf-v6-c-check pf-m-standalone">
2349
+ <label
2350
+ class="pf-v6-c-check pf-m-standalone"
2351
+ id="data-list-expandable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check1&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-1&quot;"
2352
+ for="data-list-expandable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check1&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-1&quot;-input"
2353
+ >
2330
2354
  <input
2331
2355
  class="pf-v6-c-check__input"
2332
2356
  type="checkbox"
2333
- name="check-expandable-check1"
2334
- aria-labelledby="data-list-expandable-example-data-list-item-1"
2357
+ id="data-list-expandable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check1&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-1&quot;-input"
2358
+ name="data-list-expandable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check1&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-1&quot;-input"
2359
+ aria-label="Standalone check"
2335
2360
  />
2336
- </div>
2361
+ </label>
2337
2362
  </div>
2338
2363
  </div>
2339
2364
  <div class="pf-v6-c-data-list__item-content">
@@ -2412,63 +2437,82 @@ wrapperTag: div
2412
2437
  class="pf-v6-c-table__td pf-v6-c-table__check"
2413
2438
  role="cell"
2414
2439
  >
2415
- <div class="pf-v6-c-check pf-m-standalone">
2440
+ <label
2441
+ class="pf-v6-c-check pf-m-standalone"
2442
+ id="compact-table-demo-data-listcheckrowcheck"
2443
+ for="compact-table-demo-data-listcheckrowcheck-input"
2444
+ >
2416
2445
  <input
2417
2446
  class="pf-v6-c-check__input"
2418
2447
  type="checkbox"
2419
- name="check-all"
2420
- aria-label="Select all rows"
2448
+ id="compact-table-demo-data-listcheckrowcheck-input"
2449
+ name="compact-table-demo-data-listcheckrowcheck-input"
2450
+ aria-label="Standalone check"
2421
2451
  />
2422
- </div>
2452
+ </label>
2423
2453
  </td>
2454
+
2424
2455
  <th
2425
2456
  class="pf-v6-c-table__th"
2426
2457
  role="columnheader"
2427
2458
  scope="col"
2428
2459
  >Contributor</th>
2460
+
2429
2461
  <th
2430
2462
  class="pf-v6-c-table__th"
2431
2463
  role="columnheader"
2432
2464
  scope="col"
2433
2465
  >Position</th>
2466
+
2434
2467
  <th
2435
2468
  class="pf-v6-c-table__th"
2436
2469
  role="columnheader"
2437
2470
  scope="col"
2438
2471
  >Location</th>
2472
+
2439
2473
  <th
2440
2474
  class="pf-v6-c-table__th"
2441
2475
  role="columnheader"
2442
2476
  scope="col"
2443
2477
  >Last seen</th>
2478
+
2444
2479
  <th
2445
2480
  class="pf-v6-c-table__th"
2446
2481
  role="columnheader"
2447
2482
  scope="col"
2448
2483
  >Numbers</th>
2484
+
2449
2485
  <th
2450
2486
  class="pf-v6-c-table__th pf-v6-c-table__icon"
2451
2487
  role="columnheader"
2452
2488
  scope="col"
2453
2489
  >Icons</th>
2490
+
2454
2491
  <td class="pf-v6-c-table__td"></td>
2492
+
2455
2493
  <td class="pf-v6-c-table__td"></td>
2456
2494
  </tr>
2457
2495
  </thead>
2496
+
2458
2497
  <tbody class="pf-v6-c-table__tbody" role="rowgroup">
2459
2498
  <tr class="pf-v6-c-table__tr" role="row">
2460
2499
  <td
2461
2500
  class="pf-v6-c-table__td pf-v6-c-table__check"
2462
2501
  role="cell"
2463
2502
  >
2464
- <div class="pf-v6-c-check pf-m-standalone">
2503
+ <label
2504
+ class="pf-v6-c-check pf-m-standalone"
2505
+ id="compact-table-demo-data-listcheckrow1check"
2506
+ for="compact-table-demo-data-listcheckrow1check-input"
2507
+ >
2465
2508
  <input
2466
2509
  class="pf-v6-c-check__input"
2467
2510
  type="checkbox"
2468
- name="checkrow1"
2469
- aria-labelledby="compact-table-demo-data-list-name1"
2511
+ id="compact-table-demo-data-listcheckrow1check-input"
2512
+ name="compact-table-demo-data-listcheckrow1check-input"
2513
+ aria-label="Standalone check"
2470
2514
  />
2471
- </div>
2515
+ </label>
2472
2516
  </td>
2473
2517
  <td
2474
2518
  class="pf-v6-c-table__td"
@@ -2511,67 +2555,21 @@ wrapperTag: div
2511
2555
  >
2512
2556
  <a href="#">Action link</a>
2513
2557
  </td>
2558
+
2514
2559
  <td
2515
2560
  class="pf-v6-c-table__td pf-v6-c-table__action"
2516
2561
  role="cell"
2517
2562
  >
2518
- <div class="pf-v6-c-dropdown">
2519
- <button
2520
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2521
- id="-dropdown-kebab-1-button"
2522
- aria-expanded="false"
2523
- type="button"
2524
- aria-label="Actions"
2525
- >
2563
+ <button
2564
+ class="pf-v6-c-menu-toggle pf-m-plain"
2565
+ type="button"
2566
+ aria-expanded="false"
2567
+ aria-label="Table actions"
2568
+ >
2569
+ <span class="pf-v6-c-menu-toggle__icon">
2526
2570
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2527
- </button>
2528
- <ul
2529
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2530
- aria-labelledby="-dropdown-kebab-1-button"
2531
- hidden
2532
- role="menu"
2533
- >
2534
- <li role="none">
2535
- <a
2536
- class="pf-v6-c-dropdown__menu-item"
2537
- role="menuitem"
2538
- href="#"
2539
- >Link</a>
2540
- </li>
2541
- <li role="none">
2542
- <button
2543
- class="pf-v6-c-dropdown__menu-item"
2544
- role="menuitem"
2545
- type="button"
2546
- >Action</button>
2547
- </li>
2548
- <li role="none">
2549
- <a
2550
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2551
- role="menuitem"
2552
- href="#"
2553
- aria-disabled="true"
2554
- tabindex="-1"
2555
- >Disabled link</a>
2556
- </li>
2557
- <li role="none">
2558
- <button
2559
- class="pf-v6-c-dropdown__menu-item"
2560
- role="menuitem"
2561
- type="button"
2562
- disabled
2563
- >Disabled action</button>
2564
- </li>
2565
- <li class="pf-v6-c-divider" role="separator"></li>
2566
- <li role="none">
2567
- <a
2568
- class="pf-v6-c-dropdown__menu-item"
2569
- role="menuitem"
2570
- href="#"
2571
- >Separated link</a>
2572
- </li>
2573
- </ul>
2574
- </div>
2571
+ </span>
2572
+ </button>
2575
2573
  </td>
2576
2574
  </tr>
2577
2575
  <tr class="pf-v6-c-table__tr" role="row">
@@ -2579,15 +2577,21 @@ wrapperTag: div
2579
2577
  class="pf-v6-c-table__td pf-v6-c-table__check"
2580
2578
  role="cell"
2581
2579
  >
2582
- <div class="pf-v6-c-check pf-m-standalone">
2580
+ <label
2581
+ class="pf-v6-c-check pf-m-standalone"
2582
+ id="compact-table-demo-data-listcheckrow2check"
2583
+ for="compact-table-demo-data-listcheckrow2check-input"
2584
+ >
2583
2585
  <input
2584
2586
  class="pf-v6-c-check__input"
2585
2587
  type="checkbox"
2586
- name="checkrow2"
2587
- aria-labelledby="compact-table-demo-data-list-name2"
2588
+ id="compact-table-demo-data-listcheckrow2check-input"
2589
+ name="compact-table-demo-data-listcheckrow2check-input"
2590
+ aria-label="Standalone check"
2588
2591
  />
2589
- </div>
2592
+ </label>
2590
2593
  </td>
2594
+
2591
2595
  <th
2592
2596
  class="pf-v6-c-table__th"
2593
2597
  role="columnheader"
@@ -2595,6 +2599,7 @@ wrapperTag: div
2595
2599
  >
2596
2600
  <span id="compact-table-demo-data-list-name2">Amy Miller</span>
2597
2601
  </th>
2602
+
2598
2603
  <td
2599
2604
  class="pf-v6-c-table__td"
2600
2605
  role="cell"
@@ -2629,67 +2634,21 @@ wrapperTag: div
2629
2634
  >
2630
2635
  <a href="#">Action link</a>
2631
2636
  </td>
2637
+
2632
2638
  <td
2633
2639
  class="pf-v6-c-table__td pf-v6-c-table__action"
2634
2640
  role="cell"
2635
2641
  >
2636
- <div class="pf-v6-c-dropdown">
2637
- <button
2638
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2639
- id="-dropdown-kebab-2-button"
2640
- aria-expanded="false"
2641
- type="button"
2642
- aria-label="Actions"
2643
- >
2642
+ <button
2643
+ class="pf-v6-c-menu-toggle pf-m-plain"
2644
+ type="button"
2645
+ aria-expanded="false"
2646
+ aria-label="Table actions"
2647
+ >
2648
+ <span class="pf-v6-c-menu-toggle__icon">
2644
2649
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2645
- </button>
2646
- <ul
2647
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2648
- aria-labelledby="-dropdown-kebab-2-button"
2649
- hidden
2650
- role="menu"
2651
- >
2652
- <li role="none">
2653
- <a
2654
- class="pf-v6-c-dropdown__menu-item"
2655
- role="menuitem"
2656
- href="#"
2657
- >Link</a>
2658
- </li>
2659
- <li role="none">
2660
- <button
2661
- class="pf-v6-c-dropdown__menu-item"
2662
- role="menuitem"
2663
- type="button"
2664
- >Action</button>
2665
- </li>
2666
- <li role="none">
2667
- <a
2668
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2669
- role="menuitem"
2670
- href="#"
2671
- aria-disabled="true"
2672
- tabindex="-1"
2673
- >Disabled link</a>
2674
- </li>
2675
- <li role="none">
2676
- <button
2677
- class="pf-v6-c-dropdown__menu-item"
2678
- role="menuitem"
2679
- type="button"
2680
- disabled
2681
- >Disabled action</button>
2682
- </li>
2683
- <li class="pf-v6-c-divider" role="separator"></li>
2684
- <li role="none">
2685
- <a
2686
- class="pf-v6-c-dropdown__menu-item"
2687
- role="menuitem"
2688
- href="#"
2689
- >Separated link</a>
2690
- </li>
2691
- </ul>
2692
- </div>
2650
+ </span>
2651
+ </button>
2693
2652
  </td>
2694
2653
  </tr>
2695
2654
  <tr class="pf-v6-c-table__tr" role="row">
@@ -2697,15 +2656,21 @@ wrapperTag: div
2697
2656
  class="pf-v6-c-table__td pf-v6-c-table__check"
2698
2657
  role="cell"
2699
2658
  >
2700
- <div class="pf-v6-c-check pf-m-standalone">
2659
+ <label
2660
+ class="pf-v6-c-check pf-m-standalone"
2661
+ id="compact-table-demo-data-listcheckrow3check"
2662
+ for="compact-table-demo-data-listcheckrow3check-input"
2663
+ >
2701
2664
  <input
2702
2665
  class="pf-v6-c-check__input"
2703
2666
  type="checkbox"
2704
- name="checkrow3"
2705
- aria-labelledby="compact-table-demo-data-list-name3"
2667
+ id="compact-table-demo-data-listcheckrow3check-input"
2668
+ name="compact-table-demo-data-listcheckrow3check-input"
2669
+ aria-label="Standalone check"
2706
2670
  />
2707
- </div>
2671
+ </label>
2708
2672
  </td>
2673
+
2709
2674
  <th
2710
2675
  class="pf-v6-c-table__th"
2711
2676
  role="columnheader"
@@ -2715,6 +2680,7 @@ wrapperTag: div
2715
2680
  id="compact-table-demo-data-list-name3"
2716
2681
  >Steve Wilson</span>
2717
2682
  </th>
2683
+
2718
2684
  <td
2719
2685
  class="pf-v6-c-table__td"
2720
2686
  role="cell"
@@ -2749,67 +2715,21 @@ wrapperTag: div
2749
2715
  >
2750
2716
  <a href="#">Action link</a>
2751
2717
  </td>
2718
+
2752
2719
  <td
2753
2720
  class="pf-v6-c-table__td pf-v6-c-table__action"
2754
2721
  role="cell"
2755
2722
  >
2756
- <div class="pf-v6-c-dropdown">
2757
- <button
2758
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2759
- id="-dropdown-kebab-3-button"
2760
- aria-expanded="false"
2761
- type="button"
2762
- aria-label="Actions"
2763
- >
2723
+ <button
2724
+ class="pf-v6-c-menu-toggle pf-m-plain"
2725
+ type="button"
2726
+ aria-expanded="false"
2727
+ aria-label="Table actions"
2728
+ >
2729
+ <span class="pf-v6-c-menu-toggle__icon">
2764
2730
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2765
- </button>
2766
- <ul
2767
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2768
- aria-labelledby="-dropdown-kebab-3-button"
2769
- hidden
2770
- role="menu"
2771
- >
2772
- <li role="none">
2773
- <a
2774
- class="pf-v6-c-dropdown__menu-item"
2775
- role="menuitem"
2776
- href="#"
2777
- >Link</a>
2778
- </li>
2779
- <li role="none">
2780
- <button
2781
- class="pf-v6-c-dropdown__menu-item"
2782
- role="menuitem"
2783
- type="button"
2784
- >Action</button>
2785
- </li>
2786
- <li role="none">
2787
- <a
2788
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2789
- role="menuitem"
2790
- href="#"
2791
- aria-disabled="true"
2792
- tabindex="-1"
2793
- >Disabled link</a>
2794
- </li>
2795
- <li role="none">
2796
- <button
2797
- class="pf-v6-c-dropdown__menu-item"
2798
- role="menuitem"
2799
- type="button"
2800
- disabled
2801
- >Disabled action</button>
2802
- </li>
2803
- <li class="pf-v6-c-divider" role="separator"></li>
2804
- <li role="none">
2805
- <a
2806
- class="pf-v6-c-dropdown__menu-item"
2807
- role="menuitem"
2808
- href="#"
2809
- >Separated link</a>
2810
- </li>
2811
- </ul>
2812
- </div>
2731
+ </span>
2732
+ </button>
2813
2733
  </td>
2814
2734
  </tr>
2815
2735
  <tr class="pf-v6-c-table__tr" role="row">
@@ -2817,14 +2737,19 @@ wrapperTag: div
2817
2737
  class="pf-v6-c-table__td pf-v6-c-table__check"
2818
2738
  role="cell"
2819
2739
  >
2820
- <div class="pf-v6-c-check pf-m-standalone">
2740
+ <label
2741
+ class="pf-v6-c-check pf-m-standalone"
2742
+ id="compact-table-demo-data-listcheckrow4check"
2743
+ for="compact-table-demo-data-listcheckrow4check-input"
2744
+ >
2821
2745
  <input
2822
2746
  class="pf-v6-c-check__input"
2823
2747
  type="checkbox"
2824
- name="checkrow4"
2825
- aria-labelledby="compact-table-demo-data-list-name4"
2748
+ id="compact-table-demo-data-listcheckrow4check-input"
2749
+ name="compact-table-demo-data-listcheckrow4check-input"
2750
+ aria-label="Standalone check"
2826
2751
  />
2827
- </div>
2752
+ </label>
2828
2753
  </td>
2829
2754
  <td
2830
2755
  class="pf-v6-c-table__td"
@@ -2869,67 +2794,21 @@ wrapperTag: div
2869
2794
  >
2870
2795
  <a href="#">Action link</a>
2871
2796
  </td>
2797
+
2872
2798
  <td
2873
2799
  class="pf-v6-c-table__td pf-v6-c-table__action"
2874
2800
  role="cell"
2875
2801
  >
2876
- <div class="pf-v6-c-dropdown">
2877
- <button
2878
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2879
- id="-dropdown-kebab-4-button"
2880
- aria-expanded="false"
2881
- type="button"
2882
- aria-label="Actions"
2883
- >
2802
+ <button
2803
+ class="pf-v6-c-menu-toggle pf-m-plain"
2804
+ type="button"
2805
+ aria-expanded="false"
2806
+ aria-label="Table actions"
2807
+ >
2808
+ <span class="pf-v6-c-menu-toggle__icon">
2884
2809
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2885
- </button>
2886
- <ul
2887
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2888
- aria-labelledby="-dropdown-kebab-4-button"
2889
- hidden
2890
- role="menu"
2891
- >
2892
- <li role="none">
2893
- <a
2894
- class="pf-v6-c-dropdown__menu-item"
2895
- role="menuitem"
2896
- href="#"
2897
- >Link</a>
2898
- </li>
2899
- <li role="none">
2900
- <button
2901
- class="pf-v6-c-dropdown__menu-item"
2902
- role="menuitem"
2903
- type="button"
2904
- >Action</button>
2905
- </li>
2906
- <li role="none">
2907
- <a
2908
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2909
- role="menuitem"
2910
- href="#"
2911
- aria-disabled="true"
2912
- tabindex="-1"
2913
- >Disabled link</a>
2914
- </li>
2915
- <li role="none">
2916
- <button
2917
- class="pf-v6-c-dropdown__menu-item"
2918
- role="menuitem"
2919
- type="button"
2920
- disabled
2921
- >Disabled action</button>
2922
- </li>
2923
- <li class="pf-v6-c-divider" role="separator"></li>
2924
- <li role="none">
2925
- <a
2926
- class="pf-v6-c-dropdown__menu-item"
2927
- role="menuitem"
2928
- href="#"
2929
- >Separated link</a>
2930
- </li>
2931
- </ul>
2932
- </div>
2810
+ </span>
2811
+ </button>
2933
2812
  </td>
2934
2813
  </tr>
2935
2814
  </tbody>
@@ -2961,14 +2840,19 @@ wrapperTag: div
2961
2840
  </div>
2962
2841
 
2963
2842
  <div class="pf-v6-c-data-list__check">
2964
- <div class="pf-v6-c-check pf-m-standalone">
2843
+ <label
2844
+ class="pf-v6-c-check pf-m-standalone"
2845
+ id="data-list-expandable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check2&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-2&quot;"
2846
+ for="data-list-expandable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check2&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-2&quot;-input"
2847
+ >
2965
2848
  <input
2966
2849
  class="pf-v6-c-check__input"
2967
2850
  type="checkbox"
2968
- name="check-expandable-check2"
2969
- aria-labelledby="data-list-expandable-example-data-list-item-2"
2851
+ id="data-list-expandable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check2&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-2&quot;-input"
2852
+ name="data-list-expandable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check2&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-2&quot;-input"
2853
+ aria-label="Standalone check"
2970
2854
  />
2971
- </div>
2855
+ </label>
2972
2856
  </div>
2973
2857
  </div>
2974
2858
  <div class="pf-v6-c-data-list__item-content">
@@ -3086,14 +2970,19 @@ wrapperTag: div
3086
2970
  </div>
3087
2971
 
3088
2972
  <div class="pf-v6-c-data-list__check">
3089
- <div class="pf-v6-c-check pf-m-standalone">
2973
+ <label
2974
+ class="pf-v6-c-check pf-m-standalone"
2975
+ id="data-list-expandable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check3&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-3&quot;"
2976
+ for="data-list-expandable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check3&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-3&quot;-input"
2977
+ >
3090
2978
  <input
3091
2979
  class="pf-v6-c-check__input"
3092
2980
  type="checkbox"
3093
- name="check-expandable-check3"
3094
- aria-labelledby="data-list-expandable-example-data-list-item-3"
2981
+ id="data-list-expandable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check3&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-3&quot;-input"
2982
+ name="data-list-expandable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check3&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-3&quot;-input"
2983
+ aria-label="Standalone check"
3095
2984
  />
3096
- </div>
2985
+ </label>
3097
2986
  </div>
3098
2987
  </div>
3099
2988
  <div class="pf-v6-c-data-list__item-content">
@@ -3139,14 +3028,19 @@ wrapperTag: div
3139
3028
  </div>
3140
3029
 
3141
3030
  <div class="pf-v6-c-data-list__check">
3142
- <div class="pf-v6-c-check pf-m-standalone">
3031
+ <label
3032
+ class="pf-v6-c-check pf-m-standalone"
3033
+ id="data-list-expandable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check4&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-4&quot;"
3034
+ for="data-list-expandable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check4&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-4&quot;-input"
3035
+ >
3143
3036
  <input
3144
3037
  class="pf-v6-c-check__input"
3145
3038
  type="checkbox"
3146
- name="check-expandable-check4"
3147
- aria-labelledby="data-list-expandable-example-data-list-item-4"
3039
+ id="data-list-expandable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check4&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-4&quot;-input"
3040
+ name="data-list-expandable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check4&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-4&quot;-input"
3041
+ aria-label="Standalone check"
3148
3042
  />
3149
- </div>
3043
+ </label>
3150
3044
  </div>
3151
3045
  </div>
3152
3046
  <div class="pf-v6-c-data-list__item-content">
@@ -3240,14 +3134,19 @@ wrapperTag: div
3240
3134
  </div>
3241
3135
 
3242
3136
  <div class="pf-v6-c-data-list__check">
3243
- <div class="pf-v6-c-check pf-m-standalone">
3137
+ <label
3138
+ class="pf-v6-c-check pf-m-standalone"
3139
+ id="data-list-expandable-example-data-list-item-5&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check5&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-5&quot;"
3140
+ for="data-list-expandable-example-data-list-item-5&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check5&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-5&quot;-input"
3141
+ >
3244
3142
  <input
3245
3143
  class="pf-v6-c-check__input"
3246
3144
  type="checkbox"
3247
- name="check-expandable-check5"
3248
- aria-labelledby="data-list-expandable-example-data-list-item-5"
3145
+ id="data-list-expandable-example-data-list-item-5&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check5&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-5&quot;-input"
3146
+ name="data-list-expandable-example-data-list-item-5&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check5&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-5&quot;-input"
3147
+ aria-label="Standalone check"
3249
3148
  />
3250
- </div>
3149
+ </label>
3251
3150
  </div>
3252
3151
  </div>
3253
3152
  <div class="pf-v6-c-data-list__item-content">