@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.31

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 (290) hide show
  1. package/RELEASE-NOTES.md +17 -0
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pficon.scss +6 -0
  4. package/assets/pficon/pficon.woff +0 -0
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fonts.scss +22 -22
  10. package/base/_globals.scss +1 -1
  11. package/base/_icons.scss +1 -28
  12. package/base/_svg-icons.scss +6 -0
  13. package/base/_variables.scss +1 -1
  14. package/base/patternfly-common.css +0 -10
  15. package/base/patternfly-fonts.css +17 -17
  16. package/base/patternfly-icons.css +6 -20
  17. package/base/patternfly-pf-icons.css +5 -1
  18. package/base/themes/dark/_globals.scss +1 -1
  19. package/base/themes/dark/_variables.scss +1 -1
  20. package/components/AboutModalBox/about-modal-box.css +7 -7
  21. package/components/AboutModalBox/about-modal-box.scss +7 -7
  22. package/components/Accordion/accordion.css +2 -0
  23. package/components/Accordion/accordion.scss +2 -0
  24. package/components/Alert/alert.css +3 -3
  25. package/components/Alert/alert.scss +3 -3
  26. package/components/AppLauncher/app-launcher.css +2 -0
  27. package/components/AppLauncher/app-launcher.scss +2 -0
  28. package/components/Avatar/avatar.scss +2 -2
  29. package/components/Banner/banner.css +14 -14
  30. package/components/Banner/banner.scss +9 -13
  31. package/components/Breadcrumb/breadcrumb.css +2 -0
  32. package/components/Breadcrumb/breadcrumb.scss +2 -0
  33. package/components/CalendarMonth/calendar-month.css +2 -2
  34. package/components/CalendarMonth/calendar-month.scss +3 -3
  35. package/components/Card/card.css +20 -21
  36. package/components/Card/card.scss +22 -26
  37. package/components/Chip/chip.css +33 -24
  38. package/components/Chip/chip.scss +40 -31
  39. package/components/ChipGroup/chip-group.css +27 -17
  40. package/components/ChipGroup/chip-group.scss +36 -22
  41. package/components/Content/content.css +11 -5
  42. package/components/Content/content.scss +17 -9
  43. package/components/ContextSelector/context-selector.css +5 -1
  44. package/components/ContextSelector/context-selector.scss +6 -2
  45. package/components/DataList/data-list-grid.css +7 -7
  46. package/components/DataList/data-list-grid.scss +1 -1
  47. package/components/DataList/data-list.css +12 -11
  48. package/components/DataList/data-list.scss +5 -4
  49. package/components/DescriptionList/description-list.css +7 -7
  50. package/components/DescriptionList/description-list.scss +7 -7
  51. package/components/Divider/divider.css +2 -2
  52. package/components/Divider/divider.scss +3 -3
  53. package/components/Drawer/drawer.css +15 -16
  54. package/components/Drawer/drawer.scss +2 -3
  55. package/components/Dropdown/dropdown.css +12 -10
  56. package/components/Dropdown/dropdown.scss +2 -0
  57. package/components/DualListSelector/dual-list-selector.css +1 -1
  58. package/components/DualListSelector/dual-list-selector.scss +1 -1
  59. package/components/EmptyState/empty-state.css +46 -52
  60. package/components/EmptyState/empty-state.scss +58 -57
  61. package/components/ExpandableSection/expandable-section.css +2 -0
  62. package/components/ExpandableSection/expandable-section.scss +2 -0
  63. package/components/Form/form.css +12 -12
  64. package/components/Form/form.scss +7 -7
  65. package/components/FormControl/form-control.css +2 -5
  66. package/components/FormControl/themes/dark/form-control.scss +2 -6
  67. package/components/Hint/hint.css +2 -2
  68. package/components/Hint/hint.scss +2 -2
  69. package/components/Label/label.css +43 -30
  70. package/components/Label/label.scss +49 -34
  71. package/components/LabelGroup/label-group.css +26 -22
  72. package/components/LabelGroup/label-group.scss +31 -26
  73. package/components/Login/login.css +11 -11
  74. package/components/Login/login.scss +10 -10
  75. package/components/Masthead/masthead.css +4 -4
  76. package/components/Masthead/masthead.scss +4 -4
  77. package/components/Menu/menu.css +9 -6
  78. package/components/Menu/menu.scss +34 -31
  79. package/components/MenuToggle/menu-toggle.css +3 -1
  80. package/components/MenuToggle/menu-toggle.scss +3 -1
  81. package/components/ModalBox/modal-box.css +9 -8
  82. package/components/ModalBox/modal-box.scss +11 -11
  83. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  84. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  85. package/components/Nav/nav.css +1 -1
  86. package/components/Nav/nav.scss +2 -2
  87. package/components/NotificationDrawer/notification-drawer.css +3 -3
  88. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  89. package/components/Page/page.css +71 -71
  90. package/components/Page/page.scss +12 -12
  91. package/components/Pagination/pagination.css +2 -2
  92. package/components/Popover/popover.css +25 -31
  93. package/components/Popover/popover.scss +27 -32
  94. package/components/Popover/themes/dark/popover.scss +2 -8
  95. package/components/Progress/progress.css +13 -10
  96. package/components/Progress/progress.scss +13 -10
  97. package/components/ProgressStepper/progress-stepper.css +5 -5
  98. package/components/ProgressStepper/progress-stepper.scss +5 -5
  99. package/components/SearchInput/search-input.css +4 -2
  100. package/components/SearchInput/search-input.scss +4 -2
  101. package/components/Select/select.css +1 -1
  102. package/components/Select/select.scss +1 -1
  103. package/components/Sidebar/sidebar.css +69 -26
  104. package/components/Sidebar/sidebar.scss +84 -27
  105. package/components/SimpleList/simple-list.css +1 -1
  106. package/components/SimpleList/simple-list.scss +2 -2
  107. package/components/Spinner/spinner.css +4 -4
  108. package/components/Spinner/spinner.scss +4 -4
  109. package/components/Table/table-grid.css +28 -28
  110. package/components/Table/table-scrollable.css +31 -26
  111. package/components/Table/table-scrollable.scss +33 -28
  112. package/components/Table/table-tree-view.css +14 -4
  113. package/components/Table/table-tree-view.scss +15 -0
  114. package/components/Table/table.css +7 -2
  115. package/components/Table/table.scss +9 -2
  116. package/components/Tabs/tabs.css +0 -4
  117. package/components/Tabs/tabs.scss +0 -7
  118. package/components/TextInputGroup/text-input-group.css +6 -4
  119. package/components/TextInputGroup/text-input-group.scss +6 -5
  120. package/components/Tile/tile.css +1 -1
  121. package/components/Tile/tile.scss +1 -1
  122. package/components/Timestamp/timestamp.css +3 -3
  123. package/components/Timestamp/timestamp.scss +3 -3
  124. package/components/Toolbar/toolbar.css +78 -43
  125. package/components/Toolbar/toolbar.scss +50 -10
  126. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  127. package/components/Tooltip/tooltip.css +7 -12
  128. package/components/Tooltip/tooltip.scss +6 -3
  129. package/components/TreeView/tree-view.css +7 -15
  130. package/components/TreeView/tree-view.scss +7 -18
  131. package/components/Wizard/wizard.css +16 -1
  132. package/components/Wizard/wizard.scss +20 -2
  133. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  134. package/docs/components/Accordion/examples/Accordion.md +12 -12
  135. package/docs/components/ActionList/examples/ActionList.md +6 -6
  136. package/docs/components/Alert/examples/Alert.md +19 -19
  137. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  138. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  139. package/docs/components/Avatar/examples/Avatar.md +11 -11
  140. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  141. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  142. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  143. package/docs/components/Badge/examples/Badge.md +5 -5
  144. package/docs/components/Banner/examples/Banner.md +8 -8
  145. package/docs/components/Brand/examples/Brand.md +9 -9
  146. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  147. package/docs/components/Button/examples/Button.md +35 -35
  148. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  149. package/docs/components/Card/examples/Card.md +139 -64
  150. package/docs/components/Check/examples/Check.md +15 -19
  151. package/docs/components/Chip/examples/Chip.md +70 -52
  152. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  153. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  154. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  155. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  156. package/docs/components/Content/examples/Content.md +37 -9
  157. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  158. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  159. package/docs/components/DataList/examples/DataList.md +187 -148
  160. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  161. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  162. package/docs/components/Divider/examples/Divider.md +10 -10
  163. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  164. package/docs/components/Drawer/examples/Drawer.md +43 -43
  165. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  166. package/docs/components/Dropdown/examples/Dropdown.md +123 -99
  167. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  168. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  169. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  170. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  171. package/docs/components/Form/examples/Form.md +64 -64
  172. package/docs/components/FormControl/examples/FormControl.md +20 -20
  173. package/docs/components/HelperText/examples/HelperText.md +12 -12
  174. package/docs/components/Hint/examples/Hint.md +7 -7
  175. package/docs/components/Icon/examples/Icon.md +10 -10
  176. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  177. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  178. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  179. package/docs/components/Label/examples/Label.md +1427 -746
  180. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  181. package/docs/components/List/examples/List.md +18 -18
  182. package/docs/components/LogViewer/examples/LogViewer.md +79 -73
  183. package/docs/components/Login/examples/Login.md +32 -32
  184. package/docs/components/Masthead/examples/masthead.md +9 -9
  185. package/docs/components/Menu/examples/Menu.md +82 -80
  186. package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
  187. package/docs/components/ModalBox/examples/ModalBox.md +106 -85
  188. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  189. package/docs/components/Nav/examples/Navigation.md +69 -69
  190. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  191. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  192. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  193. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  194. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  195. package/docs/components/Page/examples/Page.md +54 -54
  196. package/docs/components/Pagination/examples/Pagination.md +27 -27
  197. package/docs/components/Panel/examples/Panel.md +10 -10
  198. package/docs/components/Popover/examples/Popover.md +201 -144
  199. package/docs/components/Progress/examples/Progress.md +31 -60
  200. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  201. package/docs/components/Radio/examples/Radio.md +11 -11
  202. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  203. package/docs/components/Select/examples/Select.md +367 -313
  204. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  205. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  206. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  207. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  208. package/docs/components/Slider/examples/Slider.md +24 -24
  209. package/docs/components/Spinner/examples/Spinner.md +24 -24
  210. package/docs/components/Switch/examples/Switch.md +19 -19
  211. package/docs/components/TabContent/examples/TabContent.md +13 -13
  212. package/docs/components/Table/examples/Table.css +4 -0
  213. package/docs/components/Table/examples/Table.md +3163 -1712
  214. package/docs/components/Tabs/examples/Tabs.md +149 -149
  215. package/docs/components/TextInputGroup/examples/TextInputGroup.md +362 -280
  216. package/docs/components/Tile/examples/Tile.md +15 -15
  217. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  218. package/docs/components/Title/examples/Title.md +17 -17
  219. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  220. package/docs/components/Toolbar/examples/Toolbar.md +466 -373
  221. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  222. package/docs/components/TreeView/examples/TreeView.md +34 -34
  223. package/docs/components/Truncate/examples/Truncate.md +4 -4
  224. package/docs/components/Wizard/examples/Wizard.md +119 -127
  225. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  226. package/docs/demos/Alert/examples/Alert.md +13 -13
  227. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  228. package/docs/demos/Banner/examples/Banner.md +8 -9
  229. package/docs/demos/Card/examples/Card.md +219 -156
  230. package/docs/demos/CardView/examples/CardView.md +56 -29
  231. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  232. package/docs/demos/Dashboard/examples/Dashboard.md +51 -35
  233. package/docs/demos/DataList/examples/DataList.md +158 -109
  234. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  235. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  236. package/docs/demos/Form/examples/BasicForms.md +28 -22
  237. package/docs/demos/HelperText/examples/HelperText.md +8 -9
  238. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  239. package/docs/demos/Masthead/examples/Masthead.md +29 -32
  240. package/docs/demos/Modal/examples/Modal.md +54 -66
  241. package/docs/demos/Nav/examples/Nav.md +47 -47
  242. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  243. package/docs/demos/Page/examples/Page.md +37 -37
  244. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
  245. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +74 -64
  246. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  247. package/docs/demos/Table/examples/Table.md +2454 -467
  248. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  249. package/docs/demos/Toolbar/examples/Toolbar.md +1808 -174
  250. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  251. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  252. package/docs/layouts/Flex/examples/Flex.md +98 -98
  253. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  254. package/docs/layouts/Grid/examples/Grid.md +9 -9
  255. package/docs/layouts/Level/examples/Level.md +5 -5
  256. package/docs/layouts/Split/examples/Split.md +7 -7
  257. package/docs/layouts/Stack/examples/Stack.md +6 -6
  258. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  259. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  260. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  261. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  262. package/docs/utilities/Display/examples/Display.md +11 -11
  263. package/docs/utilities/Flex/examples/Flex.md +34 -34
  264. package/docs/utilities/Float/examples/Float.md +4 -4
  265. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  266. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  267. package/docs/utilities/Text/examples/Text.md +27 -27
  268. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  269. package/layouts/Gallery/gallery.css +1 -1
  270. package/layouts/Gallery/gallery.scss +1 -1
  271. package/layouts/Grid/grid.css +7 -7
  272. package/layouts/Grid/grid.scss +2 -2
  273. package/package.json +59 -65
  274. package/patternfly-base-no-reset.css +23 -47
  275. package/patternfly-base.css +23 -47
  276. package/patternfly-no-reset.css +781 -656
  277. package/patternfly.css +781 -656
  278. package/patternfly.min.css +1 -1
  279. package/patternfly.min.css.map +1 -1
  280. package/sass-utilities/functions.scss +8 -24
  281. package/sass-utilities/mixins.scss +15 -39
  282. package/sass-utilities/scss-variables.scss +1 -1
  283. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  284. package/utilities/Spacing/spacing.scss +2 -2
  285. package/base/_shield-inheritable.scss +0 -69
  286. package/base/_shield-noninheritable.scss +0 -13
  287. package/base/patternfly-shield-inheritable.css +0 -66
  288. package/base/patternfly-shield-inheritable.scss +0 -4
  289. package/base/patternfly-shield-noninheritable.css +0 -9
  290. package/base/patternfly-shield-noninheritable.scss +0 -4
package/docs/demos/Table/examples/Table.md CHANGED
@@ -98,7 +98,7 @@ wrapperTag: div
98
98
  </div>
99
99
  <section class="pf-c-app-launcher__group">
100
100
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
101
- <ul>
101
+ <ul role="list">
102
102
  <li
103
103
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
104
104
  >
@@ -150,7 +150,7 @@ wrapperTag: div
150
150
  <hr class="pf-c-divider" />
151
151
  <section class="pf-c-app-launcher__group">
152
152
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
153
- <ul>
153
+ <ul role="list">
154
154
  <li
155
155
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
156
156
  >
@@ -801,7 +801,7 @@ wrapperTag: div
801
801
  <div class="pf-c-page__sidebar">
802
802
  <div class="pf-c-page__sidebar-body">
803
803
  <nav class="pf-c-nav" id="basic-demo-primary-nav" aria-label="Global">
804
- <ul class="pf-c-nav__list">
804
+ <ul class="pf-c-nav__list" role="list">
805
805
  <li class="pf-c-nav__item">
806
806
  <a href="#" class="pf-c-nav__link">System panel</a>
807
807
  </li>
@@ -829,7 +829,7 @@ wrapperTag: div
829
829
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
830
830
  <div class="pf-c-page__main-body">
831
831
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
832
- <ol class="pf-c-breadcrumb__list">
832
+ <ol class="pf-c-breadcrumb__list" role="list">
833
833
  <li class="pf-c-breadcrumb__item">
834
834
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
835
835
  </li>
@@ -898,11 +898,14 @@ wrapperTag: div
898
898
  class="pf-c-dropdown__toggle-check"
899
899
  for="-bulk-select-toggle-check"
900
900
  >
901
- <input
902
- type="checkbox"
903
- id="-bulk-select-toggle-check"
904
- aria-label="Select all"
905
- />
901
+ <div class="pf-c-check pf-m-standalone">
902
+ <input
903
+ class="pf-c-check__input"
904
+ type="checkbox"
905
+ id="-bulk-select-toggle-check"
906
+ aria-label="Select all"
907
+ />
908
+ </div>
906
909
  </label>
907
910
 
908
911
  <button
@@ -971,7 +974,6 @@ wrapperTag: div
971
974
  role="listbox"
972
975
  aria-labelledby="-select-name-label"
973
976
  hidden
974
- style="width: 175px"
975
977
  >
976
978
  <li role="presentation">
977
979
  <button
@@ -1019,9 +1021,9 @@ wrapperTag: div
1019
1021
  </span>
1020
1022
  <input
1021
1023
  class="pf-c-text-input-group__text-input"
1022
- type="text"
1023
- value
1024
+ type="search"
1024
1025
  placeholder="Filter by name"
1026
+ value
1025
1027
  aria-label="Type to filter"
1026
1028
  />
1027
1029
  </span>
@@ -1183,11 +1185,14 @@ wrapperTag: div
1183
1185
  <tbody role="rowgroup">
1184
1186
  <tr role="row">
1185
1187
  <td class="pf-c-table__check" role="cell">
1186
- <input
1187
- type="checkbox"
1188
- name="checkrow1"
1189
- aria-labelledby="basic-demo-table-node1"
1190
- />
1188
+ <div class="pf-c-check pf-m-standalone">
1189
+ <input
1190
+ class="pf-c-check__input"
1191
+ type="checkbox"
1192
+ name="checkrow1"
1193
+ aria-labelledby="basic-demo-table-node1"
1194
+ />
1195
+ </div>
1191
1196
  </td>
1192
1197
  <th role="columnheader" data-label="Repository name">
1193
1198
  <div>
@@ -1268,11 +1273,14 @@ wrapperTag: div
1268
1273
 
1269
1274
  <tr role="row">
1270
1275
  <td class="pf-c-table__check" role="cell">
1271
- <input
1272
- type="checkbox"
1273
- name="checkrow2"
1274
- aria-labelledby="basic-demo-table-node2"
1275
- />
1276
+ <div class="pf-c-check pf-m-standalone">
1277
+ <input
1278
+ class="pf-c-check__input"
1279
+ type="checkbox"
1280
+ name="checkrow2"
1281
+ aria-labelledby="basic-demo-table-node2"
1282
+ />
1283
+ </div>
1276
1284
  </td>
1277
1285
  <th role="columnheader" data-label="Repository name">
1278
1286
  <div>
@@ -1353,11 +1361,14 @@ wrapperTag: div
1353
1361
 
1354
1362
  <tr role="row">
1355
1363
  <td class="pf-c-table__check" role="cell">
1356
- <input
1357
- type="checkbox"
1358
- name="checkrow3"
1359
- aria-labelledby="basic-demo-table-node3"
1360
- />
1364
+ <div class="pf-c-check pf-m-standalone">
1365
+ <input
1366
+ class="pf-c-check__input"
1367
+ type="checkbox"
1368
+ name="checkrow3"
1369
+ aria-labelledby="basic-demo-table-node3"
1370
+ />
1371
+ </div>
1361
1372
  </td>
1362
1373
  <th role="columnheader" data-label="Repository name">
1363
1374
  <div>
@@ -1438,11 +1449,14 @@ wrapperTag: div
1438
1449
 
1439
1450
  <tr role="row">
1440
1451
  <td class="pf-c-table__check" role="cell">
1441
- <input
1442
- type="checkbox"
1443
- name="checkrow4"
1444
- aria-labelledby="basic-demo-table-node4"
1445
- />
1452
+ <div class="pf-c-check pf-m-standalone">
1453
+ <input
1454
+ class="pf-c-check__input"
1455
+ type="checkbox"
1456
+ name="checkrow4"
1457
+ aria-labelledby="basic-demo-table-node4"
1458
+ />
1459
+ </div>
1446
1460
  </td>
1447
1461
  <th role="columnheader" data-label="Repository name">
1448
1462
  <div>
@@ -1523,11 +1537,14 @@ wrapperTag: div
1523
1537
 
1524
1538
  <tr role="row">
1525
1539
  <td class="pf-c-table__check" role="cell">
1526
- <input
1527
- type="checkbox"
1528
- name="checkrow5"
1529
- aria-labelledby="basic-demo-table-node5"
1530
- />
1540
+ <div class="pf-c-check pf-m-standalone">
1541
+ <input
1542
+ class="pf-c-check__input"
1543
+ type="checkbox"
1544
+ name="checkrow5"
1545
+ aria-labelledby="basic-demo-table-node5"
1546
+ />
1547
+ </div>
1531
1548
  </td>
1532
1549
  <td role="cell" data-label="Repository name">
1533
1550
  <div>
@@ -1802,7 +1819,7 @@ wrapperTag: div
1802
1819
  </div>
1803
1820
  <section class="pf-c-app-launcher__group">
1804
1821
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1805
- <ul>
1822
+ <ul role="list">
1806
1823
  <li
1807
1824
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1808
1825
  >
@@ -1854,7 +1871,7 @@ wrapperTag: div
1854
1871
  <hr class="pf-c-divider" />
1855
1872
  <section class="pf-c-app-launcher__group">
1856
1873
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1857
- <ul>
1874
+ <ul role="list">
1858
1875
  <li
1859
1876
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1860
1877
  >
@@ -2505,7 +2522,7 @@ wrapperTag: div
2505
2522
  <div class="pf-c-page__sidebar">
2506
2523
  <div class="pf-c-page__sidebar-body">
2507
2524
  <nav class="pf-c-nav" id="sortable-demo-primary-nav" aria-label="Global">
2508
- <ul class="pf-c-nav__list">
2525
+ <ul class="pf-c-nav__list" role="list">
2509
2526
  <li class="pf-c-nav__item">
2510
2527
  <a href="#" class="pf-c-nav__link">System panel</a>
2511
2528
  </li>
