@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.8

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 (257) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  4. package/assets/pficon/pficon.scss +6 -129
  5. package/base/_common.scss +21 -0
  6. package/base/_globals.scss +1 -1
  7. package/base/_variables.scss +7 -0
  8. package/base/patternfly-common.css +16 -2
  9. package/base/patternfly-globals.css +1 -1
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +16 -0
  13. package/base/tokens/_tokens-font.scss +16 -14
  14. package/components/AboutModalBox/about-modal-box.css +23 -12
  15. package/components/AboutModalBox/about-modal-box.scss +25 -12
  16. package/components/Accordion/accordion.css +33 -20
  17. package/components/Accordion/accordion.scss +32 -20
  18. package/components/ActionList/action-list.css +2 -2
  19. package/components/ActionList/action-list.scss +2 -2
  20. package/components/Alert/alert-group.css +7 -4
  21. package/components/Alert/alert-group.scss +7 -4
  22. package/components/Alert/alert.css +19 -13
  23. package/components/Alert/alert.scss +18 -13
  24. package/components/AppLauncher/app-launcher.css +32 -23
  25. package/components/AppLauncher/app-launcher.scss +32 -23
  26. package/components/BackToTop/back-to-top.css +2 -2
  27. package/components/BackToTop/back-to-top.scss +2 -2
  28. package/components/Backdrop/backdrop.css +2 -2
  29. package/components/Backdrop/backdrop.scss +2 -2
  30. package/components/BackgroundImage/background-image.css +6 -3
  31. package/components/BackgroundImage/background-image.scss +8 -3
  32. package/components/Badge/badge.css +2 -2
  33. package/components/Badge/badge.scss +2 -2
  34. package/components/Banner/banner.css +5 -5
  35. package/components/Banner/banner.scss +5 -2
  36. package/components/Breadcrumb/breadcrumb.css +9 -3
  37. package/components/Breadcrumb/breadcrumb.scss +8 -3
  38. package/components/Button/button.css +33 -21
  39. package/components/Button/button.scss +35 -23
  40. package/components/Button/themes/dark/button.scss +1 -1
  41. package/components/CalendarMonth/calendar-month.css +25 -15
  42. package/components/CalendarMonth/calendar-month.scss +23 -15
  43. package/components/Card/card.css +25 -17
  44. package/components/Card/card.scss +24 -17
  45. package/components/Check/check.css +2 -2
  46. package/components/Check/check.scss +2 -2
  47. package/components/Chip/chip-group.css +6 -6
  48. package/components/Chip/chip-group.scss +6 -6
  49. package/components/Chip/chip.css +16 -9
  50. package/components/Chip/chip.scss +17 -9
  51. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  52. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  53. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  54. package/components/CodeBlock/code-block.css +6 -3
  55. package/components/CodeBlock/code-block.scss +6 -3
  56. package/components/CodeEditor/code-editor.css +31 -22
  57. package/components/CodeEditor/code-editor.scss +30 -21
  58. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  59. package/components/Content/content.css +33 -30
  60. package/components/Content/content.scss +33 -30
  61. package/components/ContextSelector/context-selector.css +41 -26
  62. package/components/ContextSelector/context-selector.scss +40 -25
  63. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  64. package/components/DataList/data-list-grid.css +21 -21
  65. package/components/DataList/data-list-grid.scss +3 -3
  66. package/components/DataList/data-list.css +69 -56
  67. package/components/DataList/data-list.scss +47 -35
  68. package/components/DatePicker/date-picker.css +8 -8
  69. package/components/DatePicker/date-picker.scss +8 -8
  70. package/components/DescriptionList/description-list.css +8 -5
  71. package/components/DescriptionList/description-list.scss +8 -5
  72. package/components/DragDrop/drag-drop.css +8 -8
  73. package/components/DragDrop/drag-drop.scss +8 -8
  74. package/components/Drawer/drawer.css +120 -61
  75. package/components/Drawer/drawer.scss +92 -43
  76. package/components/Dropdown/dropdown.css +75 -66
  77. package/components/Dropdown/dropdown.scss +65 -56
  78. package/components/DualListSelector/dual-list-selector.css +29 -15
  79. package/components/DualListSelector/dual-list-selector.scss +30 -15
  80. package/components/EmptyState/empty-state.css +7 -4
  81. package/components/EmptyState/empty-state.scss +7 -4
  82. package/components/ExpandableSection/expandable-section.css +17 -10
  83. package/components/ExpandableSection/expandable-section.scss +15 -10
  84. package/components/FileUpload/file-upload.css +9 -15
  85. package/components/FileUpload/file-upload.scss +9 -15
  86. package/components/Form/form.css +53 -50
  87. package/components/Form/form.scss +46 -44
  88. package/components/FormControl/form-control.css +18 -9
  89. package/components/FormControl/form-control.scss +18 -9
  90. package/components/HelperText/helper-text.css +1 -1
  91. package/components/HelperText/helper-text.scss +1 -1
  92. package/components/Hint/hint.css +9 -6
  93. package/components/Hint/hint.scss +9 -6
  94. package/components/Icon/icon.css +1 -1
  95. package/components/Icon/icon.scss +1 -1
  96. package/components/InlineEdit/inline-edit.css +4 -4
  97. package/components/InlineEdit/inline-edit.scss +4 -4
  98. package/components/InputGroup/input-group.css +12 -6
  99. package/components/InputGroup/input-group.scss +11 -5
  100. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  101. package/components/JumpLinks/jump-links.css +27 -24
  102. package/components/JumpLinks/jump-links.scss +26 -24
  103. package/components/Label/label-group.css +13 -10
  104. package/components/Label/label-group.scss +13 -10
  105. package/components/Label/label.css +9 -9
  106. package/components/Label/label.scss +9 -9
  107. package/components/List/list.css +9 -9
  108. package/components/List/list.scss +9 -9
  109. package/components/LogViewer/log-viewer.css +14 -14
  110. package/components/LogViewer/log-viewer.scss +14 -14
  111. package/components/Login/login.css +36 -27
  112. package/components/Login/login.scss +36 -27
  113. package/components/Masthead/masthead.css +19 -22
  114. package/components/Masthead/masthead.scss +19 -22
  115. package/components/Menu/menu.css +79 -65
  116. package/components/Menu/menu.scss +80 -68
  117. package/components/MenuToggle/menu-toggle.css +33 -27
  118. package/components/MenuToggle/menu-toggle.scss +33 -27
  119. package/components/ModalBox/modal-box.css +19 -19
  120. package/components/ModalBox/modal-box.scss +20 -20
  121. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  122. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  123. package/components/Nav/nav.css +120 -93
  124. package/components/Nav/nav.scss +120 -93
  125. package/components/Nav/themes/dark/nav.scss +2 -2
  126. package/components/NotificationBadge/notification-badge.css +13 -7
  127. package/components/NotificationBadge/notification-badge.scss +13 -7
  128. package/components/NotificationDrawer/notification-drawer.css +32 -19
  129. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  130. package/components/NumberInput/number-input.css +2 -2
  131. package/components/NumberInput/number-input.scss +2 -2
  132. package/components/OptionsMenu/options-menu.css +43 -31
  133. package/components/OptionsMenu/options-menu.scss +43 -31
  134. package/components/OverflowMenu/overflow-menu.css +2 -2
  135. package/components/OverflowMenu/overflow-menu.scss +2 -2
  136. package/components/Page/page.css +135 -77
  137. package/components/Page/page.scss +81 -52
  138. package/components/Page/themes/dark/page.scss +1 -1
  139. package/components/Pagination/pagination.css +27 -17
  140. package/components/Pagination/pagination.scss +25 -17
  141. package/components/Panel/panel.css +13 -7
  142. package/components/Panel/panel.scss +13 -7
  143. package/components/Popover/popover.css +72 -40
  144. package/components/Popover/popover.scss +95 -75
  145. package/components/Progress/progress.css +9 -7
  146. package/components/Progress/progress.scss +12 -7
  147. package/components/ProgressStepper/progress-stepper.css +26 -20
  148. package/components/ProgressStepper/progress-stepper.scss +25 -19
  149. package/components/Radio/radio.css +3 -3
  150. package/components/Radio/radio.scss +3 -3
  151. package/components/Select/select.css +56 -47
  152. package/components/Select/select.scss +56 -47
  153. package/components/Sidebar/sidebar.css +11 -5
  154. package/components/Sidebar/sidebar.scss +11 -5
  155. package/components/SimpleList/simple-list.css +10 -4
  156. package/components/SimpleList/simple-list.scss +10 -4
  157. package/components/Skeleton/skeleton.css +6 -5
  158. package/components/Skeleton/skeleton.scss +4 -5
  159. package/components/SkipToContent/skip-to-content.css +3 -3
  160. package/components/SkipToContent/skip-to-content.scss +3 -3
  161. package/components/Slider/slider.css +47 -26
  162. package/components/Slider/slider.scss +56 -28
  163. package/components/Switch/switch.css +9 -5
  164. package/components/Switch/switch.scss +10 -6
  165. package/components/TabContent/tab-content.css +4 -1
  166. package/components/TabContent/tab-content.scss +4 -1
  167. package/components/Table/table-grid.css +256 -195
  168. package/components/Table/table-grid.scss +53 -39
  169. package/components/Table/table-scrollable.css +4 -4
  170. package/components/Table/table-scrollable.scss +6 -4
  171. package/components/Table/table-tree-view.css +112 -105
  172. package/components/Table/table-tree-view.scss +38 -33
  173. package/components/Table/table.css +92 -70
  174. package/components/Table/table.scss +90 -70
  175. package/components/Tabs/tabs.css +76 -48
  176. package/components/Tabs/tabs.scss +74 -48
  177. package/components/TextInputGroup/text-input-group.css +15 -15
  178. package/components/TextInputGroup/text-input-group.scss +15 -15
  179. package/components/Tile/tile.css +10 -10
  180. package/components/Tile/tile.scss +10 -10
  181. package/components/ToggleGroup/toggle-group.css +14 -11
  182. package/components/ToggleGroup/toggle-group.scss +14 -11
  183. package/components/Toolbar/toolbar.css +44 -41
  184. package/components/Toolbar/toolbar.scss +26 -21
  185. package/components/Tooltip/tooltip.css +60 -28
  186. package/components/Tooltip/tooltip.scss +76 -56
  187. package/components/TreeView/tree-view.css +48 -27
  188. package/components/TreeView/tree-view.scss +50 -28
  189. package/components/Truncate/truncate.css +9 -0
  190. package/components/Truncate/truncate.scss +16 -3
  191. package/components/Wizard/wizard.css +57 -36
  192. package/components/Wizard/wizard.scss +57 -36
  193. package/docs/components/Button/examples/Button.css +2 -2
  194. package/docs/components/Button/examples/Button.md +15 -3
  195. package/docs/components/Card/examples/Card.md +15 -15
  196. package/docs/components/Check/examples/Check.md +71 -59
  197. package/docs/components/Chip/examples/Chip.md +1 -1
  198. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  199. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  200. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  201. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  202. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  203. package/docs/components/Label/examples/Label.md +1 -1
  204. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  205. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  206. package/docs/components/Menu/examples/Menu.css +8 -0
  207. package/docs/components/Menu/examples/Menu.md +90 -73
  208. package/docs/components/MenuToggle/examples/MenuToggle.md +60 -39
  209. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  210. package/docs/components/Nav/examples/Navigation.css +4 -21
  211. package/docs/components/Nav/examples/Navigation.md +99 -0
  212. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  213. package/docs/components/Popover/examples/Popover.css +4 -9
  214. package/docs/components/Radio/examples/Radio.md +63 -55
  215. package/docs/components/Select/deprecated/Select.md +184 -177
  216. package/docs/components/Table/examples/Table.css +2 -2
  217. package/docs/components/Table/examples/Table.md +2 -2
  218. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  219. package/docs/components/Tile/examples/Tile.css +1 -1
  220. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  221. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  222. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  223. package/docs/components/Truncate/examples/Truncate.md +2 -2
  224. package/docs/demos/Card/examples/Card.css +3 -3
  225. package/docs/demos/Card/examples/Card.md +26 -10
  226. package/docs/demos/CardView/examples/CardView.md +24 -20
  227. package/docs/demos/Dashboard/examples/Dashboard.md +3 -3
  228. package/docs/demos/DataList/examples/DataList.md +8 -2
  229. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -124
  230. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  231. package/docs/demos/Table/examples/Table.md +336 -252
  232. package/docs/demos/Tabs/examples/Tabs.md +28 -21
  233. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  234. package/docs/demos/Toolbar/examples/Toolbar.md +44 -44
  235. package/docs/layouts/Flex/examples/Flex.md +5 -5
  236. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  237. package/icons/pficons.mjs +1 -0
  238. package/layouts/Flex/flex.css +115 -43
  239. package/layouts/Flex/flex.scss +20 -8
  240. package/package.json +9 -5
  241. package/patternfly-addons.css +732 -972
  242. package/patternfly-base-no-globals-theme-dark-unversioned.css +37 -3
  243. package/patternfly-base-no-globals.css +37 -3
  244. package/patternfly-base-theme-dark-unversioned.css +38 -4
  245. package/patternfly-base.css +38 -4
  246. package/patternfly-no-globals.css +2695 -1875
  247. package/patternfly-theme-dark-unversioned.css +2696 -1876
  248. package/patternfly.css +2696 -1876
  249. package/patternfly.min.css +1 -1
  250. package/patternfly.min.css.map +1 -1
  251. package/sass-utilities/functions.scss +6 -0
  252. package/sass-utilities/mixins.scss +62 -2
  253. package/sass-utilities/scss-variables.scss +8 -8
  254. package/sass-utilities/themes/dark/mixins.scss +3 -1
  255. package/utilities/Accessibility/accessibility.css +12 -12
  256. package/utilities/Spacing/spacing.css +720 -960
  257. package/utilities/Spacing/spacing.scss +4 -8
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -588,73 +588,77 @@ In some instances, it may be necessary to adjust spacing explicitly where items
588
588
  >