@@ -2533,7 +2550,7 @@ wrapperTag: div
2533
2550
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2534
2551
  <div class="pf-c-page__main-body">
2535
2552
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2536
- <ol class="pf-c-breadcrumb__list">
2553
+ <ol class="pf-c-breadcrumb__list" role="list">
2537
2554
  <li class="pf-c-breadcrumb__item">
2538
2555
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2539
2556
  </li>
@@ -2600,11 +2617,14 @@ wrapperTag: div
2600
2617
  class="pf-c-dropdown__toggle-check"
2601
2618
  for="-bulk-select-toggle-check"
2602
2619
  >
2603
- <input
2604
- type="checkbox"
2605
- id="-bulk-select-toggle-check"
2606
- aria-label="Select all"
2607
- />
2620
+ <div class="pf-c-check pf-m-standalone">
2621
+ <input
2622
+ class="pf-c-check__input"
2623
+ type="checkbox"
2624
+ id="-bulk-select-toggle-check"
2625
+ aria-label="Select all"
2626
+ />
2627
+ </div>
2608
2628
  </label>
2609
2629
 
2610
2630
  <button
@@ -2673,7 +2693,6 @@ wrapperTag: div
2673
2693
  role="listbox"
2674
2694
  aria-labelledby="-select-name-label"
2675
2695
  hidden
2676
- style="width: 175px"
2677
2696
  >
2678
2697
  <li role="presentation">
2679
2698
  <button
@@ -2721,9 +2740,9 @@ wrapperTag: div
2721
2740
  </span>
2722
2741
  <input
2723
2742
  class="pf-c-text-input-group__text-input"
2724
- type="text"
2725
- value
2743
+ type="search"
2726
2744
  placeholder="Filter by name"
2745
+ value
2727
2746
  aria-label="Type to filter"
2728
2747
  />
2729
2748
  </span>
@@ -3061,11 +3080,14 @@ wrapperTag: div
3061
3080
  <tbody role="rowgroup">
3062
3081
  <tr role="row">
3063
3082
  <td class="pf-c-table__check" role="cell">
3064
- <input
3065
- type="checkbox"
3066
- name="checkrow1"
3067
- aria-labelledby="sortable-demo-table-node1"
3068
- />
3083
+ <div class="pf-c-check pf-m-standalone">
3084
+ <input
3085
+ class="pf-c-check__input"
3086
+ type="checkbox"
3087
+ name="checkrow1"
3088
+ aria-labelledby="sortable-demo-table-node1"
3089
+ />
3090
+ </div>
3069
3091
  </td>
3070
3092
  <th role="columnheader" data-label="Repository name">
3071
3093
  <div>
@@ -3146,11 +3168,14 @@ wrapperTag: div
3146
3168
 
3147
3169
  <tr role="row">
3148
3170
  <td class="pf-c-table__check" role="cell">
3149
- <input
3150
- type="checkbox"
3151
- name="checkrow2"
3152
- aria-labelledby="sortable-demo-table-node2"
3153
- />
3171
+ <div class="pf-c-check pf-m-standalone">
3172
+ <input
3173
+ class="pf-c-check__input"
3174
+ type="checkbox"
3175
+ name="checkrow2"
3176
+ aria-labelledby="sortable-demo-table-node2"
3177
+ />
3178
+ </div>
3154
3179
  </td>
3155
3180
  <th role="columnheader" data-label="Repository name">
3156
3181
  <div>
@@ -3231,11 +3256,14 @@ wrapperTag: div
3231
3256
 
3232
3257
  <tr role="row">
3233
3258
  <td class="pf-c-table__check" role="cell">
3234
- <input
3235
- type="checkbox"
3236
- name="checkrow3"
3237
- aria-labelledby="sortable-demo-table-node3"
3238
- />
3259
+ <div class="pf-c-check pf-m-standalone">
3260
+ <input
3261
+ class="pf-c-check__input"
3262
+ type="checkbox"
3263
+ name="checkrow3"
3264
+ aria-labelledby="sortable-demo-table-node3"
3265
+ />
3266
+ </div>
3239
3267
  </td>
3240
3268
  <th role="columnheader" data-label="Repository name">
3241
3269
  <div>
@@ -3316,11 +3344,14 @@ wrapperTag: div
3316
3344
 
3317
3345
  <tr role="row">
3318
3346
  <td class="pf-c-table__check" role="cell">
3319
- <input
3320
- type="checkbox"
3321
- name="checkrow4"
3322
- aria-labelledby="sortable-demo-table-node4"
3323
- />
3347
+ <div class="pf-c-check pf-m-standalone">
3348
+ <input
3349
+ class="pf-c-check__input"
3350
+ type="checkbox"
3351
+ name="checkrow4"
3352
+ aria-labelledby="sortable-demo-table-node4"
3353
+ />
3354
+ </div>
3324
3355
  </td>
3325
3356
  <th role="columnheader" data-label="Repository name">
3326
3357
  <div>
@@ -3401,11 +3432,14 @@ wrapperTag: div
3401
3432
 
3402
3433
  <tr role="row">
3403
3434
  <td class="pf-c-table__check" role="cell">
3404
- <input
3405
- type="checkbox"
3406
- name="checkrow4"
3407
- aria-labelledby="sortable-demo-table-node5"
3408
- />
3435
+ <div class="pf-c-check pf-m-standalone">
3436
+ <input
3437
+ class="pf-c-check__input"
3438
+ type="checkbox"
3439
+ name="checkrow5"
3440
+ aria-labelledby="sortable-demo-table-node5"
3441
+ />
3442
+ </div>
3409
3443
  </td>
3410
3444
  <td role="cell" data-label="Repository name">
3411
3445
  <div>
@@ -3680,7 +3714,7 @@ wrapperTag: div
3680
3714
  </div>
3681
3715
  <section class="pf-c-app-launcher__group">
3682
3716
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
3683
- <ul>
3717
+ <ul role="list">
3684
3718
  <li
3685
3719
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3686
3720
  >
@@ -3732,7 +3766,7 @@ wrapperTag: div
3732
3766
  <hr class="pf-c-divider" />
3733
3767
  <section class="pf-c-app-launcher__group">
3734
3768
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3735
- <ul>
3769
+ <ul role="list">
3736
3770
  <li
3737
3771
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
3738
3772
  >
@@ -4387,7 +4421,7 @@ wrapperTag: div
4387
4421
  id="expandable-demo-primary-nav"
4388
4422
  aria-label="Global"
4389
4423
  >
4390
- <ul class="pf-c-nav__list">
4424
+ <ul class="pf-c-nav__list" role="list">
4391
4425
  <li class="pf-c-nav__item">
4392
4426
  <a href="#" class="pf-c-nav__link">System panel</a>
4393
4427
  </li>
@@ -4415,7 +4449,7 @@ wrapperTag: div
4415
4449
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
4416
4450
  <div class="pf-c-page__main-body">
4417
4451
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4418
- <ol class="pf-c-breadcrumb__list">
4452
+ <ol class="pf-c-breadcrumb__list" role="list">
4419
4453
  <li class="pf-c-breadcrumb__item">
4420
4454
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
4421
4455
  </li>
@@ -4482,11 +4516,14 @@ wrapperTag: div
4482
4516
  class="pf-c-dropdown__toggle-check"
4483
4517
  for="-bulk-select-toggle-check"
4484
4518
  >
4485
- <input
4486
- type="checkbox"
4487
- id="-bulk-select-toggle-check"
4488
- aria-label="Select all"
4489
- />
4519
+ <div class="pf-c-check pf-m-standalone">
4520
+ <input
4521
+ class="pf-c-check__input"
4522
+ type="checkbox"
4523
+ id="-bulk-select-toggle-check"
4524
+ aria-label="Select all"
4525
+ />
4526
+ </div>
4490
4527
  </label>
4491
4528
 
4492
4529
  <button
@@ -4555,7 +4592,6 @@ wrapperTag: div
4555
4592
  role="listbox"
4556
4593
  aria-labelledby="-select-name-label"
4557
4594
  hidden
4558
- style="width: 175px"
4559
4595
  >
4560
4596
  <li role="presentation">
4561
4597
  <button
@@ -4603,9 +4639,9 @@ wrapperTag: div
4603
4639
  </span>
4604
4640
  <input
4605
4641
  class="pf-c-text-input-group__text-input"
4606
- type="text"
4607
- value
4642
+ type="search"
4608
4643
  placeholder="Filter by name"
4644
+ value
4609
4645
  aria-label="Type to filter"
4610
4646
  />
4611
4647
  </span>
@@ -4963,11 +4999,14 @@ wrapperTag: div
4963
4999
  </td>
4964
5000
 
4965
5001
  <td class="pf-c-table__check" role="cell">
4966
- <input
4967
- type="checkbox"
4968
- name="checkrow1"
4969
- aria-labelledby="expandable-demo-table-node1"
4970
- />
5002
+ <div class="pf-c-check pf-m-standalone">
5003
+ <input
5004
+ class="pf-c-check__input"
5005
+ type="checkbox"
5006
+ name="checkrow1"
5007
+ aria-labelledby="expandable-demo-table-node1"
5008
+ />
5009
+ </div>
4971
5010
  </td>
4972
5011
  <th role="columnheader" data-label="Repository name">
4973
5012
  <div>
@@ -5088,11 +5127,14 @@ wrapperTag: div
5088
5127
  </td>
5089
5128
 
5090
5129
  <td class="pf-c-table__check" role="cell">
5091
- <input
5092
- type="checkbox"
5093
- name="checkrow2"
5094
- aria-labelledby="expandable-demo-table-node2"
5095
- />
5130
+ <div class="pf-c-check pf-m-standalone">
5131
+ <input
5132
+ class="pf-c-check__input"
5133
+ type="checkbox"
5134
+ name="checkrow2"
5135
+ aria-labelledby="expandable-demo-table-node2"
5136
+ />
5137
+ </div>
5096
5138
  </td>
5097
5139
  <td role="cell" data-label="Repository name">
5098
5140
  <div>
@@ -5225,11 +5267,14 @@ wrapperTag: div
5225
5267
  </td>
5226
5268
 
5227
5269
  <td class="pf-c-table__check" role="cell">
5228
- <input
5229
- type="checkbox"
5230
- name="checkrow3"
5231
- aria-labelledby="expandable-demo-table-node3"
5232
- />
5270
+ <div class="pf-c-check pf-m-standalone">
5271
+ <input
5272
+ class="pf-c-check__input"
5273
+ type="checkbox"
5274
+ name="checkrow3"
5275
+ aria-labelledby="expandable-demo-table-node3"
5276
+ />
5277
+ </div>
5233
5278
  </td>
5234
5279
  <th role="columnheader" data-label="Repository name">
5235
5280
  <div>
@@ -5344,11 +5389,14 @@ wrapperTag: div
5344
5389
  </td>
5345
5390
 
5346
5391
  <td class="pf-c-table__check" role="cell">
5347
- <input
5348
- type="checkbox"
5349
- name="checkrow4"
5350
- aria-labelledby="expandable-demo-table-node4"
5351
- />
5392
+ <div class="pf-c-check pf-m-standalone">
5393
+ <input
5394
+ class="pf-c-check__input"
5395
+ type="checkbox"
5396
+ name="checkrow4"
5397
+ aria-labelledby="expandable-demo-table-node4"
5398
+ />
5399
+ </div>
5352
5400
  </td>
5353
5401
  <th role="columnheader" data-label="Repository name">
5354
5402
  <div>
@@ -5463,11 +5511,14 @@ wrapperTag: div
5463
5511
  </td>
5464
5512
 
5465
5513
  <td class="pf-c-table__check" role="cell">
5466
- <input
5467
- type="checkbox"
5468
- name="checkrow5"
5469
- aria-labelledby="expandable-demo-table-node5"
5470
- />
5514
+ <div class="pf-c-check pf-m-standalone">
5515
+ <input
5516
+ class="pf-c-check__input"
5517
+ type="checkbox"
5518
+ name="checkrow5"
5519
+ aria-labelledby="expandable-demo-table-node5"
5520
+ />
5521
+ </div>
5471
5522
  </td>
5472
5523
  <td role="cell" data-label="Repository name">
5473
5524
  <div>
@@ -5760,7 +5811,7 @@ wrapperTag: div
5760
5811
  </div>
5761
5812
  <section class="pf-c-app-launcher__group">
5762
5813
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
5763
- <ul>
5814
+ <ul role="list">
5764
5815
  <li
5765
5816
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5766
5817
  >
@@ -5812,7 +5863,7 @@ wrapperTag: div
5812
5863
  <hr class="pf-c-divider" />
5813
5864
  <section class="pf-c-app-launcher__group">
5814
5865
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
5815
- <ul>
5866
+ <ul role="list">
5816
5867
  <li
5817
5868
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
5818
5869
  >
@@ -6463,7 +6514,7 @@ wrapperTag: div
6463
6514
  <div class="pf-c-page__sidebar">
6464
6515
  <div class="pf-c-page__sidebar-body">
6465
6516
  <nav class="pf-c-nav" id="compact-demo-primary-nav" aria-label="Global">
6466
- <ul class="pf-c-nav__list">
6517
+ <ul class="pf-c-nav__list" role="list">
6467
6518
  <li class="pf-c-nav__item">
6468
6519
  <a href="#" class="pf-c-nav__link">System panel</a>
6469
6520
  </li>
@@ -6491,7 +6542,7 @@ wrapperTag: div
6491
6542
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
6492
6543
  <div class="pf-c-page__main-body">
6493
6544
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
6494
- <ol class="pf-c-breadcrumb__list">
6545
+ <ol class="pf-c-breadcrumb__list" role="list">
6495
6546
  <li class="pf-c-breadcrumb__item">
6496
6547
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
6497
6548
  </li>
@@ -6558,11 +6609,14 @@ wrapperTag: div
6558
6609
  class="pf-c-dropdown__toggle-check"
6559
6610
  for="-bulk-select-toggle-check"
6560
6611
  >
6561
- <input
6562
- type="checkbox"
6563
- id="-bulk-select-toggle-check"
6564
- aria-label="Select all"
6565
- />
6612
+ <div class="pf-c-check pf-m-standalone">
6613
+ <input
6614
+ class="pf-c-check__input"
6615
+ type="checkbox"
6616
+ id="-bulk-select-toggle-check"
6617
+ aria-label="Select all"
6618
+ />
6619
+ </div>
6566
6620
  </label>
6567
6621
 
6568
6622
  <button
@@ -6631,7 +6685,6 @@ wrapperTag: div
6631
6685
  role="listbox"
6632
6686
  aria-labelledby="-select-name-label"
6633
6687
  hidden
6634
- style="width: 175px"
6635
6688
  >
6636
6689
  <li role="presentation">
6637
6690
  <button
@@ -6679,9 +6732,9 @@ wrapperTag: div
6679
6732
  </span>
6680
6733
  <input
6681
6734
  class="pf-c-text-input-group__text-input"
6682
- type="text"
6683
- value
6735
+ type="search"
6684
6736
  placeholder="Filter by name"
6737
+ value
6685
6738
  aria-label="Type to filter"
6686
6739
  />
6687
6740
  </span>
@@ -7010,11 +7063,14 @@ wrapperTag: div
7010
7063
  <tbody role="rowgroup">
7011
7064
  <tr role="row">
7012
7065
  <td class="pf-c-table__check" role="cell">
7013
- <input
7014
- type="checkbox"
7015
- name="checkrow1"
7016
- aria-labelledby="compact-demo-table-name1"
7017
- />
7066
+ <div class="pf-c-check pf-m-standalone">
7067
+ <input
7068
+ class="pf-c-check__input"
7069
+ type="checkbox"
7070
+ name="checkrow1"
7071
+ aria-labelledby="compact-demo-table-name1"
7072
+ />
7073
+ </div>
7018
7074
  </td>
7019
7075
  <th role="columnheader" data-label="Contributor">
7020
7076
  <span id="compact-demo-table-name1">Sam Jones</span>
@@ -7083,11 +7139,14 @@ wrapperTag: div
7083
7139
 
7084
7140
  <tr role="row">
7085
7141
  <td class="pf-c-table__check" role="cell">
7086
- <input
7087
- type="checkbox"
7088
- name="checkrow2"
7089
- aria-labelledby="compact-demo-table-name2"
7090
- />
7142
+ <div class="pf-c-check pf-m-standalone">
7143
+ <input
7144
+ class="pf-c-check__input"
7145
+ type="checkbox"
7146
+ name="checkrow2"
7147
+ aria-labelledby="compact-demo-table-name2"
7148
+ />
7149
+ </div>
7091
7150
  </td>
7092
7151
  <th role="columnheader" data-label="Contributor">
7093
7152
  <span id="compact-demo-table-name2">Amy Miller</span>
@@ -7156,11 +7215,14 @@ wrapperTag: div
7156
7215
 
7157
7216
  <tr role="row">
7158
7217
  <td class="pf-c-table__check" role="cell">
7159
- <input
7160
- type="checkbox"
7161
- name="checkrow3"
7162
- aria-labelledby="compact-demo-table-name3"
7163
- />
7218
+ <div class="pf-c-check pf-m-standalone">
7219
+ <input
7220
+ class="pf-c-check__input"
7221
+ type="checkbox"
7222
+ name="checkrow3"
7223
+ aria-labelledby="compact-demo-table-name3"
7224
+ />
7225
+ </div>
7164
7226
  </td>
7165
7227
  <th role="columnheader" data-label="Contributor">
7166
7228
  <span id="compact-demo-table-name3">Steve Wilson</span>
@@ -7229,11 +7291,14 @@ wrapperTag: div
7229
7291
 
7230
7292
  <tr role="row">
7231
7293
  <td class="pf-c-table__check" role="cell">
7232
- <input
7233
- type="checkbox"
7234
- name="checkrow4"
7235
- aria-labelledby="compact-demo-table-name4"
7236
- />
7294
+ <div class="pf-c-check pf-m-standalone">
7295
+ <input
7296
+ class="pf-c-check__input"
7297
+ type="checkbox"
7298
+ name="checkrow4"
7299
+ aria-labelledby="compact-demo-table-name4"
7300
+ />
7301
+ </div>
7237
7302
  </td>
7238
7303
  <th role="columnheader" data-label="Contributor name">
7239
7304
  <span id="compact-demo-table-name4">Emma Jackson</span>
@@ -7496,7 +7561,7 @@ wrapperTag: div
7496
7561
  </div>
7497
7562
  <section class="pf-c-app-launcher__group">
7498
7563
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
7499
- <ul>
7564
+ <ul role="list">
7500
7565
  <li
7501
7566
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
7502
7567
  >
@@ -7548,7 +7613,7 @@ wrapperTag: div
7548
7613
  <hr class="pf-c-divider" />
7549
7614
  <section class="pf-c-app-launcher__group">
7550
7615
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
7551
- <ul>
7616
+ <ul role="list">
7552
7617
  <li
7553
7618
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
7554
7619
  >
@@ -8203,7 +8268,7 @@ wrapperTag: div
8203
8268
  id="compound-expansion-demo-primary-nav"
8204
8269
  aria-label="Global"
8205
8270
  >
8206
- <ul class="pf-c-nav__list">
8271
+ <ul class="pf-c-nav__list" role="list">
8207
8272
  <li class="pf-c-nav__item">
8208
8273
  <a href="#" class="pf-c-nav__link">System panel</a>
8209
8274
  </li>
@@ -8235,7 +8300,7 @@ wrapperTag: div
8235
8300
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
8236
8301
  <div class="pf-c-page__main-body">
8237
8302
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
8238
- <ol class="pf-c-breadcrumb__list">
8303
+ <ol class="pf-c-breadcrumb__list" role="list">
8239
8304
  <li class="pf-c-breadcrumb__item">
8240
8305
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
8241
8306
  </li>
@@ -8302,11 +8367,14 @@ wrapperTag: div
8302
8367
  class="pf-c-dropdown__toggle-check"
8303
8368
  for="-bulk-select-toggle-check"
8304
8369
  >
8305
- <input
8306
- type="checkbox"
8307
- id="-bulk-select-toggle-check"
8308
- aria-label="Select all"
8309
- />
8370
+ <div class="pf-c-check pf-m-standalone">
8371
+ <input
8372
+ class="pf-c-check__input"
8373
+ type="checkbox"
8374
+ id="-bulk-select-toggle-check"
8375
+ aria-label="Select all"
8376
+ />
8377
+ </div>
8310
8378
  </label>
8311
8379
 
8312
8380
  <button
@@ -8375,7 +8443,6 @@ wrapperTag: div
8375
8443
  role="listbox"
8376
8444
  aria-labelledby="-select-name-label"
8377
8445
  hidden
8378
- style="width: 175px"
8379
8446
  >
8380
8447
  <li role="presentation">
8381
8448
  <button
@@ -8423,9 +8490,9 @@ wrapperTag: div
8423
8490
  </span>
8424
8491
  <input
8425
8492
  class="pf-c-text-input-group__text-input"
8426
- type="text"
8427
- value
8493
+ type="search"
8428
8494
  placeholder="Filter by name"
8495
+ value
8429
8496
  aria-label="Type to filter"
8430
8497
  />
8431
8498
  </span>
@@ -12446,7 +12513,7 @@ wrapperTag: div
12446
12513
  </div>
12447
12514
  <section class="pf-c-app-launcher__group">
12448
12515
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
12449
- <ul>
12516
+ <ul role="list">
12450
12517
  <li
12451
12518
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
12452
12519
  >
@@ -12498,7 +12565,7 @@ wrapperTag: div
12498
12565
  <hr class="pf-c-divider" />
12499
12566
  <section class="pf-c-app-launcher__group">
12500
12567
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
12501
- <ul>
12568
+ <ul role="list">
12502
12569
  <li
12503
12570
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
12504
12571
  >
@@ -13153,7 +13220,7 @@ wrapperTag: div
13153
13220
  id="loading-state-demo-primary-nav"
13154
13221
  aria-label="Global"
13155
13222
  >
13156
- <ul class="pf-c-nav__list">
13223
+ <ul class="pf-c-nav__list" role="list">
13157
13224
  <li class="pf-c-nav__item">
13158
13225
  <a href="#" class="pf-c-nav__link">System panel</a>
13159
13226
  </li>
@@ -13185,7 +13252,7 @@ wrapperTag: div
13185
13252
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
13186
13253
  <div class="pf-c-page__main-body">
13187
13254
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
13188
- <ol class="pf-c-breadcrumb__list">
13255
+ <ol class="pf-c-breadcrumb__list" role="list">
13189
13256
  <li class="pf-c-breadcrumb__item">
13190
13257
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
13191
13258
  </li>
@@ -13237,11 +13304,14 @@ wrapperTag: div
13237
13304
  <thead>
13238
13305
  <tr role="row">
13239
13306
  <td class="pf-c-table__check" role="cell">
13240
- <input
13241
- type="checkbox"
13242
- name="check-all"
13243
- aria-label="Select all rows"
13244
- />
13307
+ <div class="pf-c-check pf-m-standalone">
13308
+ <input
13309
+ class="pf-c-check__input"
13310
+ type="checkbox"
13311
+ name="check-all"
13312
+ aria-label="Select all rows"
13313
+ />
13314
+ </div>
13245
13315
  </td>
13246
13316
  <th role="columnheader" scope="col">Repositories</th>
13247
13317
  <th role="columnheader" scope="col">Branches</th>
@@ -13376,7 +13446,7 @@ wrapperTag: div
13376
13446
  </div>
13377
13447
  <section class="pf-c-app-launcher__group">
13378
13448
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
13379
- <ul>
13449
+ <ul role="list">
13380
13450
  <li
13381
13451
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
13382
13452
  >
@@ -13428,7 +13498,7 @@ wrapperTag: div
13428
13498
  <hr class="pf-c-divider" />
13429
13499
  <section class="pf-c-app-launcher__group">
13430
13500
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
13431
- <ul>
13501
+ <ul role="list">
13432
13502
  <li
13433
13503
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
13434
13504
  >
@@ -14083,7 +14153,7 @@ wrapperTag: div
14083
14153
  id="empty-state-demo-primary-nav"
14084
14154
  aria-label="Global"
14085
14155
  >
14086
- <ul class="pf-c-nav__list">
14156
+ <ul class="pf-c-nav__list" role="list">
14087
14157
  <li class="pf-c-nav__item">
14088
14158
  <a href="#" class="pf-c-nav__link">System panel</a>
14089
14159
  </li>
@@ -14115,7 +14185,7 @@ wrapperTag: div
14115
14185
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
14116
14186
  <div class="pf-c-page__main-body">
14117
14187
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
14118
- <ol class="pf-c-breadcrumb__list">
14188
+ <ol class="pf-c-breadcrumb__list" role="list">
14119
14189
  <li class="pf-c-breadcrumb__item">
14120
14190
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
14121
14191
  </li>
@@ -14167,11 +14237,14 @@ wrapperTag: div
14167
14237
  <thead>
14168
14238
  <tr role="row">
14169
14239
  <td class="pf-c-table__check" role="cell">
14170
- <input
14171
- type="checkbox"
14172
- name="check-all"
14173
- aria-label="Select all rows"
14174
- />
14240
+ <div class="pf-c-check pf-m-standalone">
14241
+ <input
14242
+ class="pf-c-check__input"
14243
+ type="checkbox"
14244
+ name="check-all"
14245
+ aria-label="Select all rows"
14246
+ />
14247
+ </div>
14175
14248
  </td>
14176
14249
  <th role="columnheader" scope="col">Repositories</th>
14177
14250
  <th role="columnheader" scope="col">Branches</th>
@@ -14189,21 +14262,18 @@ wrapperTag: div
14189
14262
  <td role="cell" colspan="8">
14190
14263
  <div class="pf-c-empty-state pf-m-sm">
14191
14264
  <div class="pf-c-empty-state__content">
14192
- <i
14193
- class="fas fa- fa-search pf-c-empty-state__icon"
14194
- aria-hidden="true"
14195
- ></i>
14265
+ <div class="pf-c-empty-state__icon">
14266
+ <i class="fas fa- fa-search" aria-hidden="true"></i>
14267
+ </div>
14196
14268
 
14197
14269
  <h2 class="pf-c-title pf-m-lg">No results found</h2>
14198
14270
  <div
14199
14271
  class="pf-c-empty-state__body"
14200
14272
  >No results match the filter criteria. Remove all filters or clear all filters to show results.</div>
14201
- <div class="pf-c-empty-state__primary">
14202
- <button
14203
- class="pf-c-button pf-m-link"
14204
- type="button"
14205
- >Clear all filters</button>
14206
- </div>
14273
+ <button
14274
+ class="pf-c-button pf-m-link"
14275
+ type="button"
14276
+ >Clear all filters</button>
14207
14277
  </div>
14208
14278
  </div>
14209
14279
  </td>
@@ -14309,7 +14379,7 @@ wrapperTag: div
14309
14379
  </div>
14310
14380
  <section class="pf-c-app-launcher__group">
14311
14381
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
14312
- <ul>
14382
+ <ul role="list">
14313
14383
  <li
14314
14384
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
14315
14385
  >
@@ -14361,7 +14431,7 @@ wrapperTag: div
14361
14431
  <hr class="pf-c-divider" />
14362
14432
  <section class="pf-c-app-launcher__group">
14363
14433
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
14364
- <ul>
14434
+ <ul role="list">
14365
14435
  <li
14366
14436
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
14367
14437
  >
@@ -15016,7 +15086,7 @@ wrapperTag: div
15016
15086
  id="static-bottom-pagination-demo-primary-nav"
15017
15087
  aria-label="Global"
15018
15088
  >
15019
- <ul class="pf-c-nav__list">
15089
+ <ul class="pf-c-nav__list" role="list">
15020
15090
  <li class="pf-c-nav__item">
15021
15091
  <a href="#" class="pf-c-nav__link">System panel</a>
15022
15092
  </li>
@@ -15048,7 +15118,7 @@ wrapperTag: div
15048
15118
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
15049
15119
  <div class="pf-c-page__main-body">
15050
15120
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
15051
- <ol class="pf-c-breadcrumb__list">
15121
+ <ol class="pf-c-breadcrumb__list" role="list">
15052
15122
  <li class="pf-c-breadcrumb__item">
15053
15123
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
15054
15124
  </li>
@@ -15115,11 +15185,14 @@ wrapperTag: div
15115
15185
  class="pf-c-dropdown__toggle-check"
15116
15186
  for="-bulk-select-toggle-check"
15117
15187
  >
15118
- <input
15119
- type="checkbox"
15120
- id="-bulk-select-toggle-check"
15121
- aria-label="Select all"
15122
- />
15188
+ <div class="pf-c-check pf-m-standalone">
15189
+ <input
15190
+ class="pf-c-check__input"
15191
+ type="checkbox"
15192
+ id="-bulk-select-toggle-check"
15193
+ aria-label="Select all"
15194
+ />
15195
+ </div>
15123
15196
  </label>
15124
15197
 
15125
15198
  <button
@@ -15188,7 +15261,6 @@ wrapperTag: div
15188
15261
  role="listbox"
15189
15262
  aria-labelledby="-select-name-label"
15190
15263
  hidden
15191
- style="width: 175px"
15192
15264
  >
15193
15265
  <li role="presentation">
15194
15266
  <button
@@ -15236,9 +15308,9 @@ wrapperTag: div
15236
15308
  </span>
15237
15309
  <input
15238
15310
  class="pf-c-text-input-group__text-input"
15239
- type="text"
15240
- value
15311
+ type="search"
15241
15312
  placeholder="Filter by name"
15313
+ value
15242
15314
  aria-label="Type to filter"
15243
15315
  />
15244
15316
  </span>
@@ -15566,11 +15638,14 @@ wrapperTag: div
15566
15638
  <tbody role="rowgroup">
15567
15639
  <tr role="row">
15568
15640
  <td class="pf-c-table__check" role="cell">
15569
- <input
15570
- type="checkbox"
15571
- name="checkrow1"
15572
- aria-labelledby="static-bottom-pagination-demo-table-node1"
15573
- />
15641
+ <div class="pf-c-check pf-m-standalone">
15642
+ <input
15643
+ class="pf-c-check__input"
15644
+ type="checkbox"
15645
+ name="checkrow1"
15646
+ aria-labelledby="static-bottom-pagination-demo-table-node1"
15647
+ />
15648
+ </div>
15574
15649
  </td>
15575
15650
  <th role="columnheader" data-label="Repository name">
15576
15651
  <div>
@@ -15651,11 +15726,14 @@ wrapperTag: div
15651
15726
 
15652
15727
  <tr role="row">
15653
15728
  <td class="pf-c-table__check" role="cell">
15654
- <input
15655
- type="checkbox"
15656
- name="checkrow2"
15657
- aria-labelledby="static-bottom-pagination-demo-table-node2"
15658
- />
15729
+ <div class="pf-c-check pf-m-standalone">
15730
+ <input
15731
+ class="pf-c-check__input"
15732
+ type="checkbox"
15733
+ name="checkrow2"
15734
+ aria-labelledby="static-bottom-pagination-demo-table-node2"
15735
+ />
15736
+ </div>
15659
15737
  </td>
15660
15738
  <th role="columnheader" data-label="Repository name">
15661
15739
  <div>
@@ -15736,11 +15814,14 @@ wrapperTag: div
15736
15814
 
15737
15815
  <tr role="row">
15738
15816
  <td class="pf-c-table__check" role="cell">
15739
- <input
15740
- type="checkbox"
15741
- name="checkrow3"
15742
- aria-labelledby="static-bottom-pagination-demo-table-node3"
15743
- />
15817
+ <div class="pf-c-check pf-m-standalone">
15818
+ <input
15819
+ class="pf-c-check__input"
15820
+ type="checkbox"
15821
+ name="checkrow3"
15822
+ aria-labelledby="static-bottom-pagination-demo-table-node3"
15823
+ />
15824
+ </div>
15744
15825
  </td>
15745
15826
  <th role="columnheader" data-label="Repository name">
15746
15827
  <div>
@@ -15821,11 +15902,14 @@ wrapperTag: div
15821
15902
 
15822
15903
  <tr role="row">
15823
15904
  <td class="pf-c-table__check" role="cell">
15824
- <input
15825
- type="checkbox"
15826
- name="checkrow4"
15827
- aria-labelledby="static-bottom-pagination-demo-table-node4"
15828
- />
15905
+ <div class="pf-c-check pf-m-standalone">
15906
+ <input
15907
+ class="pf-c-check__input"
15908
+ type="checkbox"
15909
+ name="checkrow4"
15910
+ aria-labelledby="static-bottom-pagination-demo-table-node4"
15911
+ />
15912
+ </div>
15829
15913
  </td>
15830
15914
  <th role="columnheader" data-label="Repository name">
15831
15915
  <div>
@@ -15906,11 +15990,14 @@ wrapperTag: div
15906
15990
 
15907
15991
  <tr role="row">
15908
15992
  <td class="pf-c-table__check" role="cell">
15909
- <input
15910
- type="checkbox"
15911
- name="checkrow5"
15912
- aria-labelledby="static-bottom-pagination-demo-table-node5"
15913
- />
15993
+ <div class="pf-c-check pf-m-standalone">
15994
+ <input
15995
+ class="pf-c-check__input"
15996
+ type="checkbox"
15997
+ name="checkrow5"
15998
+ aria-labelledby="static-bottom-pagination-demo-table-node5"
15999
+ />
16000
+ </div>
15914
16001
  </td>
15915
16002
  <td role="cell" data-label="Repository name">
15916
16003
  <div>
@@ -16185,7 +16272,7 @@ wrapperTag: div
16185
16272
  </div>
16186
16273
  <section class="pf-c-app-launcher__group">
16187
16274
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
16188
- <ul>
16275
+ <ul role="list">
16189
16276
  <li
16190
16277
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
16191
16278
  >
@@ -16237,7 +16324,7 @@ wrapperTag: div
16237
16324
  <hr class="pf-c-divider" />
16238
16325
  <section class="pf-c-app-launcher__group">
16239
16326
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
16240
- <ul>
16327
+ <ul role="list">
16241
16328
  <li
16242
16329
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
16243
16330
  >
@@ -16892,7 +16979,7 @@ wrapperTag: div
16892
16979
  id="column-management-demo-primary-nav"
16893
16980
  aria-label="Global"
16894
16981
  >
16895
- <ul class="pf-c-nav__list">
16982
+ <ul class="pf-c-nav__list" role="list">
16896
16983
  <li class="pf-c-nav__item">
16897
16984
  <a href="#" class="pf-c-nav__link">System panel</a>
16898
16985
  </li>
@@ -16924,7 +17011,7 @@ wrapperTag: div
16924
17011
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
16925
17012
  <div class="pf-c-page__main-body">
16926
17013
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
16927
- <ol class="pf-c-breadcrumb__list">
17014
+ <ol class="pf-c-breadcrumb__list" role="list">
16928
17015
  <li class="pf-c-breadcrumb__item">
16929
17016
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
16930
17017
  </li>
@@ -16991,11 +17078,14 @@ wrapperTag: div
16991
17078
  class="pf-c-dropdown__toggle-check"
16992
17079
  for="-bulk-select-toggle-check"
16993
17080
  >
16994
- <input
16995
- type="checkbox"
16996
- id="-bulk-select-toggle-check"
16997
- aria-label="Select all"
16998
- />
17081
+ <div class="pf-c-check pf-m-standalone">
17082
+ <input
17083
+ class="pf-c-check__input"
17084
+ type="checkbox"
17085
+ id="-bulk-select-toggle-check"
17086
+ aria-label="Select all"
17087
+ />
17088
+ </div>
16999
17089
  </label>
17000
17090
 
17001
17091
  <button
@@ -17064,7 +17154,6 @@ wrapperTag: div
17064
17154
  role="listbox"
17065
17155
  aria-labelledby="-select-name-label"
17066
17156
  hidden
17067
- style="width: 175px"
17068
17157
  >
17069
17158
  <li role="presentation">
17070
17159
  <button
@@ -17112,9 +17201,9 @@ wrapperTag: div
17112
17201
  </span>
17113
17202
  <input
17114
17203
  class="pf-c-text-input-group__text-input"
17115
- type="text"
17116
- value
17204
+ type="search"
17117
17205
  placeholder="Filter by name"
17206
+ value
17118
17207
  aria-label="Type to filter"
17119
17208
  />
17120
17209
  </span>
@@ -17442,11 +17531,14 @@ wrapperTag: div
17442
17531
  <tbody role="rowgroup">
17443
17532
  <tr role="row">
17444
17533
  <td class="pf-c-table__check" role="cell">
17445
- <input
17446
- type="checkbox"
17447
- name="checkrow1"
17448
- aria-labelledby="column-management-demo-table-node1"
17449
- />
17534
+ <div class="pf-c-check pf-m-standalone">
17535
+ <input
17536
+ class="pf-c-check__input"
17537
+ type="checkbox"
17538
+ name="checkrow1"
17539
+ aria-labelledby="column-management-demo-table-node1"
17540
+ />
17541
+ </div>
17450
17542
  </td>
17451
17543
  <th role="columnheader" data-label="Repository name">
17452
17544
  <div>
@@ -17527,11 +17619,14 @@ wrapperTag: div
17527
17619
 
17528
17620
  <tr role="row">
17529
17621
  <td class="pf-c-table__check" role="cell">
17530
- <input
17531
- type="checkbox"
17532
- name="checkrow2"
17533
- aria-labelledby="column-management-demo-table-node2"
17534
- />
17622
+ <div class="pf-c-check pf-m-standalone">
17623
+ <input
17624
+ class="pf-c-check__input"
17625
+ type="checkbox"
17626
+ name="checkrow2"
17627
+ aria-labelledby="column-management-demo-table-node2"
17628
+ />
17629
+ </div>
17535
17630
  </td>
17536
17631
  <th role="columnheader" data-label="Repository name">
17537
17632
  <div>
@@ -17612,11 +17707,14 @@ wrapperTag: div
17612
17707
 
17613
17708
  <tr role="row">
17614
17709
  <td class="pf-c-table__check" role="cell">
17615
- <input
17616
- type="checkbox"
17617
- name="checkrow3"
17618
- aria-labelledby="column-management-demo-table-node3"
17619
- />
17710
+ <div class="pf-c-check pf-m-standalone">
17711
+ <input
17712
+ class="pf-c-check__input"
17713
+ type="checkbox"
17714
+ name="checkrow3"
17715
+ aria-labelledby="column-management-demo-table-node3"
17716
+ />
17717
+ </div>
17620
17718
  </td>
17621
17719
  <th role="columnheader" data-label="Repository name">
17622
17720
  <div>
@@ -17697,11 +17795,14 @@ wrapperTag: div
17697
17795
 
17698
17796
  <tr role="row">
17699
17797
  <td class="pf-c-table__check" role="cell">
17700
- <input
17701
- type="checkbox"
17702
- name="checkrow4"
17703
- aria-labelledby="column-management-demo-table-node4"
17704
- />
17798
+ <div class="pf-c-check pf-m-standalone">
17799
+ <input
17800
+ class="pf-c-check__input"
17801
+ type="checkbox"
17802
+ name="checkrow4"
17803
+ aria-labelledby="column-management-demo-table-node4"
17804
+ />
17805
+ </div>
17705
17806
  </td>
17706
17807
  <th role="columnheader" data-label="Repository name">
17707
17808
  <div>
@@ -17782,11 +17883,14 @@ wrapperTag: div
17782
17883
 
17783
17884
  <tr role="row">
17784
17885
  <td class="pf-c-table__check" role="cell">
17785
- <input
17786
- type="checkbox"
17787
- name="checkrow5"
17788
- aria-labelledby="column-management-demo-table-node5"
17789
- />
17886
+ <div class="pf-c-check pf-m-standalone">
17887
+ <input
17888
+ class="pf-c-check__input"
17889
+ type="checkbox"
17890
+ name="checkrow5"
17891
+ aria-labelledby="column-management-demo-table-node5"
17892
+ />
17893
+ </div>
17790
17894
  </td>
17791
17895
  <td role="cell" data-label="Repository name">
17792
17896
  <div>
@@ -17879,9 +17983,11 @@ wrapperTag: div
17879
17983
  aria-labelledby="modal-title"
17880
17984
  aria-describedby="modal-description"
17881
17985
  >
17882
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
17883
- <i class="fas fa-times" aria-hidden="true"></i>
17884
- </button>
17986
+ <div class="pf-c-modal-box__close">
17987
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
17988
+ <i class="fas fa-times" aria-hidden="true"></i>
17989
+ </button>
17990
+ </div>
17885
17991
  <header class="pf-c-modal-box__header">
17886
17992
  <h1 class="pf-c-modal-box__title" id="modal-title">Manage columns</h1>
17887
17993
  <div class="pf-c-modal-box__description">
@@ -17911,12 +18017,15 @@ wrapperTag: div
17911
18017
  <i class="fas fa-grip-vertical"></i>
17912
18018
  </span>
17913
18019
  <div class="pf-c-data-list__check">
17914
- <input
17915
- type="checkbox"
17916
- name="table-manage-columns-data-list-draggable-check-action-check1"
17917
- aria-labelledby="table-manage-columns-data-list-draggable-item-1"
17918
- checked
17919
- />
18020
+ <div class="pf-c-check pf-m-standalone">
18021
+ <input
18022
+ class="pf-c-check__input"
18023
+ type="checkbox"
18024
+ name="table-manage-columns-data-list-draggable-check-action-check1"
18025
+ aria-labelledby="table-manage-columns-data-list-draggable-item-1"
18026
+ checked
18027
+ />
18028
+ </div>
17920
18029
  </div>
17921
18030
  </div>
17922
18031
  <div class="pf-c-data-list__item-content">
@@ -17939,12 +18048,15 @@ wrapperTag: div
17939
18048
  <i class="fas fa-grip-vertical"></i>
17940
18049
  </span>
17941
18050
  <div class="pf-c-data-list__check">
17942
- <input
17943
- type="checkbox"
17944
- name="table-manage-columns-data-list-draggable-check-action-check2"
17945
- aria-labelledby="table-manage-columns-data-list-draggable-item-2"
17946
- checked
17947
- />
18051
+ <div class="pf-c-check pf-m-standalone">
18052
+ <input
18053
+ class="pf-c-check__input"
18054
+ type="checkbox"
18055
+ name="table-manage-columns-data-list-draggable-check-action-check2"
18056
+ aria-labelledby="table-manage-columns-data-list-draggable-item-2"
18057
+ checked
18058
+ />
18059
+ </div>
17948
18060
  </div>
17949
18061
  </div>
17950
18062
  <div class="pf-c-data-list__item-content">
@@ -17967,12 +18079,15 @@ wrapperTag: div
17967
18079
  <i class="fas fa-grip-vertical"></i>
17968
18080
  </span>
17969
18081
  <div class="pf-c-data-list__check">
17970
- <input
17971
- type="checkbox"
17972
- name="table-manage-columns-data-list-draggable-check-action-check3"
17973
- aria-labelledby="table-manage-columns-data-list-draggable-item-3"
17974
- checked
17975
- />
18082
+ <div class="pf-c-check pf-m-standalone">
18083
+ <input
18084
+ class="pf-c-check__input"
18085
+ type="checkbox"
18086
+ name="table-manage-columns-data-list-draggable-check-action-check3"
18087
+ aria-labelledby="table-manage-columns-data-list-draggable-item-3"
18088
+ checked
18089
+ />
18090
+ </div>
17976
18091
  </div>
17977
18092
  </div>
17978
18093
  <div class="pf-c-data-list__item-content">
@@ -17995,12 +18110,15 @@ wrapperTag: div
17995
18110
  <i class="fas fa-grip-vertical"></i>