589
589
  <label
590
590
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
591
- for="toolbar-toggle-group-example-select-checkbox-status-active"
591
+ id="toolbar-toggle-group-example-select-checkbox-status-active"
592
+ for="toolbar-toggle-group-example-select-checkbox-status-active-input"
592
593
  >
593
594
  <input
594
595
  class="pf-v5-c-check__input"
595
596
  type="checkbox"
596
- id="toolbar-toggle-group-example-select-checkbox-status-active"
597
- name="toolbar-toggle-group-example-select-checkbox-status-active"
597
+ aria-describedby="toolbar-toggle-group-example-select-checkbox-status-active-description"
598
+ id="toolbar-toggle-group-example-select-checkbox-status-active-input"
599
+ name="toolbar-toggle-group-example-select-checkbox-status-active-input"
598
600
  />
599
-
600
601
  <span class="pf-v5-c-check__label">Active</span>
601
602
  <span
602
603
  class="pf-v5-c-check__description"
604
+ id="toolbar-toggle-group-example-select-checkbox-status-active-description"
603
605
  >This is a description</span>
604
606
  </label>
605
607
  <label
606
608
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
607
- for="toolbar-toggle-group-example-select-checkbox-status-canceled"
609
+ id="toolbar-toggle-group-example-select-checkbox-status-canceled"
610
+ for="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
608
611
  >
609
612
  <input
610
613
  class="pf-v5-c-check__input"
611
614
  type="checkbox"
612
- id="toolbar-toggle-group-example-select-checkbox-status-canceled"
613
- name="toolbar-toggle-group-example-select-checkbox-status-canceled"
615
+ aria-describedby="toolbar-toggle-group-example-select-checkbox-status-canceled-description"
616
+ id="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
617
+ name="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
614
618
  />
615
-
616
619
  <span class="pf-v5-c-check__label">Canceled</span>
617
620
  <span
618
621
  class="pf-v5-c-check__description"
622
+ id="toolbar-toggle-group-example-select-checkbox-status-canceled-description"
619
623
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
620
624
  </label>
621
625
  <label
622
626
  class="pf-v5-c-check pf-v5-c-select__menu-item"
623
- for="toolbar-toggle-group-example-select-checkbox-status-paused"
627
+ id="toolbar-toggle-group-example-select-checkbox-status-paused"
628
+ for="toolbar-toggle-group-example-select-checkbox-status-paused-input"
624
629
  >
625
630
  <input
626
631
  class="pf-v5-c-check__input"
627
632
  type="checkbox"
628
- id="toolbar-toggle-group-example-select-checkbox-status-paused"
629
- name="toolbar-toggle-group-example-select-checkbox-status-paused"
633
+ id="toolbar-toggle-group-example-select-checkbox-status-paused-input"
634
+ name="toolbar-toggle-group-example-select-checkbox-status-paused-input"
630
635
  />
631
-
632
636
  <span class="pf-v5-c-check__label">Paused</span>
633
637
  </label>
634
638
  <label
635
639
  class="pf-v5-c-check pf-v5-c-select__menu-item"
636
- for="toolbar-toggle-group-example-select-checkbox-status-warning"
640
+ id="toolbar-toggle-group-example-select-checkbox-status-warning"
641
+ for="toolbar-toggle-group-example-select-checkbox-status-warning-input"
637
642
  >
638
643
  <input
639
644
  class="pf-v5-c-check__input"
640
645
  type="checkbox"
641
- id="toolbar-toggle-group-example-select-checkbox-status-warning"
642
- name="toolbar-toggle-group-example-select-checkbox-status-warning"
646
+ id="toolbar-toggle-group-example-select-checkbox-status-warning-input"
647
+ name="toolbar-toggle-group-example-select-checkbox-status-warning-input"
643
648
  />
644
-
645
649
  <span class="pf-v5-c-check__label">Warning</span>
646
650
  </label>
647
651
  <label
648
652
  class="pf-v5-c-check pf-v5-c-select__menu-item"
649
- for="toolbar-toggle-group-example-select-checkbox-status-restarted"
653
+ id="toolbar-toggle-group-example-select-checkbox-status-restarted"
654
+ for="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
650
655
  >
651
656
  <input
652
657
  class="pf-v5-c-check__input"
653
658
  type="checkbox"
654
- id="toolbar-toggle-group-example-select-checkbox-status-restarted"
655
- name="toolbar-toggle-group-example-select-checkbox-status-restarted"
659
+ id="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
660
+ name="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
656
661
  />
657
-
658
662
  <span class="pf-v5-c-check__label">Restarted</span>
659
663
  </label>
660
664
  </fieldset>
@@ -691,73 +695,77 @@ In some instances, it may be necessary to adjust spacing explicitly where items
691
695
  >
692
696
  <label
693
697
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
694
- for="toolbar-toggle-group-example-select-checkbox-risk-active"
698
+ id="toolbar-toggle-group-example-select-checkbox-risk-active"
699
+ for="toolbar-toggle-group-example-select-checkbox-risk-active-input"
695
700
  >
696
701
  <input
697
702
  class="pf-v5-c-check__input"
698
703
  type="checkbox"
699
- id="toolbar-toggle-group-example-select-checkbox-risk-active"
700
- name="toolbar-toggle-group-example-select-checkbox-risk-active"
704
+ aria-describedby="toolbar-toggle-group-example-select-checkbox-risk-active-description"
705
+ id="toolbar-toggle-group-example-select-checkbox-risk-active-input"
706
+ name="toolbar-toggle-group-example-select-checkbox-risk-active-input"
701
707
  />
702
-
703
708
  <span class="pf-v5-c-check__label">Active</span>
704
709
  <span
705
710
  class="pf-v5-c-check__description"
711
+ id="toolbar-toggle-group-example-select-checkbox-risk-active-description"
706
712
  >This is a description</span>
707
713
  </label>
708
714
  <label
709
715
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
710
- for="toolbar-toggle-group-example-select-checkbox-risk-canceled"
716
+ id="toolbar-toggle-group-example-select-checkbox-risk-canceled"
717
+ for="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
711
718
  >
712
719
  <input
713
720
  class="pf-v5-c-check__input"
714
721
  type="checkbox"
715
- id="toolbar-toggle-group-example-select-checkbox-risk-canceled"
716
- name="toolbar-toggle-group-example-select-checkbox-risk-canceled"
722
+ aria-describedby="toolbar-toggle-group-example-select-checkbox-risk-canceled-description"
723
+ id="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
724
+ name="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
717
725
  />
718
-
719
726
  <span class="pf-v5-c-check__label">Canceled</span>
720
727
  <span
721
728
  class="pf-v5-c-check__description"
729
+ id="toolbar-toggle-group-example-select-checkbox-risk-canceled-description"
722
730
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
723
731
  </label>
724
732
  <label
725
733
  class="pf-v5-c-check pf-v5-c-select__menu-item"
726
- for="toolbar-toggle-group-example-select-checkbox-risk-paused"
734
+ id="toolbar-toggle-group-example-select-checkbox-risk-paused"
735
+ for="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
727
736
  >
728
737
  <input
729
738
  class="pf-v5-c-check__input"
730
739
  type="checkbox"
731
- id="toolbar-toggle-group-example-select-checkbox-risk-paused"
732
- name="toolbar-toggle-group-example-select-checkbox-risk-paused"
740
+ id="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
741
+ name="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
733
742
  />
734
-
735
743
  <span class="pf-v5-c-check__label">Paused</span>
736
744
  </label>
737
745
  <label
738
746
  class="pf-v5-c-check pf-v5-c-select__menu-item"
739
- for="toolbar-toggle-group-example-select-checkbox-risk-warning"
747
+ id="toolbar-toggle-group-example-select-checkbox-risk-warning"
748
+ for="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
740
749
  >
741
750
  <input
742
751
  class="pf-v5-c-check__input"
743
752
  type="checkbox"
744
- id="toolbar-toggle-group-example-select-checkbox-risk-warning"
745
- name="toolbar-toggle-group-example-select-checkbox-risk-warning"
753
+ id="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
754
+ name="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
746
755
  />
747
-
748
756
  <span class="pf-v5-c-check__label">Warning</span>
749
757
  </label>
750
758
  <label
751
759
  class="pf-v5-c-check pf-v5-c-select__menu-item"
752
- for="toolbar-toggle-group-example-select-checkbox-risk-restarted"
760
+ id="toolbar-toggle-group-example-select-checkbox-risk-restarted"
761
+ for="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
753
762
  >
754
763
  <input
755
764
  class="pf-v5-c-check__input"
756
765
  type="checkbox"
757
- id="toolbar-toggle-group-example-select-checkbox-risk-restarted"
758
- name="toolbar-toggle-group-example-select-checkbox-risk-restarted"
766
+ id="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
767
+ name="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
759
768
  />
760
-
761
769
  <span class="pf-v5-c-check__label">Restarted</span>
762
770
  </label>
763
771
  </fieldset>
@@ -926,71 +934,77 @@ In some instances, it may be necessary to adjust spacing explicitly where items
926
934
  >
927
935
  <label
928
936
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
929
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
937
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
938
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
930
939
  >
931
940
  <input
932
941
  class="pf-v5-c-check__input"
933
942
  type="checkbox"
934
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
935
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
943
+ aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
944
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
945
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
936
946
  />
937
-
938
947
  <span class="pf-v5-c-check__label">Active</span>
939
- <span class="pf-v5-c-check__description">This is a description</span>
948
+ <span
949
+ class="pf-v5-c-check__description"
950
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
951
+ >This is a description</span>
940
952
  </label>
941
953
  <label
942
954
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
943
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
955
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
956
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
944
957
  >
945
958
  <input
946
959
  class="pf-v5-c-check__input"
947
960
  type="checkbox"
948
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
949
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
961
+ aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
962
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
963
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
950
964
  />
951
-
952
965
  <span class="pf-v5-c-check__label">Canceled</span>
953
966
  <span
954
967
  class="pf-v5-c-check__description"
968
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
955
969
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
956
970
  </label>
957
971
  <label
958
972
  class="pf-v5-c-check pf-v5-c-select__menu-item"
959
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
973
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
974
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
960
975
  >
961
976
  <input
962
977
  class="pf-v5-c-check__input"
963
978
  type="checkbox"
964
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
965
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
979
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
980
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
966
981
  />
967
-
968
982
  <span class="pf-v5-c-check__label">Paused</span>
969
983
  </label>
970
984
  <label
971
985
  class="pf-v5-c-check pf-v5-c-select__menu-item"
972
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
986
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
987
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
973
988
  >
974
989
  <input
975
990
  class="pf-v5-c-check__input"
976
991
  type="checkbox"
977
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
978
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
992
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
993
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
979
994
  />
980
-
981
995
  <span class="pf-v5-c-check__label">Warning</span>
982
996
  </label>
983
997
  <label
984
998
  class="pf-v5-c-check pf-v5-c-select__menu-item"
985
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
999
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1000
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
986
1001
  >
987
1002
  <input
988
1003
  class="pf-v5-c-check__input"
989
1004
  type="checkbox"
990
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
991
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1005
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1006
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
992
1007
  />
993
-
994
1008
  <span class="pf-v5-c-check__label">Restarted</span>
995
1009
  </label>
996
1010
  </fieldset>
@@ -1027,71 +1041,77 @@ In some instances, it may be necessary to adjust spacing explicitly where items
1027
1041
  >
1028
1042
  <label
1029
1043
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1030
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1044
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1045
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1031
1046
  >
1032
1047
  <input
1033
1048
  class="pf-v5-c-check__input"
1034
1049
  type="checkbox"
1035
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1036
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1050
+ aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
1051
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1052
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1037
1053
  />
1038
-
1039
1054
  <span class="pf-v5-c-check__label">Active</span>
1040
- <span class="pf-v5-c-check__description">This is a description</span>
1055
+ <span
1056
+ class="pf-v5-c-check__description"
1057
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
1058
+ >This is a description</span>
1041
1059
  </label>
1042
1060
  <label
1043
1061
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1044
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1062
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1063
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1045
1064
  >
1046
1065
  <input
1047
1066
  class="pf-v5-c-check__input"
1048
1067
  type="checkbox"
1049
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1050
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1068
+ aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
1069
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1070
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1051
1071
  />
1052
-
1053
1072
  <span class="pf-v5-c-check__label">Canceled</span>
1054
1073
  <span
1055
1074
  class="pf-v5-c-check__description"
1075
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
1056
1076
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1057
1077
  </label>
1058
1078
  <label
1059
1079
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1060
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1080
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1081
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1061
1082
  >
1062
1083
  <input
1063
1084
  class="pf-v5-c-check__input"
1064
1085
  type="checkbox"
1065
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1066
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1086
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1087
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1067
1088
  />
1068
-
1069
1089
  <span class="pf-v5-c-check__label">Paused</span>
1070
1090
  </label>
1071
1091
  <label
1072
1092
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1073
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1093
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1094
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1074
1095
  >
1075
1096
  <input
1076
1097
  class="pf-v5-c-check__input"
1077
1098
  type="checkbox"
1078
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1079
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1099
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1100
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1080
1101
  />
1081
-
1082
1102
  <span class="pf-v5-c-check__label">Warning</span>
1083
1103
  </label>
1084
1104
  <label
1085
1105
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1086
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1106
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1107
+ for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1087
1108
  >
1088
1109
  <input
1089
1110
  class="pf-v5-c-check__input"
1090
1111
  type="checkbox"
1091
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1092
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1112
+ id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1113
+ name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1093
1114
  />
1094
-
1095
1115
  <span class="pf-v5-c-check__label">Restarted</span>
1096
1116
  </label>
1097
1117
  </fieldset>
@@ -1333,73 +1353,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1333
1353
  >
1334
1354
  <label
1335
1355
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1336
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
1356
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
1357
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
1337
1358
  >
1338
1359
  <input
1339
1360
  class="pf-v5-c-check__input"
1340
1361
  type="checkbox"
1341
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
1342
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
1362
+ aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
1363
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
1364
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
1343
1365
  />
1344
-
1345
1366
  <span class="pf-v5-c-check__label">Active</span>
1346
1367
  <span
1347
1368
  class="pf-v5-c-check__description"
1369
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
1348
1370
  >This is a description</span>
1349
1371
  </label>
1350
1372
  <label
1351
1373
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1352
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
1374
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
1375
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
1353
1376
  >
1354
1377
  <input
1355
1378
  class="pf-v5-c-check__input"
1356
1379
  type="checkbox"
1357
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
1358
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
1380
+ aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
1381
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
1382
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
1359
1383
  />
1360
-
1361
1384
  <span class="pf-v5-c-check__label">Canceled</span>
1362
1385
  <span
1363
1386
  class="pf-v5-c-check__description"
1387
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
1364
1388
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1365
1389
  </label>
1366
1390
  <label
1367
1391
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1368
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
1392
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
1393
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
1369
1394
  >
1370
1395
  <input
1371
1396
  class="pf-v5-c-check__input"