17996
18111
  </span>
17997
18112
  <div class="pf-c-data-list__check">
17998
- <input
17999
- type="checkbox"
18000
- name="table-manage-columns-data-list-draggable-check-action-check4"
18001
- aria-labelledby="table-manage-columns-data-list-draggable-item-4"
18002
- checked
18003
- />
18113
+ <div class="pf-c-check pf-m-standalone">
18114
+ <input
18115
+ class="pf-c-check__input"
18116
+ type="checkbox"
18117
+ name="table-manage-columns-data-list-draggable-check-action-check4"
18118
+ aria-labelledby="table-manage-columns-data-list-draggable-item-4"
18119
+ checked
18120
+ />
18121
+ </div>
18004
18122
  </div>
18005
18123
  </div>
18006
18124
  <div class="pf-c-data-list__item-content">
@@ -18023,12 +18141,15 @@ wrapperTag: div
18023
18141
  <i class="fas fa-grip-vertical"></i>
18024
18142
  </span>
18025
18143
  <div class="pf-c-data-list__check">
18026
- <input
18027
- type="checkbox"
18028
- name="table-manage-columns-data-list-draggable-check-action-check5"
18029
- aria-labelledby="table-manage-columns-data-list-draggable-item-5"
18030
- checked
18031
- />
18144
+ <div class="pf-c-check pf-m-standalone">
18145
+ <input
18146
+ class="pf-c-check__input"
18147
+ type="checkbox"
18148
+ name="table-manage-columns-data-list-draggable-check-action-check5"
18149
+ aria-labelledby="table-manage-columns-data-list-draggable-item-5"
18150
+ checked
18151
+ />
18152
+ </div>
18032
18153
  </div>
18033
18154
  </div>
18034
18155
  <div class="pf-c-data-list__item-content">
@@ -18144,7 +18265,7 @@ wrapperTag: div
18144
18265
  </div>
18145
18266
  <section class="pf-c-app-launcher__group">
18146
18267
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
18147
- <ul>
18268
+ <ul role="list">
18148
18269
  <li
18149
18270
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
18150
18271
  >
@@ -18196,7 +18317,7 @@ wrapperTag: div
18196
18317
  <hr class="pf-c-divider" />
18197
18318
  <section class="pf-c-app-launcher__group">
18198
18319
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
18199
- <ul>
18320
+ <ul role="list">
18200
18321
  <li
18201
18322
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
18202
18323
  >
@@ -18851,7 +18972,7 @@ wrapperTag: div
18851
18972
  id="sticky-header-demo-primary-nav"
18852
18973
  aria-label="Global"
18853
18974
  >
18854
- <ul class="pf-c-nav__list">
18975
+ <ul class="pf-c-nav__list" role="list">
18855
18976
  <li class="pf-c-nav__item">
18856
18977
  <a href="#" class="pf-c-nav__link">System panel</a>
18857
18978
  </li>
@@ -18883,7 +19004,7 @@ wrapperTag: div
18883
19004
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
18884
19005
  <div class="pf-c-page__main-body">
18885
19006
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
18886
- <ol class="pf-c-breadcrumb__list">
19007
+ <ol class="pf-c-breadcrumb__list" role="list">
18887
19008
  <li class="pf-c-breadcrumb__item">
18888
19009
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
18889
19010
  </li>
@@ -18950,11 +19071,14 @@ wrapperTag: div
18950
19071
  class="pf-c-dropdown__toggle-check"
18951
19072
  for="-bulk-select-toggle-check"
18952
19073
  >
18953
- <input
18954
- type="checkbox"
18955
- id="-bulk-select-toggle-check"
18956
- aria-label="Select all"
18957
- />
19074
+ <div class="pf-c-check pf-m-standalone">
19075
+ <input
19076
+ class="pf-c-check__input"
19077
+ type="checkbox"
19078
+ id="-bulk-select-toggle-check"
19079
+ aria-label="Select all"
19080
+ />
19081
+ </div>
18958
19082
  </label>
18959
19083
 
18960
19084
  <button
@@ -19023,7 +19147,6 @@ wrapperTag: div
19023
19147
  role="listbox"
19024
19148
  aria-labelledby="-select-name-label"
19025
19149
  hidden
19026
- style="width: 175px"
19027
19150
  >
19028
19151
  <li role="presentation">
19029
19152
  <button
@@ -19071,9 +19194,9 @@ wrapperTag: div
19071
19194
  </span>
19072
19195
  <input
19073
19196
  class="pf-c-text-input-group__text-input"
19074
- type="text"
19075
- value
19197
+ type="search"
19076
19198
  placeholder="Filter by name"
19199
+ value
19077
19200
  aria-label="Type to filter"
19078
19201
  />
19079
19202
  </span>
@@ -19401,11 +19524,14 @@ wrapperTag: div
19401
19524
  <tbody role="rowgroup">
19402
19525
  <tr role="row">
19403
19526
  <td class="pf-c-table__check" role="cell">
19404
- <input
19405
- type="checkbox"
19406
- name="checkrow1"
19407
- aria-labelledby="sticky-header-demo-table-node1"
19408
- />
19527
+ <div class="pf-c-check pf-m-standalone">
19528
+ <input
19529
+ class="pf-c-check__input"
19530
+ type="checkbox"
19531
+ name="checkrow1"
19532
+ aria-labelledby="sticky-header-demo-table-node1"
19533
+ />
19534
+ </div>
19409
19535
  </td>
19410
19536
  <th role="columnheader" data-label="Repository name">
19411
19537
  <div>
@@ -19486,11 +19612,14 @@ wrapperTag: div
19486
19612
 
19487
19613
  <tr role="row">
19488
19614
  <td class="pf-c-table__check" role="cell">
19489
- <input
19490
- type="checkbox"
19491
- name="checkrow2"
19492
- aria-labelledby="sticky-header-demo-table-node2"
19493
- />
19615
+ <div class="pf-c-check pf-m-standalone">
19616
+ <input
19617
+ class="pf-c-check__input"
19618
+ type="checkbox"
19619
+ name="checkrow2"
19620
+ aria-labelledby="sticky-header-demo-table-node2"
19621
+ />
19622
+ </div>
19494
19623
  </td>
19495
19624
  <th role="columnheader" data-label="Repository name">
19496
19625
  <div>
@@ -19571,11 +19700,14 @@ wrapperTag: div
19571
19700
 
19572
19701
  <tr role="row">
19573
19702
  <td class="pf-c-table__check" role="cell">
19574
- <input
19575
- type="checkbox"
19576
- name="checkrow3"
19577
- aria-labelledby="sticky-header-demo-table-node3"
19578
- />
19703
+ <div class="pf-c-check pf-m-standalone">
19704
+ <input
19705
+ class="pf-c-check__input"
19706
+ type="checkbox"
19707
+ name="checkrow3"
19708
+ aria-labelledby="sticky-header-demo-table-node3"
19709
+ />
19710
+ </div>
19579
19711
  </td>
19580
19712
  <th role="columnheader" data-label="Repository name">
19581
19713
  <div>
@@ -19656,11 +19788,14 @@ wrapperTag: div
19656
19788
 
19657
19789
  <tr role="row">
19658
19790
  <td class="pf-c-table__check" role="cell">
19659
- <input
19660
- type="checkbox"
19661
- name="checkrow4"
19662
- aria-labelledby="sticky-header-demo-table-node4"
19663
- />
19791
+ <div class="pf-c-check pf-m-standalone">
19792
+ <input
19793
+ class="pf-c-check__input"
19794
+ type="checkbox"
19795
+ name="checkrow4"
19796
+ aria-labelledby="sticky-header-demo-table-node4"
19797
+ />
19798
+ </div>
19664
19799
  </td>
19665
19800
  <th role="columnheader" data-label="Repository name">
19666
19801
  <div>
@@ -19741,11 +19876,14 @@ wrapperTag: div
19741
19876
 
19742
19877
  <tr role="row">
19743
19878
  <td class="pf-c-table__check" role="cell">
19744
- <input
19745
- type="checkbox"
19746
- name="checkrow5"
19747
- aria-labelledby="sticky-header-demo-table-node5"
19748
- />
19879
+ <div class="pf-c-check pf-m-standalone">
19880
+ <input
19881
+ class="pf-c-check__input"
19882
+ type="checkbox"
19883
+ name="checkrow5"
19884
+ aria-labelledby="sticky-header-demo-table-node5"
19885
+ />
19886
+ </div>
19749
19887
  </td>
19750
19888
  <td role="cell" data-label="Repository name">
19751
19889
  <div>
@@ -20020,7 +20158,7 @@ wrapperTag: div
20020
20158
  </div>
20021
20159
  <section class="pf-c-app-launcher__group">
20022
20160
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
20023
- <ul>
20161
+ <ul role="list">
20024
20162
  <li
20025
20163
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
20026
20164
  >
@@ -20072,7 +20210,7 @@ wrapperTag: div
20072
20210
  <hr class="pf-c-divider" />
20073
20211
  <section class="pf-c-app-launcher__group">
20074
20212
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
20075
- <ul>
20213
+ <ul role="list">
20076
20214
  <li
20077
20215
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
20078
20216
  >
@@ -20727,7 +20865,7 @@ wrapperTag: div
20727
20865
  id="sticky-first-column-demo-primary-nav"
20728
20866
  aria-label="Global"
20729
20867
  >
20730
- <ul class="pf-c-nav__list">
20868
+ <ul class="pf-c-nav__list" role="list">
20731
20869
  <li class="pf-c-nav__item">
20732
20870
  <a href="#" class="pf-c-nav__link">System panel</a>
20733
20871
  </li>
@@ -20759,7 +20897,7 @@ wrapperTag: div
20759
20897
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
20760
20898
  <div class="pf-c-page__main-body">
20761
20899
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
20762
- <ol class="pf-c-breadcrumb__list">
20900
+ <ol class="pf-c-breadcrumb__list" role="list">
20763
20901
  <li class="pf-c-breadcrumb__item">
20764
20902
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
20765
20903
  </li>
@@ -20829,11 +20967,14 @@ wrapperTag: div
20829
20967
  class="pf-c-dropdown__toggle-check"
20830
20968
  for="-bulk-select-toggle-check"
20831
20969
  >
20832
- <input
20833
- type="checkbox"
20834
- id="-bulk-select-toggle-check"
20835
- aria-label="Select all"
20836
- />
20970
+ <div class="pf-c-check pf-m-standalone">
20971
+ <input
20972
+ class="pf-c-check__input"
20973
+ type="checkbox"
20974
+ id="-bulk-select-toggle-check"
20975
+ aria-label="Select all"
20976
+ />
20977
+ </div>
20837
20978
  </label>
20838
20979
 
20839
20980
  <button
@@ -20902,7 +21043,6 @@ wrapperTag: div
20902
21043
  role="listbox"
20903
21044
  aria-labelledby="-select-name-label"
20904
21045
  hidden
20905
- style="width: 175px"
20906
21046
  >
20907
21047
  <li role="presentation">
20908
21048
  <button
@@ -20950,9 +21090,9 @@ wrapperTag: div
20950
21090
  </span>
20951
21091
  <input
20952
21092
  class="pf-c-text-input-group__text-input"
20953
- type="text"
20954
- value
21093
+ type="search"
20955
21094
  placeholder="Filter by name"
21095
+ value
20956
21096
  aria-label="Type to filter"
20957
21097
  />
20958
21098
  </span>
@@ -21102,12 +21242,12 @@ wrapperTag: div
21102
21242
  <thead>
21103
21243
  <tr role="row">
21104
21244
  <th
21105
- class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
21245
+ class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
21106
21246
  role="columnheader"
21107
21247
  aria-sort="none"
21108
21248
  data-label="Example th"
21109
21249
  scope="col"
21110
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21250
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21111
21251
  >
21112
21252
  <button class="pf-c-table__button">
21113
21253
  <div class="pf-c-table__button-content">
@@ -21170,6 +21310,7 @@ wrapperTag: div
21170
21310
  data-label="Example th"
21171
21311
  scope="col"
21172
21312
  >Header 8</th>
21313
+
21173
21314
  <th
21174
21315
  class
21175
21316
  role="columnheader"
@@ -21182,11 +21323,11 @@ wrapperTag: div
21182
21323
  <tbody role="rowgroup">
21183
21324
  <tr role="row">
21184
21325
  <th
21185
- class="pf-m-border-right pf-c-table__sticky-column"
21326
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21186
21327
  role="columnheader"
21187
21328
  data-label="Example th"
21188
21329
  scope="col"
21189
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21330
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21190
21331
  >Fact 1</th>
21191
21332
  <td
21192
21333
  class="pf-m-nowrap"
@@ -21223,6 +21364,7 @@ wrapperTag: div
21223
21364
  role="cell"
21224
21365
  data-label="Example td"
21225
21366
  >Test cell 1-8</td>
21367
+
21226
21368
  <td
21227
21369
  class="pf-m-nowrap"
21228
21370
  role="cell"
@@ -21231,11 +21373,11 @@ wrapperTag: div
21231
21373
  </tr>
21232
21374
  <tr role="row">
21233
21375
  <th
21234
- class="pf-m-border-right pf-c-table__sticky-column"
21376
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21235
21377
  role="columnheader"
21236
21378
  data-label="Example th"
21237
21379
  scope="col"
21238
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21380
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21239
21381
  >Fact 2</th>
21240
21382
  <td
21241
21383
  class="pf-m-nowrap"
@@ -21272,6 +21414,7 @@ wrapperTag: div
21272
21414
  role="cell"
21273
21415
  data-label="Example td"
21274
21416
  >Test cell 2-8</td>
21417
+
21275
21418
  <td
21276
21419
  class="pf-m-nowrap"
21277
21420
  role="cell"
@@ -21280,11 +21423,11 @@ wrapperTag: div
21280
21423
  </tr>
21281
21424
  <tr role="row">
21282
21425
  <th
21283
- class="pf-m-border-right pf-c-table__sticky-column"
21426
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21284
21427
  role="columnheader"
21285
21428
  data-label="Example th"
21286
21429
  scope="col"
21287
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21430
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21288
21431
  >Fact 3</th>
21289
21432
  <td
21290
21433
  class="pf-m-nowrap"
@@ -21321,6 +21464,7 @@ wrapperTag: div
21321
21464
  role="cell"
21322
21465
  data-label="Example td"
21323
21466
  >Test cell 3-8</td>
21467
+
21324
21468
  <td
21325
21469
  class="pf-m-nowrap"
21326
21470
  role="cell"
@@ -21329,11 +21473,11 @@ wrapperTag: div
21329
21473
  </tr>
21330
21474
  <tr role="row">
21331
21475
  <th
21332
- class="pf-m-border-right pf-c-table__sticky-column"
21476
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21333
21477
  role="columnheader"
21334
21478
  data-label="Example th"
21335
21479
  scope="col"
21336
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21480
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21337
21481
  >Fact 4</th>
21338
21482
  <td
21339
21483
  class="pf-m-nowrap"
@@ -21370,6 +21514,7 @@ wrapperTag: div
21370
21514
  role="cell"
21371
21515
  data-label="Example td"
21372
21516
  >Test cell 4-8</td>
21517
+
21373
21518
  <td
21374
21519
  class="pf-m-nowrap"
21375
21520
  role="cell"
@@ -21378,11 +21523,11 @@ wrapperTag: div
21378
21523
  </tr>
21379
21524
  <tr role="row">
21380
21525
  <th
21381
- class="pf-m-border-right pf-c-table__sticky-column"
21526
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21382
21527
  role="columnheader"
21383
21528
  data-label="Example th"
21384
21529
  scope="col"
21385
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21530
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21386
21531
  >Fact 5</th>
21387
21532
  <td
21388
21533
  class="pf-m-nowrap"
@@ -21419,6 +21564,7 @@ wrapperTag: div
21419
21564
  role="cell"
21420
21565
  data-label="Example td"
21421
21566
  >Test cell 5-8</td>
21567
+
21422
21568
  <td
21423
21569
  class="pf-m-nowrap"
21424
21570
  role="cell"
@@ -21427,11 +21573,11 @@ wrapperTag: div
21427
21573
  </tr>
21428
21574
  <tr role="row">
21429
21575
  <th
21430
- class="pf-m-border-right pf-c-table__sticky-column"
21576
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21431
21577
  role="columnheader"
21432
21578
  data-label="Example th"
21433
21579
  scope="col"
21434
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21580
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21435
21581
  >Fact 6</th>
21436
21582
  <td
21437
21583
  class="pf-m-nowrap"
@@ -21468,6 +21614,7 @@ wrapperTag: div
21468
21614
  role="cell"
21469
21615
  data-label="Example td"
21470
21616
  >Test cell 6-8</td>
21617
+
21471
21618
  <td
21472
21619
  class="pf-m-nowrap"
21473
21620
  role="cell"
@@ -21476,11 +21623,11 @@ wrapperTag: div
21476
21623
  </tr>
21477
21624
  <tr role="row">
21478
21625
  <th
21479
- class="pf-m-border-right pf-c-table__sticky-column"
21626
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21480
21627
  role="columnheader"
21481
21628
  data-label="Example th"
21482
21629
  scope="col"
21483
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21630
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21484
21631
  >Fact 7</th>
21485
21632
  <td
21486
21633
  class="pf-m-nowrap"
@@ -21517,6 +21664,7 @@ wrapperTag: div
21517
21664
  role="cell"
21518
21665
  data-label="Example td"
21519
21666
  >Test cell 7-8</td>
21667
+
21520
21668
  <td
21521
21669
  class="pf-m-nowrap"
21522
21670
  role="cell"
@@ -21525,11 +21673,11 @@ wrapperTag: div
21525
21673
  </tr>
21526
21674
  <tr role="row">
21527
21675
  <th
21528
- class="pf-m-border-right pf-c-table__sticky-column"
21676
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21529
21677
  role="columnheader"
21530
21678
  data-label="Example th"
21531
21679
  scope="col"
21532
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21680
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21533
21681
  >Fact 8</th>
21534
21682
  <td
21535
21683
  class="pf-m-nowrap"
@@ -21566,6 +21714,7 @@ wrapperTag: div
21566
21714
  role="cell"
21567
21715
  data-label="Example td"
21568
21716
  >Test cell 8-8</td>
21717
+
21569
21718
  <td
21570
21719
  class="pf-m-nowrap"
21571
21720
  role="cell"
@@ -21574,11 +21723,11 @@ wrapperTag: div
21574
21723
  </tr>
21575
21724
  <tr role="row">
21576
21725
  <th
21577
- class="pf-m-border-right pf-c-table__sticky-column"
21726
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
21578
21727
  role="columnheader"
21579
21728
  data-label="Example th"
21580
21729
  scope="col"
21581
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
21730
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
21582
21731
  >Fact 9</th>
21583
21732
  <td
21584
21733
  class="pf-m-nowrap"
@@ -21615,6 +21764,7 @@ wrapperTag: div
21615
21764
  role="cell"
21616
21765
  data-label="Example td"
21617
21766
  >Test cell 9-8</td>
21767
+
21618
21768
  <td
21619
21769
  class="pf-m-nowrap"
21620
21770
  role="cell"
@@ -21820,7 +21970,7 @@ wrapperTag: div
21820
21970
  </div>
21821
21971
  <section class="pf-c-app-launcher__group">
21822
21972
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
21823
- <ul>
21973
+ <ul role="list">
21824
21974
  <li
21825
21975
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
21826
21976
  >
@@ -21872,7 +22022,7 @@ wrapperTag: div
21872
22022
  <hr class="pf-c-divider" />
21873
22023
  <section class="pf-c-app-launcher__group">
21874
22024
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
21875
- <ul>
22025
+ <ul role="list">
21876
22026
  <li
21877
22027
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
21878
22028
  >
@@ -22527,7 +22677,7 @@ wrapperTag: div
22527
22677
  id="sticky-multiple-columns-demo-primary-nav"
22528
22678
  aria-label="Global"
22529
22679
  >
22530
- <ul class="pf-c-nav__list">
22680
+ <ul class="pf-c-nav__list" role="list">
22531
22681
  <li class="pf-c-nav__item">
22532
22682
  <a href="#" class="pf-c-nav__link">System panel</a>
22533
22683
  </li>
@@ -22559,7 +22709,7 @@ wrapperTag: div
22559
22709
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
22560
22710
  <div class="pf-c-page__main-body">
22561
22711
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
22562
- <ol class="pf-c-breadcrumb__list">
22712
+ <ol class="pf-c-breadcrumb__list" role="list">
22563
22713
  <li class="pf-c-breadcrumb__item">
22564
22714
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
22565
22715
  </li>
@@ -22629,11 +22779,14 @@ wrapperTag: div
22629
22779
  class="pf-c-dropdown__toggle-check"
22630
22780
  for="-bulk-select-toggle-check"
22631
22781
  >
22632
- <input
22633
- type="checkbox"
22634
- id="-bulk-select-toggle-check"
22635
- aria-label="Select all"
22636
- />
22782
+ <div class="pf-c-check pf-m-standalone">
22783
+ <input
22784
+ class="pf-c-check__input"
22785
+ type="checkbox"
22786
+ id="-bulk-select-toggle-check"
22787
+ aria-label="Select all"
22788
+ />
22789
+ </div>
22637
22790
  </label>
22638
22791
 
22639
22792
  <button
@@ -22702,7 +22855,6 @@ wrapperTag: div
22702
22855
  role="listbox"
22703
22856
  aria-labelledby="-select-name-label"
22704
22857
  hidden
22705
- style="width: 175px"
22706
22858
  >
22707
22859
  <li role="presentation">
22708
22860
  <button
@@ -22750,9 +22902,9 @@ wrapperTag: div
22750
22902
  </span>
22751
22903
  <input
22752
22904
  class="pf-c-text-input-group__text-input"
22753
- type="text"
22754
- value
22905
+ type="search"
22755
22906
  placeholder="Filter by name"
22907
+ value
22756
22908
  aria-label="Type to filter"