1372
1397
  type="checkbox"
1373
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
1374
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
1398
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
1399
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
1375
1400
  />
1376
-
1377
1401
  <span class="pf-v5-c-check__label">Paused</span>
1378
1402
  </label>
1379
1403
  <label
1380
1404
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1381
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
1405
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
1406
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
1382
1407
  >
1383
1408
  <input
1384
1409
  class="pf-v5-c-check__input"
1385
1410
  type="checkbox"
1386
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
1387
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
1411
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
1412
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
1388
1413
  />
1389
-
1390
1414
  <span class="pf-v5-c-check__label">Warning</span>
1391
1415
  </label>
1392
1416
  <label
1393
1417
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1394
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1418
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1419
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1395
1420
  >
1396
1421
  <input
1397
1422
  class="pf-v5-c-check__input"
1398
1423
  type="checkbox"
1399
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1400
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1424
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1425
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1401
1426
  />
1402
-
1403
1427
  <span class="pf-v5-c-check__label">Restarted</span>
1404
1428
  </label>
1405
1429
  </fieldset>
@@ -1436,73 +1460,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1436
1460
  >
1437
1461
  <label
1438
1462
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1439
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1463
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1464
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1440
1465
  >
1441
1466
  <input
1442
1467
  class="pf-v5-c-check__input"
1443
1468
  type="checkbox"
1444
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1445
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1469
+ aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
1470
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1471
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1446
1472
  />
1447
-
1448
1473
  <span class="pf-v5-c-check__label">Active</span>
1449
1474
  <span
1450
1475
  class="pf-v5-c-check__description"
1476
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
1451
1477
  >This is a description</span>
1452
1478
  </label>
1453
1479
  <label
1454
1480
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1455
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1481
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1482
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1456
1483
  >
1457
1484
  <input
1458
1485
  class="pf-v5-c-check__input"
1459
1486
  type="checkbox"
1460
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1461
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1487
+ aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
1488
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1489
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1462
1490
  />
1463
-
1464
1491
  <span class="pf-v5-c-check__label">Canceled</span>
1465
1492
  <span
1466
1493
  class="pf-v5-c-check__description"
1494
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
1467
1495
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1468
1496
  </label>
1469
1497
  <label
1470
1498
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1471
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1499
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1500
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1472
1501
  >
1473
1502
  <input
1474
1503
  class="pf-v5-c-check__input"
1475
1504
  type="checkbox"
1476
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1477
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1505
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1506
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1478
1507
  />
1479
-
1480
1508
  <span class="pf-v5-c-check__label">Paused</span>
1481
1509
  </label>
1482
1510
  <label
1483
1511
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1484
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1512
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1513
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1485
1514
  >
1486
1515
  <input
1487
1516
  class="pf-v5-c-check__input"
1488
1517
  type="checkbox"
1489
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1490
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1518
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1519
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1491
1520
  />
1492
-
1493
1521
  <span class="pf-v5-c-check__label">Warning</span>
1494
1522
  </label>
1495
1523
  <label
1496
1524
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1497
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1525
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1526
+ for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1498
1527
  >
1499
1528
  <input
1500
1529
  class="pf-v5-c-check__input"
1501
1530
  type="checkbox"
1502
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1503
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1531
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1532
+ name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1504
1533
  />
1505
-
1506
1534
  <span class="pf-v5-c-check__label">Restarted</span>
1507
1535
  </label>
1508
1536
  </fieldset>
@@ -1986,71 +2014,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1986
2014
  >
1987
2015
  <label
1988
2016
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1989
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
2017
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
2018
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
1990
2019
  >
1991
2020
  <input
1992
2021
  class="pf-v5-c-check__input"
1993
2022
  type="checkbox"
1994
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
1995
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
2023
+ aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-description"
2024
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
2025
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
1996
2026
  />
1997
-
1998
2027
  <span class="pf-v5-c-check__label">Active</span>
1999
- <span class="pf-v5-c-check__description">This is a description</span>
2028
+ <span
2029
+ class="pf-v5-c-check__description"
2030
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-description"
2031
+ >This is a description</span>
2000
2032
  </label>
2001
2033
  <label
2002
2034
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2003
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
2035
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
2036
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
2004
2037
  >
2005
2038
  <input
2006
2039
  class="pf-v5-c-check__input"
2007
2040
  type="checkbox"
2008
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
2009
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
2041
+ aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-description"
2042
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
2043
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
2010
2044
  />
2011
-
2012
2045
  <span class="pf-v5-c-check__label">Canceled</span>
2013
2046
  <span
2014
2047
  class="pf-v5-c-check__description"
2048
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-description"
2015
2049
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2016
2050
  </label>
2017
2051
  <label
2018
2052
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2019
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
2053
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
2054
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
2020
2055
  >
2021
2056
  <input
2022
2057
  class="pf-v5-c-check__input"
2023
2058
  type="checkbox"
2024
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
2025
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
2059
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
2060
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
2026
2061
  />
2027
-
2028
2062
  <span class="pf-v5-c-check__label">Paused</span>
2029
2063
  </label>
2030
2064
  <label
2031
2065
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2032
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
2066
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
2067
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
2033
2068
  >
2034
2069
  <input
2035
2070
  class="pf-v5-c-check__input"
2036
2071
  type="checkbox"
2037
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
2038
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
2072
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
2073
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
2039
2074
  />
2040
-
2041
2075
  <span class="pf-v5-c-check__label">Warning</span>
2042
2076
  </label>
2043
2077
  <label
2044
2078
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2045
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
2079
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
2080
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
2046
2081
  >
2047
2082
  <input
2048
2083
  class="pf-v5-c-check__input"
2049
2084
  type="checkbox"
2050
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
2051
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
2085
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
2086
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
2052
2087
  />
2053
-
2054
2088
  <span class="pf-v5-c-check__label">Restarted</span>
2055
2089
  </label>
2056
2090
  </fieldset>
@@ -2087,71 +2121,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2087
2121
  >
2088
2122
  <label
2089
2123
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2090
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
2124
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
2125
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
2091
2126
  >
2092
2127
  <input
2093
2128
  class="pf-v5-c-check__input"
2094
2129
  type="checkbox"
2095
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
2096
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
2130
+ aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-description"
2131
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
2132
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
2097
2133
  />
2098
-
2099
2134
  <span class="pf-v5-c-check__label">Active</span>
2100
- <span class="pf-v5-c-check__description">This is a description</span>
2135
+ <span
2136
+ class="pf-v5-c-check__description"
2137
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-description"
2138
+ >This is a description</span>
2101
2139
  </label>
2102
2140
  <label
2103
2141
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2104
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
2142
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
2143
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
2105
2144
  >
2106
2145
  <input
2107
2146
  class="pf-v5-c-check__input"
2108
2147
  type="checkbox"
2109
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
2110
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
2148
+ aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-description"
2149
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
2150
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
2111
2151
  />
2112
-
2113
2152
  <span class="pf-v5-c-check__label">Canceled</span>
2114
2153
  <span
2115
2154
  class="pf-v5-c-check__description"
2155
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-description"
2116
2156
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2117
2157
  </label>
2118
2158
  <label
2119
2159
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2120
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
2160
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
2161
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
2121
2162
  >
2122
2163
  <input
2123
2164
  class="pf-v5-c-check__input"
2124
2165
  type="checkbox"
2125
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
2126
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
2166
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
2167
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
2127
2168
  />
2128
-
2129
2169
  <span class="pf-v5-c-check__label">Paused</span>
2130
2170
  </label>
2131
2171
  <label
2132
2172
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2133
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
2173
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
2174
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
2134
2175
  >
2135
2176
  <input
2136
2177
  class="pf-v5-c-check__input"
2137
2178
  type="checkbox"
2138
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
2139
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
2179
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
2180
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
2140
2181
  />
2141
-
2142
2182
  <span class="pf-v5-c-check__label">Warning</span>
2143
2183
  </label>
2144
2184
  <label
2145
2185
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2146
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
2186
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
2187
+ for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
2147
2188
  >
2148
2189
  <input
2149
2190
  class="pf-v5-c-check__input"
2150
2191
  type="checkbox"
2151
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
2152
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
2192
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
2193
+ name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
2153
2194
  />
2154
-
2155
2195
  <span class="pf-v5-c-check__label">Restarted</span>
2156
2196
  </label>
2157
2197
  </fieldset>
@@ -2434,73 +2474,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2434
2474
  >
2435
2475
  <label
2436
2476
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2437
- for="toolbar-selected-filters-example-select-checkbox-status-active"
2477
+ id="toolbar-selected-filters-example-select-checkbox-status-active"
2478
+ for="toolbar-selected-filters-example-select-checkbox-status-active-input"
2438
2479
  >
2439
2480
  <input
2440
2481
  class="pf-v5-c-check__input"
2441
2482
  type="checkbox"
2442
- id="toolbar-selected-filters-example-select-checkbox-status-active"
2443
- name="toolbar-selected-filters-example-select-checkbox-status-active"
2483
+ aria-describedby="toolbar-selected-filters-example-select-checkbox-status-active-description"
2484
+ id="toolbar-selected-filters-example-select-checkbox-status-active-input"
2485
+ name="toolbar-selected-filters-example-select-checkbox-status-active-input"
2444
2486
  />
2445
-
2446
2487
  <span class="pf-v5-c-check__label">Active</span>
2447
2488
  <span
2448
2489
  class="pf-v5-c-check__description"
2490
+ id="toolbar-selected-filters-example-select-checkbox-status-active-description"
2449
2491
  >This is a description</span>
2450
2492
  </label>
2451
2493
  <label
2452
2494
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2453
- for="toolbar-selected-filters-example-select-checkbox-status-canceled"
2495
+ id="toolbar-selected-filters-example-select-checkbox-status-canceled"
2496
+ for="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
2454
2497
  >
2455
2498
  <input
2456
2499
  class="pf-v5-c-check__input"
2457
2500
  type="checkbox"
2458
- id="toolbar-selected-filters-example-select-checkbox-status-canceled"
2459
- name="toolbar-selected-filters-example-select-checkbox-status-canceled"
2501
+ aria-describedby="toolbar-selected-filters-example-select-checkbox-status-canceled-description"
2502
+ id="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
2503
+ name="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
2460
2504
  />
2461
-
2462
2505
  <span class="pf-v5-c-check__label">Canceled</span>
2463
2506
  <span
2464
2507
  class="pf-v5-c-check__description"
2508
+ id="toolbar-selected-filters-example-select-checkbox-status-canceled-description"
2465
2509
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2466
2510
  </label>
2467
2511
  <label
2468
2512
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2469
- for="toolbar-selected-filters-example-select-checkbox-status-paused"
2513
+ id="toolbar-selected-filters-example-select-checkbox-status-paused"
2514
+ for="toolbar-selected-filters-example-select-checkbox-status-paused-input"
2470
2515
  >
2471
2516
  <input
2472
2517
  class="pf-v5-c-check__input"
2473
2518
  type="checkbox"
2474
- id="toolbar-selected-filters-example-select-checkbox-status-paused"
2475
- name="toolbar-selected-filters-example-select-checkbox-status-paused"
2519
+ id="toolbar-selected-filters-example-select-checkbox-status-paused-input"
2520
+ name="toolbar-selected-filters-example-select-checkbox-status-paused-input"
2476
2521
  />
2477
-
2478
2522
  <span class="pf-v5-c-check__label">Paused</span>
2479
2523
  </label>
2480
2524
  <label
2481
2525
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2482
- for="toolbar-selected-filters-example-select-checkbox-status-warning"
2526
+ id="toolbar-selected-filters-example-select-checkbox-status-warning"
2527
+ for="toolbar-selected-filters-example-select-checkbox-status-warning-input"
2483
2528
  >
2484
2529
  <input
2485
2530
  class="pf-v5-c-check__input"
2486
2531
  type="checkbox"
2487
- id="toolbar-selected-filters-example-select-checkbox-status-warning"
2488
- name="toolbar-selected-filters-example-select-checkbox-status-warning"
2532
+ id="toolbar-selected-filters-example-select-checkbox-status-warning-input"
2533
+ name="toolbar-selected-filters-example-select-checkbox-status-warning-input"
2489
2534
  />
2490
-
2491
2535
  <span class="pf-v5-c-check__label">Warning</span>
2492
2536
  </label>
2493
2537
  <label
2494
2538
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2495
- for="toolbar-selected-filters-example-select-checkbox-status-restarted"
2539
+ id="toolbar-selected-filters-example-select-checkbox-status-restarted"
2540
+ for="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
2496
2541
  >
2497
2542
  <input
2498
2543
  class="pf-v5-c-check__input"
2499
2544
  type="checkbox"
2500
- id="toolbar-selected-filters-example-select-checkbox-status-restarted"
2501
- name="toolbar-selected-filters-example-select-checkbox-status-restarted"
2545
+ id="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
2546
+ name="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
2502
2547
  />
2503
-
2504
2548
  <span class="pf-v5-c-check__label">Restarted</span>
2505
2549
  </label>
2506
2550
  </fieldset>
@@ -2537,73 +2581,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2537
2581
  >
2538
2582
  <label
2539
2583
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2540
- for="toolbar-selected-filters-example-select-checkbox-risk-active"
2584
+ id="toolbar-selected-filters-example-select-checkbox-risk-active"
2585
+ for="toolbar-selected-filters-example-select-checkbox-risk-active-input"
2541
2586
  >
2542
2587
  <input
2543
2588
  class="pf-v5-c-check__input"
2544
2589
  type="checkbox"
2545
- id="toolbar-selected-filters-example-select-checkbox-risk-active"
2546
- name="toolbar-selected-filters-example-select-checkbox-risk-active"
2590
+ aria-describedby="toolbar-selected-filters-example-select-checkbox-risk-active-description"
2591
+ id="toolbar-selected-filters-example-select-checkbox-risk-active-input"
2592
+ name="toolbar-selected-filters-example-select-checkbox-risk-active-input"
2547
2593
  />
2548
-
2549
2594
  <span class="pf-v5-c-check__label">Active</span>
2550
2595
  <span
2551
2596
  class="pf-v5-c-check__description"
2597
+ id="toolbar-selected-filters-example-select-checkbox-risk-active-description"
2552
2598
  >This is a description</span>
2553
2599
  </label>
2554
2600
  <label
2555
2601
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2556
- for="toolbar-selected-filters-example-select-checkbox-risk-canceled"
2602
+ id="toolbar-selected-filters-example-select-checkbox-risk-canceled"
2603
+ for="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
2557
2604
  >
2558
2605
  <input
2559
2606
  class="pf-v5-c-check__input"
2560
2607
  type="checkbox"
2561
- id="toolbar-selected-filters-example-select-checkbox-risk-canceled"
2562
- name="toolbar-selected-filters-example-select-checkbox-risk-canceled"
2608
+ aria-describedby="toolbar-selected-filters-example-select-checkbox-risk-canceled-description"
2609
+ id="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
2610
+ name="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
2563
2611
  />
2564
-
2565
2612
  <span class="pf-v5-c-check__label">Canceled</span>
2566
2613
  <span
2567
2614
  class="pf-v5-c-check__description"
2615
+ id="toolbar-selected-filters-example-select-checkbox-risk-canceled-description"
2568
2616
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2569
2617
  </label>
2570
2618
  <label
2571
2619
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2572
- for="toolbar-selected-filters-example-select-checkbox-risk-paused"
2620
+ id="toolbar-selected-filters-example-select-checkbox-risk-paused"
2621
+ for="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
2573
2622
  >
2574
2623
  <input
2575
2624
  class="pf-v5-c-check__input"
2576
2625
  type="checkbox"
2577
- id="toolbar-selected-filters-example-select-checkbox-risk-paused"
2578
- name="toolbar-selected-filters-example-select-checkbox-risk-paused"
2626
+ id="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
2627
+ name="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
2579
2628
  />
2580
-
2581
2629
  <span class="pf-v5-c-check__label">Paused</span>
2582
2630
  </label>
2583
2631
  <label
2584
2632
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2585
- for="toolbar-selected-filters-example-select-checkbox-risk-warning"
2633
+ id="toolbar-selected-filters-example-select-checkbox-risk-warning"
2634
+ for="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
2586
2635
  >
2587
2636
  <input
2588
2637
  class="pf-v5-c-check__input"
2589
2638
  type="checkbox"
2590
- id="toolbar-selected-filters-example-select-checkbox-risk-warning"
2591
- name="toolbar-selected-filters-example-select-checkbox-risk-warning"
2639
+ id="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
2640
+ name="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
2592
2641
  />
2593
-
2594
2642
  <span class="pf-v5-c-check__label">Warning</span>
2595
2643
  </label>
2596
2644
  <label
2597
2645
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2598
- for="toolbar-selected-filters-example-select-checkbox-risk-restarted"
2646
+ id="toolbar-selected-filters-example-select-checkbox-risk-restarted"
2647
+ for="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
2599
2648
  >
2600
2649
  <input
2601
2650
  class="pf-v5-c-check__input"
2602
2651
  type="checkbox"
2603
- id="toolbar-selected-filters-example-select-checkbox-risk-restarted"
2604
- name="toolbar-selected-filters-example-select-checkbox-risk-restarted"
2652
+ id="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
2653
+ name="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
2605
2654
  />
2606
-
2607
2655
  <span class="pf-v5-c-check__label">Restarted</span>
2608
2656
  </label>
2609
2657
  </fieldset>
@@ -2925,73 +2973,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2925
2973
  >
2926
2974
  <label
2927
2975
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2928
- for="-select-checkbox-resource-active"
2976
+ id="-select-checkbox-resource-active"
2977
+ for="-select-checkbox-resource-active-input"
2929
2978
  >
2930
2979
  <input
2931
2980
  class="pf-v5-c-check__input"
2932
2981
  type="checkbox"
2933
- id="-select-checkbox-resource-active"
2934
- name="-select-checkbox-resource-active"
2982
+ aria-describedby="-select-checkbox-resource-active-description"
2983
+ id="-select-checkbox-resource-active-input"
2984
+ name="-select-checkbox-resource-active-input"
2935
2985
  />
2936
-
2937
2986
  <span class="pf-v5-c-check__label">Active</span>
2938
2987
  <span
2939
2988
  class="pf-v5-c-check__description"
2989
+ id="-select-checkbox-resource-active-description"
2940
2990
  >This is a description</span>
2941
2991
  </label>
2942
2992
  <label
2943
2993
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2944
- for="-select-checkbox-resource-canceled"
2994
+ id="-select-checkbox-resource-canceled"
2995
+ for="-select-checkbox-resource-canceled-input"
2945
2996
  >
2946
2997
  <input
2947
2998
  class="pf-v5-c-check__input"
2948
2999
  type="checkbox"
2949
- id="-select-checkbox-resource-canceled"
2950
- name="-select-checkbox-resource-canceled"
3000
+ aria-describedby="-select-checkbox-resource-canceled-description"
3001
+ id="-select-checkbox-resource-canceled-input"
3002
+ name="-select-checkbox-resource-canceled-input"
2951
3003
  />
2952
-
2953
3004
  <span class="pf-v5-c-check__label">Canceled</span>
2954
3005
  <span
2955
3006
  class="pf-v5-c-check__description"
3007
+ id="-select-checkbox-resource-canceled-description"
2956
3008
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2957
3009
  </label>