22757
22909
  />
22758
22910
  </span>
@@ -22902,12 +23054,12 @@ wrapperTag: div
22902
23054
  <thead>
22903
23055
  <tr role="row">
22904
23056
  <th
22905
- class="pf-c-table__sort pf-c-table__sticky-column"
23057
+ class="pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
22906
23058
  role="columnheader"
22907
23059
  aria-sort="none"
22908
23060
  data-label="Example th"
22909
23061
  scope="col"
22910
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23062
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
22911
23063
  >
22912
23064
  <button class="pf-c-table__button">
22913
23065
  <div class="pf-c-table__button-content">
@@ -22919,12 +23071,12 @@ wrapperTag: div
22919
23071
  </button>
22920
23072
  </th>
22921
23073
  <th
22922
- class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
23074
+ class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
22923
23075
  role="columnheader"
22924
23076
  aria-sort="none"
22925
23077
  data-label="Example th"
22926
23078
  scope="col"
22927
- style="--pf-c-table__sticky-column--MinWidth: 120px; --pf-c-table__sticky-column--Left: 100px;"
23079
+ style="--pf-c-table__sticky-cell--MinWidth: 120px; --pf-c-table__sticky-cell--Left: 100px;"
22928
23080
  >
22929
23081
  <button class="pf-c-table__button">
22930
23082
  <div class="pf-c-table__button-content">
@@ -22971,6 +23123,7 @@ wrapperTag: div
22971
23123
  data-label="Example th"
22972
23124
  scope="col"
22973
23125
  >Header 8</th>
23126
+
22974
23127
  <th
22975
23128
  class
22976
23129
  role="columnheader"
@@ -22983,18 +23136,18 @@ wrapperTag: div
22983
23136
  <tbody role="rowgroup">
22984
23137
  <tr role="row">
22985
23138
  <th
22986
- class="pf-c-table__sticky-column"
23139
+ class="pf-c-table__sticky-cell pf-m-left"
22987
23140
  role="columnheader"
22988
23141
  data-label="Example th"
22989
23142
  scope="col"
22990
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23143
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
22991
23144
  >Fact 1</th>
22992
23145
  <th
22993
- class="pf-m-border-right pf-c-table__sticky-column"
23146
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
22994
23147
  role="columnheader"
22995
23148
  data-label="Example th"
22996
23149
  scope="col"
22997
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23150
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
22998
23151
  >State 1</th>
22999
23152
  <td
23000
23153
  class="pf-m-nowrap"
@@ -23026,6 +23179,7 @@ wrapperTag: div
23026
23179
  role="cell"
23027
23180
  data-label="Example td"
23028
23181
  >Test cell 1-8</td>
23182
+
23029
23183
  <td
23030
23184
  class="pf-m-nowrap"
23031
23185
  role="cell"
@@ -23034,18 +23188,18 @@ wrapperTag: div
23034
23188
  </tr>
23035
23189
  <tr role="row">
23036
23190
  <th
23037
- class="pf-c-table__sticky-column"
23191
+ class="pf-c-table__sticky-cell pf-m-left"
23038
23192
  role="columnheader"
23039
23193
  data-label="Example th"
23040
23194
  scope="col"
23041
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23195
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
23042
23196
  >Fact 2</th>
23043
23197
  <th
23044
- class="pf-m-border-right pf-c-table__sticky-column"
23198
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
23045
23199
  role="columnheader"
23046
23200
  data-label="Example th"
23047
23201
  scope="col"
23048
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23202
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
23049
23203
  >State 2</th>
23050
23204
  <td
23051
23205
  class="pf-m-nowrap"
@@ -23077,6 +23231,7 @@ wrapperTag: div
23077
23231
  role="cell"
23078
23232
  data-label="Example td"
23079
23233
  >Test cell 2-8</td>
23234
+
23080
23235
  <td
23081
23236
  class="pf-m-nowrap"
23082
23237
  role="cell"
@@ -23085,18 +23240,18 @@ wrapperTag: div
23085
23240
  </tr>
23086
23241
  <tr role="row">
23087
23242
  <th
23088
- class="pf-c-table__sticky-column"
23243
+ class="pf-c-table__sticky-cell pf-m-left"
23089
23244
  role="columnheader"
23090
23245
  data-label="Example th"
23091
23246
  scope="col"
23092
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23247
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
23093
23248
  >Fact 3</th>
23094
23249
  <th
23095
- class="pf-m-border-right pf-c-table__sticky-column"
23250
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
23096
23251
  role="columnheader"
23097
23252
  data-label="Example th"
23098
23253
  scope="col"
23099
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23254
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
23100
23255
  >State 3</th>
23101
23256
  <td
23102
23257
  class="pf-m-nowrap"
@@ -23128,6 +23283,7 @@ wrapperTag: div
23128
23283
  role="cell"
23129
23284
  data-label="Example td"
23130
23285
  >Test cell 3-8</td>
23286
+
23131
23287
  <td
23132
23288
  class="pf-m-nowrap"
23133
23289
  role="cell"
@@ -23136,18 +23292,18 @@ wrapperTag: div
23136
23292
  </tr>
23137
23293
  <tr role="row">
23138
23294
  <th
23139
- class="pf-c-table__sticky-column"
23295
+ class="pf-c-table__sticky-cell pf-m-left"
23140
23296
  role="columnheader"
23141
23297
  data-label="Example th"
23142
23298
  scope="col"
23143
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23299
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
23144
23300
  >Fact 4</th>
23145
23301
  <th
23146
- class="pf-m-border-right pf-c-table__sticky-column"
23302
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
23147
23303
  role="columnheader"
23148
23304
  data-label="Example th"
23149
23305
  scope="col"
23150
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23306
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
23151
23307
  >State 4</th>
23152
23308
  <td
23153
23309
  class="pf-m-nowrap"
@@ -23179,6 +23335,7 @@ wrapperTag: div
23179
23335
  role="cell"
23180
23336
  data-label="Example td"
23181
23337
  >Test cell 4-8</td>
23338
+
23182
23339
  <td
23183
23340
  class="pf-m-nowrap"
23184
23341
  role="cell"
@@ -23187,18 +23344,18 @@ wrapperTag: div
23187
23344
  </tr>
23188
23345
  <tr role="row">
23189
23346
  <th
23190
- class="pf-c-table__sticky-column"
23347
+ class="pf-c-table__sticky-cell pf-m-left"
23191
23348
  role="columnheader"
23192
23349
  data-label="Example th"
23193
23350
  scope="col"
23194
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23351
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
23195
23352
  >Fact 5</th>
23196
23353
  <th
23197
- class="pf-m-border-right pf-c-table__sticky-column"
23354
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
23198
23355
  role="columnheader"
23199
23356
  data-label="Example th"
23200
23357
  scope="col"
23201
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23358
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
23202
23359
  >State 5</th>
23203
23360
  <td
23204
23361
  class="pf-m-nowrap"
@@ -23230,6 +23387,7 @@ wrapperTag: div
23230
23387
  role="cell"
23231
23388
  data-label="Example td"
23232
23389
  >Test cell 5-8</td>
23390
+
23233
23391
  <td
23234
23392
  class="pf-m-nowrap"
23235
23393
  role="cell"
@@ -23238,18 +23396,18 @@ wrapperTag: div
23238
23396
  </tr>
23239
23397
  <tr role="row">
23240
23398
  <th
23241
- class="pf-c-table__sticky-column"
23399
+ class="pf-c-table__sticky-cell pf-m-left"
23242
23400
  role="columnheader"
23243
23401
  data-label="Example th"
23244
23402
  scope="col"
23245
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23403
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
23246
23404
  >Fact 6</th>
23247
23405
  <th
23248
- class="pf-m-border-right pf-c-table__sticky-column"
23406
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
23249
23407
  role="columnheader"
23250
23408
  data-label="Example th"
23251
23409
  scope="col"
23252
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23410
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
23253
23411
  >State 6</th>
23254
23412
  <td
23255
23413
  class="pf-m-nowrap"
@@ -23281,6 +23439,7 @@ wrapperTag: div
23281
23439
  role="cell"
23282
23440
  data-label="Example td"
23283
23441
  >Test cell 6-8</td>
23442
+
23284
23443
  <td
23285
23444
  class="pf-m-nowrap"
23286
23445
  role="cell"
@@ -23289,18 +23448,18 @@ wrapperTag: div
23289
23448
  </tr>
23290
23449
  <tr role="row">
23291
23450
  <th
23292
- class="pf-c-table__sticky-column"
23451
+ class="pf-c-table__sticky-cell pf-m-left"
23293
23452
  role="columnheader"
23294
23453
  data-label="Example th"
23295
23454
  scope="col"
23296
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23455
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
23297
23456
  >Fact 7</th>
23298
23457
  <th
23299
- class="pf-m-border-right pf-c-table__sticky-column"
23458
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
23300
23459
  role="columnheader"
23301
23460
  data-label="Example th"
23302
23461
  scope="col"
23303
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23462
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
23304
23463
  >State 7</th>
23305
23464
  <td
23306
23465
  class="pf-m-nowrap"
@@ -23332,6 +23491,7 @@ wrapperTag: div
23332
23491
  role="cell"
23333
23492
  data-label="Example td"
23334
23493
  >Test cell 7-8</td>
23494
+
23335
23495
  <td
23336
23496
  class="pf-m-nowrap"
23337
23497
  role="cell"
@@ -23340,18 +23500,18 @@ wrapperTag: div
23340
23500
  </tr>
23341
23501
  <tr role="row">
23342
23502
  <th
23343
- class="pf-c-table__sticky-column"
23503
+ class="pf-c-table__sticky-cell pf-m-left"
23344
23504
  role="columnheader"
23345
23505
  data-label="Example th"
23346
23506
  scope="col"
23347
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23507
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
23348
23508
  >Fact 8</th>
23349
23509
  <th
23350
- class="pf-m-border-right pf-c-table__sticky-column"
23510
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
23351
23511
  role="columnheader"
23352
23512
  data-label="Example th"
23353
23513
  scope="col"
23354
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23514
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
23355
23515
  >State 8</th>
23356
23516
  <td
23357
23517
  class="pf-m-nowrap"
@@ -23383,6 +23543,7 @@ wrapperTag: div
23383
23543
  role="cell"
23384
23544
  data-label="Example td"
23385
23545
  >Test cell 8-8</td>
23546
+
23386
23547
  <td
23387
23548
  class="pf-m-nowrap"
23388
23549
  role="cell"
@@ -23391,18 +23552,18 @@ wrapperTag: div
23391
23552
  </tr>
23392
23553
  <tr role="row">
23393
23554
  <th
23394
- class="pf-c-table__sticky-column"
23555
+ class="pf-c-table__sticky-cell pf-m-left"
23395
23556
  role="columnheader"
23396
23557
  data-label="Example th"
23397
23558
  scope="col"
23398
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
23559
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
23399
23560
  >Fact 9</th>
23400
23561
  <th
23401
- class="pf-m-border-right pf-c-table__sticky-column"
23562
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
23402
23563
  role="columnheader"
23403
23564
  data-label="Example th"
23404
23565
  scope="col"
23405
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
23566
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
23406
23567
  >State 9</th>
23407
23568
  <td
23408
23569
  class="pf-m-nowrap"
@@ -23434,6 +23595,7 @@ wrapperTag: div
23434
23595
  role="cell"
23435
23596
  data-label="Example td"
23436
23597
  >Test cell 9-8</td>
23598
+
23437
23599
  <td
23438
23600
  class="pf-m-nowrap"
23439
23601
  role="cell"
@@ -23642,7 +23804,7 @@ wrapperTag: div
23642
23804
  </div>
23643
23805
  <section class="pf-c-app-launcher__group">
23644
23806
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
23645
- <ul>
23807
+ <ul role="list">
23646
23808
  <li
23647
23809
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
23648
23810
  >
@@ -23694,7 +23856,7 @@ wrapperTag: div
23694
23856
  <hr class="pf-c-divider" />
23695
23857
  <section class="pf-c-app-launcher__group">
23696
23858
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
23697
- <ul>
23859
+ <ul role="list">
23698
23860
  <li
23699
23861
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
23700
23862
  >
@@ -24349,7 +24511,7 @@ wrapperTag: div
24349
24511
  id="sticky-header-and-multiple columns-demo-primary-nav"
24350
24512
  aria-label="Global"
24351
24513
  >
24352
- <ul class="pf-c-nav__list">
24514
+ <ul class="pf-c-nav__list" role="list">
24353
24515
  <li class="pf-c-nav__item">
24354
24516
  <a href="#" class="pf-c-nav__link">System panel</a>
24355
24517
  </li>
@@ -24381,7 +24543,7 @@ wrapperTag: div
24381
24543
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
24382
24544
  <div class="pf-c-page__main-body">
24383
24545
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
24384
- <ol class="pf-c-breadcrumb__list">
24546
+ <ol class="pf-c-breadcrumb__list" role="list">
24385
24547
  <li class="pf-c-breadcrumb__item">
24386
24548
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
24387
24549
  </li>
@@ -24450,11 +24612,14 @@ wrapperTag: div
24450
24612
  class="pf-c-dropdown__toggle-check"
24451
24613
  for="-bulk-select-toggle-check"
24452
24614
  >
24453
- <input
24454
- type="checkbox"
24455
- id="-bulk-select-toggle-check"
24456
- aria-label="Select all"
24457
- />
24615
+ <div class="pf-c-check pf-m-standalone">
24616
+ <input
24617
+ class="pf-c-check__input"
24618
+ type="checkbox"
24619
+ id="-bulk-select-toggle-check"
24620
+ aria-label="Select all"
24621
+ />
24622
+ </div>
24458
24623
  </label>
24459
24624
 
24460
24625
  <button
@@ -24523,7 +24688,6 @@ wrapperTag: div
24523
24688
  role="listbox"
24524
24689
  aria-labelledby="-select-name-label"
24525
24690
  hidden
24526
- style="width: 175px"
24527
24691
  >
24528
24692
  <li role="presentation">
24529
24693
  <button
@@ -24571,9 +24735,9 @@ wrapperTag: div
24571
24735
  </span>
24572
24736
  <input
24573
24737
  class="pf-c-text-input-group__text-input"
24574
- type="text"
24575
- value
24738
+ type="search"
24576
24739
  placeholder="Filter by name"
24740
+ value
24577
24741
  aria-label="Type to filter"
24578
24742
  />
24579
24743
  </span>
@@ -24723,12 +24887,12 @@ wrapperTag: div
24723
24887
  <thead>
24724
24888
  <tr role="row">
24725
24889
  <th
24726
- class="pf-c-table__sort pf-c-table__sticky-column"
24890
+ class="pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
24727
24891
  role="columnheader"
24728
24892
  aria-sort="none"
24729
24893
  data-label="Example th"
24730
24894
  scope="col"
24731
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
24895
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
24732
24896
  >
24733
24897
  <button class="pf-c-table__button">
24734
24898
  <div class="pf-c-table__button-content">
@@ -24740,12 +24904,12 @@ wrapperTag: div
24740
24904
  </button>
24741
24905
  </th>
24742
24906
  <th
24743
- class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
24907
+ class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
24744
24908
  role="columnheader"
24745
24909
  aria-sort="none"
24746
24910
  data-label="Example th"
24747
24911
  scope="col"
24748
- style="--pf-c-table__sticky-column--MinWidth: 120px; --pf-c-table__sticky-column--Left: 100px;"
24912
+ style="--pf-c-table__sticky-cell--MinWidth: 120px; --pf-c-table__sticky-cell--Left: 100px;"
24749
24913
  >
24750
24914
  <button class="pf-c-table__button">
24751
24915
  <div class="pf-c-table__button-content">
@@ -24792,6 +24956,7 @@ wrapperTag: div
24792
24956
  data-label="Example th"
24793
24957
  scope="col"
24794
24958
  >Header 8</th>
24959
+
24795
24960
  <th
24796
24961
  class
24797
24962
  role="columnheader"
@@ -24804,18 +24969,18 @@ wrapperTag: div
24804
24969
  <tbody role="rowgroup">
24805
24970
  <tr role="row">
24806
24971
  <th
24807
- class="pf-c-table__sticky-column"
24972
+ class="pf-c-table__sticky-cell pf-m-left"
24808
24973
  role="columnheader"
24809
24974
  data-label="Example th"
24810
24975
  scope="col"
24811
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
24976
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
24812
24977
  >Fact 1</th>
24813
24978
  <th
24814
- class="pf-m-border-right pf-c-table__sticky-column"
24979
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
24815
24980
  role="columnheader"
24816
24981
  data-label="Example th"
24817
24982
  scope="col"
24818
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
24983
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
24819
24984
  >State 1</th>
24820
24985
  <td
24821
24986
  class="pf-m-nowrap"
@@ -24847,6 +25012,7 @@ wrapperTag: div
24847
25012
  role="cell"
24848
25013
  data-label="Example td"
24849
25014
  >Test cell 1-8</td>
25015
+
24850
25016
  <td
24851
25017
  class="pf-m-nowrap"
24852
25018
  role="cell"
@@ -24855,18 +25021,18 @@ wrapperTag: div
24855
25021
  </tr>
24856
25022
  <tr role="row">
24857
25023
  <th
24858
- class="pf-c-table__sticky-column"
25024
+ class="pf-c-table__sticky-cell pf-m-left"
24859
25025
  role="columnheader"
24860
25026
  data-label="Example th"
24861
25027
  scope="col"
24862
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
25028
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
24863
25029
  >Fact 2</th>
24864
25030
  <th
24865
- class="pf-m-border-right pf-c-table__sticky-column"
25031
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
24866
25032
  role="columnheader"
24867
25033
  data-label="Example th"
24868
25034
  scope="col"
24869
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
25035
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
24870
25036
  >State 2</th>
24871
25037
  <td
24872
25038
  class="pf-m-nowrap"
@@ -24898,6 +25064,7 @@ wrapperTag: div
24898
25064
  role="cell"
24899
25065
  data-label="Example td"
24900
25066
  >Test cell 2-8</td>
25067
+
24901
25068
  <td
24902
25069
  class="pf-m-nowrap"
24903
25070
  role="cell"
@@ -24906,18 +25073,18 @@ wrapperTag: div
24906
25073
  </tr>
24907
25074
  <tr role="row">
24908
25075
  <th
24909
- class="pf-c-table__sticky-column"
25076
+ class="pf-c-table__sticky-cell pf-m-left"
24910
25077
  role="columnheader"
24911
25078
  data-label="Example th"
24912
25079
  scope="col"
24913
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
25080
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
24914
25081
  >Fact 3</th>
24915
25082
  <th
24916
- class="pf-m-border-right pf-c-table__sticky-column"
25083
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
24917
25084
  role="columnheader"
24918
25085
  data-label="Example th"
24919
25086
  scope="col"
24920
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
25087
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
24921
25088
  >State 3</th>
24922
25089
  <td
24923
25090
  class="pf-m-nowrap"
@@ -24949,6 +25116,7 @@ wrapperTag: div
24949
25116
  role="cell"
24950
25117
  data-label="Example td"
24951
25118
  >Test cell 3-8</td>
25119
+
24952
25120
  <td
24953
25121
  class="pf-m-nowrap"
24954
25122
  role="cell"
@@ -24957,18 +25125,18 @@ wrapperTag: div
24957
25125
  </tr>
24958
25126
  <tr role="row">
24959
25127
  <th
24960
- class="pf-c-table__sticky-column"
25128
+ class="pf-c-table__sticky-cell pf-m-left"
24961
25129
  role="columnheader"
24962
25130
  data-label="Example th"
24963
25131
  scope="col"
24964
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
25132
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
24965
25133
  >Fact 4</th>
24966
25134
  <th
24967
- class="pf-m-border-right pf-c-table__sticky-column"
25135
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
24968
25136
  role="columnheader"
24969
25137
  data-label="Example th"
24970
25138
  scope="col"
24971
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
25139
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
24972
25140
  >State 4</th>
24973
25141
  <td
24974
25142
  class="pf-m-nowrap"
@@ -25000,6 +25168,7 @@ wrapperTag: div
25000
25168
  role="cell"
25001
25169
  data-label="Example td"
25002
25170
  >Test cell 4-8</td>
25171
+
25003
25172
  <td
25004
25173
  class="pf-m-nowrap"
25005
25174
  role="cell"
@@ -25008,18 +25177,18 @@ wrapperTag: div
25008
25177
  </tr>
25009
25178
  <tr role="row">
25010
25179
  <th
25011
- class="pf-c-table__sticky-column"
25180
+ class="pf-c-table__sticky-cell pf-m-left"
25012
25181
  role="columnheader"
25013
25182
  data-label="Example th"
25014
25183
  scope="col"
25015
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
25184
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
25016
25185
  >Fact 5</th>
25017
25186
  <th
25018
- class="pf-m-border-right pf-c-table__sticky-column"
25187
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
25019
25188
  role="columnheader"
25020
25189
  data-label="Example th"
25021
25190
  scope="col"
25022
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
25191
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
25023
25192
  >State 5</th>
25024
25193
  <td
25025
25194
  class="pf-m-nowrap"
@@ -25051,6 +25220,7 @@ wrapperTag: div
25051
25220
  role="cell"
25052
25221
  data-label="Example td"
25053
25222
  >Test cell 5-8</td>
25223
+
25054
25224
  <td
25055
25225
  class="pf-m-nowrap"
25056
25226
  role="cell"
@@ -25059,18 +25229,18 @@ wrapperTag: div
25059
25229
  </tr>
25060
25230
  <tr role="row">
25061
25231
  <th
25062
- class="pf-c-table__sticky-column"
25232
+ class="pf-c-table__sticky-cell pf-m-left"
25063
25233
  role="columnheader"
25064
25234
  data-label="Example th"
25065
25235
  scope="col"
25066
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
25236
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
25067
25237
  >Fact 6</th>
25068
25238
  <th