2958
3010
  <label
2959
3011
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2960
- for="-select-checkbox-resource-paused"
3012
+ id="-select-checkbox-resource-paused"
3013
+ for="-select-checkbox-resource-paused-input"
2961
3014
  >
2962
3015
  <input
2963
3016
  class="pf-v5-c-check__input"
2964
3017
  type="checkbox"
2965
- id="-select-checkbox-resource-paused"
2966
- name="-select-checkbox-resource-paused"
3018
+ id="-select-checkbox-resource-paused-input"
3019
+ name="-select-checkbox-resource-paused-input"
2967
3020
  />
2968
-
2969
3021
  <span class="pf-v5-c-check__label">Paused</span>
2970
3022
  </label>
2971
3023
  <label
2972
3024
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2973
- for="-select-checkbox-resource-warning"
3025
+ id="-select-checkbox-resource-warning"
3026
+ for="-select-checkbox-resource-warning-input"
2974
3027
  >
2975
3028
  <input
2976
3029
  class="pf-v5-c-check__input"
2977
3030
  type="checkbox"
2978
- id="-select-checkbox-resource-warning"
2979
- name="-select-checkbox-resource-warning"
3031
+ id="-select-checkbox-resource-warning-input"
3032
+ name="-select-checkbox-resource-warning-input"
2980
3033
  />
2981
-
2982
3034
  <span class="pf-v5-c-check__label">Warning</span>
2983
3035
  </label>
2984
3036
  <label
2985
3037
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2986
- for="-select-checkbox-resource-restarted"
3038
+ id="-select-checkbox-resource-restarted"
3039
+ for="-select-checkbox-resource-restarted-input"
2987
3040
  >
2988
3041
  <input
2989
3042
  class="pf-v5-c-check__input"
2990
3043
  type="checkbox"
2991
- id="-select-checkbox-resource-restarted"
2992
- name="-select-checkbox-resource-restarted"
3044
+ id="-select-checkbox-resource-restarted-input"
3045
+ name="-select-checkbox-resource-restarted-input"
2993
3046
  />
2994
-
2995
3047
  <span class="pf-v5-c-check__label">Restarted</span>
2996
3048
  </label>
2997
3049
  </fieldset>
@@ -3030,73 +3082,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3030
3082
  >
3031
3083
  <label
3032
3084
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3033
- for="-select-checkbox-status-active"
3085
+ id="-select-checkbox-status-active"
3086
+ for="-select-checkbox-status-active-input"
3034
3087
  >
3035
3088
  <input
3036
3089
  class="pf-v5-c-check__input"
3037
3090
  type="checkbox"
3038
- id="-select-checkbox-status-active"
3039
- name="-select-checkbox-status-active"
3091
+ aria-describedby="-select-checkbox-status-active-description"
3092
+ id="-select-checkbox-status-active-input"
3093
+ name="-select-checkbox-status-active-input"
3040
3094
  />
3041
-
3042
3095
  <span class="pf-v5-c-check__label">Active</span>
3043
3096
  <span
3044
3097
  class="pf-v5-c-check__description"
3098
+ id="-select-checkbox-status-active-description"
3045
3099
  >This is a description</span>
3046
3100
  </label>
3047
3101
  <label
3048
3102
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3049
- for="-select-checkbox-status-canceled"
3103
+ id="-select-checkbox-status-canceled"
3104
+ for="-select-checkbox-status-canceled-input"
3050
3105
  >
3051
3106
  <input
3052
3107
  class="pf-v5-c-check__input"
3053
3108
  type="checkbox"
3054
- id="-select-checkbox-status-canceled"
3055
- name="-select-checkbox-status-canceled"
3109
+ aria-describedby="-select-checkbox-status-canceled-description"
3110
+ id="-select-checkbox-status-canceled-input"
3111
+ name="-select-checkbox-status-canceled-input"
3056
3112
  />
3057
-
3058
3113
  <span class="pf-v5-c-check__label">Canceled</span>
3059
3114
  <span
3060
3115
  class="pf-v5-c-check__description"
3116
+ id="-select-checkbox-status-canceled-description"
3061
3117
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3062
3118
  </label>
3063
3119
  <label
3064
3120
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3065
- for="-select-checkbox-status-paused"
3121
+ id="-select-checkbox-status-paused"
3122
+ for="-select-checkbox-status-paused-input"
3066
3123
  >
3067
3124
  <input
3068
3125
  class="pf-v5-c-check__input"
3069
3126
  type="checkbox"
3070
- id="-select-checkbox-status-paused"
3071
- name="-select-checkbox-status-paused"
3127
+ id="-select-checkbox-status-paused-input"
3128
+ name="-select-checkbox-status-paused-input"
3072
3129
  />
3073
-
3074
3130
  <span class="pf-v5-c-check__label">Paused</span>
3075
3131
  </label>
3076
3132
  <label
3077
3133
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3078
- for="-select-checkbox-status-warning"
3134
+ id="-select-checkbox-status-warning"
3135
+ for="-select-checkbox-status-warning-input"
3079
3136
  >
3080
3137
  <input
3081
3138
  class="pf-v5-c-check__input"
3082
3139
  type="checkbox"
3083
- id="-select-checkbox-status-warning"
3084
- name="-select-checkbox-status-warning"
3140
+ id="-select-checkbox-status-warning-input"
3141
+ name="-select-checkbox-status-warning-input"
3085
3142
  />
3086
-
3087
3143
  <span class="pf-v5-c-check__label">Warning</span>
3088
3144
  </label>
3089
3145
  <label
3090
3146
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3091
- for="-select-checkbox-status-restarted"
3147
+ id="-select-checkbox-status-restarted"
3148
+ for="-select-checkbox-status-restarted-input"
3092
3149
  >
3093
3150
  <input
3094
3151
  class="pf-v5-c-check__input"
3095
3152
  type="checkbox"
3096
- id="-select-checkbox-status-restarted"
3097
- name="-select-checkbox-status-restarted"
3153
+ id="-select-checkbox-status-restarted-input"
3154
+ name="-select-checkbox-status-restarted-input"
3098
3155
  />
3099
-
3100
3156
  <span class="pf-v5-c-check__label">Restarted</span>
3101
3157
  </label>
3102
3158
  </fieldset>
@@ -3135,73 +3191,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3135
3191
  >
3136
3192
  <label
3137
3193
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3138
- for="-select-checkbox-type-active"
3194
+ id="-select-checkbox-type-active"
3195
+ for="-select-checkbox-type-active-input"
3139
3196
  >
3140
3197
  <input
3141
3198
  class="pf-v5-c-check__input"
3142
3199
  type="checkbox"
3143
- id="-select-checkbox-type-active"
3144
- name="-select-checkbox-type-active"
3200
+ aria-describedby="-select-checkbox-type-active-description"
3201
+ id="-select-checkbox-type-active-input"
3202
+ name="-select-checkbox-type-active-input"
3145
3203
  />
3146
-
3147
3204
  <span class="pf-v5-c-check__label">Active</span>
3148
3205
  <span
3149
3206
  class="pf-v5-c-check__description"
3207
+ id="-select-checkbox-type-active-description"
3150
3208
  >This is a description</span>
3151
3209
  </label>
3152
3210
  <label
3153
3211
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3154
- for="-select-checkbox-type-canceled"
3212
+ id="-select-checkbox-type-canceled"
3213
+ for="-select-checkbox-type-canceled-input"
3155
3214
  >
3156
3215
  <input
3157
3216
  class="pf-v5-c-check__input"
3158
3217
  type="checkbox"
3159
- id="-select-checkbox-type-canceled"
3160
- name="-select-checkbox-type-canceled"
3218
+ aria-describedby="-select-checkbox-type-canceled-description"
3219
+ id="-select-checkbox-type-canceled-input"
3220
+ name="-select-checkbox-type-canceled-input"
3161
3221
  />
3162
-
3163
3222
  <span class="pf-v5-c-check__label">Canceled</span>
3164
3223
  <span
3165
3224
  class="pf-v5-c-check__description"
3225
+ id="-select-checkbox-type-canceled-description"
3166
3226
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3167
3227
  </label>
3168
3228
  <label
3169
3229
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3170
- for="-select-checkbox-type-paused"
3230
+ id="-select-checkbox-type-paused"
3231
+ for="-select-checkbox-type-paused-input"
3171
3232
  >
3172
3233
  <input
3173
3234
  class="pf-v5-c-check__input"
3174
3235
  type="checkbox"
3175
- id="-select-checkbox-type-paused"
3176
- name="-select-checkbox-type-paused"
3236
+ id="-select-checkbox-type-paused-input"
3237
+ name="-select-checkbox-type-paused-input"
3177
3238
  />
3178
-
3179
3239
  <span class="pf-v5-c-check__label">Paused</span>
3180
3240
  </label>
3181
3241
  <label
3182
3242
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3183
- for="-select-checkbox-type-warning"
3243
+ id="-select-checkbox-type-warning"
3244
+ for="-select-checkbox-type-warning-input"
3184
3245
  >
3185
3246
  <input
3186
3247
  class="pf-v5-c-check__input"
3187
3248
  type="checkbox"
3188
- id="-select-checkbox-type-warning"
3189
- name="-select-checkbox-type-warning"
3249
+ id="-select-checkbox-type-warning-input"
3250
+ name="-select-checkbox-type-warning-input"
3190
3251
  />
3191
-
3192
3252
  <span class="pf-v5-c-check__label">Warning</span>
3193
3253
  </label>
3194
3254
  <label
3195
3255
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3196
- for="-select-checkbox-type-restarted"
3256
+ id="-select-checkbox-type-restarted"
3257
+ for="-select-checkbox-type-restarted-input"
3197
3258
  >
3198
3259
  <input