25069
- class="pf-m-border-right pf-c-table__sticky-column"
25239
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
25070
25240
  role="columnheader"
25071
25241
  data-label="Example th"
25072
25242
  scope="col"
25073
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
25243
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
25074
25244
  >State 6</th>
25075
25245
  <td
25076
25246
  class="pf-m-nowrap"
@@ -25102,6 +25272,7 @@ wrapperTag: div
25102
25272
  role="cell"
25103
25273
  data-label="Example td"
25104
25274
  >Test cell 6-8</td>
25275
+
25105
25276
  <td
25106
25277
  class="pf-m-nowrap"
25107
25278
  role="cell"
@@ -25110,18 +25281,18 @@ wrapperTag: div
25110
25281
  </tr>
25111
25282
  <tr role="row">
25112
25283
  <th
25113
- class="pf-c-table__sticky-column"
25284
+ class="pf-c-table__sticky-cell pf-m-left"
25114
25285
  role="columnheader"
25115
25286
  data-label="Example th"
25116
25287
  scope="col"
25117
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
25288
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
25118
25289
  >Fact 7</th>
25119
25290
  <th
25120
- class="pf-m-border-right pf-c-table__sticky-column"
25291
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
25121
25292
  role="columnheader"
25122
25293
  data-label="Example th"
25123
25294
  scope="col"
25124
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
25295
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
25125
25296
  >State 7</th>
25126
25297
  <td
25127
25298
  class="pf-m-nowrap"
@@ -25153,6 +25324,7 @@ wrapperTag: div
25153
25324
  role="cell"
25154
25325
  data-label="Example td"
25155
25326
  >Test cell 7-8</td>
25327
+
25156
25328
  <td
25157
25329
  class="pf-m-nowrap"
25158
25330
  role="cell"
@@ -25161,18 +25333,18 @@ wrapperTag: div
25161
25333
  </tr>
25162
25334
  <tr role="row">
25163
25335
  <th
25164
- class="pf-c-table__sticky-column"
25336
+ class="pf-c-table__sticky-cell pf-m-left"
25165
25337
  role="columnheader"
25166
25338
  data-label="Example th"
25167
25339
  scope="col"
25168
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
25340
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
25169
25341
  >Fact 8</th>
25170
25342
  <th
25171
- class="pf-m-border-right pf-c-table__sticky-column"
25343
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
25172
25344
  role="columnheader"
25173
25345
  data-label="Example th"
25174
25346
  scope="col"
25175
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
25347
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
25176
25348
  >State 8</th>
25177
25349
  <td
25178
25350
  class="pf-m-nowrap"
@@ -25204,6 +25376,7 @@ wrapperTag: div
25204
25376
  role="cell"
25205
25377
  data-label="Example td"
25206
25378
  >Test cell 8-8</td>
25379
+
25207
25380
  <td
25208
25381
  class="pf-m-nowrap"
25209
25382
  role="cell"
@@ -25212,18 +25385,18 @@ wrapperTag: div
25212
25385
  </tr>
25213
25386
  <tr role="row">
25214
25387
  <th
25215
- class="pf-c-table__sticky-column"
25388
+ class="pf-c-table__sticky-cell pf-m-left"
25216
25389
  role="columnheader"
25217
25390
  data-label="Example th"
25218
25391
  scope="col"
25219
- style="--pf-c-table__sticky-column--MinWidth: 100px;"
25392
+ style="--pf-c-table__sticky-cell--MinWidth: 100px;"
25220
25393
  >Fact 9</th>
25221
25394
  <th
25222
- class="pf-m-border-right pf-c-table__sticky-column"
25395
+ class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
25223
25396
  role="columnheader"
25224
25397
  data-label="Example th"
25225
25398
  scope="col"
25226
- style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
25399
+ style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
25227
25400
  >State 9</th>
25228
25401
  <td
25229
25402
  class="pf-m-nowrap"
@@ -25255,6 +25428,7 @@ wrapperTag: div
25255
25428
  role="cell"
25256
25429
  data-label="Example td"
25257
25430
  >Test cell 9-8</td>
25431
+
25258
25432
  <td
25259
25433
  class="pf-m-nowrap"
25260
25434
  role="cell"
@@ -25367,6 +25541,1819 @@ wrapperTag: div
25367
25541
 