3199
3260
  class="pf-v5-c-check__input"
3200
3261
  type="checkbox"
3201
- id="-select-checkbox-type-restarted"
3202
- name="-select-checkbox-type-restarted"
3262
+ id="-select-checkbox-type-restarted-input"
3263
+ name="-select-checkbox-type-restarted-input"
3203
3264
  />
3204
-
3205
3265
  <span class="pf-v5-c-check__label">Restarted</span>
3206
3266
  </label>
3207
3267
  </fieldset>
@@ -3416,22 +3476,26 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3416
3476
  </div>
3417
3477
 
3418
3478
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3419
- <button
3420
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3421
- type="button"
3422
- aria-label="Go to first page"
3423
- aria-disabled="true"
3424
- >
3425
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3426
- </button>
3427
- <button
3428
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3429
- type="button"
3430
- aria-label="Go to previous page"
3431
- aria-disabled="true"
3432
- >
3433
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3434
- </button>
3479
+ <div class="pf-v5-c-pagination__nav-control pf-m-first">
3480
+ <button
3481
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
3482
+ type="button"
3483
+ aria-label="Go to first page"
3484
+ aria-disabled="true"
3485
+ >
3486
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3487
+ </button>
3488
+ </div>
3489
+ <div class="pf-v5-c-pagination__nav-control pf-m-prev">
3490
+ <button
3491
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
3492
+ type="button"
3493
+ aria-label="Go to previous page"
3494
+ aria-disabled="true"
3495
+ >
3496
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3497
+ </button>
3498
+ </div>
3435
3499
 
3436
3500
  <div
3437
3501
  class="pf-v5-c-pagination__nav-page-select"
@@ -3448,20 +3512,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3448
3512
  </span>
3449
3513
  <span aria-hidden="true">of 4</span>
3450
3514
  </div>
3451
- <button
3452
- class="pf-v5-c-button pf-m-plain"
3453
- type="button"
3454
- aria-label="Go to next page"
3455
- >
3456
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3457
- </button>
3458
- <button
3459
- class="pf-v5-c-button pf-m-plain"
3460
- type="button"
3461
- aria-label="Go to last page"
3462
- >
3463
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3464
- </button>
3515
+ <div class="pf-v5-c-pagination__nav-control pf-m-next">
3516
+ <button
3517
+ class="pf-v5-c-button pf-m-plain"
3518
+ type="button"
3519
+ aria-label="Go to next page"
3520
+ >
3521
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3522
+ </button>
3523
+ </div>
3524
+ <div class="pf-v5-c-pagination__nav-control pf-m-last">
3525
+ <button
3526
+ class="pf-v5-c-button pf-m-plain"
3527
+ type="button"
3528
+ aria-label="Go to last page"
3529
+ >
3530
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3531
+ </button>
3532
+ </div>
3465
3533
  </nav>
3466
3534
  </div>
3467
3535
  </div>
@@ -3570,71 +3638,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3570
3638
  >
3571
3639
  <label
3572
3640
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3573
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
3641
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
3642
+ for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
3574
3643
  >
3575
3644
  <input
3576
3645
  class="pf-v5-c-check__input"
3577
3646
  type="checkbox"
3578
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
3579
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
3647
+ aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-description"
3648
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
3649
+ name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
3580
3650
  />
3581
-
3582
3651
  <span class="pf-v5-c-check__label">Active</span>
3583
- <span class="pf-v5-c-check__description">This is a description</span>
3652
+ <span
3653
+ class="pf-v5-c-check__description"
3654
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-description"
3655
+ >This is a description</span>
3584
3656
  </label>
3585
3657
  <label
3586
3658
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3587
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
3659
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
3660
+ for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
3588
3661
  >
3589
3662
  <input
3590
3663
  class="pf-v5-c-check__input"
3591
3664
  type="checkbox"
3592
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
3593
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
3665
+ aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-description"
3666
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
3667
+ name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
3594
3668
  />
3595
-
3596
3669
  <span class="pf-v5-c-check__label">Canceled</span>
3597
3670
  <span
3598
3671
  class="pf-v5-c-check__description"
3672
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-description"
3599
3673
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3600
3674
  </label>
3601
3675
  <label
3602
3676
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3603
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
3677
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
3678
+ for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
3604
3679
  >
3605
3680
  <input
3606
3681
  class="pf-v5-c-check__input"
3607
3682
  type="checkbox"
3608
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
3609
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
3683
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
3684
+ name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
3610
3685
  />
3611
-
3612
3686
  <span class="pf-v5-c-check__label">Paused</span>
3613
3687
  </label>
3614
3688
  <label
3615
3689
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3616
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
3690
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
3691
+ for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
3617
3692
  >
3618
3693
  <input
3619
3694
  class="pf-v5-c-check__input"
3620
3695
  type="checkbox"
3621
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
3622
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
3696
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
3697
+ name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
3623
3698
  />
3624
-
3625
3699
  <span class="pf-v5-c-check__label">Warning</span>
3626
3700
  </label>
3627
3701
  <label
3628
3702
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3629
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
3703
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
3704
+ for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
3630
3705
  >
3631
3706
  <input
3632
3707
  class="pf-v5-c-check__input"
3633
3708
  type="checkbox"
3634
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
3635
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
3709
+ id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
3710
+ name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
3636
3711
  />
3637
-
3638
3712
  <span class="pf-v5-c-check__label">Restarted</span>
3639
3713
  </label>
3640
3714
  </fieldset>
@@ -3672,71 +3746,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3672
3746
  >
3673
3747
  <label
3674
3748
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3675
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
3749
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
3750
+ for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
3676
3751
  >
3677
3752
  <input
3678
3753
  class="pf-v5-c-check__input"
3679
3754
  type="checkbox"
3680
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
3681
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
3755
+ aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-description"
3756
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
3757
+ name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
3682
3758
  />
3683
-
3684
3759
  <span class="pf-v5-c-check__label">Active</span>
3685
- <span class="pf-v5-c-check__description">This is a description</span>
3760
+ <span
3761
+ class="pf-v5-c-check__description"
3762
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-description"
3763
+ >This is a description</span>
3686
3764
  </label>
3687
3765
  <label
3688
3766
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3689
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
3767
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
3768
+ for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
3690
3769
  >
3691
3770
  <input
3692
3771
  class="pf-v5-c-check__input"
3693
3772
  type="checkbox"
3694
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
3695
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
3773
+ aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-description"
3774
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
3775
+ name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
3696
3776
  />
3697
-
3698
3777
  <span class="pf-v5-c-check__label">Canceled</span>
3699
3778
  <span
3700
3779
  class="pf-v5-c-check__description"
3780
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-description"
3701
3781
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3702
3782
  </label>
3703
3783
  <label
3704
3784
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3705
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
3785
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
3786
+ for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
3706
3787
  >
3707
3788
  <input
3708
3789
  class="pf-v5-c-check__input"
3709
3790
  type="checkbox"
3710
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
3711
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
3791
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
3792
+ name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
3712
3793
  />
3713
-
3714
3794
  <span class="pf-v5-c-check__label">Paused</span>
3715
3795
  </label>
3716
3796
  <label
3717
3797
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3718
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
3798
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
3799
+ for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
3719
3800
  >
3720
3801
  <input
3721
3802
  class="pf-v5-c-check__input"
3722
3803
  type="checkbox"
3723
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
3724
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
3804
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
3805
+ name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
3725
3806
  />
3726
-
3727
3807
  <span class="pf-v5-c-check__label">Warning</span>
3728
3808
  </label>
3729
3809
  <label
3730
3810
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3731
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
3811
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
3812
+ for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
3732
3813
  >
3733
3814
  <input
3734
3815
  class="pf-v5-c-check__input"
3735
3816
  type="checkbox"
3736
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
3737
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
3817
+ id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
3818
+ name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
3738
3819
  />
3739
-
3740
3820
  <span class="pf-v5-c-check__label">Restarted</span>
3741
3821
  </label>
3742
3822
  </fieldset>
@@ -3774,71 +3854,77 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3774
3854
  >
3775
3855
  <label
3776
3856
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3777
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
3857
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
3858
+ for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
3778
3859
  >
3779
3860
  <input
3780
3861
  class="pf-v5-c-check__input"
3781
3862
  type="checkbox"
3782
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
3783
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
3863
+ aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-description"
3864
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
3865
+ name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
3784
3866
  />
3785
-
3786
3867
  <span class="pf-v5-c-check__label">Active</span>
3787
- <span class="pf-v5-c-check__description">This is a description</span>
3868
+ <span
3869
+ class="pf-v5-c-check__description"
3870
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-description"
3871
+ >This is a description</span>
3788
3872
  </label>
3789
3873
  <label
3790
3874
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3791
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
3875
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
3876
+ for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
3792
3877
  >
3793
3878
  <input
3794
3879
  class="pf-v5-c-check__input"
3795
3880
  type="checkbox"
3796
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
3797
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
3881
+ aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-description"
3882
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
3883
+ name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
3798
3884
  />
3799
-
3800
3885
  <span class="pf-v5-c-check__label">Canceled</span>
3801
3886
  <span
3802
3887
  class="pf-v5-c-check__description"
3888
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-description"
3803
3889
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3804
3890
  </label>
3805
3891
  <label
3806
3892
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3807
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
3893
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
3894
+ for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
3808
3895
  >
3809
3896
  <input
3810
3897
  class="pf-v5-c-check__input"
3811
3898
  type="checkbox"
3812
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
3813
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
3899
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
3900
+ name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
3814
3901
  />
3815
-
3816
3902
  <span class="pf-v5-c-check__label">Paused</span>
3817
3903
  </label>
3818
3904
  <label
3819
3905
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3820
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
3906
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
3907
+ for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
3821
3908
  >
3822
3909
  <input
3823
3910
  class="pf-v5-c-check__input"
3824
3911
  type="checkbox"
3825
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
3826
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
3912
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
3913
+ name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
3827
3914
  />
3828
-
3829
3915
  <span class="pf-v5-c-check__label">Warning</span>
3830
3916
  </label>
3831
3917
  <label
3832
3918
  class="pf-v5-c-check pf-v5-c-select__menu-item"
3833
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
3919
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
3920
+ for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
3834
3921
  >
3835
3922
  <input
3836
3923
  class="pf-v5-c-check__input"
3837
3924
  type="checkbox"
3838
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
3839
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
3925
+ id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
3926
+ name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
3840
3927
  />
3841
-
3842
3928
  <span class="pf-v5-c-check__label">Restarted</span>
3843
3929
  </label>
3844
3930
  </fieldset>
@@ -3959,22 +4045,26 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3959
4045
  </div>
3960
4046
 
3961
4047
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3962
- <button
3963
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3964
- type="button"
3965
- aria-label="Go to first page"
3966
- aria-disabled="true"
3967
- >
3968
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3969
- </button>
3970
- <button
3971
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3972
- type="button"
3973
- aria-label="Go to previous page"
3974
- aria-disabled="true"
3975
- >
3976
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3977
- </button>
4048
+ <div class="pf-v5-c-pagination__nav-control pf-m-first">
4049
+ <button
4050
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
4051
+ type="button"
4052
+ aria-label="Go to first page"
4053
+ aria-disabled="true"
4054
+ >
4055
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
4056
+ </button>
4057
+ </div>
4058
+ <div class="pf-v5-c-pagination__nav-control pf-m-prev">
4059
+ <button
4060
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
4061
+ type="button"
4062
+ aria-label="Go to previous page"
4063
+ aria-disabled="true"
4064
+ >
4065
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4066
+ </button>
4067
+ </div>
3978
4068
 
3979
4069
  <div
3980
4070
  class="pf-v5-c-pagination__nav-page-select"
@@ -3991,20 +4081,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3991
4081
  </span>
3992
4082
  <span aria-hidden="true">of 4</span>
3993
4083
  </div>
3994
- <button
3995
- class="pf-v5-c-button pf-m-plain"
3996
- type="button"
3997
- aria-label="Go to next page"
3998
- >
3999
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4000
- </button>
4001
- <button
4002
- class="pf-v5-c-button pf-m-plain"
4003
- type="button"
4004
- aria-label="Go to last page"
4005
- >
4006
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4007
- </button>
4084
+ <div class="pf-v5-c-pagination__nav-control pf-m-next">
4085
+ <button
4086
+ class="pf-v5-c-button pf-m-plain"
4087
+ type="button"
4088
+ aria-label="Go to next page"
4089
+ >
4090
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4091
+ </button>
4092
+ </div>
4093
+ <div class="pf-v5-c-pagination__nav-control pf-m-last">
4094
+ <button
4095
+ class="pf-v5-c-button pf-m-plain"
4096
+ type="button"
4097
+ aria-label="Go to last page"
4098
+ >
4099
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4100
+ </button>
4101
+ </div>
4008
4102
  </nav>
4009
4103
  </div>
4010
4104
  </div>
@@ -4209,70 +4303,70 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4209
4303
  >
4210
4304
  <label
4211
4305
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4212
- for="toolbar-expanded-elements-example-select-checkbox-status-active"
4306
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-active"
4307
+ for="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
4213
4308
  >
4214
4309
  <input
4215
4310
  class="pf-v5-c-check__input"
4216
4311
  type="checkbox"
4217
- id="toolbar-expanded-elements-example-select-checkbox-status-active"
4218
- name="toolbar-expanded-elements-example-select-checkbox-status-active"
4312
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
4313
+ name="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
4314
+ checked
4219
4315
  />
4220
-
4221
4316
  <span class="pf-v5-c-check__label">Active</span>
4222
4317
  </label>
4223
4318
  <label
4224
4319
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4225
- for="toolbar-expanded-elements-example-select-checkbox-status-canceled"
4320
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-canceled"
4321
+ for="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
4226
4322
  >
4227
4323
  <input
4228
4324
  class="pf-v5-c-check__input"
4229
4325
  type="checkbox"
4230
- id="toolbar-expanded-elements-example-select-checkbox-status-canceled"
4231
- name="toolbar-expanded-elements-example-select-checkbox-status-canceled"
4326
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
4327
+ name="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
4232
4328
  checked
4233
4329
  />
4234
-
4235
4330
  <span class="pf-v5-c-check__label">Canceled</span>
4236
4331
  </label>
4237
4332
  <label
4238
4333
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4239
- for="toolbar-expanded-elements-example-select-checkbox-status-paused"
4334
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-paused"
4335
+ for="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
4240
4336
  >
4241
4337
  <input
4242
4338
  class="pf-v5-c-check__input"
4243
4339
  type="checkbox"
4244
- id="toolbar-expanded-elements-example-select-checkbox-status-paused"
4245
- name="toolbar-expanded-elements-example-select-checkbox-status-paused"
4246
- checked
4340
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
4341
+ name="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
4247
4342
  />
4248
-
4249
4343
  <span class="pf-v5-c-check__label">Paused</span>
4250
4344
  </label>
4251
4345
  <label
4252
4346
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4253
- for="toolbar-expanded-elements-example-select-checkbox-status-warning"
4347
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-warning"
4348
+ for="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
4254
4349
  >
4255
4350
  <input
4256
4351
  class="pf-v5-c-check__input"
4257
4352
  type="checkbox"
4258
- id="toolbar-expanded-elements-example-select-checkbox-status-warning"
4259
- name="toolbar-expanded-elements-example-select-checkbox-status-warning"
4353
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
4354
+ name="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
4355
+ checked
4260
4356
  />
4261
-
4262
4357
  <span class="pf-v5-c-check__label">Warning</span>
4263
4358
  </label>
4264
4359
  <label
4265
4360
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4266
- for="toolbar-expanded-elements-example-select-checkbox-status-restarted"
4361
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-restarted"
4362
+ for="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
4267
4363
  >
4268
4364
  <input
4269
4365
  class="pf-v5-c-check__input"
4270
4366
  type="checkbox"
4271
- id="toolbar-expanded-elements-example-select-checkbox-status-restarted"
4272
- name="toolbar-expanded-elements-example-select-checkbox-status-restarted"
4273
- checked
4367
+ id="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
4368
+ name="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
4274
4369
  />
4275
-
4276
4370
  <span class="pf-v5-c-check__label">Restarted</span>
4277
4371
  </label>
4278
4372
  </fieldset>
@@ -4309,70 +4403,70 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4309
4403
  >
4310
4404
  <label
4311
4405
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4312
- for="toolbar-expanded-elements-example-select-checkbox-risk-active"
4406
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-active"
4407
+ for="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
4313
4408
  >
4314
4409
  <input
4315
4410
  class="pf-v5-c-check__input"
4316
4411
  type="checkbox"
4317
- id="toolbar-expanded-elements-example-select-checkbox-risk-active"
4318
- name="toolbar-expanded-elements-example-select-checkbox-risk-active"
4412
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
4413
+ name="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
4414
+ checked
4319
4415
  />
4320
-
4321
4416
  <span class="pf-v5-c-check__label">Active</span>
4322
4417
  </label>
4323
4418
  <label
4324
4419
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4325
- for="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
4420
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled"
4421
+ for="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
4326
4422
  >
4327
4423
  <input
4328
4424
  class="pf-v5-c-check__input"
4329
4425
  type="checkbox"
4330
- id="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
4331
- name="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
4426
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
4427
+ name="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
4332
4428
  checked
4333
4429
  />
4334
-
4335
4430
  <span class="pf-v5-c-check__label">Canceled</span>
4336
4431
  </label>
4337
4432
  <label
4338
4433
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4339
- for="toolbar-expanded-elements-example-select-checkbox-risk-paused"
4434
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-paused"
4435
+ for="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
4340
4436
  >
4341
4437
  <input
4342
4438
  class="pf-v5-c-check__input"
4343
4439
  type="checkbox"
4344
- id="toolbar-expanded-elements-example-select-checkbox-risk-paused"
4345
- name="toolbar-expanded-elements-example-select-checkbox-risk-paused"
4346
- checked
4440
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
4441
+ name="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
4347
4442
  />
4348
-
4349
4443
  <span class="pf-v5-c-check__label">Paused</span>
4350
4444
  </label>
4351
4445
  <label
4352
4446
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4353
- for="toolbar-expanded-elements-example-select-checkbox-risk-warning"
4447
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-warning"
4448
+ for="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
4354
4449
  >
4355
4450
  <input
4356
4451
  class="pf-v5-c-check__input"
4357
4452
  type="checkbox"
4358
- id="toolbar-expanded-elements-example-select-checkbox-risk-warning"
4359
- name="toolbar-expanded-elements-example-select-checkbox-risk-warning"
4453
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
4454
+ name="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
4455
+ checked
4360
4456
  />
4361
-
4362
4457
  <span class="pf-v5-c-check__label">Warning</span>
4363
4458
  </label>
4364
4459
  <label
4365
4460
  class="pf-v5-c-check pf-v5-c-select__menu-item"
4366
- for="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
4461
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted"
4462
+ for="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
4367
4463
  >
4368
4464
  <input
4369
4465
  class="pf-v5-c-check__input"
4370
4466
  type="checkbox"
4371
- id="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
4372
- name="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
4373
- checked
4467
+ id="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
4468
+ name="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
4374
4469
  />
4375
-
4376
4470
  <span class="pf-v5-c-check__label">Restarted</span>
4377
4471
  </label>
4378
4472
  </fieldset>