25368
25542
  ```
25369
25543
 
25544
+ ### Sticky header and last column
25545
+
25546
+ ```html isFullscreen
25547
+ <div class="pf-c-page" id="sticky-header-and-multiple columns-demo">
25548
+ <div class="pf-c-skip-to-content">
25549
+ <a
25550
+ class="pf-c-button pf-m-primary"
25551
+ href="#main-content-sticky-header-and-multiple columns-demo"
25552
+ >Skip to content</a>
25553
+ </div>
25554
+ <header
25555
+ class="pf-c-masthead"
25556
+ id="sticky-header-and-multiple columns-demo-masthead"
25557
+ >
25558
+ <span class="pf-c-masthead__toggle">
25559
+ <button
25560
+ class="pf-c-button pf-m-plain"
25561
+ type="button"
25562
+ aria-label="Global navigation"
25563
+ >
25564
+ <i class="fas fa-bars" aria-hidden="true"></i>
25565
+ </button>
25566
+ </span>
25567
+ <div class="pf-c-masthead__main">
25568
+ <a class="pf-c-masthead__brand" href="#">
25569
+ <picture
25570
+ class="pf-c-brand pf-m-picture"
25571
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
25572
+ >
25573
+ <source
25574
+ media="(min-width: 768px)"
25575
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
25576
+ />
25577
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
25578
+ <img
25579
+ src="/assets/images/logo__pf--reverse--base.png"
25580
+ alt="Fallback patternFly default logo"
25581
+ />
25582
+ </picture>
25583
+ </a>
25584
+ </div>
25585
+ <div class="pf-c-masthead__content">
25586
+ <div
25587
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
25588
+ id="sticky-header-and-multiple columns-demo-masthead-toolbar"
25589
+ >
25590
+ <div class="pf-c-toolbar__content">
25591
+ <div class="pf-c-toolbar__content-section">
25592
+ <div
25593
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
25594
+ >
25595
+ <div
25596
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
25597
+ >
25598
+ <div class="pf-c-toolbar__item">
25599
+ <nav
25600
+ class="pf-c-app-launcher"
25601
+ aria-label="Application launcher"
25602
+ id="sticky-header-and-multiple columns-demo-masthead-application-launcher"
25603
+ >
25604
+ <button
25605
+ class="pf-c-app-launcher__toggle"
25606
+ type="button"
25607
+ id="sticky-header-and-multiple columns-demo-masthead-application-launcher-button"
25608
+ aria-expanded="false"
25609
+ aria-label="Application launcher"
25610
+ >
25611
+ <i class="fas fa-th" aria-hidden="true"></i>
25612
+ </button>
25613
+ <div
25614
+ class="pf-c-app-launcher__menu pf-m-align-right"
25615
+ hidden
25616
+ >
25617
+ <div class="pf-c-app-launcher__menu-search">
25618
+ <div class="pf-c-search-input">
25619
+ <div class="pf-c-search-input__bar">
25620
+ <span class="pf-c-search-input__text">
25621
+ <span class="pf-c-search-input__icon">
25622
+ <i
25623
+ class="fas fa-search fa-fw"
25624
+ aria-hidden="true"
25625
+ ></i>
25626
+ </span>
25627
+ <input
25628
+ class="pf-c-search-input__text-input"
25629
+ type="text"
25630
+ placeholder="Filter by name"
25631
+ aria-label="Filter by name"
25632
+ />
25633
+ </span>
25634
+ </div>
25635
+ </div>
25636
+ </div>
25637
+ <section class="pf-c-app-launcher__group">
25638
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
25639
+ <ul role="list">
25640
+ <li
25641
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
25642
+ >
25643
+ <a class="pf-c-app-launcher__menu-item">
25644
+ Link 1
25645
+ <span
25646
+ class="pf-c-app-launcher__menu-item-external-icon"
25647
+ >
25648
+ <i
25649
+ class="fas fa-external-link-alt"
25650
+ aria-hidden="true"
25651
+ ></i>
25652
+ </span>
25653
+ <span class="pf-screen-reader">(opens new window)</span>
25654
+ </a>
25655
+ <button
25656
+ class="pf-c-app-launcher__menu-item pf-m-action"
25657
+ type="button"
25658
+ aria-label="Favorite"
25659
+ >
25660
+ <i class="fas fa-star" aria-hidden="true"></i>
25661
+ </button>
25662
+ </li>
25663
+ <li
25664
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
25665
+ >
25666
+ <a class="pf-c-app-launcher__menu-item">
25667
+ Link 2
25668
+ <span
25669
+ class="pf-c-app-launcher__menu-item-external-icon"
25670
+ >
25671
+ <i
25672
+ class="fas fa-external-link-alt"
25673
+ aria-hidden="true"
25674
+ ></i>
25675
+ </span>
25676
+ <span class="pf-screen-reader">(opens new window)</span>
25677
+ </a>
25678
+ <button
25679
+ class="pf-c-app-launcher__menu-item pf-m-action"
25680
+ type="button"
25681
+ aria-label="Favorite"
25682
+ >
25683
+ <i class="fas fa-star" aria-hidden="true"></i>
25684
+ </button>
25685
+ </li>
25686
+ </ul>
25687
+ </section>
25688
+ <hr class="pf-c-divider" />
25689
+ <section class="pf-c-app-launcher__group">
25690
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
25691
+ <ul role="list">
25692
+ <li
25693
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
25694
+ >
25695
+ <a class="pf-c-app-launcher__menu-item">
25696
+ Link 1
25697
+ <span
25698
+ class="pf-c-app-launcher__menu-item-external-icon"
25699
+ >
25700
+ <i
25701
+ class="fas fa-external-link-alt"
25702
+ aria-hidden="true"
25703
+ ></i>
25704
+ </span>
25705
+ <span class="pf-screen-reader">(opens new window)</span>
25706
+ </a>
25707
+ <button
25708
+ class="pf-c-app-launcher__menu-item pf-m-action"
25709
+ type="button"
25710
+ aria-label="Favorite"
25711
+ >
25712
+ <i class="fas fa-star" aria-hidden="true"></i>
25713
+ </button>
25714
+ </li>
25715
+ <li
25716
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
25717
+ >
25718
+ <a class="pf-c-app-launcher__menu-item">
25719
+ Link 2
25720
+ <span
25721
+ class="pf-c-app-launcher__menu-item-external-icon"
25722
+ >
25723
+ <i
25724
+ class="fas fa-external-link-alt"
25725
+ aria-hidden="true"
25726
+ ></i>
25727
+ </span>
25728
+ <span class="pf-screen-reader">(opens new window)</span>
25729
+ </a>
25730
+ <button
25731
+ class="pf-c-app-launcher__menu-item pf-m-action"
25732
+ type="button"
25733
+ aria-label="Favorite"
25734
+ >
25735
+ <i class="fas fa-star" aria-hidden="true"></i>
25736
+ </button>
25737
+ </li>
25738
+ </ul>
25739
+ </section>
25740
+ </div>
25741
+ </nav>
25742
+ </div>
25743
+ <div class="pf-c-toolbar__item">
25744
+ <div class="pf-c-dropdown">
25745
+ <button
25746
+ class="pf-c-dropdown__toggle pf-m-plain"
25747
+ id="sticky-header-and-multiple columns-demo-masthead-settings-button"
25748
+ aria-expanded="false"
25749
+ type="button"
25750
+ aria-label="Settings"
25751
+ >
25752
+ <i class="fas fa-cog" aria-hidden="true"></i>
25753
+ </button>
25754
+ <ul
25755
+ class="pf-c-dropdown__menu pf-m-align-right"
25756
+ aria-labelledby="sticky-header-and-multiple columns-demo-masthead-settings-button"
25757
+ hidden
25758
+ >
25759
+ <li>
25760
+ <button
25761
+ class="pf-c-dropdown__menu-item"
25762
+ type="button"
25763
+ >Settings</button>
25764
+ </li>
25765
+ <li>
25766
+ <button
25767
+ class="pf-c-dropdown__menu-item"
25768
+ type="button"
25769
+ >Use the beta release</button>
25770
+ </li>
25771
+ </ul>
25772
+ </div>
25773
+ </div>
25774
+ <div class="pf-c-toolbar__item">
25775
+ <div class="pf-c-dropdown">
25776
+ <button
25777
+ class="pf-c-dropdown__toggle pf-m-plain"
25778
+ id="sticky-header-and-multiple columns-demo-masthead-help-button"
25779
+ aria-expanded="false"
25780
+ type="button"
25781
+ aria-label="Help"
25782
+ >
25783
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
25784
+ </button>
25785
+ <ul
25786
+ class="pf-c-dropdown__menu pf-m-align-right"
25787
+ aria-labelledby="sticky-header-and-multiple columns-demo-masthead-help-button"
25788
+ hidden
25789
+ >
25790
+ <li>
25791
+ <button
25792
+ class="pf-c-dropdown__menu-item"
25793
+ type="button"
25794
+ >Support options</button>
25795
+ </li>
25796
+ <li>
25797
+ <button
25798
+ class="pf-c-dropdown__menu-item"
25799
+ type="button"
25800
+ >Open support case</button>
25801
+ </li>
25802
+ <li>
25803
+ <button
25804
+ class="pf-c-dropdown__menu-item"
25805
+ type="button"
25806
+ >API documentation</button>
25807
+ </li>
25808
+ </ul>
25809
+ </div>
25810
+ </div>
25811
+ </div>
25812
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
25813
+ <div class="pf-c-dropdown">
25814
+ <button
25815
+ class="pf-c-menu-toggle pf-m-plain"
25816
+ type="button"
25817
+ aria-expanded="false"
25818
+ aria-label="Actions"
25819
+ >
25820
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
25821
+ </button>
25822
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
25823
+ <div class="pf-c-menu__content">
25824
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
25825
+ <ul class="pf-c-menu__list" role="menu">
25826
+ <li
25827
+ class="pf-c-menu__list-item pf-m-disabled"
25828
+ role="none"
25829
+ >
25830
+ <button
25831
+ class="pf-c-menu__item"
25832
+ type="button"
25833
+ disabled
25834
+ role="menuitem"
25835
+ >
25836
+ <span class="pf-c-menu__item-description">
25837
+ <div class="pf-u-font-size-sm">Username:</div>
25838
+ <div class="pf-u-font-size-md">ned_username</div>
25839
+ </span>
25840
+ </button>
25841
+ </li>
25842
+ <li
25843
+ class="pf-c-menu__list-item pf-m-disabled"
25844
+ role="none"
25845
+ >
25846
+ <button
25847
+ class="pf-c-menu__item"
25848
+ type="button"
25849
+ disabled
25850
+ role="menuitem"
25851
+ >
25852
+ <span class="pf-c-menu__item-description">
25853
+ <div class="pf-u-font-size-sm">Account number:</div>
25854
+ <div class="pf-u-font-size-md">123456789</div>
25855
+ </span>
25856
+ </button>
25857
+ </li>
25858
+ <li class="pf-c-divider" role="separator"></li>
25859
+ <li class="pf-c-menu__list-item" role="none">
25860
+ <button
25861
+ class="pf-c-menu__item"
25862
+ type="button"
25863
+ role="menuitem"
25864
+ >
25865
+ <span class="pf-c-menu__item-main">
25866
+ <span class="pf-c-menu__item-text">My profile</span>
25867
+ </span>
25868
+ </button>
25869
+ </li>
25870
+ <li class="pf-c-menu__list-item" role="none">
25871
+ <button
25872
+ class="pf-c-menu__item"
25873
+ type="button"
25874
+ role="menuitem"
25875
+ >
25876
+ <span class="pf-c-menu__item-main">
25877
+ <span
25878
+ class="pf-c-menu__item-text"
25879
+ >User management</span>
25880
+ </span>
25881
+ </button>
25882
+ </li>
25883
+ <li class="pf-c-menu__list-item" role="none">
25884
+ <button
25885
+ class="pf-c-menu__item"
25886
+ type="button"
25887
+ role="menuitem"
25888
+ >
25889
+ <span class="pf-c-menu__item-main">
25890
+ <span class="pf-c-menu__item-text">Logout</span>
25891
+ </span>
25892
+ </button>
25893
+ </li>
25894
+ </ul>
25895
+ </section>
25896
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
25897
+ <section class="pf-c-menu__group">
25898
+ <ul class="pf-c-menu__list" role="menu">
25899
+ <li class="pf-c-menu__list-item" role="none">
25900
+ <button
25901
+ class="pf-c-menu__item"
25902
+ type="button"
25903
+ role="menuitem"
25904
+ aria-expanded="false"
25905
+ >
25906
+ <span class="pf-c-menu__item-main">
25907
+ <span class="pf-c-menu__item-icon">
25908
+ <i
25909
+ class="fas fa-fw fa-cog"
25910
+ aria-hidden="true"
25911
+ ></i>
25912
+ </span>
25913
+ <span class="pf-c-menu__item-text">Settings</span>
25914
+ <span class="pf-c-menu__item-toggle-icon">
25915
+ <i class="fas fa-angle-right"></i>
25916
+ </span>
25917
+ </span>
25918
+ </button>
25919
+ <div class="pf-c-menu" hidden>
25920
+ <div class="pf-c-menu__content">
25921
+ <ul class="pf-c-menu__list" role="menu">
25922
+ <li
25923
+ class="pf-c-menu__list-item pf-m-drill-up"
25924
+ role="none"
25925
+ >
25926
+ <button
25927
+ class="pf-c-menu__item"
25928
+ type="button"
25929
+ role="menuitem"
25930
+ >
25931
+ <span class="pf-c-menu__item-main">
25932
+ <span
25933
+ class="pf-c-menu__item-toggle-icon"
25934
+ >
25935
+ <i class="fas fa-angle-left"></i>
25936
+ </span>
25937
+ <span class="pf-c-menu__item-icon">
25938
+ <i
25939
+ class="fas fa-fw fa-cog"
25940
+ aria-hidden="true"
25941
+ ></i>
25942
+ </span>
25943
+ <span
25944
+ class="pf-c-menu__item-text"
25945
+ >Settings</span>
25946
+ </span>
25947
+ </button>
25948
+ </li>
25949
+ <li class="pf-c-divider" role="separator"></li>
25950
+ <li class="pf-c-menu__list-item" role="none">
25951
+ <a
25952
+ class="pf-c-menu__item"
25953
+ href="#"
25954
+ role="menuitem"
25955
+ >
25956
+ <span class="pf-c-menu__item-main">
25957
+ <span
25958
+ class="pf-c-menu__item-text"
25959
+ >Customer support</span>
25960
+ </span>
25961
+ </a>
25962
+ </li>
25963
+ <li class="pf-c-menu__list-item" role="none">
25964
+ <a
25965
+ class="pf-c-menu__item"
25966
+ href="#"
25967
+ role="menuitem"
25968
+ >
25969
+ <span class="pf-c-menu__item-main">
25970
+ <span class="pf-c-menu__item-text">About</span>
25971
+ </span>
25972
+ </a>
25973
+ </li>
25974
+ </ul>
25975
+ </div>
25976
+ </div>
25977
+ </li>
25978
+
25979
+ <li class="pf-c-menu__list-item" role="none">
25980
+ <button
25981
+ class="pf-c-menu__item"
25982
+ type="button"
25983
+ role="menuitem"
25984
+ aria-expanded="false"
25985
+ >
25986
+ <span class="pf-c-menu__item-main">
25987
+ <span class="pf-c-menu__item-icon">
25988
+ <i
25989
+ class="fas fa-fw fa-pf-icon pf-icon-help"
25990
+ aria-hidden="true"
25991
+ ></i>
25992
+ </span>
25993
+ <span class="pf-c-menu__item-text">Help</span>
25994
+ <span class="pf-c-menu__item-toggle-icon">
25995
+ <i class="fas fa-angle-right"></i>
25996
+ </span>
25997
+ </span>
25998
+ </button>
25999
+ <div class="pf-c-menu" hidden>
26000
+ <div class="pf-c-menu__content">
26001
+ <ul class="pf-c-menu__list" role="menu">
26002
+ <li
26003
+ class="pf-c-menu__list-item pf-m-drill-up"
26004
+ role="none"
26005
+ >
26006
+ <button
26007
+ class="pf-c-menu__item"
26008
+ type="button"
26009
+ role="menuitem"
26010
+ >
26011
+ <span class="pf-c-menu__item-main">
26012
+ <span
26013
+ class="pf-c-menu__item-toggle-icon"
26014
+ >
26015
+ <i class="fas fa-angle-left"></i>
26016
+ </span>
26017
+ <span class="pf-c-menu__item-icon">
26018
+ <i
26019
+ class="fas fa-fw fa-pf-icon pf-icon-help"
26020
+ aria-hidden="true"
26021
+ ></i>
26022
+ </span>
26023
+ <span class="pf-c-menu__item-text">Help</span>
26024
+ </span>
26025
+ </button>
26026
+ </li>
26027
+ <li class="pf-c-divider" role="separator"></li>
26028
+ <li class="pf-c-menu__list-item" role="none">
26029
+ <a
26030
+ class="pf-c-menu__item"
26031
+ href="#"
26032
+ role="menuitem"
26033
+ >
26034
+ <span class="pf-c-menu__item-main">
26035
+ <span
26036
+ class="pf-c-menu__item-text"
26037
+ >Support options</span>
26038
+ </span>
26039
+ </a>
26040
+ </li>
26041
+ <li class="pf-c-menu__list-item" role="none">
26042
+ <a
26043
+ class="pf-c-menu__item"
26044
+ href="#"
26045
+ role="menuitem"
26046
+ >
26047
+ <span class="pf-c-menu__item-main">
26048
+ <span
26049
+ class="pf-c-menu__item-text"
26050
+ >Open support case</span>
26051
+ </span>
26052
+ </a>
26053
+ </li>
26054
+ <li class="pf-c-menu__list-item" role="none">
26055
+ <a
26056
+ class="pf-c-menu__item"
26057
+ href="#"
26058
+ role="menuitem"
26059
+ >
26060
+ <span class="pf-c-menu__item-main">
26061
+ <span
26062
+ class="pf-c-menu__item-text"
26063
+ >API documentation</span>
26064
+ </span>
26065
+ </a>
26066
+ </li>
26067
+ </ul>
26068
+ </div>
26069
+ </div>
26070
+ </li>
26071
+
26072
+ <li class="pf-c-menu__list-item" role="none">
26073
+ <button
26074
+ class="pf-c-menu__item"
26075
+ type="button"
26076
+ role="menuitem"
26077
+ >
26078
+ <span class="pf-c-menu__item-main">
26079
+ <span class="pf-c-menu__item-icon">
26080
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
26081
+ </span>
26082
+ <span
26083
+ class="pf-c-menu__item-text"
26084
+ >Application launcher</span>
26085
+ <span class="pf-c-menu__item-toggle-icon">
26086
+ <i class="fas fa-angle-right"></i>
26087
+ </span>
26088
+ </span>
26089
+ </button>
26090
+ <div class="pf-c-menu" hidden>
26091
+ <div class="pf-c-menu__header">
26092
+ <button
26093
+ class="pf-c-menu__item"
26094
+ type="button"
26095
+ role="menuitem"
26096
+ >
26097
+ <span class="pf-c-menu__item-main">
26098
+ <span class="pf-c-menu__item-toggle-icon">
26099
+ <i class="fas fa-angle-left"></i>
26100
+ </span>
26101
+ <span class="pf-c-menu__item-icon">
26102
+ <i
26103
+ class="fas fa-fw fa-th"
26104
+ aria-hidden="true"
26105
+ ></i>
26106
+ </span>
26107
+ <span
26108
+ class="pf-c-menu__item-text"
26109
+ >Application launcher</span>
26110
+ </span>
26111
+ </button>
26112
+ </div>
26113
+ <div class="pf-c-menu__search">
26114
+ <div class="pf-c-menu__search-input">
26115
+ <div class="pf-c-search-input">
26116
+ <div class="pf-c-search-input__bar">
26117
+ <span class="pf-c-search-input__text">
26118
+ <span class="pf-c-search-input__icon">
26119
+ <i
26120
+ class="fas fa-search fa-fw"
26121
+ aria-hidden="true"
26122
+ ></i>
26123
+ </span>
26124
+ <input
26125
+ class="pf-c-search-input__text-input"
26126
+ type="text"
26127
+ placeholder="Search"
26128
+ aria-label="Search"
26129
+ />
26130
+ </span>
26131
+ </div>
26132
+ </div>
26133
+ </div>
26134
+ </div>
26135
+ <hr class="pf-c-divider" />
26136
+ <section class="pf-c-menu__group">
26137
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
26138
+ <ul class="pf-c-menu__list" role="menu">
26139
+ <li class="pf-c-menu__list-item" role="none">
26140
+ <a
26141
+ class="pf-c-menu__item"
26142
+ href="#"
26143
+ role="menuitem"
26144
+ >
26145
+ <span class="pf-c-menu__item-main">
26146
+ <span
26147
+ class="pf-c-menu__item-text"
26148
+ >Link 1</span>
26149
+ </span>
26150
+ </a>
26151
+ <button
26152
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
26153
+ type="button"
26154
+ aria-label="Starred"
26155
+ >
26156
+ <span class="pf-c-menu__item-action-icon">
26157
+ <i
26158
+ class="fas fa-star"
26159
+ aria-hidden="true"
26160
+ ></i>
26161
+ </span>
26162
+ </button>
26163
+ </li>
26164
+ <li class="pf-c-menu__list-item" role="none">
26165
+ <a
26166
+ class="pf-c-menu__item"
26167
+ href="#"
26168
+ role="menuitem"
26169
+ target="_blank"
26170
+ >
26171
+ <span class="pf-c-menu__item-main">
26172
+ <span
26173
+ class="pf-c-menu__item-text"
26174
+ >Link 2</span>
26175
+ <span
26176
+ class="pf-c-menu__item-external-icon"
26177
+ >
26178
+ <i
26179
+ class="fas fa-external-link-alt"
26180
+ aria-hidden="true"
26181
+ ></i>
26182
+ </span>
26183
+ <span
26184
+ class="pf-screen-reader"
26185
+ >(opens new window)</span>
26186
+ </span>
26187
+ </a>
26188
+ <button
26189
+ class="pf-c-menu__item-action pf-m-favorite"
26190
+ type="button"
26191
+ aria-label="Not starred"
26192
+ >
26193
+ <span class="pf-c-menu__item-action-icon">
26194
+ <i
26195
+ class="fas fa-star"
26196
+ aria-hidden="true"
26197
+ ></i>
26198
+ </span>
26199
+ </button>
26200
+ </li>
26201
+ </ul>
26202
+ </section>
26203
+ <hr class="pf-c-divider" />
26204
+ <section class="pf-c-menu__group">
26205
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
26206
+ <ul class="pf-c-menu__list" role="menu">
26207
+ <li class="pf-c-menu__list-item" role="none">
26208
+ <a
26209
+ class="pf-c-menu__item"
26210
+ href="#"
26211
+ role="menuitem"
26212
+ >
26213
+ <span class="pf-c-menu__item-main">
26214
+ <span
26215
+ class="pf-c-menu__item-text"
26216
+ >Link 1</span>
26217
+ </span>
26218
+ </a>
26219
+ <button
26220
+ class="pf-c-menu__item-action pf-m-favorite"
26221
+ type="button"
26222
+ aria-label="Not starred"
26223
+ >
26224
+ <span class="pf-c-menu__item-action-icon">
26225
+ <i
26226
+ class="fas fa-star"
26227
+ aria-hidden="true"
26228
+ ></i>
26229
+ </span>
26230
+ </button>
26231
+ </li>
26232
+ <li class="pf-c-menu__list-item" role="none">
26233
+ <a
26234
+ class="pf-c-menu__item"
26235
+ href="#"
26236
+ role="menuitem"
26237
+ target="_blank"
26238
+ >
26239
+ <span class="pf-c-menu__item-main">
26240
+ <span
26241
+ class="pf-c-menu__item-text"
26242
+ >Link 2</span>
26243
+ <span
26244
+ class="pf-c-menu__item-external-icon"
26245
+ >
26246
+ <i
26247
+ class="fas fa-external-link-alt"
26248
+ aria-hidden="true"
26249
+ ></i>
26250
+ </span>
26251
+ <span
26252
+ class="pf-screen-reader"
26253
+ >(opens new window)</span>
26254
+ </span>
26255
+ </a>
26256
+ <button
26257
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
26258
+ type="button"
26259
+ aria-label="Starred"
26260
+ >
26261
+ <span class="pf-c-menu__item-action-icon">
26262
+ <i
26263
+ class="fas fa-star"
26264
+ aria-hidden="true"
26265
+ ></i>
26266
+ </span>
26267
+ </button>
26268
+ </li>
26269
+ </ul>
26270
+ </section>
26271
+ </div>
26272
+ </li>
26273
+ </ul>
26274
+ </section>
26275
+ </div>
26276
+ </div>
26277
+ </div>
26278
+ </div>
26279
+ </div>
26280
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
26281
+ <div
26282
+ class="pf-c-dropdown pf-m-full-height"
26283
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
26284
+ >
26285
+ <button
26286
+ class="pf-c-dropdown__toggle"
26287
+ id="sticky-header-and-multiple columns-demo-masthead-profile-button"
26288
+ aria-expanded="false"
26289
+ type="button"
26290
+ >
26291
+ <span class="pf-c-dropdown__toggle-image">
26292
+ <img
26293
+ class="pf-c-avatar"
26294
+ alt="Avatar image"
26295
+ src="/assets/images/img_avatar-light.svg"
26296
+ />
26297
+ </span>
26298
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
26299
+ <span class="pf-c-dropdown__toggle-icon">
26300
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
26301
+ </span>
26302
+ </button>
26303
+ <div class="pf-c-dropdown__menu" hidden>
26304
+ <section class="pf-c-dropdown__group">
26305
+ <div class="pf-c-dropdown__menu-item pf-m-text">
26306
+ <div class="pf-u-font-size-sm">Account number:</div>
26307
+ <div>123456789</div>
26308
+ </div>
26309
+ <div class="pf-c-dropdown__menu-item pf-m-text">
26310
+ <div class="pf-u-font-size-sm">Username:</div>
26311
+ <div>mshaksho@redhat.com</div>
26312
+ </div>
26313
+ </section>
26314
+ <hr class="pf-c-divider" />
26315
+ <section class="pf-c-dropdown__group">
26316
+ <ul>
26317
+ <li>
26318
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
26319
+ </li>
26320
+ <li>
26321
+ <a
26322
+ class="pf-c-dropdown__menu-item"
26323
+ href="#"
26324
+ >User management</a>
26325
+ </li>
26326
+ <li>
26327
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
26328
+ </li>
26329
+ </ul>
26330
+ </section>
26331
+ </div>
26332
+ </div>
26333
+ </div>
26334
+ </div>
26335
+ </div>
26336
+ </div>
26337
+ </div>
26338
+ </header>
26339
+ <div class="pf-c-page__sidebar">
26340
+ <div class="pf-c-page__sidebar-body">
26341
+ <nav
26342
+ class="pf-c-nav"
26343
+ id="sticky-header-and-multiple columns-demo-primary-nav"
26344
+ aria-label="Global"
26345
+ >
26346
+ <ul class="pf-c-nav__list" role="list">
26347
+ <li class="pf-c-nav__item">
26348
+ <a href="#" class="pf-c-nav__link">System panel</a>
26349
+ </li>
26350
+ <li class="pf-c-nav__item">
26351
+ <a
26352
+ href="#"
26353
+ class="pf-c-nav__link pf-m-current"
26354
+ aria-current="page"
26355
+ >Policy</a>
26356
+ </li>
26357
+ <li class="pf-c-nav__item">
26358
+ <a href="#" class="pf-c-nav__link">Authentication</a>
26359
+ </li>
26360
+ <li class="pf-c-nav__item">
26361
+ <a href="#" class="pf-c-nav__link">Network services</a>
26362
+ </li>
26363
+ <li class="pf-c-nav__item">
26364
+ <a href="#" class="pf-c-nav__link">Server</a>
26365
+ </li>
26366
+ </ul>
26367
+ </nav>
26368
+ </div>
26369
+ </div>
26370
+ <main
26371
+ class="pf-c-page__main"
26372
+ tabindex="-1"
26373
+ id="main-content-sticky-header-and-multiple columns-demo"
26374
+ >
26375
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
26376
+ <div class="pf-c-page__main-body">
26377
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
26378
+ <ol class="pf-c-breadcrumb__list" role="list">
26379
+ <li class="pf-c-breadcrumb__item">
26380
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
26381
+ </li>
26382
+ <li class="pf-c-breadcrumb__item">
26383
+ <span class="pf-c-breadcrumb__item-divider">
26384
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
26385
+ </span>
26386
+
26387
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
26388
+ </li>
26389
+ <li class="pf-c-breadcrumb__item">
26390
+ <span class="pf-c-breadcrumb__item-divider">
26391
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
26392
+ </span>
26393
+
26394
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
26395
+ </li>
26396
+ <li class="pf-c-breadcrumb__item">
26397
+ <span class="pf-c-breadcrumb__item-divider">
26398
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
26399
+ </span>
26400
+
26401
+ <a
26402
+ href="#"
26403
+ class="pf-c-breadcrumb__link pf-m-current"
26404
+ aria-current="page"
26405
+ >Section landing</a>
26406
+ </li>
26407
+ </ol>
26408
+ </nav>
26409
+ </div>
26410
+ </section>
26411
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
26412
+ <div class="pf-c-page__main-body">
26413
+ <div class="pf-c-content">
26414
+ <h1>Main title</h1>
26415
+ <p>This is a full page demo.</p>
26416
+ </div>
26417
+ </div>
26418
+ </section>
26419
+ <section
26420
+ class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll"
26421
+ >
26422
+ <div class="pf-c-scroll-outer-wrapper">
26423
+ <div class="pf-c-toolbar">
26424
+ <div class="pf-c-toolbar__content">
26425
+ <div class="pf-c-toolbar__content-section pf-m-nowrap">
26426
+ <div
26427
+ class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
26428
+ >
26429
+ <div class="pf-c-toolbar__toggle">
26430
+ <button
26431
+ class="pf-c-button pf-m-plain"
26432
+ type="button"
26433
+ aria-label="Show filters"
26434
+ aria-expanded="false"
26435
+ aria-controls="-expandable-content"
26436
+ >
26437
+ <i class="fas fa-filter" aria-hidden="true"></i>
26438
+ </button>
26439
+ </div>
26440
+ <div class="pf-c-toolbar__item pf-m-bulk-select">
26441
+ <div class="pf-c-dropdown">
26442
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
26443
+ <label
26444
+ class="pf-c-dropdown__toggle-check"
26445
+ for="-bulk-select-toggle-check"
26446
+ >
26447
+ <div class="pf-c-check pf-m-standalone">
26448
+ <input
26449
+ class="pf-c-check__input"
26450
+ type="checkbox"
26451
+ id="-bulk-select-toggle-check"
26452
+ aria-label="Select all"
26453
+ />
26454
+ </div>
26455
+ </label>
26456
+
26457
+ <button
26458
+ class="pf-c-dropdown__toggle-button"
26459
+ type="button"
26460
+ aria-expanded="false"
26461
+ id="-bulk-select-toggle-button"
26462
+ aria-label="Dropdown toggle"
26463
+ >
26464
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
26465
+ </button>
26466
+ </div>
26467
+ <ul class="pf-c-dropdown__menu" hidden>
26468
+ <li>
26469
+ <button
26470
+ class="pf-c-dropdown__menu-item"
26471
+ type="button"
26472
+ >Select all</button>
26473
+ </li>
26474
+ <li>
26475
+ <button
26476
+ class="pf-c-dropdown__menu-item"
26477
+ type="button"
26478
+ >Select none</button>
26479
+ </li>
26480
+ <li>
26481
+ <button
26482
+ class="pf-c-dropdown__menu-item"
26483
+ type="button"
26484
+ >Other action</button>
26485
+ </li>
26486
+ </ul>
26487
+ </div>
26488
+ </div>
26489
+
26490
+ <div class="pf-c-toolbar__item pf-m-search-filter">
26491
+ <div
26492
+ class="pf-c-input-group"
26493
+ aria-label="search filter"
26494
+ role="group"
26495
+ >
26496
+ <div class="pf-c-select" style="width: 175px">
26497
+ <span id="-select-name-label" hidden>Choose one</span>
26498
+
26499
+ <button
26500
+ class="pf-c-select__toggle"
26501
+ type="button"
26502
+ id="-select-name-toggle"
26503
+ aria-haspopup="true"
26504
+ aria-expanded="false"
26505
+ aria-labelledby="-select-name-label -select-name-toggle"
26506
+ >
26507
+ <div class="pf-c-select__toggle-wrapper">
26508
+ <span class="pf-c-select__toggle-icon">
26509
+ <i class="fas fa-filter" aria-hidden="true"></i>
26510
+ </span>
26511
+ <span class="pf-c-select__toggle-text">Name</span>
26512
+ </div>
26513
+ <span class="pf-c-select__toggle-arrow">
26514
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
26515
+ </span>
26516
+ </button>
26517
+
26518
+ <ul
26519
+ class="pf-c-select__menu"
26520
+ role="listbox"
26521
+ aria-labelledby="-select-name-label"
26522
+ hidden
26523
+ >
26524
+ <li role="presentation">
26525
+ <button
26526
+ class="pf-c-select__menu-item"
26527
+ role="option"
26528
+ >Running</button>
26529
+ </li>
26530
+ <li role="presentation">
26531
+ <button
26532
+ class="pf-c-select__menu-item pf-m-selected"
26533
+ role="option"
26534
+ aria-selected="true"
26535
+ >
26536
+ Stopped
26537
+ <span class="pf-c-select__menu-item-icon">
26538
+ <i class="fas fa-check" aria-hidden="true"></i>
26539
+ </span>
26540
+ </button>
26541
+ </li>
26542
+ <li role="presentation">
26543
+ <button
26544
+ class="pf-c-select__menu-item"
26545
+ role="option"
26546
+ >Down</button>
26547
+ </li>
26548
+ <li role="presentation">
26549
+ <button
26550
+ class="pf-c-select__menu-item"
26551
+ role="option"
26552
+ >Degraded</button>
26553
+ </li>
26554
+ <li role="presentation">
26555
+ <button
26556
+ class="pf-c-select__menu-item"
26557
+ role="option"
26558
+ >Needs maintenance</button>
26559
+ </li>
26560
+ </ul>
26561
+ </div>
26562
+ <div class="pf-c-text-input-group">
26563
+ <div class="pf-c-text-input-group__main pf-m-icon">
26564
+ <span class="pf-c-text-input-group__text">
26565
+ <span class="pf-c-text-input-group__icon">
26566
+ <i class="fas fa-fw fa-search"></i>
26567
+ </span>
26568
+ <input
26569
+ class="pf-c-text-input-group__text-input"
26570
+ type="search"
26571
+ placeholder="Filter by name"
26572
+ value
26573
+ aria-label="Type to filter"
26574
+ />
26575
+ </span>
26576
+ </div>
26577
+ </div>
26578
+ </div>
26579
+ </div>
26580
+ </div>
26581
+
26582
+ <div class="pf-c-toolbar__item">
26583
+ <button
26584
+ class="pf-c-button pf-m-plain"
26585
+ type="button"
26586
+ aria-label="Sort"
26587
+ >
26588
+ <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
26589
+ </button>
26590
+ </div>
26591
+
26592
+ <div class="pf-c-overflow-menu" id="-overflow-menu">
26593
+ <div
26594
+ class="pf-c-overflow-menu__content pf-u-display-none pf-u-display-flex-on-lg"
26595
+ >
26596
+ <div class="pf-c-overflow-menu__group pf-m-button-group">
26597
+ <div class="pf-c-overflow-menu__item">
26598
+ <button
26599
+ class="pf-c-button pf-m-primary"
26600
+ type="button"
26601
+ >Create instance</button>
26602
+ </div>
26603
+ </div>
26604
+ </div>
26605
+ <div class="pf-c-overflow-menu__control">
26606
+ <div class="pf-c-dropdown">
26607
+ <button
26608
+ class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
26609
+ type="button"
26610
+ id="-overflow-menu-dropdown-toggle"
26611
+ aria-label="Dropdown with additional options"
26612
+ aria-expanded="false"
26613
+ >
26614
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
26615
+ </button>
26616
+ <ul
26617
+ class="pf-c-dropdown__menu"
26618
+ aria-labelledby="-overflow-menu-dropdown-toggle"
26619
+ hidden
26620
+ >
26621
+ <li>
26622
+ <button class="pf-c-dropdown__menu-item">Action 7</button>
26623
+ </li>
26624
+ </ul>
26625
+ </div>
26626
+ </div>
26627
+ </div>
26628
+
26629
+ <div class="pf-c-toolbar__item pf-m-pagination">
26630
+ <div class="pf-c-pagination pf-m-compact">
26631
+ <div class="pf-c-options-menu">
26632
+ <button
26633
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
26634
+ type="button"
26635
+ id="-top-pagination-toggle"
26636
+ aria-haspopup="listbox"
26637
+ aria-expanded="false"
26638
+ >
26639
+ <span class="pf-c-options-menu__toggle-text">
26640
+ <b>1 - 10</b>&nbsp;of&nbsp;
26641
+ <b>36</b>
26642
+ </span>
26643
+ <div class="pf-c-options-menu__toggle-icon">
26644
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
26645
+ </div>
26646
+ </button>
26647
+ <ul
26648
+ class="pf-c-options-menu__menu"
26649
+ aria-labelledby="-top-pagination-toggle"
26650
+ hidden
26651
+ >
26652
+ <li>
26653
+ <button
26654
+ class="pf-c-options-menu__menu-item"
26655
+ type="button"
26656
+ >5 per page</button>
26657
+ </li>
26658
+ <li>
26659
+ <button
26660
+ class="pf-c-options-menu__menu-item"
26661
+ type="button"
26662
+ >
26663
+ 10 per page
26664
+ <div class="pf-c-options-menu__menu-item-icon">
26665
+ <i class="fas fa-check" aria-hidden="true"></i>
26666
+ </div>
26667
+ </button>
26668
+ </li>
26669
+ <li>
26670
+ <button
26671
+ class="pf-c-options-menu__menu-item"
26672
+ type="button"
26673
+ >20 per page</button>
26674
+ </li>
26675
+ </ul>
26676
+ </div>
26677
+ <nav
26678
+ class="pf-c-pagination__nav"
26679
+ aria-label="Toolbar top pagination"
26680
+ >
26681
+ <div class="pf-c-pagination__nav-control pf-m-prev">
26682
+ <button
26683
+ class="pf-c-button pf-m-plain"
26684
+ type="button"
26685
+ disabled
26686
+ aria-label="Go to previous page"
26687
+ >
26688
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
26689
+ </button>
26690
+ </div>
26691
+ <div class="pf-c-pagination__nav-control pf-m-next">
26692
+ <button
26693
+ class="pf-c-button pf-m-plain"
26694
+ type="button"
26695
+ aria-label="Go to next page"
26696
+ >
26697
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
26698
+ </button>
26699
+ </div>
26700
+ </nav>
26701
+ </div>
26702
+ </div>
26703
+ </div>
26704
+
26705
+ <div
26706
+ class="pf-c-toolbar__expandable-content pf-m-hidden"
26707
+ id="-expandable-content"
26708
+ hidden
26709
+ ></div>
26710
+ </div>
26711
+ </div>
26712
+ <div class="pf-c-scroll-inner-wrapper">
26713
+ <table
26714
+ class="pf-c-table"
26715
+ role="grid"
26716
+ aria-label="This is a scrollable table"
26717
+ id="sticky-right-column-example"
26718
+ >
26719
+ <thead>
26720
+ <tr role="row">
26721
+ <th
26722
+ class="pf-c-table__sort"
26723
+ role="columnheader"
26724
+ aria-sort="none"
26725
+ data-label="Example th"
26726
+ scope="col"
26727
+ >
26728
+ <button class="pf-c-table__button">
26729
+ <div class="pf-c-table__button-content">
26730
+ <span class="pf-c-table__text">Fact</span>
26731
+ <span class="pf-c-table__sort-indicator">
26732
+ <i class="fas fa-arrows-alt-v"></i>
26733
+ </span>
26734
+ </div>
26735
+ </button>
26736
+ </th>
26737
+ <th
26738
+ class="pf-c-table__sort"
26739
+ role="columnheader"
26740
+ aria-sort="none"
26741
+ data-label="Example th"
26742
+ scope="col"
26743
+ >
26744
+ <button class="pf-c-table__button">
26745
+ <div class="pf-c-table__button-content">
26746
+ <span class="pf-c-table__text">State</span>
26747
+ <span class="pf-c-table__sort-indicator">
26748
+ <i class="fas fa-arrows-alt-v"></i>
26749
+ </span>
26750
+ </div>
26751
+ </button>
26752
+ </th>
26753
+ <th
26754
+ class
26755
+ role="columnheader"
26756
+ data-label="Example th"
26757
+ scope="col"
26758
+ >Header 3</th>
26759
+ <th
26760
+ class
26761
+ role="columnheader"
26762
+ data-label="Example th"
26763
+ scope="col"
26764
+ >Header 4</th>
26765
+ <th
26766
+ class
26767
+ role="columnheader"
26768
+ data-label="Example th"
26769
+ scope="col"
26770
+ >Header 5</th>
26771
+ <th
26772
+ class
26773
+ role="columnheader"
26774
+ data-label="Example th"
26775
+ scope="col"
26776
+ >Header 6</th>
26777
+ <th
26778
+ class
26779
+ role="columnheader"
26780
+ data-label="Example th"
26781
+ scope="col"
26782
+ >Header 7</th>
26783
+ <th
26784
+ class
26785
+ role="columnheader"
26786
+ data-label="Example th"
26787
+ scope="col"
26788
+ >Header 8</th>
26789
+
26790
+ <th
26791
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
26792
+ role="columnheader"
26793
+ data-label="Example th"
26794
+ scope="col"
26795
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
26796
+ >Header 9</th>
26797
+ </tr>
26798
+ </thead>
26799
+
26800
+ <tbody role="rowgroup">
26801
+ <tr role="row">
26802
+ <td
26803
+ class="pf-m-nowrap"
26804
+ role="cell"
26805
+ data-label="Example td"
26806
+ >Fact 1</td>
26807
+ <td
26808
+ class="pf-m-nowrap"
26809
+ role="cell"
26810
+ data-label="Example td"
26811
+ >State 1</td>
26812
+ <td
26813
+ class="pf-m-nowrap"
26814
+ role="cell"
26815
+ data-label="Example td"
26816
+ >Test cell 1-3</td>
26817
+ <td
26818
+ class="pf-m-nowrap"
26819
+ role="cell"
26820
+ data-label="Example td"
26821
+ >Test cell 1-4</td>
26822
+ <td
26823
+ class="pf-m-nowrap"
26824
+ role="cell"
26825
+ data-label="Example td"
26826
+ >Test cell 1-5</td>
26827
+ <td
26828
+ class="pf-m-nowrap"
26829
+ role="cell"
26830
+ data-label="Example td"
26831
+ >Test cell 1-6</td>
26832
+ <td
26833
+ class="pf-m-nowrap"
26834
+ role="cell"
26835
+ data-label="Example td"
26836
+ >Test cell 1-7</td>
26837
+ <td
26838
+ class="pf-m-nowrap"
26839
+ role="cell"
26840
+ data-label="Example td"
26841
+ >Test cell 1-8</td>
26842
+
26843
+ <th
26844
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
26845
+ role="columnheader"
26846
+ data-label="Example th"
26847
+ scope="col"
26848
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
26849
+ >Test cell 1-9</th>
26850
+ </tr>
26851
+ <tr role="row">
26852
+ <td
26853
+ class="pf-m-nowrap"
26854
+ role="cell"
26855
+ data-label="Example td"
26856
+ >Fact 2</td>
26857
+ <td
26858
+ class="pf-m-nowrap"
26859
+ role="cell"
26860
+ data-label="Example td"
26861
+ >State 2</td>
26862
+ <td
26863
+ class="pf-m-nowrap"
26864
+ role="cell"
26865
+ data-label="Example td"
26866
+ >Test cell 2-3</td>
26867
+ <td
26868
+ class="pf-m-nowrap"
26869
+ role="cell"
26870
+ data-label="Example td"
26871
+ >Test cell 2-4</td>
26872
+ <td
26873
+ class="pf-m-nowrap"
26874
+ role="cell"
26875
+ data-label="Example td"
26876
+ >Test cell 2-5</td>
26877
+ <td
26878
+ class="pf-m-nowrap"
26879
+ role="cell"
26880
+ data-label="Example td"
26881
+ >Test cell 2-6</td>
26882
+ <td
26883
+ class="pf-m-nowrap"
26884
+ role="cell"
26885
+ data-label="Example td"
26886
+ >Test cell 2-7</td>
26887
+ <td
26888
+ class="pf-m-nowrap"
26889
+ role="cell"
26890
+ data-label="Example td"
26891
+ >Test cell 2-8</td>
26892
+
26893
+ <th
26894
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
26895
+ role="columnheader"
26896
+ data-label="Example th"
26897
+ scope="col"
26898
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
26899
+ >Test cell 2-9</th>
26900
+ </tr>
26901
+ <tr role="row">
26902
+ <td
26903
+ class="pf-m-nowrap"
26904
+ role="cell"
26905
+ data-label="Example td"
26906
+ >Fact 3</td>
26907
+ <td
26908
+ class="pf-m-nowrap"
26909
+ role="cell"
26910
+ data-label="Example td"
26911
+ >State 3</td>
26912
+ <td
26913
+ class="pf-m-nowrap"
26914
+ role="cell"
26915
+ data-label="Example td"
26916
+ >Test cell 3-3</td>
26917
+ <td
26918
+ class="pf-m-nowrap"
26919
+ role="cell"
26920
+ data-label="Example td"
26921
+ >Test cell 3-4</td>
26922
+ <td
26923
+ class="pf-m-nowrap"
26924
+ role="cell"
26925
+ data-label="Example td"
26926
+ >Test cell 3-5</td>
26927
+ <td
26928
+ class="pf-m-nowrap"
26929
+ role="cell"
26930
+ data-label="Example td"
26931
+ >Test cell 3-6</td>
26932
+ <td
26933
+ class="pf-m-nowrap"
26934
+ role="cell"
26935
+ data-label="Example td"
26936
+ >Test cell 3-7</td>
26937
+ <td
26938
+ class="pf-m-nowrap"
26939
+ role="cell"
26940
+ data-label="Example td"
26941
+ >Test cell 3-8</td>
26942
+
26943
+ <th
26944
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
26945
+ role="columnheader"
26946
+ data-label="Example th"
26947
+ scope="col"
26948
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
26949
+ >Test cell 3-9</th>
26950
+ </tr>
26951
+ <tr role="row">
26952
+ <td
26953
+ class="pf-m-nowrap"
26954
+ role="cell"
26955
+ data-label="Example td"
26956
+ >Fact 4</td>
26957
+ <td
26958
+ class="pf-m-nowrap"
26959
+ role="cell"
26960
+ data-label="Example td"
26961
+ >State 4</td>
26962
+ <td
26963
+ class="pf-m-nowrap"
26964
+ role="cell"
26965
+ data-label="Example td"
26966
+ >Test cell 4-3</td>
26967
+ <td
26968
+ class="pf-m-nowrap"
26969
+ role="cell"
26970
+ data-label="Example td"
26971
+ >Test cell 4-4</td>
26972
+ <td
26973
+ class="pf-m-nowrap"
26974
+ role="cell"
26975
+ data-label="Example td"
26976
+ >Test cell 4-5</td>
26977
+ <td
26978
+ class="pf-m-nowrap"
26979
+ role="cell"
26980
+ data-label="Example td"
26981
+ >Test cell 4-6</td>
26982
+ <td
26983
+ class="pf-m-nowrap"
26984
+ role="cell"
26985
+ data-label="Example td"
26986
+ >Test cell 4-7</td>
26987
+ <td
26988
+ class="pf-m-nowrap"
26989
+ role="cell"
26990
+ data-label="Example td"
26991
+ >Test cell 4-8</td>
26992
+
26993
+ <th
26994
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
26995
+ role="columnheader"
26996
+ data-label="Example th"
26997
+ scope="col"
26998
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
26999
+ >Test cell 4-9</th>
27000
+ </tr>
27001
+ <tr role="row">
27002
+ <td
27003
+ class="pf-m-nowrap"
27004
+ role="cell"
27005
+ data-label="Example td"
27006
+ >Fact 5</td>
27007
+ <td
27008
+ class="pf-m-nowrap"
27009
+ role="cell"
27010
+ data-label="Example td"
27011
+ >State 5</td>
27012
+ <td
27013
+ class="pf-m-nowrap"
27014
+ role="cell"
27015
+ data-label="Example td"
27016
+ >Test cell 5-3</td>
27017
+ <td
27018
+ class="pf-m-nowrap"
27019
+ role="cell"
27020
+ data-label="Example td"
27021
+ >Test cell 5-4</td>
27022
+ <td
27023
+ class="pf-m-nowrap"
27024
+ role="cell"
27025
+ data-label="Example td"
27026
+ >Test cell 5-5</td>
27027
+ <td
27028
+ class="pf-m-nowrap"
27029
+ role="cell"
27030
+ data-label="Example td"
27031
+ >Test cell 5-6</td>
27032
+ <td
27033
+ class="pf-m-nowrap"
27034
+ role="cell"
27035
+ data-label="Example td"
27036
+ >Test cell 5-7</td>
27037
+ <td
27038
+ class="pf-m-nowrap"
27039
+ role="cell"
27040
+ data-label="Example td"
27041
+ >Test cell 5-8</td>
27042
+
27043
+ <th
27044
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
27045
+ role="columnheader"
27046
+ data-label="Example th"
27047
+ scope="col"
27048
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
27049
+ >Test cell 5-9</th>
27050
+ </tr>
27051
+ <tr role="row">
27052
+ <td
27053
+ class="pf-m-nowrap"
27054
+ role="cell"
27055
+ data-label="Example td"
27056
+ >Fact 6</td>
27057
+ <td
27058
+ class="pf-m-nowrap"
27059
+ role="cell"
27060
+ data-label="Example td"
27061
+ >State 6</td>
27062
+ <td
27063
+ class="pf-m-nowrap"
27064
+ role="cell"
27065
+ data-label="Example td"
27066
+ >Test cell 6-3</td>
27067
+ <td
27068
+ class="pf-m-nowrap"
27069
+ role="cell"
27070
+ data-label="Example td"
27071
+ >Test cell 6-4</td>
27072
+ <td
27073
+ class="pf-m-nowrap"
27074
+ role="cell"
27075
+ data-label="Example td"
27076
+ >Test cell 6-5</td>
27077
+ <td
27078
+ class="pf-m-nowrap"
27079
+ role="cell"
27080
+ data-label="Example td"
27081
+ >Test cell 6-6</td>
27082
+ <td
27083
+ class="pf-m-nowrap"
27084
+ role="cell"
27085
+ data-label="Example td"
27086
+ >Test cell 6-7</td>
27087
+ <td
27088
+ class="pf-m-nowrap"
27089
+ role="cell"
27090
+ data-label="Example td"
27091
+ >Test cell 6-8</td>
27092
+
27093
+ <th
27094
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
27095
+ role="columnheader"
27096
+ data-label="Example th"
27097
+ scope="col"
27098
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
27099
+ >Test cell 6-9</th>
27100
+ </tr>
27101
+ <tr role="row">
27102
+ <td
27103
+ class="pf-m-nowrap"
27104
+ role="cell"
27105
+ data-label="Example td"
27106
+ >Fact 7</td>
27107
+ <td
27108
+ class="pf-m-nowrap"
27109
+ role="cell"
27110
+ data-label="Example td"
27111
+ >State 7</td>
27112
+ <td
27113
+ class="pf-m-nowrap"
27114
+ role="cell"
27115
+ data-label="Example td"
27116
+ >Test cell 7-3</td>
27117
+ <td
27118
+ class="pf-m-nowrap"
27119
+ role="cell"
27120
+ data-label="Example td"
27121
+ >Test cell 7-4</td>
27122
+ <td
27123
+ class="pf-m-nowrap"
27124
+ role="cell"
27125
+ data-label="Example td"
27126
+ >Test cell 7-5</td>
27127
+ <td
27128
+ class="pf-m-nowrap"
27129
+ role="cell"
27130
+ data-label="Example td"
27131
+ >Test cell 7-6</td>
27132
+ <td
27133
+ class="pf-m-nowrap"
27134
+ role="cell"
27135
+ data-label="Example td"
27136
+ >Test cell 7-7</td>
27137
+ <td
27138
+ class="pf-m-nowrap"
27139
+ role="cell"
27140
+ data-label="Example td"
27141
+ >Test cell 7-8</td>
27142
+
27143
+ <th
27144
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
27145
+ role="columnheader"
27146
+ data-label="Example th"
27147
+ scope="col"
27148
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
27149
+ >Test cell 7-9</th>
27150
+ </tr>
27151
+ <tr role="row">
27152
+ <td
27153
+ class="pf-m-nowrap"
27154
+ role="cell"
27155
+ data-label="Example td"
27156
+ >Fact 8</td>
27157
+ <td
27158
+ class="pf-m-nowrap"
27159
+ role="cell"
27160
+ data-label="Example td"
27161
+ >State 8</td>
27162
+ <td
27163
+ class="pf-m-nowrap"
27164
+ role="cell"
27165
+ data-label="Example td"
27166
+ >Test cell 8-3</td>
27167
+ <td
27168
+ class="pf-m-nowrap"
27169
+ role="cell"
27170
+ data-label="Example td"
27171
+ >Test cell 8-4</td>
27172
+ <td
27173
+ class="pf-m-nowrap"
27174
+ role="cell"
27175
+ data-label="Example td"
27176
+ >Test cell 8-5</td>
27177
+ <td
27178
+ class="pf-m-nowrap"
27179
+ role="cell"
27180
+ data-label="Example td"
27181
+ >Test cell 8-6</td>
27182
+ <td
27183
+ class="pf-m-nowrap"
27184
+ role="cell"
27185
+ data-label="Example td"
27186
+ >Test cell 8-7</td>
27187
+ <td
27188
+ class="pf-m-nowrap"
27189
+ role="cell"
27190
+ data-label="Example td"
27191
+ >Test cell 8-8</td>
27192
+
27193
+ <th
27194
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
27195
+ role="columnheader"
27196
+ data-label="Example th"
27197
+ scope="col"
27198
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
27199
+ >Test cell 8-9</th>
27200
+ </tr>
27201
+ <tr role="row">
27202
+ <td
27203
+ class="pf-m-nowrap"
27204
+ role="cell"
27205
+ data-label="Example td"
27206
+ >Fact 9</td>
27207
+ <td
27208
+ class="pf-m-nowrap"
27209
+ role="cell"
27210
+ data-label="Example td"
27211
+ >State 9</td>
27212
+ <td
27213
+ class="pf-m-nowrap"
27214
+ role="cell"
27215
+ data-label="Example td"
27216
+ >Test cell 9-3</td>
27217
+ <td
27218
+ class="pf-m-nowrap"
27219
+ role="cell"
27220
+ data-label="Example td"
27221
+ >Test cell 9-4</td>
27222
+ <td
27223
+ class="pf-m-nowrap"
27224
+ role="cell"
27225
+ data-label="Example td"
27226
+ >Test cell 9-5</td>
27227
+ <td
27228
+ class="pf-m-nowrap"
27229
+ role="cell"
27230
+ data-label="Example td"
27231
+ >Test cell 9-6</td>
27232
+ <td
27233
+ class="pf-m-nowrap"
27234
+ role="cell"
27235
+ data-label="Example td"
27236
+ >Test cell 9-7</td>
27237
+ <td
27238
+ class="pf-m-nowrap"
27239
+ role="cell"
27240
+ data-label="Example td"
27241
+ >Test cell 9-8</td>
27242
+
27243
+ <th
27244
+ class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
27245
+ role="columnheader"
27246
+ data-label="Example th"
27247
+ scope="col"
27248
+ style="--pf-c-table__sticky-cell--MinWidth: 150px;"
27249
+ >Test cell 9-9</th>
27250
+ </tr>
27251
+ </tbody>
27252
+ </table>
27253
+ </div>
27254
+ <div class="pf-c-pagination pf-m-bottom">
27255
+ <div class="pf-c-options-menu pf-m-top">
27256
+ <button
27257
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
27258
+ type="button"
27259
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
27260
+ aria-haspopup="listbox"
27261
+ aria-expanded="false"
27262
+ >
27263
+ <span class="pf-c-options-menu__toggle-text">
27264
+ <b>1 - 10</b>&nbsp;of&nbsp;
27265
+ <b>36</b>
27266
+ </span>
27267
+ <div class="pf-c-options-menu__toggle-icon">
27268
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
27269
+ </div>
27270
+ </button>
27271
+ <ul
27272
+ class="pf-c-options-menu__menu pf-m-top"
27273
+ aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
27274
+ hidden
27275
+ >
27276
+ <li>
27277
+ <button
27278
+ class="pf-c-options-menu__menu-item"
27279
+ type="button"
27280
+ >5 per page</button>
27281
+ </li>
27282
+ <li>
27283
+ <button class="pf-c-options-menu__menu-item" type="button">
27284
+ 10 per page
27285
+ <div class="pf-c-options-menu__menu-item-icon">
27286
+ <i class="fas fa-check" aria-hidden="true"></i>
27287
+ </div>
27288
+ </button>
27289
+ </li>
27290
+ <li>
27291
+ <button
27292
+ class="pf-c-options-menu__menu-item"
27293
+ type="button"
27294
+ >20 per page</button>
27295
+ </li>
27296
+ </ul>
27297
+ </div>
27298
+ <nav class="pf-c-pagination__nav" aria-label="Pagination">
27299
+ <div class="pf-c-pagination__nav-control pf-m-first">
27300
+ <button
27301
+ class="pf-c-button pf-m-plain"
27302
+ type="button"
27303
+ disabled
27304
+ aria-label="Go to first page"
27305
+ >
27306
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
27307
+ </button>
27308
+ </div>
27309
+ <div class="pf-c-pagination__nav-control pf-m-prev">
27310
+ <button
27311
+ class="pf-c-button pf-m-plain"
27312
+ type="button"
27313
+ disabled
27314
+ aria-label="Go to previous page"
27315
+ >
27316
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
27317
+ </button>
27318
+ </div>
27319
+ <div class="pf-c-pagination__nav-page-select">
27320
+ <input
27321
+ class="pf-c-form-control"
27322
+ aria-label="Current page"
27323
+ type="number"
27324
+ min="1"
27325
+ max="4"
27326
+ value="1"
27327
+ />
27328
+ <span aria-hidden="true">of 4</span>
27329
+ </div>
27330
+ <div class="pf-c-pagination__nav-control pf-m-next">
27331
+ <button
27332
+ class="pf-c-button pf-m-plain"
27333
+ type="button"
27334
+ aria-label="Go to next page"
27335
+ >
27336
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
27337
+ </button>
27338
+ </div>
27339
+ <div class="pf-c-pagination__nav-control pf-m-last">
27340
+ <button
27341
+ class="pf-c-button pf-m-plain"
27342
+ type="button"
27343
+ aria-label="Go to last page"
27344
+ >
27345
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
27346
+ </button>
27347
+ </div>
27348
+ </nav>
27349
+ </div>
27350
+ </div>
27351
+ </section>
27352
+ </main>
27353
+ </div>
27354
+
27355
+ ```
27356
+
25370
27357
  ### Cell with image alignment
25371
27358
 
25372
27359
  By default, table cell alignment is set to baseline. This retains vertical alignment with varying text size, but can cause visual inconsistencies with images. The vertical alignment of images within table cells may need to be specified to provide proper alignment.
@@ -25461,7 +27448,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
25461
27448
  </div>
25462
27449
  <section class="pf-c-app-launcher__group">
25463
27450
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
25464
- <ul>
27451
+ <ul role="list">
25465
27452
  <li
25466
27453
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
25467
27454
  >
@@ -25513,7 +27500,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
25513
27500
  <hr class="pf-c-divider" />
25514
27501
  <section class="pf-c-app-launcher__group">
25515
27502
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
25516
- <ul>
27503
+ <ul role="list">
25517
27504
  <li
25518
27505
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
25519
27506
  >
@@ -26168,7 +28155,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
26168
28155
  id="image-alignment-demo-primary-nav"
26169
28156
  aria-label="Global"
26170
28157
  >
26171
- <ul class="pf-c-nav__list">
28158
+ <ul class="pf-c-nav__list" role="list">
26172
28159
  <li class="pf-c-nav__item">
26173
28160
  <a href="#" class="pf-c-nav__link">System panel</a>
26174
28161
  </li>
@@ -26200,7 +28187,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
26200
28187
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
26201
28188
  <div class="pf-c-page__main-body">
26202
28189
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
26203
- <ol class="pf-c-breadcrumb__list">
28190
+ <ol class="pf-c-breadcrumb__list" role="list">
26204
28191
  <li class="pf-c-breadcrumb__item">
26205
28192
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
26206
28193
  </li>