@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92

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 (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +5 -5
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/DualListSelector/examples/DualListSelector.md CHANGED
@@ -7,23 +7,23 @@ cssPrefix: pf-v5-c-dual-list-selector
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-dual-list-selector">
11
- <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
12
- <div class="pf-v5-c-dual-list-selector__header">
13
- <div class="pf-v5-c-dual-list-selector__title">
14
- <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
10
+ <div class="pf-v6-c-dual-list-selector">
11
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
12
+ <div class="pf-v6-c-dual-list-selector__header">
13
+ <div class="pf-v6-c-dual-list-selector__title">
14
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
15
15
  </div>
16
16
  </div>
17
- <div class="pf-v5-c-dual-list-selector__tools">
18
- <div class="pf-v5-c-dual-list-selector__tools-filter">
19
- <div class="pf-v5-c-text-input-group">
20
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
21
- <span class="pf-v5-c-text-input-group__text">
22
- <span class="pf-v5-c-text-input-group__icon">
17
+ <div class="pf-v6-c-dual-list-selector__tools">
18
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
19
+ <div class="pf-v6-c-text-input-group">
20
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
21
+ <span class="pf-v6-c-text-input-group__text">
22
+ <span class="pf-v6-c-text-input-group__icon">
23
23
  <i class="fas fa-fw fa-search"></i>
24
24
  </span>
25
25
  <input
26
- class="pf-v5-c-text-input-group__text-input"
26
+ class="pf-v6-c-text-input-group__text-input"
27
27
  type="text"
28
28
  value
29
29
  aria-label="Search input"
@@ -32,20 +32,20 @@ cssPrefix: pf-v5-c-dual-list-selector
32
32
  </div>
33
33
  </div>
34
34
  </div>
35
- <div class="pf-v5-c-dual-list-selector__tools-actions">
35
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
36
36
  <button
37
- class="pf-v5-c-button pf-m-plain"
37
+ class="pf-v6-c-button pf-m-plain"
38
38
  type="button"
39
39
  aria-label="Sort"
40
40
  >
41
41
  <i
42
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
42
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
43
43
  aria-hidden="true"
44
44
  ></i>
45
45
  </button>
46
- <div class="pf-v5-c-dropdown">
46
+ <div class="pf-v6-c-dropdown">
47
47
  <button
48
- class="pf-v5-c-dropdown__toggle pf-m-plain"
48
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
49
49
  id="dropdown-kebab-basic-available-button"
50
50
  aria-expanded="false"
51
51
  type="button"
@@ -54,28 +54,28 @@ cssPrefix: pf-v5-c-dual-list-selector
54
54
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
55
55
  </button>
56
56
  <ul
57
- class="pf-v5-c-dropdown__menu"
57
+ class="pf-v6-c-dropdown__menu"
58
58
  aria-labelledby="dropdown-kebab-basic-available-button"
59
59
  hidden
60
60
  role="menu"
61
61
  >
62
62
  <li role="none">
63
63
  <a
64
- class="pf-v5-c-dropdown__menu-item"
64
+ class="pf-v6-c-dropdown__menu-item"
65
65
  role="menuitem"
66
66
  href="#"
67
67
  >Link</a>
68
68
  </li>
69
69
  <li role="none">
70
70
  <button
71
- class="pf-v5-c-dropdown__menu-item"
71
+ class="pf-v6-c-dropdown__menu-item"
72
72
  role="menuitem"
73
73
  type="button"
74
74
  >Action</button>
75
75
  </li>
76
76
  <li role="none">
77
77
  <a
78
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
78
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
79
79
  role="menuitem"
80
80
  href="#"
81
81
  aria-disabled="true"
@@ -84,16 +84,16 @@ cssPrefix: pf-v5-c-dual-list-selector
84
84
  </li>
85
85
  <li role="none">
86
86
  <button
87
- class="pf-v5-c-dropdown__menu-item"
87
+ class="pf-v6-c-dropdown__menu-item"
88
88
  role="menuitem"
89
89
  type="button"
90
90
  disabled
91
91
  >Disabled action</button>
92
92
  </li>
93
- <li class="pf-v5-c-divider" role="separator"></li>
93
+ <li class="pf-v6-c-divider" role="separator"></li>
94
94
  <li role="none">
95
95
  <a
96
- class="pf-v5-c-dropdown__menu-item"
96
+ class="pf-v6-c-dropdown__menu-item"
97
97
  role="menuitem"
98
98
  href="#"
99
99
  >Separated link</a>
@@ -102,81 +102,81 @@ cssPrefix: pf-v5-c-dual-list-selector
102
102
  </div>
103
103
  </div>
104
104
  </div>
105
- <div class="pf-v5-c-dual-list-selector__status">
105
+ <div class="pf-v6-c-dual-list-selector__status">
106
106
  <span
107
- class="pf-v5-c-dual-list-selector__status-text"
107
+ class="pf-v6-c-dual-list-selector__status-text"
108
108
  id="basic-available-status-text"
109
109
  >0 of 5 items selected</span>
110
110
  </div>
111
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
111
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
112
112
  <ul
113
- class="pf-v5-c-dual-list-selector__list"
113
+ class="pf-v6-c-dual-list-selector__list"
114
114
  role="listbox"
115
115
  aria-labelledby="basic-available-status-text"
116
116
  aria-multiselectable="true"
117
117
  aria-activedescendant
118
118
  >
119
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
120
- <div class="pf-v5-c-dual-list-selector__list-item-row">
121
- <span class="pf-v5-c-dual-list-selector__item">
122
- <span class="pf-v5-c-dual-list-selector__item-main">
123
- <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
119
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
120
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
121
+ <span class="pf-v6-c-dual-list-selector__item">
122
+ <span class="pf-v6-c-dual-list-selector__item-main">
123
+ <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
124
124
  </span>
125
- <span class="pf-v5-c-dual-list-selector__item-count">
126
- <span class="pf-v5-c-badge pf-m-read"></span>
125
+ <span class="pf-v6-c-dual-list-selector__item-count">
126
+ <span class="pf-v6-c-badge pf-m-read"></span>
127
127
  </span>
128
128
  </span>
129
129
  </div>
130
130
  </li>
131
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
132
- <div class="pf-v5-c-dual-list-selector__list-item-row">
133
- <span class="pf-v5-c-dual-list-selector__item">
134
- <span class="pf-v5-c-dual-list-selector__item-main">
135
- <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
131
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
132
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
133
+ <span class="pf-v6-c-dual-list-selector__item">
134
+ <span class="pf-v6-c-dual-list-selector__item-main">
135
+ <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
136
136
  </span>
137
- <span class="pf-v5-c-dual-list-selector__item-count">
138
- <span class="pf-v5-c-badge pf-m-read"></span>
137
+ <span class="pf-v6-c-dual-list-selector__item-count">
138
+ <span class="pf-v6-c-badge pf-m-read"></span>
139
139
  </span>
140
140
  </span>
141
141
  </div>
142
142
  </li>
143
143
  <li
144
- class="pf-v5-c-dual-list-selector__list-item pf-m-disabled"
144
+ class="pf-v6-c-dual-list-selector__list-item pf-m-disabled"
145
145
  role="option"
146
146
  >
147
- <div class="pf-v5-c-dual-list-selector__list-item-row">
148
- <span class="pf-v5-c-dual-list-selector__item">
149
- <span class="pf-v5-c-dual-list-selector__item-main">
147
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
148
+ <span class="pf-v6-c-dual-list-selector__item">
149
+ <span class="pf-v6-c-dual-list-selector__item-main">
150
150
  <span
151
- class="pf-v5-c-dual-list-selector__item-text"
151
+ class="pf-v6-c-dual-list-selector__item-text"
152
152
  >Item3 (disabled)</span>
153
153
  </span>
154
- <span class="pf-v5-c-dual-list-selector__item-count">
155
- <span class="pf-v5-c-badge pf-m-read"></span>
154
+ <span class="pf-v6-c-dual-list-selector__item-count">
155
+ <span class="pf-v6-c-badge pf-m-read"></span>
156
156
  </span>
157
157
  </span>
158
158
  </div>
159
159
  </li>
160
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
161
- <div class="pf-v5-c-dual-list-selector__list-item-row">
162
- <span class="pf-v5-c-dual-list-selector__item">
163
- <span class="pf-v5-c-dual-list-selector__item-main">
164
- <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
160
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
161
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
162
+ <span class="pf-v6-c-dual-list-selector__item">
163
+ <span class="pf-v6-c-dual-list-selector__item-main">
164
+ <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
165
165
  </span>
166
- <span class="pf-v5-c-dual-list-selector__item-count">
167
- <span class="pf-v5-c-badge pf-m-read"></span>
166
+ <span class="pf-v6-c-dual-list-selector__item-count">
167
+ <span class="pf-v6-c-badge pf-m-read"></span>
168
168
  </span>
169
169
  </span>
170
170
  </div>
171
171
  </li>
172
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
173
- <div class="pf-v5-c-dual-list-selector__list-item-row">
174
- <span class="pf-v5-c-dual-list-selector__item">
175
- <span class="pf-v5-c-dual-list-selector__item-main">
176
- <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
172
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
173
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
174
+ <span class="pf-v6-c-dual-list-selector__item">
175
+ <span class="pf-v6-c-dual-list-selector__item-main">
176
+ <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
177
177
  </span>
178
- <span class="pf-v5-c-dual-list-selector__item-count">
179
- <span class="pf-v5-c-badge pf-m-read"></span>
178
+ <span class="pf-v6-c-dual-list-selector__item-count">
179
+ <span class="pf-v6-c-badge pf-m-read"></span>
180
180
  </span>
181
181
  </span>
182
182
  </div>
@@ -184,10 +184,10 @@ cssPrefix: pf-v5-c-dual-list-selector
184
184
  </ul>
185
185
  </div>
186
186
  </div>
187
- <div class="pf-v5-c-dual-list-selector__controls">
188
- <div class="pf-v5-c-dual-list-selector__controls-item">
187
+ <div class="pf-v6-c-dual-list-selector__controls">
188
+ <div class="pf-v6-c-dual-list-selector__controls-item">
189
189
  <button
190
- class="pf-v5-c-button pf-m-plain"
190
+ class="pf-v6-c-button pf-m-plain"
191
191
  type="button"
192
192
  disabled
193
193
  aria-label="Add selected"
@@ -195,18 +195,18 @@ cssPrefix: pf-v5-c-dual-list-selector
195
195
  <i class="fas fa-fw fa-angle-right"></i>
196
196
  </button>
197
197
  </div>
198
- <div class="pf-v5-c-dual-list-selector__controls-item">
198
+ <div class="pf-v6-c-dual-list-selector__controls-item">
199
199
  <button
200
- class="pf-v5-c-button pf-m-plain"
200
+ class="pf-v6-c-button pf-m-plain"
201
201
  type="button"
202
202
  aria-label="Add all"
203
203
  >
204
204
  <i class="fas fa-fw fa-angle-double-right"></i>
205
205
  </button>
206
206
  </div>
207
- <div class="pf-v5-c-dual-list-selector__controls-item">
207
+ <div class="pf-v6-c-dual-list-selector__controls-item">
208
208
  <button
209
- class="pf-v5-c-button pf-m-plain"
209
+ class="pf-v6-c-button pf-m-plain"
210
210
  type="button"
211
211
  disabled
212
212
  aria-label="Remove all"
@@ -214,9 +214,9 @@ cssPrefix: pf-v5-c-dual-list-selector
214
214
  <i class="fas fa-fw fa-angle-double-left"></i>
215
215
  </button>
216
216
  </div>
217
- <div class="pf-v5-c-dual-list-selector__controls-item">
217
+ <div class="pf-v6-c-dual-list-selector__controls-item">
218
218
  <button
219
- class="pf-v5-c-button pf-m-plain"
219
+ class="pf-v6-c-button pf-m-plain"
220
220
  type="button"
221
221
  disabled
222
222
  aria-label="Remove selected"
@@ -225,22 +225,22 @@ cssPrefix: pf-v5-c-dual-list-selector
225
225
  </button>
226
226
  </div>
227
227
  </div>
228
- <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
229
- <div class="pf-v5-c-dual-list-selector__header">
230
- <div class="pf-v5-c-dual-list-selector__title">
231
- <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
228
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
229
+ <div class="pf-v6-c-dual-list-selector__header">
230
+ <div class="pf-v6-c-dual-list-selector__title">
231
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
232
232
  </div>
233
233
  </div>
234
- <div class="pf-v5-c-dual-list-selector__tools">
235
- <div class="pf-v5-c-dual-list-selector__tools-filter">
236
- <div class="pf-v5-c-text-input-group">
237
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
238
- <span class="pf-v5-c-text-input-group__text">
239
- <span class="pf-v5-c-text-input-group__icon">
234
+ <div class="pf-v6-c-dual-list-selector__tools">
235
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
236
+ <div class="pf-v6-c-text-input-group">
237
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
238
+ <span class="pf-v6-c-text-input-group__text">
239
+ <span class="pf-v6-c-text-input-group__icon">
240
240
  <i class="fas fa-fw fa-search"></i>
241
241
  </span>
242
242
  <input
243
- class="pf-v5-c-text-input-group__text-input"
243
+ class="pf-v6-c-text-input-group__text-input"
244
244
  type="text"
245
245
  value
246
246
  aria-label="Search input"
@@ -249,20 +249,20 @@ cssPrefix: pf-v5-c-dual-list-selector
249
249
  </div>
250
250
  </div>
251
251
  </div>
252
- <div class="pf-v5-c-dual-list-selector__tools-actions">
252
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
253
253
  <button
254
- class="pf-v5-c-button pf-m-plain"
254
+ class="pf-v6-c-button pf-m-plain"
255
255
  type="button"
256
256
  aria-label="Sort"
257
257
  >
258
258
  <i
259
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
259
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
260
260
  aria-hidden="true"
261
261
  ></i>
262
262
  </button>
263
- <div class="pf-v5-c-dropdown">
263
+ <div class="pf-v6-c-dropdown">
264
264
  <button
265
- class="pf-v5-c-dropdown__toggle pf-m-plain"
265
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
266
266
  id="dropdown-kebab-basic-chosen-button"
267
267
  aria-expanded="false"
268
268
  type="button"
@@ -271,28 +271,28 @@ cssPrefix: pf-v5-c-dual-list-selector
271
271
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
272
272
  </button>
273
273
  <ul
274
- class="pf-v5-c-dropdown__menu"
274
+ class="pf-v6-c-dropdown__menu"
275
275
  aria-labelledby="dropdown-kebab-basic-chosen-button"
276
276
  hidden
277
277
  role="menu"
278
278
  >
279
279
  <li role="none">
280
280
  <a
281
- class="pf-v5-c-dropdown__menu-item"
281
+ class="pf-v6-c-dropdown__menu-item"
282
282
  role="menuitem"
283
283
  href="#"
284
284
  >Link</a>
285
285
  </li>
286
286
  <li role="none">
287
287
  <button
288
- class="pf-v5-c-dropdown__menu-item"
288
+ class="pf-v6-c-dropdown__menu-item"
289
289
  role="menuitem"
290
290
  type="button"
291
291
  >Action</button>
292
292
  </li>
293
293
  <li role="none">
294
294
  <a
295
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
295
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
296
296
  role="menuitem"
297
297
  href="#"
298
298
  aria-disabled="true"
@@ -301,16 +301,16 @@ cssPrefix: pf-v5-c-dual-list-selector
301
301
  </li>
302
302
  <li role="none">
303
303
  <button
304
- class="pf-v5-c-dropdown__menu-item"
304
+ class="pf-v6-c-dropdown__menu-item"
305
305
  role="menuitem"
306
306
  type="button"
307
307
  disabled
308
308
  >Disabled action</button>
309
309
  </li>
310
- <li class="pf-v5-c-divider" role="separator"></li>
310
+ <li class="pf-v6-c-divider" role="separator"></li>
311
311
  <li role="none">
312
312
  <a
313
- class="pf-v5-c-dropdown__menu-item"
313
+ class="pf-v6-c-dropdown__menu-item"
314
314
  role="menuitem"
315
315
  href="#"
316
316
  >Separated link</a>
@@ -319,15 +319,15 @@ cssPrefix: pf-v5-c-dual-list-selector
319
319
  </div>
320
320
  </div>
321
321
  </div>
322
- <div class="pf-v5-c-dual-list-selector__status">
322
+ <div class="pf-v6-c-dual-list-selector__status">
323
323
  <span
324
- class="pf-v5-c-dual-list-selector__status-text"
324
+ class="pf-v6-c-dual-list-selector__status-text"
325
325
  id="basic-chosen-status-text"
326
326
  >0 of 0 items selected</span>
327
327
  </div>
328
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
328
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
329
329
  <ul
330
- class="pf-v5-c-dual-list-selector__list"
330
+ class="pf-v6-c-dual-list-selector__list"
331
331
  role="listbox"
332
332
  aria-labelledby="basic-chosen-status-text"
333
333
  aria-multiselectable="true"
@@ -342,23 +342,23 @@ cssPrefix: pf-v5-c-dual-list-selector
342
342
  ### Available item selected
343
343
 
344
344
  ```html
345
- <div class="pf-v5-c-dual-list-selector">
346
- <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
347
- <div class="pf-v5-c-dual-list-selector__header">
348
- <div class="pf-v5-c-dual-list-selector__title">
349
- <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
345
+ <div class="pf-v6-c-dual-list-selector">
346
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
347
+ <div class="pf-v6-c-dual-list-selector__header">
348
+ <div class="pf-v6-c-dual-list-selector__title">
349
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
350
350
  </div>
351
351
  </div>
352
- <div class="pf-v5-c-dual-list-selector__tools">
353
- <div class="pf-v5-c-dual-list-selector__tools-filter">
354
- <div class="pf-v5-c-text-input-group">
355
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
356
- <span class="pf-v5-c-text-input-group__text">
357
- <span class="pf-v5-c-text-input-group__icon">
352
+ <div class="pf-v6-c-dual-list-selector__tools">
353
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
354
+ <div class="pf-v6-c-text-input-group">
355
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
356
+ <span class="pf-v6-c-text-input-group__text">
357
+ <span class="pf-v6-c-text-input-group__icon">
358
358
  <i class="fas fa-fw fa-search"></i>
359
359
  </span>
360
360
  <input
361
- class="pf-v5-c-text-input-group__text-input"
361
+ class="pf-v6-c-text-input-group__text-input"
362
362
  type="text"
363
363
  value
364
364
  aria-label="Search input"
@@ -367,20 +367,20 @@ cssPrefix: pf-v5-c-dual-list-selector
367
367
  </div>
368
368
  </div>
369
369
  </div>
370
- <div class="pf-v5-c-dual-list-selector__tools-actions">
370
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
371
371
  <button
372
- class="pf-v5-c-button pf-m-plain"
372
+ class="pf-v6-c-button pf-m-plain"
373
373
  type="button"
374
374
  aria-label="Sort"
375
375
  >
376
376
  <i
377
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
377
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
378
378
  aria-hidden="true"
379
379
  ></i>
380
380
  </button>
381
- <div class="pf-v5-c-dropdown">
381
+ <div class="pf-v6-c-dropdown">
382
382
  <button
383
- class="pf-v5-c-dropdown__toggle pf-m-plain"
383
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
384
384
  id="dropdown-kebab-available-item-selected-available-button"
385
385
  aria-expanded="false"
386
386
  type="button"
@@ -389,28 +389,28 @@ cssPrefix: pf-v5-c-dual-list-selector
389
389
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
390
390
  </button>
391
391
  <ul
392
- class="pf-v5-c-dropdown__menu"
392
+ class="pf-v6-c-dropdown__menu"
393
393
  aria-labelledby="dropdown-kebab-available-item-selected-available-button"
394
394
  hidden
395
395
  role="menu"
396
396
  >
397
397
  <li role="none">
398
398
  <a
399
- class="pf-v5-c-dropdown__menu-item"
399
+ class="pf-v6-c-dropdown__menu-item"
400
400
  role="menuitem"
401
401
  href="#"
402
402
  >Link</a>
403
403
  </li>
404
404
  <li role="none">
405
405
  <button
406
- class="pf-v5-c-dropdown__menu-item"
406
+ class="pf-v6-c-dropdown__menu-item"
407
407
  role="menuitem"
408
408
  type="button"
409
409
  >Action</button>
410
410
  </li>
411
411
  <li role="none">
412
412
  <a
413
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
413
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
414
414
  role="menuitem"
415
415
  href="#"
416
416
  aria-disabled="true"
@@ -419,16 +419,16 @@ cssPrefix: pf-v5-c-dual-list-selector
419
419
  </li>
420
420
  <li role="none">
421
421
  <button
422
- class="pf-v5-c-dropdown__menu-item"
422
+ class="pf-v6-c-dropdown__menu-item"
423
423
  role="menuitem"
424
424
  type="button"
425
425
  disabled
426
426
  >Disabled action</button>
427
427
  </li>
428
- <li class="pf-v5-c-divider" role="separator"></li>
428
+ <li class="pf-v6-c-divider" role="separator"></li>
429
429
  <li role="none">
430
430
  <a
431
- class="pf-v5-c-dropdown__menu-item"
431
+ class="pf-v6-c-dropdown__menu-item"
432
432
  role="menuitem"
433
433
  href="#"
434
434
  >Separated link</a>
@@ -437,76 +437,76 @@ cssPrefix: pf-v5-c-dual-list-selector
437
437
  </div>
438
438
  </div>
439
439
  </div>
440
- <div class="pf-v5-c-dual-list-selector__status">
440
+ <div class="pf-v6-c-dual-list-selector__status">
441
441
  <span
442
- class="pf-v5-c-dual-list-selector__status-text"
442
+ class="pf-v6-c-dual-list-selector__status-text"
443
443
  id="available-item-selected-available-status-text"
444
444
  >1 of 5 items selected</span>
445
445
  </div>
446
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
446
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
447
447
  <ul
448
- class="pf-v5-c-dual-list-selector__list"
448
+ class="pf-v6-c-dual-list-selector__list"
449
449
  role="listbox"
450
450
  aria-labelledby="available-item-selected-available-status-text"
451
451
  aria-multiselectable="true"
452
452
  aria-activedescendant
453
453
  >
454
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
455
- <div class="pf-v5-c-dual-list-selector__list-item-row">
456
- <span class="pf-v5-c-dual-list-selector__item">
457
- <span class="pf-v5-c-dual-list-selector__item-main">
458
- <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
454
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
455
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
456
+ <span class="pf-v6-c-dual-list-selector__item">
457
+ <span class="pf-v6-c-dual-list-selector__item-main">
458
+ <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
459
459
  </span>
460
- <span class="pf-v5-c-dual-list-selector__item-count">
461
- <span class="pf-v5-c-badge pf-m-read"></span>
460
+ <span class="pf-v6-c-dual-list-selector__item-count">
461
+ <span class="pf-v6-c-badge pf-m-read"></span>
462
462
  </span>
463
463
  </span>
464
464
  </div>
465
465
  </li>
466
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
467
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
468
- <span class="pf-v5-c-dual-list-selector__item">
469
- <span class="pf-v5-c-dual-list-selector__item-main">
470
- <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
466
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
467
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
468
+ <span class="pf-v6-c-dual-list-selector__item">
469
+ <span class="pf-v6-c-dual-list-selector__item-main">
470
+ <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
471
471
  </span>
472
- <span class="pf-v5-c-dual-list-selector__item-count">
473
- <span class="pf-v5-c-badge pf-m-read"></span>
472
+ <span class="pf-v6-c-dual-list-selector__item-count">
473
+ <span class="pf-v6-c-badge pf-m-read"></span>
474
474
  </span>
475
475
  </span>
476
476
  </div>
477
477
  </li>
478
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
479
- <div class="pf-v5-c-dual-list-selector__list-item-row">
480
- <span class="pf-v5-c-dual-list-selector__item">
481
- <span class="pf-v5-c-dual-list-selector__item-main">
482
- <span class="pf-v5-c-dual-list-selector__item-text">Item3</span>
478
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
479
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
480
+ <span class="pf-v6-c-dual-list-selector__item">
481
+ <span class="pf-v6-c-dual-list-selector__item-main">
482
+ <span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
483
483
  </span>
484
- <span class="pf-v5-c-dual-list-selector__item-count">
485
- <span class="pf-v5-c-badge pf-m-read"></span>
484
+ <span class="pf-v6-c-dual-list-selector__item-count">
485
+ <span class="pf-v6-c-badge pf-m-read"></span>
486
486
  </span>
487
487
  </span>
488
488
  </div>
489
489
  </li>
490
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
491
- <div class="pf-v5-c-dual-list-selector__list-item-row">
492
- <span class="pf-v5-c-dual-list-selector__item">
493
- <span class="pf-v5-c-dual-list-selector__item-main">
494
- <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
490
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
491
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
492
+ <span class="pf-v6-c-dual-list-selector__item">
493
+ <span class="pf-v6-c-dual-list-selector__item-main">
494
+ <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
495
495
  </span>
496
- <span class="pf-v5-c-dual-list-selector__item-count">
497
- <span class="pf-v5-c-badge pf-m-read"></span>
496
+ <span class="pf-v6-c-dual-list-selector__item-count">
497
+ <span class="pf-v6-c-badge pf-m-read"></span>
498
498
  </span>
499
499
  </span>
500
500
  </div>
501
501
  </li>
502
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
503
- <div class="pf-v5-c-dual-list-selector__list-item-row">
504
- <span class="pf-v5-c-dual-list-selector__item">
505
- <span class="pf-v5-c-dual-list-selector__item-main">
506
- <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
502
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
503
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
504
+ <span class="pf-v6-c-dual-list-selector__item">
505
+ <span class="pf-v6-c-dual-list-selector__item-main">
506
+ <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
507
507
  </span>
508
- <span class="pf-v5-c-dual-list-selector__item-count">
509
- <span class="pf-v5-c-badge pf-m-read"></span>
508
+ <span class="pf-v6-c-dual-list-selector__item-count">
509
+ <span class="pf-v6-c-badge pf-m-read"></span>
510
510
  </span>
511
511
  </span>
512
512
  </div>
@@ -514,28 +514,28 @@ cssPrefix: pf-v5-c-dual-list-selector
514
514
  </ul>
515
515
  </div>
516
516
  </div>
517
- <div class="pf-v5-c-dual-list-selector__controls">
518
- <div class="pf-v5-c-dual-list-selector__controls-item">
517
+ <div class="pf-v6-c-dual-list-selector__controls">
518
+ <div class="pf-v6-c-dual-list-selector__controls-item">
519
519
  <button
520
- class="pf-v5-c-button pf-m-plain"
520
+ class="pf-v6-c-button pf-m-plain"
521
521
  type="button"
522
522
  aria-label="Add selected"
523
523
  >
524
524
  <i class="fas fa-fw fa-angle-right"></i>
525
525
  </button>
526
526
  </div>
527
- <div class="pf-v5-c-dual-list-selector__controls-item">
527
+ <div class="pf-v6-c-dual-list-selector__controls-item">
528
528
  <button
529
- class="pf-v5-c-button pf-m-plain"
529
+ class="pf-v6-c-button pf-m-plain"
530
530
  type="button"
531
531
  aria-label="Add all"
532
532
  >
533
533
  <i class="fas fa-fw fa-angle-double-right"></i>
534
534
  </button>
535
535
  </div>
536
- <div class="pf-v5-c-dual-list-selector__controls-item">
536
+ <div class="pf-v6-c-dual-list-selector__controls-item">
537
537
  <button
538
- class="pf-v5-c-button pf-m-plain"
538
+ class="pf-v6-c-button pf-m-plain"
539
539
  type="button"
540
540
  disabled
541
541
  aria-label="Remove all"
@@ -543,9 +543,9 @@ cssPrefix: pf-v5-c-dual-list-selector
543
543
  <i class="fas fa-fw fa-angle-double-left"></i>
544
544
  </button>
545
545
  </div>
546
- <div class="pf-v5-c-dual-list-selector__controls-item">
546
+ <div class="pf-v6-c-dual-list-selector__controls-item">
547
547
  <button
548
- class="pf-v5-c-button pf-m-plain"
548
+ class="pf-v6-c-button pf-m-plain"
549
549
  type="button"
550
550
  disabled
551
551
  aria-label="Remove selected"
@@ -554,22 +554,22 @@ cssPrefix: pf-v5-c-dual-list-selector
554
554
  </button>
555
555
  </div>
556
556
  </div>
557
- <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
558
- <div class="pf-v5-c-dual-list-selector__header">
559
- <div class="pf-v5-c-dual-list-selector__title">
560
- <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
557
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
558
+ <div class="pf-v6-c-dual-list-selector__header">
559
+ <div class="pf-v6-c-dual-list-selector__title">
560
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
561
561
  </div>
562
562
  </div>
563
- <div class="pf-v5-c-dual-list-selector__tools">
564
- <div class="pf-v5-c-dual-list-selector__tools-filter">
565
- <div class="pf-v5-c-text-input-group">
566
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
567
- <span class="pf-v5-c-text-input-group__text">
568
- <span class="pf-v5-c-text-input-group__icon">
563
+ <div class="pf-v6-c-dual-list-selector__tools">
564
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
565
+ <div class="pf-v6-c-text-input-group">
566
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
567
+ <span class="pf-v6-c-text-input-group__text">
568
+ <span class="pf-v6-c-text-input-group__icon">
569
569
  <i class="fas fa-fw fa-search"></i>
570
570
  </span>
571
571
  <input
572
- class="pf-v5-c-text-input-group__text-input"
572
+ class="pf-v6-c-text-input-group__text-input"
573
573
  type="text"
574
574
  value
575
575
  aria-label="Search input"
@@ -578,20 +578,20 @@ cssPrefix: pf-v5-c-dual-list-selector
578
578
  </div>
579
579
  </div>
580
580
  </div>
581
- <div class="pf-v5-c-dual-list-selector__tools-actions">
581
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
582
582
  <button
583
- class="pf-v5-c-button pf-m-plain"
583
+ class="pf-v6-c-button pf-m-plain"
584
584
  type="button"
585
585
  aria-label="Sort"
586
586
  >
587
587
  <i
588
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
588
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
589
589
  aria-hidden="true"
590
590
  ></i>
591
591
  </button>
592
- <div class="pf-v5-c-dropdown">
592
+ <div class="pf-v6-c-dropdown">
593
593
  <button
594
- class="pf-v5-c-dropdown__toggle pf-m-plain"
594
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
595
595
  id="dropdown-kebab-available-item-selected-chosen-button"
596
596
  aria-expanded="false"
597
597
  type="button"
@@ -600,28 +600,28 @@ cssPrefix: pf-v5-c-dual-list-selector
600
600
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
601
601
  </button>
602
602
  <ul
603
- class="pf-v5-c-dropdown__menu"
603
+ class="pf-v6-c-dropdown__menu"
604
604
  aria-labelledby="dropdown-kebab-available-item-selected-chosen-button"
605
605
  hidden
606
606
  role="menu"
607
607
  >
608
608
  <li role="none">
609
609
  <a
610
- class="pf-v5-c-dropdown__menu-item"
610
+ class="pf-v6-c-dropdown__menu-item"
611
611
  role="menuitem"
612
612
  href="#"
613
613
  >Link</a>
614
614
  </li>
615
615
  <li role="none">
616
616
  <button
617
- class="pf-v5-c-dropdown__menu-item"
617
+ class="pf-v6-c-dropdown__menu-item"
618
618
  role="menuitem"
619
619
  type="button"
620
620
  >Action</button>
621
621
  </li>
622
622
  <li role="none">
623
623
  <a
624
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
624
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
625
625
  role="menuitem"
626
626
  href="#"
627
627
  aria-disabled="true"
@@ -630,16 +630,16 @@ cssPrefix: pf-v5-c-dual-list-selector
630
630
  </li>
631
631
  <li role="none">
632
632
  <button
633
- class="pf-v5-c-dropdown__menu-item"
633
+ class="pf-v6-c-dropdown__menu-item"
634
634
  role="menuitem"
635
635
  type="button"
636
636
  disabled
637
637
  >Disabled action</button>
638
638
  </li>
639
- <li class="pf-v5-c-divider" role="separator"></li>
639
+ <li class="pf-v6-c-divider" role="separator"></li>
640
640
  <li role="none">
641
641
  <a
642
- class="pf-v5-c-dropdown__menu-item"
642
+ class="pf-v6-c-dropdown__menu-item"
643
643
  role="menuitem"
644
644
  href="#"
645
645
  >Separated link</a>
@@ -648,15 +648,15 @@ cssPrefix: pf-v5-c-dual-list-selector
648
648
  </div>
649
649
  </div>
650
650
  </div>
651
- <div class="pf-v5-c-dual-list-selector__status">
651
+ <div class="pf-v6-c-dual-list-selector__status">
652
652
  <span
653
- class="pf-v5-c-dual-list-selector__status-text"
653
+ class="pf-v6-c-dual-list-selector__status-text"
654
654
  id="available-item-selected-chosen-status-text"
655
655
  >0 of 0 items selected</span>
656
656
  </div>
657
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
657
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
658
658
  <ul
659
- class="pf-v5-c-dual-list-selector__list"
659
+ class="pf-v6-c-dual-list-selector__list"
660
660
  role="listbox"
661
661
  aria-labelledby="available-item-selected-chosen-status-text"
662
662
  aria-multiselectable="true"
@@ -671,23 +671,23 @@ cssPrefix: pf-v5-c-dual-list-selector
671
671
  ### Multiple available items selected
672
672
 
673
673
  ```html
674
- <div class="pf-v5-c-dual-list-selector">
675
- <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
676
- <div class="pf-v5-c-dual-list-selector__header">
677
- <div class="pf-v5-c-dual-list-selector__title">
678
- <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
674
+ <div class="pf-v6-c-dual-list-selector">
675
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
676
+ <div class="pf-v6-c-dual-list-selector__header">
677
+ <div class="pf-v6-c-dual-list-selector__title">
678
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
679
679
  </div>
680
680
  </div>
681
- <div class="pf-v5-c-dual-list-selector__tools">
682
- <div class="pf-v5-c-dual-list-selector__tools-filter">
683
- <div class="pf-v5-c-text-input-group">
684
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
685
- <span class="pf-v5-c-text-input-group__text">
686
- <span class="pf-v5-c-text-input-group__icon">
681
+ <div class="pf-v6-c-dual-list-selector__tools">
682
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
683
+ <div class="pf-v6-c-text-input-group">
684
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
685
+ <span class="pf-v6-c-text-input-group__text">
686
+ <span class="pf-v6-c-text-input-group__icon">
687
687
  <i class="fas fa-fw fa-search"></i>
688
688
  </span>
689
689
  <input
690
- class="pf-v5-c-text-input-group__text-input"
690
+ class="pf-v6-c-text-input-group__text-input"
691
691
  type="text"
692
692
  value
693
693
  aria-label="Search input"
@@ -696,20 +696,20 @@ cssPrefix: pf-v5-c-dual-list-selector
696
696
  </div>
697
697
  </div>
698
698
  </div>
699
- <div class="pf-v5-c-dual-list-selector__tools-actions">
699
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
700
700
  <button
701
- class="pf-v5-c-button pf-m-plain"
701
+ class="pf-v6-c-button pf-m-plain"
702
702
  type="button"
703
703
  aria-label="Sort"
704
704
  >
705
705
  <i
706
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
706
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
707
707
  aria-hidden="true"
708
708
  ></i>
709
709
  </button>
710
- <div class="pf-v5-c-dropdown">
710
+ <div class="pf-v6-c-dropdown">
711
711
  <button
712
- class="pf-v5-c-dropdown__toggle pf-m-plain"
712
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
713
713
  id="dropdown-kebab-multiple-available-items-selected-available-button"
714
714
  aria-expanded="false"
715
715
  type="button"
@@ -718,28 +718,28 @@ cssPrefix: pf-v5-c-dual-list-selector
718
718
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
719
719
  </button>
720
720
  <ul
721
- class="pf-v5-c-dropdown__menu"
721
+ class="pf-v6-c-dropdown__menu"
722
722
  aria-labelledby="dropdown-kebab-multiple-available-items-selected-available-button"
723
723
  hidden
724
724
  role="menu"
725
725
  >
726
726
  <li role="none">
727
727
  <a
728
- class="pf-v5-c-dropdown__menu-item"
728
+ class="pf-v6-c-dropdown__menu-item"
729
729
  role="menuitem"
730
730
  href="#"
731
731
  >Link</a>
732
732
  </li>
733
733
  <li role="none">
734
734
  <button
735
- class="pf-v5-c-dropdown__menu-item"
735
+ class="pf-v6-c-dropdown__menu-item"
736
736
  role="menuitem"
737
737
  type="button"
738
738
  >Action</button>
739
739
  </li>
740
740
  <li role="none">
741
741
  <a
742
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
742
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
743
743
  role="menuitem"
744
744
  href="#"
745
745
  aria-disabled="true"
@@ -748,16 +748,16 @@ cssPrefix: pf-v5-c-dual-list-selector
748
748
  </li>
749
749
  <li role="none">
750
750
  <button
751
- class="pf-v5-c-dropdown__menu-item"
751
+ class="pf-v6-c-dropdown__menu-item"
752
752
  role="menuitem"
753
753
  type="button"
754
754
  disabled
755
755
  >Disabled action</button>
756
756
  </li>
757
- <li class="pf-v5-c-divider" role="separator"></li>
757
+ <li class="pf-v6-c-divider" role="separator"></li>
758
758
  <li role="none">
759
759
  <a
760
- class="pf-v5-c-dropdown__menu-item"
760
+ class="pf-v6-c-dropdown__menu-item"
761
761
  role="menuitem"
762
762
  href="#"
763
763
  >Separated link</a>
@@ -766,76 +766,76 @@ cssPrefix: pf-v5-c-dual-list-selector
766
766
  </div>
767
767
  </div>
768
768
  </div>
769
- <div class="pf-v5-c-dual-list-selector__status">
769
+ <div class="pf-v6-c-dual-list-selector__status">
770
770
  <span
771
- class="pf-v5-c-dual-list-selector__status-text"
771
+ class="pf-v6-c-dual-list-selector__status-text"
772
772
  id="multiple-available-items-selected-available-status-text"
773
773
  >3 of 5 items selected</span>
774
774
  </div>
775
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
775
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
776
776
  <ul
777
- class="pf-v5-c-dual-list-selector__list"
777
+ class="pf-v6-c-dual-list-selector__list"
778
778
  role="listbox"
779
779
  aria-labelledby="multiple-available-items-selected-available-status-text"
780
780
  aria-multiselectable="true"
781
781
  aria-activedescendant
782
782
  >
783
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
784
- <div class="pf-v5-c-dual-list-selector__list-item-row">
785
- <span class="pf-v5-c-dual-list-selector__item">
786
- <span class="pf-v5-c-dual-list-selector__item-main">
787
- <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
783
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
784
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
785
+ <span class="pf-v6-c-dual-list-selector__item">
786
+ <span class="pf-v6-c-dual-list-selector__item-main">
787
+ <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
788
788
  </span>
789
- <span class="pf-v5-c-dual-list-selector__item-count">
790
- <span class="pf-v5-c-badge pf-m-read"></span>
789
+ <span class="pf-v6-c-dual-list-selector__item-count">
790
+ <span class="pf-v6-c-badge pf-m-read"></span>
791
791
  </span>
792
792
  </span>
793
793
  </div>
794
794
  </li>
795
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
796
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
797
- <span class="pf-v5-c-dual-list-selector__item">
798
- <span class="pf-v5-c-dual-list-selector__item-main">
799
- <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
795
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
796
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
797
+ <span class="pf-v6-c-dual-list-selector__item">
798
+ <span class="pf-v6-c-dual-list-selector__item-main">
799
+ <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
800
800
  </span>
801
- <span class="pf-v5-c-dual-list-selector__item-count">
802
- <span class="pf-v5-c-badge pf-m-read"></span>
801
+ <span class="pf-v6-c-dual-list-selector__item-count">
802
+ <span class="pf-v6-c-badge pf-m-read"></span>
803
803
  </span>
804
804
  </span>
805
805
  </div>
806
806
  </li>
807
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
808
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
809
- <span class="pf-v5-c-dual-list-selector__item">
810
- <span class="pf-v5-c-dual-list-selector__item-main">
811
- <span class="pf-v5-c-dual-list-selector__item-text">Item3</span>
807
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
808
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
809
+ <span class="pf-v6-c-dual-list-selector__item">
810
+ <span class="pf-v6-c-dual-list-selector__item-main">
811
+ <span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
812
812
  </span>
813
- <span class="pf-v5-c-dual-list-selector__item-count">
814
- <span class="pf-v5-c-badge pf-m-read"></span>
813
+ <span class="pf-v6-c-dual-list-selector__item-count">
814
+ <span class="pf-v6-c-badge pf-m-read"></span>
815
815
  </span>
816
816
  </span>
817
817
  </div>
818
818
  </li>
819
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
820
- <div class="pf-v5-c-dual-list-selector__list-item-row">
821
- <span class="pf-v5-c-dual-list-selector__item">
822
- <span class="pf-v5-c-dual-list-selector__item-main">
823
- <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
819
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
820
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
821
+ <span class="pf-v6-c-dual-list-selector__item">
822
+ <span class="pf-v6-c-dual-list-selector__item-main">
823
+ <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
824
824
  </span>
825
- <span class="pf-v5-c-dual-list-selector__item-count">
826
- <span class="pf-v5-c-badge pf-m-read"></span>
825
+ <span class="pf-v6-c-dual-list-selector__item-count">
826
+ <span class="pf-v6-c-badge pf-m-read"></span>
827
827
  </span>
828
828
  </span>
829
829
  </div>
830
830
  </li>
831
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
832
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
833
- <span class="pf-v5-c-dual-list-selector__item">
834
- <span class="pf-v5-c-dual-list-selector__item-main">
835
- <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
831
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
832
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
833
+ <span class="pf-v6-c-dual-list-selector__item">
834
+ <span class="pf-v6-c-dual-list-selector__item-main">
835
+ <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
836
836
  </span>
837
- <span class="pf-v5-c-dual-list-selector__item-count">
838
- <span class="pf-v5-c-badge pf-m-read"></span>
837
+ <span class="pf-v6-c-dual-list-selector__item-count">
838
+ <span class="pf-v6-c-badge pf-m-read"></span>
839
839
  </span>
840
840
  </span>
841
841
  </div>
@@ -843,28 +843,28 @@ cssPrefix: pf-v5-c-dual-list-selector
843
843
  </ul>
844
844
  </div>
845
845
  </div>
846
- <div class="pf-v5-c-dual-list-selector__controls">
847
- <div class="pf-v5-c-dual-list-selector__controls-item">
846
+ <div class="pf-v6-c-dual-list-selector__controls">
847
+ <div class="pf-v6-c-dual-list-selector__controls-item">
848
848
  <button
849
- class="pf-v5-c-button pf-m-plain"
849
+ class="pf-v6-c-button pf-m-plain"
850
850
  type="button"
851
851
  aria-label="Add selected"
852
852
  >
853
853
  <i class="fas fa-fw fa-angle-right"></i>
854
854
  </button>
855
855
  </div>
856
- <div class="pf-v5-c-dual-list-selector__controls-item">
856
+ <div class="pf-v6-c-dual-list-selector__controls-item">
857
857
  <button
858
- class="pf-v5-c-button pf-m-plain"
858
+ class="pf-v6-c-button pf-m-plain"
859
859
  type="button"
860
860
  aria-label="Add all"
861
861
  >
862
862
  <i class="fas fa-fw fa-angle-double-right"></i>
863
863
  </button>
864
864
  </div>
865
- <div class="pf-v5-c-dual-list-selector__controls-item">
865
+ <div class="pf-v6-c-dual-list-selector__controls-item">
866
866
  <button
867
- class="pf-v5-c-button pf-m-plain"
867
+ class="pf-v6-c-button pf-m-plain"
868
868
  type="button"
869
869
  disabled
870
870
  aria-label="Remove all"
@@ -872,9 +872,9 @@ cssPrefix: pf-v5-c-dual-list-selector
872
872
  <i class="fas fa-fw fa-angle-double-left"></i>
873
873
  </button>
874
874
  </div>
875
- <div class="pf-v5-c-dual-list-selector__controls-item">
875
+ <div class="pf-v6-c-dual-list-selector__controls-item">
876
876
  <button
877
- class="pf-v5-c-button pf-m-plain"
877
+ class="pf-v6-c-button pf-m-plain"
878
878
  type="button"
879
879
  disabled
880
880
  aria-label="Remove selected"
@@ -883,22 +883,22 @@ cssPrefix: pf-v5-c-dual-list-selector
883
883
  </button>
884
884
  </div>
885
885
  </div>
886
- <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
887
- <div class="pf-v5-c-dual-list-selector__header">
888
- <div class="pf-v5-c-dual-list-selector__title">
889
- <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
886
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
887
+ <div class="pf-v6-c-dual-list-selector__header">
888
+ <div class="pf-v6-c-dual-list-selector__title">
889
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
890
890
  </div>
891
891
  </div>
892
- <div class="pf-v5-c-dual-list-selector__tools">
893
- <div class="pf-v5-c-dual-list-selector__tools-filter">
894
- <div class="pf-v5-c-text-input-group">
895
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
896
- <span class="pf-v5-c-text-input-group__text">
897
- <span class="pf-v5-c-text-input-group__icon">
892
+ <div class="pf-v6-c-dual-list-selector__tools">
893
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
894
+ <div class="pf-v6-c-text-input-group">
895
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
896
+ <span class="pf-v6-c-text-input-group__text">
897
+ <span class="pf-v6-c-text-input-group__icon">
898
898
  <i class="fas fa-fw fa-search"></i>
899
899
  </span>
900
900
  <input
901
- class="pf-v5-c-text-input-group__text-input"
901
+ class="pf-v6-c-text-input-group__text-input"
902
902
  type="text"
903
903
  value
904
904
  aria-label="Search input"
@@ -907,20 +907,20 @@ cssPrefix: pf-v5-c-dual-list-selector
907
907
  </div>
908
908
  </div>
909
909
  </div>
910
- <div class="pf-v5-c-dual-list-selector__tools-actions">
910
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
911
911
  <button
912
- class="pf-v5-c-button pf-m-plain"
912
+ class="pf-v6-c-button pf-m-plain"
913
913
  type="button"
914
914
  aria-label="Sort"
915
915
  >
916
916
  <i
917
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
917
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
918
918
  aria-hidden="true"
919
919
  ></i>
920
920
  </button>
921
- <div class="pf-v5-c-dropdown">
921
+ <div class="pf-v6-c-dropdown">
922
922
  <button
923
- class="pf-v5-c-dropdown__toggle pf-m-plain"
923
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
924
924
  id="dropdown-kebab-multiple-available-items-selected-chosen-button"
925
925
  aria-expanded="false"
926
926
  type="button"
@@ -929,28 +929,28 @@ cssPrefix: pf-v5-c-dual-list-selector
929
929
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
930
930
  </button>
931
931
  <ul
932
- class="pf-v5-c-dropdown__menu"
932
+ class="pf-v6-c-dropdown__menu"
933
933
  aria-labelledby="dropdown-kebab-multiple-available-items-selected-chosen-button"
934
934
  hidden
935
935
  role="menu"
936
936
  >
937
937
  <li role="none">
938
938
  <a
939
- class="pf-v5-c-dropdown__menu-item"
939
+ class="pf-v6-c-dropdown__menu-item"
940
940
  role="menuitem"
941
941
  href="#"
942
942
  >Link</a>
943
943
  </li>
944
944
  <li role="none">
945
945
  <button
946
- class="pf-v5-c-dropdown__menu-item"
946
+ class="pf-v6-c-dropdown__menu-item"
947
947
  role="menuitem"
948
948
  type="button"
949
949
  >Action</button>
950
950
  </li>
951
951
  <li role="none">
952
952
  <a
953
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
953
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
954
954
  role="menuitem"
955
955
  href="#"
956
956
  aria-disabled="true"
@@ -959,16 +959,16 @@ cssPrefix: pf-v5-c-dual-list-selector
959
959
  </li>
960
960
  <li role="none">
961
961
  <button
962
- class="pf-v5-c-dropdown__menu-item"
962
+ class="pf-v6-c-dropdown__menu-item"
963
963
  role="menuitem"
964
964
  type="button"
965
965
  disabled
966
966
  >Disabled action</button>
967
967
  </li>
968
- <li class="pf-v5-c-divider" role="separator"></li>
968
+ <li class="pf-v6-c-divider" role="separator"></li>
969
969
  <li role="none">
970
970
  <a
971
- class="pf-v5-c-dropdown__menu-item"
971
+ class="pf-v6-c-dropdown__menu-item"
972
972
  role="menuitem"
973
973
  href="#"
974
974
  >Separated link</a>
@@ -977,15 +977,15 @@ cssPrefix: pf-v5-c-dual-list-selector
977
977
  </div>
978
978
  </div>
979
979
  </div>
980
- <div class="pf-v5-c-dual-list-selector__status">
980
+ <div class="pf-v6-c-dual-list-selector__status">
981
981
  <span
982
- class="pf-v5-c-dual-list-selector__status-text"
982
+ class="pf-v6-c-dual-list-selector__status-text"
983
983
  id="multiple-available-items-selected-chosen-status-text"
984
984
  >0 of 0 items selected</span>
985
985
  </div>
986
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
986
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
987
987
  <ul
988
- class="pf-v5-c-dual-list-selector__list"
988
+ class="pf-v6-c-dual-list-selector__list"
989
989
  role="listbox"
990
990
  aria-labelledby="multiple-available-items-selected-chosen-status-text"
991
991
  aria-multiselectable="true"
@@ -1000,23 +1000,23 @@ cssPrefix: pf-v5-c-dual-list-selector
1000
1000
  ### Chosen item
1001
1001
 
1002
1002
  ```html
1003
- <div class="pf-v5-c-dual-list-selector">
1004
- <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
1005
- <div class="pf-v5-c-dual-list-selector__header">
1006
- <div class="pf-v5-c-dual-list-selector__title">
1007
- <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
1003
+ <div class="pf-v6-c-dual-list-selector">
1004
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
1005
+ <div class="pf-v6-c-dual-list-selector__header">
1006
+ <div class="pf-v6-c-dual-list-selector__title">
1007
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
1008
1008
  </div>
1009
1009
  </div>
1010
- <div class="pf-v5-c-dual-list-selector__tools">
1011
- <div class="pf-v5-c-dual-list-selector__tools-filter">
1012
- <div class="pf-v5-c-text-input-group">
1013
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1014
- <span class="pf-v5-c-text-input-group__text">
1015
- <span class="pf-v5-c-text-input-group__icon">
1010
+ <div class="pf-v6-c-dual-list-selector__tools">
1011
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
1012
+ <div class="pf-v6-c-text-input-group">
1013
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1014
+ <span class="pf-v6-c-text-input-group__text">
1015
+ <span class="pf-v6-c-text-input-group__icon">
1016
1016
  <i class="fas fa-fw fa-search"></i>
1017
1017
  </span>
1018
1018
  <input
1019
- class="pf-v5-c-text-input-group__text-input"
1019
+ class="pf-v6-c-text-input-group__text-input"
1020
1020
  type="text"
1021
1021
  value
1022
1022
  aria-label="Search input"
@@ -1025,20 +1025,20 @@ cssPrefix: pf-v5-c-dual-list-selector
1025
1025
  </div>
1026
1026
  </div>
1027
1027
  </div>
1028
- <div class="pf-v5-c-dual-list-selector__tools-actions">
1028
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
1029
1029
  <button
1030
- class="pf-v5-c-button pf-m-plain"
1030
+ class="pf-v6-c-button pf-m-plain"
1031
1031
  type="button"
1032
1032
  aria-label="Sort"
1033
1033
  >
1034
1034
  <i
1035
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
1035
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1036
1036
  aria-hidden="true"
1037
1037
  ></i>
1038
1038
  </button>
1039
- <div class="pf-v5-c-dropdown">
1039
+ <div class="pf-v6-c-dropdown">
1040
1040
  <button
1041
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1041
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1042
1042
  id="dropdown-kebab-chosen-item-available-button"
1043
1043
  aria-expanded="false"
1044
1044
  type="button"
@@ -1047,28 +1047,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1047
1047
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1048
1048
  </button>
1049
1049
  <ul
1050
- class="pf-v5-c-dropdown__menu"
1050
+ class="pf-v6-c-dropdown__menu"
1051
1051
  aria-labelledby="dropdown-kebab-chosen-item-available-button"
1052
1052
  hidden
1053
1053
  role="menu"
1054
1054
  >
1055
1055
  <li role="none">
1056
1056
  <a
1057
- class="pf-v5-c-dropdown__menu-item"
1057
+ class="pf-v6-c-dropdown__menu-item"
1058
1058
  role="menuitem"
1059
1059
  href="#"
1060
1060
  >Link</a>
1061
1061
  </li>
1062
1062
  <li role="none">
1063
1063
  <button
1064
- class="pf-v5-c-dropdown__menu-item"
1064
+ class="pf-v6-c-dropdown__menu-item"
1065
1065
  role="menuitem"
1066
1066
  type="button"
1067
1067
  >Action</button>
1068
1068
  </li>
1069
1069
  <li role="none">
1070
1070
  <a
1071
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1071
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1072
1072
  role="menuitem"
1073
1073
  href="#"
1074
1074
  aria-disabled="true"
@@ -1077,16 +1077,16 @@ cssPrefix: pf-v5-c-dual-list-selector
1077
1077
  </li>
1078
1078
  <li role="none">
1079
1079
  <button
1080
- class="pf-v5-c-dropdown__menu-item"
1080
+ class="pf-v6-c-dropdown__menu-item"
1081
1081
  role="menuitem"
1082
1082
  type="button"
1083
1083
  disabled
1084
1084
  >Disabled action</button>
1085
1085
  </li>
1086
- <li class="pf-v5-c-divider" role="separator"></li>
1086
+ <li class="pf-v6-c-divider" role="separator"></li>
1087
1087
  <li role="none">
1088
1088
  <a
1089
- class="pf-v5-c-dropdown__menu-item"
1089
+ class="pf-v6-c-dropdown__menu-item"
1090
1090
  role="menuitem"
1091
1091
  href="#"
1092
1092
  >Separated link</a>
@@ -1095,76 +1095,76 @@ cssPrefix: pf-v5-c-dual-list-selector
1095
1095
  </div>
1096
1096
  </div>
1097
1097
  </div>
1098
- <div class="pf-v5-c-dual-list-selector__status">
1098
+ <div class="pf-v6-c-dual-list-selector__status">
1099
1099
  <span
1100
- class="pf-v5-c-dual-list-selector__status-text"
1100
+ class="pf-v6-c-dual-list-selector__status-text"
1101
1101
  id="chosen-item-available-status-text"
1102
1102
  >0 of 4 items selected</span>
1103
1103
  </div>
1104
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
1104
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
1105
1105
  <ul
1106
- class="pf-v5-c-dual-list-selector__list"
1106
+ class="pf-v6-c-dual-list-selector__list"
1107
1107
  role="listbox"
1108
1108
  aria-labelledby="chosen-item-available-status-text"
1109
1109
  aria-multiselectable="true"
1110
1110
  aria-activedescendant
1111
1111
  >
1112
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1113
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1114
- <span class="pf-v5-c-dual-list-selector__item">
1115
- <span class="pf-v5-c-dual-list-selector__item-main">
1116
- <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
1112
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1113
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1114
+ <span class="pf-v6-c-dual-list-selector__item">
1115
+ <span class="pf-v6-c-dual-list-selector__item-main">
1116
+ <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
1117
1117
  </span>
1118
- <span class="pf-v5-c-dual-list-selector__item-count">
1119
- <span class="pf-v5-c-badge pf-m-read"></span>
1118
+ <span class="pf-v6-c-dual-list-selector__item-count">
1119
+ <span class="pf-v6-c-badge pf-m-read"></span>
1120
1120
  </span>
1121
1121
  </span>
1122
1122
  </div>
1123
1123
  </li>
1124
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1125
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1126
- <span class="pf-v5-c-dual-list-selector__item">
1127
- <span class="pf-v5-c-dual-list-selector__item-main">
1128
- <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
1124
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1125
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1126
+ <span class="pf-v6-c-dual-list-selector__item">
1127
+ <span class="pf-v6-c-dual-list-selector__item-main">
1128
+ <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
1129
1129
  </span>
1130
- <span class="pf-v5-c-dual-list-selector__item-count">
1131
- <span class="pf-v5-c-badge pf-m-read"></span>
1130
+ <span class="pf-v6-c-dual-list-selector__item-count">
1131
+ <span class="pf-v6-c-badge pf-m-read"></span>
1132
1132
  </span>
1133
1133
  </span>
1134
1134
  </div>
1135
1135
  </li>
1136
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1137
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1138
- <span class="pf-v5-c-dual-list-selector__item">
1139
- <span class="pf-v5-c-dual-list-selector__item-main">
1140
- <span class="pf-v5-c-dual-list-selector__item-text">Item3</span>
1136
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1137
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1138
+ <span class="pf-v6-c-dual-list-selector__item">
1139
+ <span class="pf-v6-c-dual-list-selector__item-main">
1140
+ <span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
1141
1141
  </span>
1142
- <span class="pf-v5-c-dual-list-selector__item-count">
1143
- <span class="pf-v5-c-badge pf-m-read"></span>
1142
+ <span class="pf-v6-c-dual-list-selector__item-count">
1143
+ <span class="pf-v6-c-badge pf-m-read"></span>
1144
1144
  </span>
1145
1145
  </span>
1146
1146
  </div>
1147
1147
  </li>
1148
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1149
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1150
- <span class="pf-v5-c-dual-list-selector__item">
1151
- <span class="pf-v5-c-dual-list-selector__item-main">
1152
- <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
1148
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1149
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1150
+ <span class="pf-v6-c-dual-list-selector__item">
1151
+ <span class="pf-v6-c-dual-list-selector__item-main">
1152
+ <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
1153
1153
  </span>
1154
- <span class="pf-v5-c-dual-list-selector__item-count">
1155
- <span class="pf-v5-c-badge pf-m-read"></span>
1154
+ <span class="pf-v6-c-dual-list-selector__item-count">
1155
+ <span class="pf-v6-c-badge pf-m-read"></span>
1156
1156
  </span>
1157
1157
  </span>
1158
1158
  </div>
1159
1159
  </li>
1160
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1161
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1162
- <span class="pf-v5-c-dual-list-selector__item">
1163
- <span class="pf-v5-c-dual-list-selector__item-main">
1164
- <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
1160
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1161
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1162
+ <span class="pf-v6-c-dual-list-selector__item">
1163
+ <span class="pf-v6-c-dual-list-selector__item-main">
1164
+ <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
1165
1165
  </span>
1166
- <span class="pf-v5-c-dual-list-selector__item-count">
1167
- <span class="pf-v5-c-badge pf-m-read"></span>
1166
+ <span class="pf-v6-c-dual-list-selector__item-count">
1167
+ <span class="pf-v6-c-badge pf-m-read"></span>
1168
1168
  </span>
1169
1169
  </span>
1170
1170
  </div>
@@ -1172,10 +1172,10 @@ cssPrefix: pf-v5-c-dual-list-selector
1172
1172
  </ul>
1173
1173
  </div>
1174
1174
  </div>
1175
- <div class="pf-v5-c-dual-list-selector__controls">
1176
- <div class="pf-v5-c-dual-list-selector__controls-item">
1175
+ <div class="pf-v6-c-dual-list-selector__controls">
1176
+ <div class="pf-v6-c-dual-list-selector__controls-item">
1177
1177
  <button
1178
- class="pf-v5-c-button pf-m-plain"
1178
+ class="pf-v6-c-button pf-m-plain"
1179
1179
  type="button"
1180
1180
  disabled
1181
1181
  aria-label="Add selected"
@@ -1183,27 +1183,27 @@ cssPrefix: pf-v5-c-dual-list-selector
1183
1183
  <i class="fas fa-fw fa-angle-right"></i>
1184
1184
  </button>
1185
1185
  </div>
1186
- <div class="pf-v5-c-dual-list-selector__controls-item">
1186
+ <div class="pf-v6-c-dual-list-selector__controls-item">
1187
1187
  <button
1188
- class="pf-v5-c-button pf-m-plain"
1188
+ class="pf-v6-c-button pf-m-plain"
1189
1189
  type="button"
1190
1190
  aria-label="Add all"
1191
1191
  >
1192
1192
  <i class="fas fa-fw fa-angle-double-right"></i>
1193
1193
  </button>
1194
1194
  </div>
1195
- <div class="pf-v5-c-dual-list-selector__controls-item">
1195
+ <div class="pf-v6-c-dual-list-selector__controls-item">
1196
1196
  <button
1197
- class="pf-v5-c-button pf-m-plain"
1197
+ class="pf-v6-c-button pf-m-plain"
1198
1198
  type="button"
1199
1199
  aria-label="Remove all"
1200
1200
  >
1201
1201
  <i class="fas fa-fw fa-angle-double-left"></i>
1202
1202
  </button>
1203
1203
  </div>
1204
- <div class="pf-v5-c-dual-list-selector__controls-item">
1204
+ <div class="pf-v6-c-dual-list-selector__controls-item">
1205
1205
  <button
1206
- class="pf-v5-c-button pf-m-plain"
1206
+ class="pf-v6-c-button pf-m-plain"
1207
1207
  type="button"
1208
1208
  disabled
1209
1209
  aria-label="Remove selected"
@@ -1212,22 +1212,22 @@ cssPrefix: pf-v5-c-dual-list-selector
1212
1212
  </button>
1213
1213
  </div>
1214
1214
  </div>
1215
- <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
1216
- <div class="pf-v5-c-dual-list-selector__header">
1217
- <div class="pf-v5-c-dual-list-selector__title">
1218
- <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
1215
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
1216
+ <div class="pf-v6-c-dual-list-selector__header">
1217
+ <div class="pf-v6-c-dual-list-selector__title">
1218
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
1219
1219
  </div>
1220
1220
  </div>
1221
- <div class="pf-v5-c-dual-list-selector__tools">
1222
- <div class="pf-v5-c-dual-list-selector__tools-filter">
1223
- <div class="pf-v5-c-text-input-group">
1224
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1225
- <span class="pf-v5-c-text-input-group__text">
1226
- <span class="pf-v5-c-text-input-group__icon">
1221
+ <div class="pf-v6-c-dual-list-selector__tools">
1222
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
1223
+ <div class="pf-v6-c-text-input-group">
1224
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1225
+ <span class="pf-v6-c-text-input-group__text">
1226
+ <span class="pf-v6-c-text-input-group__icon">
1227
1227
  <i class="fas fa-fw fa-search"></i>
1228
1228
  </span>
1229
1229
  <input
1230
- class="pf-v5-c-text-input-group__text-input"
1230
+ class="pf-v6-c-text-input-group__text-input"
1231
1231
  type="text"
1232
1232
  value
1233
1233
  aria-label="Search input"
@@ -1236,20 +1236,20 @@ cssPrefix: pf-v5-c-dual-list-selector
1236
1236
  </div>
1237
1237
  </div>
1238
1238
  </div>
1239
- <div class="pf-v5-c-dual-list-selector__tools-actions">
1239
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
1240
1240
  <button
1241
- class="pf-v5-c-button pf-m-plain"
1241
+ class="pf-v6-c-button pf-m-plain"
1242
1242
  type="button"
1243
1243
  aria-label="Sort"
1244
1244
  >
1245
1245
  <i
1246
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
1246
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1247
1247
  aria-hidden="true"
1248
1248
  ></i>
1249
1249
  </button>
1250
- <div class="pf-v5-c-dropdown">
1250
+ <div class="pf-v6-c-dropdown">
1251
1251
  <button
1252
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1252
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1253
1253
  id="dropdown-kebab-chosen-item-chosen-button"
1254
1254
  aria-expanded="false"
1255
1255
  type="button"
@@ -1258,28 +1258,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1258
1258
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1259
1259
  </button>
1260
1260
  <ul
1261
- class="pf-v5-c-dropdown__menu"
1261
+ class="pf-v6-c-dropdown__menu"
1262
1262
  aria-labelledby="dropdown-kebab-chosen-item-chosen-button"
1263
1263
  hidden
1264
1264
  role="menu"
1265
1265
  >
1266
1266
  <li role="none">
1267
1267
  <a
1268
- class="pf-v5-c-dropdown__menu-item"
1268
+ class="pf-v6-c-dropdown__menu-item"
1269
1269
  role="menuitem"
1270
1270
  href="#"
1271
1271
  >Link</a>
1272
1272
  </li>
1273
1273
  <li role="none">
1274
1274
  <button
1275
- class="pf-v5-c-dropdown__menu-item"
1275
+ class="pf-v6-c-dropdown__menu-item"
1276
1276
  role="menuitem"
1277
1277
  type="button"
1278
1278
  >Action</button>
1279
1279
  </li>
1280
1280
  <li role="none">
1281
1281
  <a
1282
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1282
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1283
1283
  role="menuitem"
1284
1284
  href="#"
1285
1285
  aria-disabled="true"
@@ -1288,16 +1288,16 @@ cssPrefix: pf-v5-c-dual-list-selector
1288
1288
  </li>
1289
1289
  <li role="none">
1290
1290
  <button
1291
- class="pf-v5-c-dropdown__menu-item"
1291
+ class="pf-v6-c-dropdown__menu-item"
1292
1292
  role="menuitem"
1293
1293
  type="button"
1294
1294
  disabled
1295
1295
  >Disabled action</button>
1296
1296
  </li>
1297
- <li class="pf-v5-c-divider" role="separator"></li>
1297
+ <li class="pf-v6-c-divider" role="separator"></li>
1298
1298
  <li role="none">
1299
1299
  <a
1300
- class="pf-v5-c-dropdown__menu-item"
1300
+ class="pf-v6-c-dropdown__menu-item"
1301
1301
  role="menuitem"
1302
1302
  href="#"
1303
1303
  >Separated link</a>
@@ -1306,28 +1306,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1306
1306
  </div>
1307
1307
  </div>
1308
1308
  </div>
1309
- <div class="pf-v5-c-dual-list-selector__status">
1309
+ <div class="pf-v6-c-dual-list-selector__status">
1310
1310
  <span
1311
- class="pf-v5-c-dual-list-selector__status-text"
1311
+ class="pf-v6-c-dual-list-selector__status-text"
1312
1312
  id="chosen-item-chosen-status-text"
1313
1313
  >0 of 1 items selected</span>
1314
1314
  </div>
1315
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
1315
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
1316
1316
  <ul
1317
- class="pf-v5-c-dual-list-selector__list"
1317
+ class="pf-v6-c-dual-list-selector__list"
1318
1318
  role="listbox"
1319
1319
  aria-labelledby="chosen-item-chosen-status-text"
1320
1320
  aria-multiselectable="true"
1321
1321
  aria-activedescendant
1322
1322
  >
1323
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1324
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1325
- <span class="pf-v5-c-dual-list-selector__item">
1326
- <span class="pf-v5-c-dual-list-selector__item-main">
1327
- <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
1323
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1324
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1325
+ <span class="pf-v6-c-dual-list-selector__item">
1326
+ <span class="pf-v6-c-dual-list-selector__item-main">
1327
+ <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
1328
1328
  </span>
1329
- <span class="pf-v5-c-dual-list-selector__item-count">
1330
- <span class="pf-v5-c-badge pf-m-read"></span>
1329
+ <span class="pf-v6-c-dual-list-selector__item-count">
1330
+ <span class="pf-v6-c-badge pf-m-read"></span>
1331
1331
  </span>
1332
1332
  </span>
1333
1333
  </div>
@@ -1342,23 +1342,23 @@ cssPrefix: pf-v5-c-dual-list-selector
1342
1342
  ### Chosen item selected
1343
1343
 
1344
1344
  ```html
1345
- <div class="pf-v5-c-dual-list-selector">
1346
- <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
1347
- <div class="pf-v5-c-dual-list-selector__header">
1348
- <div class="pf-v5-c-dual-list-selector__title">
1349
- <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
1345
+ <div class="pf-v6-c-dual-list-selector">
1346
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
1347
+ <div class="pf-v6-c-dual-list-selector__header">
1348
+ <div class="pf-v6-c-dual-list-selector__title">
1349
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
1350
1350
  </div>
1351
1351
  </div>
1352
- <div class="pf-v5-c-dual-list-selector__tools">
1353
- <div class="pf-v5-c-dual-list-selector__tools-filter">
1354
- <div class="pf-v5-c-text-input-group">
1355
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1356
- <span class="pf-v5-c-text-input-group__text">
1357
- <span class="pf-v5-c-text-input-group__icon">
1352
+ <div class="pf-v6-c-dual-list-selector__tools">
1353
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
1354
+ <div class="pf-v6-c-text-input-group">
1355
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1356
+ <span class="pf-v6-c-text-input-group__text">
1357
+ <span class="pf-v6-c-text-input-group__icon">
1358
1358
  <i class="fas fa-fw fa-search"></i>
1359
1359
  </span>
1360
1360
  <input
1361
- class="pf-v5-c-text-input-group__text-input"
1361
+ class="pf-v6-c-text-input-group__text-input"
1362
1362
  type="text"
1363
1363
  value
1364
1364
  aria-label="Search input"
@@ -1367,20 +1367,20 @@ cssPrefix: pf-v5-c-dual-list-selector
1367
1367
  </div>
1368
1368
  </div>
1369
1369
  </div>
1370
- <div class="pf-v5-c-dual-list-selector__tools-actions">
1370
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
1371
1371
  <button
1372
- class="pf-v5-c-button pf-m-plain"
1372
+ class="pf-v6-c-button pf-m-plain"
1373
1373
  type="button"
1374
1374
  aria-label="Sort"
1375
1375
  >
1376
1376
  <i
1377
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
1377
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1378
1378
  aria-hidden="true"
1379
1379
  ></i>
1380
1380
  </button>
1381
- <div class="pf-v5-c-dropdown">
1381
+ <div class="pf-v6-c-dropdown">
1382
1382
  <button
1383
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1383
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1384
1384
  id="dropdown-kebab-chosen-item-selected-available-button"
1385
1385
  aria-expanded="false"
1386
1386
  type="button"
@@ -1389,28 +1389,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1389
1389
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1390
1390
  </button>
1391
1391
  <ul
1392
- class="pf-v5-c-dropdown__menu"
1392
+ class="pf-v6-c-dropdown__menu"
1393
1393
  aria-labelledby="dropdown-kebab-chosen-item-selected-available-button"
1394
1394
  hidden
1395
1395
  role="menu"
1396
1396
  >
1397
1397
  <li role="none">
1398
1398
  <a
1399
- class="pf-v5-c-dropdown__menu-item"
1399
+ class="pf-v6-c-dropdown__menu-item"
1400
1400
  role="menuitem"
1401
1401
  href="#"
1402
1402
  >Link</a>
1403
1403
  </li>
1404
1404
  <li role="none">
1405
1405
  <button
1406
- class="pf-v5-c-dropdown__menu-item"
1406
+ class="pf-v6-c-dropdown__menu-item"
1407
1407
  role="menuitem"
1408
1408
  type="button"
1409
1409
  >Action</button>
1410
1410
  </li>
1411
1411
  <li role="none">
1412
1412
  <a
1413
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1413
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1414
1414
  role="menuitem"
1415
1415
  href="#"
1416
1416
  aria-disabled="true"
@@ -1419,16 +1419,16 @@ cssPrefix: pf-v5-c-dual-list-selector
1419
1419
  </li>
1420
1420
  <li role="none">
1421
1421
  <button
1422
- class="pf-v5-c-dropdown__menu-item"
1422
+ class="pf-v6-c-dropdown__menu-item"
1423
1423
  role="menuitem"
1424
1424
  type="button"
1425
1425
  disabled
1426
1426
  >Disabled action</button>
1427
1427
  </li>
1428
- <li class="pf-v5-c-divider" role="separator"></li>
1428
+ <li class="pf-v6-c-divider" role="separator"></li>
1429
1429
  <li role="none">
1430
1430
  <a
1431
- class="pf-v5-c-dropdown__menu-item"
1431
+ class="pf-v6-c-dropdown__menu-item"
1432
1432
  role="menuitem"
1433
1433
  href="#"
1434
1434
  >Separated link</a>
@@ -1437,76 +1437,76 @@ cssPrefix: pf-v5-c-dual-list-selector
1437
1437
  </div>
1438
1438
  </div>
1439
1439
  </div>
1440
- <div class="pf-v5-c-dual-list-selector__status">
1440
+ <div class="pf-v6-c-dual-list-selector__status">
1441
1441
  <span
1442
- class="pf-v5-c-dual-list-selector__status-text"
1442
+ class="pf-v6-c-dual-list-selector__status-text"
1443
1443
  id="chosen-item-selected-available-status-text"
1444
1444
  >0 of 4 items selected</span>
1445
1445
  </div>
1446
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
1446
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
1447
1447
  <ul
1448
- class="pf-v5-c-dual-list-selector__list"
1448
+ class="pf-v6-c-dual-list-selector__list"
1449
1449
  role="listbox"
1450
1450
  aria-labelledby="chosen-item-selected-available-status-text"
1451
1451
  aria-multiselectable="true"
1452
1452
  aria-activedescendant
1453
1453
  >
1454
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1455
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1456
- <span class="pf-v5-c-dual-list-selector__item">
1457
- <span class="pf-v5-c-dual-list-selector__item-main">
1458
- <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
1454
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1455
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1456
+ <span class="pf-v6-c-dual-list-selector__item">
1457
+ <span class="pf-v6-c-dual-list-selector__item-main">
1458
+ <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
1459
1459
  </span>
1460
- <span class="pf-v5-c-dual-list-selector__item-count">
1461
- <span class="pf-v5-c-badge pf-m-read"></span>
1460
+ <span class="pf-v6-c-dual-list-selector__item-count">
1461
+ <span class="pf-v6-c-badge pf-m-read"></span>
1462
1462
  </span>
1463
1463
  </span>
1464
1464
  </div>
1465
1465
  </li>
1466
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1467
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1468
- <span class="pf-v5-c-dual-list-selector__item">
1469
- <span class="pf-v5-c-dual-list-selector__item-main">
1470
- <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
1466
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1467
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1468
+ <span class="pf-v6-c-dual-list-selector__item">
1469
+ <span class="pf-v6-c-dual-list-selector__item-main">
1470
+ <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
1471
1471
  </span>
1472
- <span class="pf-v5-c-dual-list-selector__item-count">
1473
- <span class="pf-v5-c-badge pf-m-read"></span>
1472
+ <span class="pf-v6-c-dual-list-selector__item-count">
1473
+ <span class="pf-v6-c-badge pf-m-read"></span>
1474
1474
  </span>
1475
1475
  </span>
1476
1476
  </div>
1477
1477
  </li>
1478
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1479
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1480
- <span class="pf-v5-c-dual-list-selector__item">
1481
- <span class="pf-v5-c-dual-list-selector__item-main">
1482
- <span class="pf-v5-c-dual-list-selector__item-text">Item3</span>
1478
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1479
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1480
+ <span class="pf-v6-c-dual-list-selector__item">
1481
+ <span class="pf-v6-c-dual-list-selector__item-main">
1482
+ <span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
1483
1483
  </span>
1484
- <span class="pf-v5-c-dual-list-selector__item-count">
1485
- <span class="pf-v5-c-badge pf-m-read"></span>
1484
+ <span class="pf-v6-c-dual-list-selector__item-count">
1485
+ <span class="pf-v6-c-badge pf-m-read"></span>
1486
1486
  </span>
1487
1487
  </span>
1488
1488
  </div>
1489
1489
  </li>
1490
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1491
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1492
- <span class="pf-v5-c-dual-list-selector__item">
1493
- <span class="pf-v5-c-dual-list-selector__item-main">
1494
- <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
1490
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1491
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1492
+ <span class="pf-v6-c-dual-list-selector__item">
1493
+ <span class="pf-v6-c-dual-list-selector__item-main">
1494
+ <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
1495
1495
  </span>
1496
- <span class="pf-v5-c-dual-list-selector__item-count">
1497
- <span class="pf-v5-c-badge pf-m-read"></span>
1496
+ <span class="pf-v6-c-dual-list-selector__item-count">
1497
+ <span class="pf-v6-c-badge pf-m-read"></span>
1498
1498
  </span>
1499
1499
  </span>
1500
1500
  </div>
1501
1501
  </li>
1502
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1503
- <div class="pf-v5-c-dual-list-selector__list-item-row">
1504
- <span class="pf-v5-c-dual-list-selector__item">
1505
- <span class="pf-v5-c-dual-list-selector__item-main">
1506
- <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
1502
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1503
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
1504
+ <span class="pf-v6-c-dual-list-selector__item">
1505
+ <span class="pf-v6-c-dual-list-selector__item-main">
1506
+ <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
1507
1507
  </span>
1508
- <span class="pf-v5-c-dual-list-selector__item-count">
1509
- <span class="pf-v5-c-badge pf-m-read"></span>
1508
+ <span class="pf-v6-c-dual-list-selector__item-count">
1509
+ <span class="pf-v6-c-badge pf-m-read"></span>
1510
1510
  </span>
1511
1511
  </span>
1512
1512
  </div>
@@ -1514,10 +1514,10 @@ cssPrefix: pf-v5-c-dual-list-selector
1514
1514
  </ul>
1515
1515
  </div>
1516
1516
  </div>
1517
- <div class="pf-v5-c-dual-list-selector__controls">
1518
- <div class="pf-v5-c-dual-list-selector__controls-item">
1517
+ <div class="pf-v6-c-dual-list-selector__controls">
1518
+ <div class="pf-v6-c-dual-list-selector__controls-item">
1519
1519
  <button
1520
- class="pf-v5-c-button pf-m-plain"
1520
+ class="pf-v6-c-button pf-m-plain"
1521
1521
  type="button"
1522
1522
  disabled
1523
1523
  aria-label="Add selected"
@@ -1525,27 +1525,27 @@ cssPrefix: pf-v5-c-dual-list-selector
1525
1525
  <i class="fas fa-fw fa-angle-right"></i>
1526
1526
  </button>
1527
1527
  </div>
1528
- <div class="pf-v5-c-dual-list-selector__controls-item">
1528
+ <div class="pf-v6-c-dual-list-selector__controls-item">
1529
1529
  <button
1530
- class="pf-v5-c-button pf-m-plain"
1530
+ class="pf-v6-c-button pf-m-plain"
1531
1531
  type="button"
1532
1532
  aria-label="Add all"
1533
1533
  >
1534
1534
  <i class="fas fa-fw fa-angle-double-right"></i>
1535
1535
  </button>
1536
1536
  </div>
1537
- <div class="pf-v5-c-dual-list-selector__controls-item">
1537
+ <div class="pf-v6-c-dual-list-selector__controls-item">
1538
1538
  <button
1539
- class="pf-v5-c-button pf-m-plain"
1539
+ class="pf-v6-c-button pf-m-plain"
1540
1540
  type="button"
1541
1541
  aria-label="Remove all"
1542
1542
  >
1543
1543
  <i class="fas fa-fw fa-angle-double-left"></i>
1544
1544
  </button>
1545
1545
  </div>
1546
- <div class="pf-v5-c-dual-list-selector__controls-item">
1546
+ <div class="pf-v6-c-dual-list-selector__controls-item">
1547
1547
  <button
1548
- class="pf-v5-c-button pf-m-plain"
1548
+ class="pf-v6-c-button pf-m-plain"
1549
1549
  type="button"
1550
1550
  aria-label="Remove selected"
1551
1551
  >
@@ -1553,22 +1553,22 @@ cssPrefix: pf-v5-c-dual-list-selector
1553
1553
  </button>
1554
1554
  </div>
1555
1555
  </div>
1556
- <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
1557
- <div class="pf-v5-c-dual-list-selector__header">
1558
- <div class="pf-v5-c-dual-list-selector__title">
1559
- <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
1556
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
1557
+ <div class="pf-v6-c-dual-list-selector__header">
1558
+ <div class="pf-v6-c-dual-list-selector__title">
1559
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
1560
1560
  </div>
1561
1561
  </div>
1562
- <div class="pf-v5-c-dual-list-selector__tools">
1563
- <div class="pf-v5-c-dual-list-selector__tools-filter">
1564
- <div class="pf-v5-c-text-input-group">
1565
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1566
- <span class="pf-v5-c-text-input-group__text">
1567
- <span class="pf-v5-c-text-input-group__icon">
1562
+ <div class="pf-v6-c-dual-list-selector__tools">
1563
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
1564
+ <div class="pf-v6-c-text-input-group">
1565
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1566
+ <span class="pf-v6-c-text-input-group__text">
1567
+ <span class="pf-v6-c-text-input-group__icon">
1568
1568
  <i class="fas fa-fw fa-search"></i>
1569
1569
  </span>
1570
1570
  <input
1571
- class="pf-v5-c-text-input-group__text-input"
1571
+ class="pf-v6-c-text-input-group__text-input"
1572
1572
  type="text"
1573
1573
  value
1574
1574
  aria-label="Search input"
@@ -1577,20 +1577,20 @@ cssPrefix: pf-v5-c-dual-list-selector
1577
1577
  </div>
1578
1578
  </div>
1579
1579
  </div>
1580
- <div class="pf-v5-c-dual-list-selector__tools-actions">
1580
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
1581
1581
  <button
1582
- class="pf-v5-c-button pf-m-plain"
1582
+ class="pf-v6-c-button pf-m-plain"
1583
1583
  type="button"
1584
1584
  aria-label="Sort"
1585
1585
  >
1586
1586
  <i
1587
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
1587
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1588
1588
  aria-hidden="true"
1589
1589
  ></i>
1590
1590
  </button>
1591
- <div class="pf-v5-c-dropdown">
1591
+ <div class="pf-v6-c-dropdown">
1592
1592
  <button
1593
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1593
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1594
1594
  id="dropdown-kebab-chosen-item-selected-chosen-button"
1595
1595
  aria-expanded="false"
1596
1596
  type="button"
@@ -1599,28 +1599,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1599
1599
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1600
1600
  </button>
1601
1601
  <ul
1602
- class="pf-v5-c-dropdown__menu"
1602
+ class="pf-v6-c-dropdown__menu"
1603
1603
  aria-labelledby="dropdown-kebab-chosen-item-selected-chosen-button"
1604
1604
  hidden
1605
1605
  role="menu"
1606
1606
  >
1607
1607
  <li role="none">
1608
1608
  <a
1609
- class="pf-v5-c-dropdown__menu-item"
1609
+ class="pf-v6-c-dropdown__menu-item"
1610
1610
  role="menuitem"
1611
1611
  href="#"
1612
1612
  >Link</a>
1613
1613
  </li>
1614
1614
  <li role="none">
1615
1615
  <button
1616
- class="pf-v5-c-dropdown__menu-item"
1616
+ class="pf-v6-c-dropdown__menu-item"
1617
1617
  role="menuitem"
1618
1618
  type="button"
1619
1619
  >Action</button>
1620
1620
  </li>
1621
1621
  <li role="none">
1622
1622
  <a
1623
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1623
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1624
1624
  role="menuitem"
1625
1625
  href="#"
1626
1626
  aria-disabled="true"
@@ -1629,16 +1629,16 @@ cssPrefix: pf-v5-c-dual-list-selector
1629
1629
  </li>
1630
1630
  <li role="none">
1631
1631
  <button
1632
- class="pf-v5-c-dropdown__menu-item"
1632
+ class="pf-v6-c-dropdown__menu-item"
1633
1633
  role="menuitem"
1634
1634
  type="button"
1635
1635
  disabled
1636
1636
  >Disabled action</button>
1637
1637
  </li>
1638
- <li class="pf-v5-c-divider" role="separator"></li>
1638
+ <li class="pf-v6-c-divider" role="separator"></li>
1639
1639
  <li role="none">
1640
1640
  <a
1641
- class="pf-v5-c-dropdown__menu-item"
1641
+ class="pf-v6-c-dropdown__menu-item"
1642
1642
  role="menuitem"
1643
1643
  href="#"
1644
1644
  >Separated link</a>
@@ -1647,28 +1647,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1647
1647
  </div>
1648
1648
  </div>
1649
1649
  </div>
1650
- <div class="pf-v5-c-dual-list-selector__status">
1650
+ <div class="pf-v6-c-dual-list-selector__status">
1651
1651
  <span
1652
- class="pf-v5-c-dual-list-selector__status-text"
1652
+ class="pf-v6-c-dual-list-selector__status-text"
1653
1653
  id="chosen-item-selected-chosen-status-text"
1654
1654
  >1 of 1 items selected</span>
1655
1655
  </div>
1656
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
1656
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
1657
1657
  <ul
1658
- class="pf-v5-c-dual-list-selector__list"
1658
+ class="pf-v6-c-dual-list-selector__list"
1659
1659
  role="listbox"
1660
1660
  aria-labelledby="chosen-item-selected-chosen-status-text"
1661
1661
  aria-multiselectable="true"
1662
1662
  aria-activedescendant
1663
1663
  >
1664
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
1665
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
1666
- <span class="pf-v5-c-dual-list-selector__item">
1667
- <span class="pf-v5-c-dual-list-selector__item-main">
1668
- <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
1664
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
1665
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
1666
+ <span class="pf-v6-c-dual-list-selector__item">
1667
+ <span class="pf-v6-c-dual-list-selector__item-main">
1668
+ <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
1669
1669
  </span>
1670
- <span class="pf-v5-c-dual-list-selector__item-count">
1671
- <span class="pf-v5-c-badge pf-m-read"></span>
1670
+ <span class="pf-v6-c-dual-list-selector__item-count">
1671
+ <span class="pf-v6-c-badge pf-m-read"></span>
1672
1672
  </span>
1673
1673
  </span>
1674
1674
  </div>
@@ -1683,23 +1683,23 @@ cssPrefix: pf-v5-c-dual-list-selector
1683
1683
  ### Tree view
1684
1684
 
1685
1685
  ```html
1686
- <div class="pf-v5-c-dual-list-selector">
1687
- <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
1688
- <div class="pf-v5-c-dual-list-selector__header">
1689
- <div class="pf-v5-c-dual-list-selector__title">
1690
- <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
1686
+ <div class="pf-v6-c-dual-list-selector">
1687
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
1688
+ <div class="pf-v6-c-dual-list-selector__header">
1689
+ <div class="pf-v6-c-dual-list-selector__title">
1690
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
1691
1691
  </div>
1692
1692
  </div>
1693
- <div class="pf-v5-c-dual-list-selector__tools">
1694
- <div class="pf-v5-c-dual-list-selector__tools-filter">
1695
- <div class="pf-v5-c-text-input-group">
1696
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1697
- <span class="pf-v5-c-text-input-group__text">
1698
- <span class="pf-v5-c-text-input-group__icon">
1693
+ <div class="pf-v6-c-dual-list-selector__tools">
1694
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
1695
+ <div class="pf-v6-c-text-input-group">
1696
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1697
+ <span class="pf-v6-c-text-input-group__text">
1698
+ <span class="pf-v6-c-text-input-group__icon">
1699
1699
  <i class="fas fa-fw fa-search"></i>
1700
1700
  </span>
1701
1701
  <input
1702
- class="pf-v5-c-text-input-group__text-input"
1702
+ class="pf-v6-c-text-input-group__text-input"
1703
1703
  type="text"
1704
1704
  value
1705
1705
  aria-label="Search input"
@@ -1708,20 +1708,20 @@ cssPrefix: pf-v5-c-dual-list-selector
1708
1708
  </div>
1709
1709
  </div>
1710
1710
  </div>
1711
- <div class="pf-v5-c-dual-list-selector__tools-actions">
1711
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
1712
1712
  <button
1713
- class="pf-v5-c-button pf-m-plain"
1713
+ class="pf-v6-c-button pf-m-plain"
1714
1714
  type="button"
1715
1715
  aria-label="Sort"
1716
1716
  >
1717
1717
  <i
1718
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
1718
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1719
1719
  aria-hidden="true"
1720
1720
  ></i>
1721
1721
  </button>
1722
- <div class="pf-v5-c-dropdown">
1722
+ <div class="pf-v6-c-dropdown">
1723
1723
  <button
1724
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1724
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1725
1725
  id="dropdown-kebab-tree-available-button"
1726
1726
  aria-expanded="false"
1727
1727
  type="button"
@@ -1730,28 +1730,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1730
1730
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1731
1731
  </button>
1732
1732
  <ul
1733
- class="pf-v5-c-dropdown__menu"
1733
+ class="pf-v6-c-dropdown__menu"
1734
1734
  aria-labelledby="dropdown-kebab-tree-available-button"
1735
1735
  hidden
1736
1736
  role="menu"
1737
1737
  >
1738
1738
  <li role="none">
1739
1739
  <a
1740
- class="pf-v5-c-dropdown__menu-item"
1740
+ class="pf-v6-c-dropdown__menu-item"
1741
1741
  role="menuitem"
1742
1742
  href="#"
1743
1743
  >Link</a>
1744
1744
  </li>
1745
1745
  <li role="none">
1746
1746
  <button
1747
- class="pf-v5-c-dropdown__menu-item"
1747
+ class="pf-v6-c-dropdown__menu-item"
1748
1748
  role="menuitem"
1749
1749
  type="button"
1750
1750
  >Action</button>
1751
1751
  </li>
1752
1752
  <li role="none">
1753
1753
  <a
1754
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1754
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1755
1755
  role="menuitem"
1756
1756
  href="#"
1757
1757
  aria-disabled="true"
@@ -1760,16 +1760,16 @@ cssPrefix: pf-v5-c-dual-list-selector
1760
1760
  </li>
1761
1761
  <li role="none">
1762
1762
  <button
1763
- class="pf-v5-c-dropdown__menu-item"
1763
+ class="pf-v6-c-dropdown__menu-item"
1764
1764
  role="menuitem"
1765
1765
  type="button"
1766
1766
  disabled
1767
1767
  >Disabled action</button>
1768
1768
  </li>
1769
- <li class="pf-v5-c-divider" role="separator"></li>
1769
+ <li class="pf-v6-c-divider" role="separator"></li>
1770
1770
  <li role="none">
1771
1771
  <a
1772
- class="pf-v5-c-dropdown__menu-item"
1772
+ class="pf-v6-c-dropdown__menu-item"
1773
1773
  role="menuitem"
1774
1774
  href="#"
1775
1775
  >Separated link</a>
@@ -1778,88 +1778,88 @@ cssPrefix: pf-v5-c-dual-list-selector
1778
1778
  </div>
1779
1779
  </div>
1780
1780
  </div>
1781
- <div class="pf-v5-c-dual-list-selector__status">
1781
+ <div class="pf-v6-c-dual-list-selector__status">
1782
1782
  <span
1783
- class="pf-v5-c-dual-list-selector__status-text"
1783
+ class="pf-v6-c-dual-list-selector__status-text"
1784
1784
  id="tree-available-status-text"
1785
1785
  >1 of 11 items selected</span>
1786
1786
  </div>
1787
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
1787
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
1788
1788
  <ul
1789
- class="pf-v5-c-dual-list-selector__list"
1789
+ class="pf-v6-c-dual-list-selector__list"
1790
1790
  role="tree"
1791
1791
  aria-labelledby="tree-available-status-text"
1792
1792
  aria-multiselectable="true"
1793
1793
  aria-activedescendant
1794
1794
  >
1795
1795
  <li
1796
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
1796
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
1797
1797
  aria-expanded="true"
1798
1798
  role="treeitem"
1799
1799
  >
1800
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
1801
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
1802
- <span class="pf-v5-c-dual-list-selector__item-main">
1803
- <div class="pf-v5-c-dual-list-selector__item-toggle">
1804
- <span class="pf-v5-c-dual-list-selector__item-toggle-icon">
1800
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
1801
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
1802
+ <span class="pf-v6-c-dual-list-selector__item-main">
1803
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
1804
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
1805
1805
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1806
1806
  </span>
1807
1807
  </div>
1808
- <span class="pf-v5-c-dual-list-selector__item-check">
1809
- <div class="pf-v5-c-check pf-m-standalone">
1808
+ <span class="pf-v6-c-dual-list-selector__item-check">
1809
+ <div class="pf-v6-c-check pf-m-standalone">
1810
1810
  <input
1811
- class="pf-v5-c-check__input"
1811
+ class="pf-v6-c-check__input"
1812
1812
  type="checkbox"
1813
1813
  id="check-0"
1814
1814
  aria-label="Dual list selector item check"
1815
1815
  />
1816
1816
  </div>
1817
1817
  </span>
1818
- <span class="pf-v5-c-dual-list-selector__item-text">Colors</span>
1818
+ <span class="pf-v6-c-dual-list-selector__item-text">Colors</span>
1819
1819
  </span>
1820
- <span class="pf-v5-c-dual-list-selector__item-count">
1821
- <span class="pf-v5-c-badge pf-m-read">6</span>
1820
+ <span class="pf-v6-c-dual-list-selector__item-count">
1821
+ <span class="pf-v6-c-badge pf-m-read">6</span>
1822
1822
  </span>
1823
1823
  </div>
1824
1824
  </div>
1825
1825
 
1826
1826
  <ul
1827
- class="pf-v5-c-dual-list-selector__list"
1827
+ class="pf-v6-c-dual-list-selector__list"
1828
1828
  role="group"
1829
1829
  aria-labelledby="-status-text"
1830
1830
  >
1831
- <li class="pf-v5-c-dual-list-selector__list-item" role="treeitem">
1832
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
1833
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
1834
- <span class="pf-v5-c-dual-list-selector__item-main">
1835
- <span class="pf-v5-c-dual-list-selector__item-check">
1836
- <div class="pf-v5-c-check pf-m-standalone">
1831
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
1832
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
1833
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
1834
+ <span class="pf-v6-c-dual-list-selector__item-main">
1835
+ <span class="pf-v6-c-dual-list-selector__item-check">
1836
+ <div class="pf-v6-c-check pf-m-standalone">
1837
1837
  <input
1838
- class="pf-v5-c-check__input"
1838
+ class="pf-v6-c-check__input"
1839
1839
  type="checkbox"
1840
1840
  id="check-1"
1841
1841
  aria-label="Dual list selector item check"
1842
1842
  />
1843
1843
  </div>
1844
1844
  </span>
1845
- <span class="pf-v5-c-dual-list-selector__item-text">Red</span>
1845
+ <span class="pf-v6-c-dual-list-selector__item-text">Red</span>
1846
1846
  </span>
1847
- <span class="pf-v5-c-dual-list-selector__item-count">
1848
- <span class="pf-v5-c-badge pf-m-read"></span>
1847
+ <span class="pf-v6-c-dual-list-selector__item-count">
1848
+ <span class="pf-v6-c-badge pf-m-read"></span>
1849
1849
  </span>
1850
1850
  </div>
1851
1851
  </div>
1852
1852
  </li>
1853
- <li class="pf-v5-c-dual-list-selector__list-item" role="treeitem">
1853
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
1854
1854
  <div
1855
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
1855
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
1856
1856
  >
1857
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
1858
- <span class="pf-v5-c-dual-list-selector__item-main">
1859
- <span class="pf-v5-c-dual-list-selector__item-check">
1860
- <div class="pf-v5-c-check pf-m-standalone">
1857
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
1858
+ <span class="pf-v6-c-dual-list-selector__item-main">
1859
+ <span class="pf-v6-c-dual-list-selector__item-check">
1860
+ <div class="pf-v6-c-check pf-m-standalone">
1861
1861
  <input
1862
- class="pf-v5-c-check__input"
1862
+ class="pf-v6-c-check__input"
1863
1863
  type="checkbox"
1864
1864
  id="check-2"
1865
1865
  checked
@@ -1867,87 +1867,87 @@ cssPrefix: pf-v5-c-dual-list-selector
1867
1867
  />
1868
1868
  </div>
1869
1869
  </span>
1870
- <span class="pf-v5-c-dual-list-selector__item-text">Orange</span>
1870
+ <span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
1871
1871
  </span>
1872
- <span class="pf-v5-c-dual-list-selector__item-count">
1873
- <span class="pf-v5-c-badge pf-m-read"></span>
1872
+ <span class="pf-v6-c-dual-list-selector__item-count">
1873
+ <span class="pf-v6-c-badge pf-m-read"></span>
1874
1874
  </span>
1875
1875
  </div>
1876
1876
  </div>
1877
1877
  </li>
1878
- <li class="pf-v5-c-dual-list-selector__list-item" role="treeitem">
1879
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
1880
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
1881
- <span class="pf-v5-c-dual-list-selector__item-main">
1882
- <span class="pf-v5-c-dual-list-selector__item-check">
1883
- <div class="pf-v5-c-check pf-m-standalone">
1878
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
1879
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
1880
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
1881
+ <span class="pf-v6-c-dual-list-selector__item-main">
1882
+ <span class="pf-v6-c-dual-list-selector__item-check">
1883
+ <div class="pf-v6-c-check pf-m-standalone">
1884
1884
  <input
1885
- class="pf-v5-c-check__input"
1885
+ class="pf-v6-c-check__input"
1886
1886
  type="checkbox"
1887
1887
  id="check-3"
1888
1888
  aria-label="Dual list selector item check"
1889
1889
  />
1890
1890
  </div>
1891
1891
  </span>
1892
- <span class="pf-v5-c-dual-list-selector__item-text">Yellow</span>
1892
+ <span class="pf-v6-c-dual-list-selector__item-text">Yellow</span>
1893
1893
  </span>
1894
- <span class="pf-v5-c-dual-list-selector__item-count">
1895
- <span class="pf-v5-c-badge pf-m-read"></span>
1894
+ <span class="pf-v6-c-dual-list-selector__item-count">
1895
+ <span class="pf-v6-c-badge pf-m-read"></span>
1896
1896
  </span>
1897
1897
  </div>
1898
1898
  </div>
1899
1899
  </li>
1900
1900
  <li
1901
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
1901
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
1902
1902
  aria-expanded="true"
1903
1903
  role="treeitem"
1904
1904
  >
1905
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
1906
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
1907
- <span class="pf-v5-c-dual-list-selector__item-main">
1908
- <div class="pf-v5-c-dual-list-selector__item-toggle">
1905
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
1906
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
1907
+ <span class="pf-v6-c-dual-list-selector__item-main">
1908
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
1909
1909
  <span
1910
- class="pf-v5-c-dual-list-selector__item-toggle-icon"
1910
+ class="pf-v6-c-dual-list-selector__item-toggle-icon"
1911
1911
  >
1912
1912
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1913
1913
  </span>
1914
1914
  </div>
1915
- <span class="pf-v5-c-dual-list-selector__item-check">
1916
- <div class="pf-v5-c-check pf-m-standalone">
1915
+ <span class="pf-v6-c-dual-list-selector__item-check">
1916
+ <div class="pf-v6-c-check pf-m-standalone">
1917
1917
  <input
1918
- class="pf-v5-c-check__input"
1918
+ class="pf-v6-c-check__input"
1919
1919
  type="checkbox"
1920
1920
  id="check-4"
1921
1921
  aria-label="Dual list selector item check"
1922
1922
  />
1923
1923
  </div>
1924
1924
  </span>
1925
- <span class="pf-v5-c-dual-list-selector__item-text">Green</span>
1925
+ <span class="pf-v6-c-dual-list-selector__item-text">Green</span>
1926
1926
  </span>
1927
- <span class="pf-v5-c-dual-list-selector__item-count">
1928
- <span class="pf-v5-c-badge pf-m-read"></span>
1927
+ <span class="pf-v6-c-dual-list-selector__item-count">
1928
+ <span class="pf-v6-c-badge pf-m-read"></span>
1929
1929
  </span>
1930
1930
  </div>
1931
1931
  </div>
1932
1932
 
1933
1933
  <ul
1934
- class="pf-v5-c-dual-list-selector__list"
1934
+ class="pf-v6-c-dual-list-selector__list"
1935
1935
  role="group"
1936
1936
  aria-labelledby="-status-text"
1937
1937
  >
1938
1938
  <li
1939
- class="pf-v5-c-dual-list-selector__list-item"
1939
+ class="pf-v6-c-dual-list-selector__list-item"
1940
1940
  role="treeitem"
1941
1941
  >
1942
1942
  <div
1943
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check"
1943
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
1944
1944
  >
1945
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
1946
- <span class="pf-v5-c-dual-list-selector__item-main">
1947
- <span class="pf-v5-c-dual-list-selector__item-check">
1948
- <div class="pf-v5-c-check pf-m-standalone">
1945
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
1946
+ <span class="pf-v6-c-dual-list-selector__item-main">
1947
+ <span class="pf-v6-c-dual-list-selector__item-check">
1948
+ <div class="pf-v6-c-check pf-m-standalone">
1949
1949
  <input
1950
- class="pf-v5-c-check__input"
1950
+ class="pf-v6-c-check__input"
1951
1951
  type="checkbox"
1952
1952
  id="check-5"
1953
1953
  aria-label="Dual list selector item check"
@@ -1955,28 +1955,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1955
1955
  </div>
1956
1956
  </span>
1957
1957
  <span
1958
- class="pf-v5-c-dual-list-selector__item-text"
1958
+ class="pf-v6-c-dual-list-selector__item-text"
1959
1959
  >Light green</span>
1960
1960
  </span>
1961
- <span class="pf-v5-c-dual-list-selector__item-count">
1962
- <span class="pf-v5-c-badge pf-m-read"></span>
1961
+ <span class="pf-v6-c-dual-list-selector__item-count">
1962
+ <span class="pf-v6-c-badge pf-m-read"></span>
1963
1963
  </span>
1964
1964
  </div>
1965
1965
  </div>
1966
1966
  </li>
1967
1967
  <li
1968
- class="pf-v5-c-dual-list-selector__list-item"
1968
+ class="pf-v6-c-dual-list-selector__list-item"
1969
1969
  role="treeitem"
1970
1970
  >
1971
1971
  <div
1972
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check"
1972
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
1973
1973
  >
1974
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
1975
- <span class="pf-v5-c-dual-list-selector__item-main">
1976
- <span class="pf-v5-c-dual-list-selector__item-check">
1977
- <div class="pf-v5-c-check pf-m-standalone">
1974
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
1975
+ <span class="pf-v6-c-dual-list-selector__item-main">
1976
+ <span class="pf-v6-c-dual-list-selector__item-check">
1977
+ <div class="pf-v6-c-check pf-m-standalone">
1978
1978
  <input
1979
- class="pf-v5-c-check__input"
1979
+ class="pf-v6-c-check__input"
1980
1980
  type="checkbox"
1981
1981
  id="check-6"
1982
1982
  aria-label="Dual list selector item check"
@@ -1984,28 +1984,28 @@ cssPrefix: pf-v5-c-dual-list-selector
1984
1984
  </div>
1985
1985
  </span>
1986
1986
  <span
1987
- class="pf-v5-c-dual-list-selector__item-text"
1987
+ class="pf-v6-c-dual-list-selector__item-text"
1988
1988
  >Medium green</span>
1989
1989
  </span>
1990
- <span class="pf-v5-c-dual-list-selector__item-count">
1991
- <span class="pf-v5-c-badge pf-m-read"></span>
1990
+ <span class="pf-v6-c-dual-list-selector__item-count">
1991
+ <span class="pf-v6-c-badge pf-m-read"></span>
1992
1992
  </span>
1993
1993
  </div>
1994
1994
  </div>
1995
1995
  </li>
1996
1996
  <li
1997
- class="pf-v5-c-dual-list-selector__list-item"
1997
+ class="pf-v6-c-dual-list-selector__list-item"
1998
1998
  role="treeitem"
1999
1999
  >
2000
2000
  <div
2001
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check"
2001
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
2002
2002
  >
2003
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2004
- <span class="pf-v5-c-dual-list-selector__item-main">
2005
- <span class="pf-v5-c-dual-list-selector__item-check">
2006
- <div class="pf-v5-c-check pf-m-standalone">
2003
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2004
+ <span class="pf-v6-c-dual-list-selector__item-main">
2005
+ <span class="pf-v6-c-dual-list-selector__item-check">
2006
+ <div class="pf-v6-c-check pf-m-standalone">
2007
2007
  <input
2008
- class="pf-v5-c-check__input"
2008
+ class="pf-v6-c-check__input"
2009
2009
  type="checkbox"
2010
2010
  id="check-7"
2011
2011
  aria-label="Dual list selector item check"
@@ -2013,11 +2013,11 @@ cssPrefix: pf-v5-c-dual-list-selector
2013
2013
  </div>
2014
2014
  </span>
2015
2015
  <span
2016
- class="pf-v5-c-dual-list-selector__item-text"
2016
+ class="pf-v6-c-dual-list-selector__item-text"
2017
2017
  >Dark green</span>
2018
2018
  </span>
2019
- <span class="pf-v5-c-dual-list-selector__item-count">
2020
- <span class="pf-v5-c-badge pf-m-read"></span>
2019
+ <span class="pf-v6-c-dual-list-selector__item-count">
2020
+ <span class="pf-v6-c-badge pf-m-read"></span>
2021
2021
  </span>
2022
2022
  </div>
2023
2023
  </div>
@@ -2028,22 +2028,22 @@ cssPrefix: pf-v5-c-dual-list-selector
2028
2028
  </li>
2029
2029
 
2030
2030
  <li
2031
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable"
2031
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
2032
2032
  aria-expanded="true"
2033
2033
  role="treeitem"
2034
2034
  >
2035
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2036
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2037
- <span class="pf-v5-c-dual-list-selector__item-main">
2038
- <div class="pf-v5-c-dual-list-selector__item-toggle">
2039
- <span class="pf-v5-c-dual-list-selector__item-toggle-icon">
2035
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2036
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2037
+ <span class="pf-v6-c-dual-list-selector__item-main">
2038
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2039
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2040
2040
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2041
2041
  </span>
2042
2042
  </div>
2043
- <span class="pf-v5-c-dual-list-selector__item-check">
2044
- <div class="pf-v5-c-check pf-m-standalone">
2043
+ <span class="pf-v6-c-dual-list-selector__item-check">
2044
+ <div class="pf-v6-c-check pf-m-standalone">
2045
2045
  <input
2046
- class="pf-v5-c-check__input"
2046
+ class="pf-v6-c-check__input"
2047
2047
  type="checkbox"
2048
2048
  id="check-8"
2049
2049
  aria-label="Dual list selector item check"
@@ -2051,24 +2051,24 @@ cssPrefix: pf-v5-c-dual-list-selector
2051
2051
  </div>
2052
2052
  </span>
2053
2053
  <span
2054
- class="pf-v5-c-dual-list-selector__item-text"
2054
+ class="pf-v6-c-dual-list-selector__item-text"
2055
2055
  >Type something</span>
2056
2056
  </span>
2057
- <span class="pf-v5-c-dual-list-selector__item-count">
2058
- <span class="pf-v5-c-badge pf-m-read"></span>
2057
+ <span class="pf-v6-c-dual-list-selector__item-count">
2058
+ <span class="pf-v6-c-badge pf-m-read"></span>
2059
2059
  </span>
2060
2060
  </div>
2061
2061
  </div>
2062
2062
  </li>
2063
2063
 
2064
- <li class="pf-v5-c-dual-list-selector__list-item" role="treeitem">
2065
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2066
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2067
- <span class="pf-v5-c-dual-list-selector__item-main">
2068
- <span class="pf-v5-c-dual-list-selector__item-check">
2069
- <div class="pf-v5-c-check pf-m-standalone">
2064
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2065
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2066
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2067
+ <span class="pf-v6-c-dual-list-selector__item-main">
2068
+ <span class="pf-v6-c-dual-list-selector__item-check">
2069
+ <div class="pf-v6-c-check pf-m-standalone">
2070
2070
  <input
2071
- class="pf-v5-c-check__input"
2071
+ class="pf-v6-c-check__input"
2072
2072
  type="checkbox"
2073
2073
  id="check-9"
2074
2074
  aria-label="Dual list selector item check"
@@ -2076,33 +2076,33 @@ cssPrefix: pf-v5-c-dual-list-selector
2076
2076
  </div>
2077
2077
  </span>
2078
2078
  <span
2079
- class="pf-v5-c-dual-list-selector__item-text"
2079
+ class="pf-v6-c-dual-list-selector__item-text"
2080
2080
  >Type something</span>
2081
2081
  </span>
2082
- <span class="pf-v5-c-dual-list-selector__item-count">
2083
- <span class="pf-v5-c-badge pf-m-read"></span>
2082
+ <span class="pf-v6-c-dual-list-selector__item-count">
2083
+ <span class="pf-v6-c-badge pf-m-read"></span>
2084
2084
  </span>
2085
2085
  </div>
2086
2086
  </div>
2087
2087
  </li>
2088
2088
 
2089
2089
  <li
2090
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable"
2090
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
2091
2091
  aria-expanded="true"
2092
2092
  role="treeitem"
2093
2093
  >
2094
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2095
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2096
- <span class="pf-v5-c-dual-list-selector__item-main">
2097
- <div class="pf-v5-c-dual-list-selector__item-toggle">
2098
- <span class="pf-v5-c-dual-list-selector__item-toggle-icon">
2094
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2095
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2096
+ <span class="pf-v6-c-dual-list-selector__item-main">
2097
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2098
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2099
2099
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2100
2100
  </span>
2101
2101
  </div>
2102
- <span class="pf-v5-c-dual-list-selector__item-check">
2103
- <div class="pf-v5-c-check pf-m-standalone">
2102
+ <span class="pf-v6-c-dual-list-selector__item-check">
2103
+ <div class="pf-v6-c-check pf-m-standalone">
2104
2104
  <input
2105
- class="pf-v5-c-check__input"
2105
+ class="pf-v6-c-check__input"
2106
2106
  type="checkbox"
2107
2107
  id="check-10"
2108
2108
  aria-label="Dual list selector item check"
@@ -2110,11 +2110,11 @@ cssPrefix: pf-v5-c-dual-list-selector
2110
2110
  </div>
2111
2111
  </span>
2112
2112
  <span
2113
- class="pf-v5-c-dual-list-selector__item-text"
2113
+ class="pf-v6-c-dual-list-selector__item-text"
2114
2114
  >Type something</span>
2115
2115
  </span>
2116
- <span class="pf-v5-c-dual-list-selector__item-count">
2117
- <span class="pf-v5-c-badge pf-m-read"></span>
2116
+ <span class="pf-v6-c-dual-list-selector__item-count">
2117
+ <span class="pf-v6-c-badge pf-m-read"></span>
2118
2118
  </span>
2119
2119
  </div>
2120
2120
  </div>
@@ -2122,10 +2122,10 @@ cssPrefix: pf-v5-c-dual-list-selector
2122
2122
  </ul>
2123
2123
  </div>
2124
2124
  </div>
2125
- <div class="pf-v5-c-dual-list-selector__controls">
2126
- <div class="pf-v5-c-dual-list-selector__controls-item">
2125
+ <div class="pf-v6-c-dual-list-selector__controls">
2126
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2127
2127
  <button
2128
- class="pf-v5-c-button pf-m-plain"
2128
+ class="pf-v6-c-button pf-m-plain"
2129
2129
  type="button"
2130
2130
  disabled
2131
2131
  aria-label="Add selected"
@@ -2133,18 +2133,18 @@ cssPrefix: pf-v5-c-dual-list-selector
2133
2133
  <i class="fas fa-fw fa-angle-right"></i>
2134
2134
  </button>
2135
2135
  </div>
2136
- <div class="pf-v5-c-dual-list-selector__controls-item">
2136
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2137
2137
  <button
2138
- class="pf-v5-c-button pf-m-plain"
2138
+ class="pf-v6-c-button pf-m-plain"
2139
2139
  type="button"
2140
2140
  aria-label="Add all"
2141
2141
  >
2142
2142
  <i class="fas fa-fw fa-angle-double-right"></i>
2143
2143
  </button>
2144
2144
  </div>
2145
- <div class="pf-v5-c-dual-list-selector__controls-item">
2145
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2146
2146
  <button
2147
- class="pf-v5-c-button pf-m-plain"
2147
+ class="pf-v6-c-button pf-m-plain"
2148
2148
  type="button"
2149
2149
  disabled
2150
2150
  aria-label="Remove all"
@@ -2152,9 +2152,9 @@ cssPrefix: pf-v5-c-dual-list-selector
2152
2152
  <i class="fas fa-fw fa-angle-double-left"></i>
2153
2153
  </button>
2154
2154
  </div>
2155
- <div class="pf-v5-c-dual-list-selector__controls-item">
2155
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2156
2156
  <button
2157
- class="pf-v5-c-button pf-m-plain"
2157
+ class="pf-v6-c-button pf-m-plain"
2158
2158
  type="button"
2159
2159
  disabled
2160
2160
  aria-label="Remove selected"
@@ -2163,22 +2163,22 @@ cssPrefix: pf-v5-c-dual-list-selector
2163
2163
  </button>
2164
2164
  </div>
2165
2165
  </div>
2166
- <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
2167
- <div class="pf-v5-c-dual-list-selector__header">
2168
- <div class="pf-v5-c-dual-list-selector__title">
2169
- <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
2166
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
2167
+ <div class="pf-v6-c-dual-list-selector__header">
2168
+ <div class="pf-v6-c-dual-list-selector__title">
2169
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
2170
2170
  </div>
2171
2171
  </div>
2172
- <div class="pf-v5-c-dual-list-selector__tools">
2173
- <div class="pf-v5-c-dual-list-selector__tools-filter">
2174
- <div class="pf-v5-c-text-input-group">
2175
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2176
- <span class="pf-v5-c-text-input-group__text">
2177
- <span class="pf-v5-c-text-input-group__icon">
2172
+ <div class="pf-v6-c-dual-list-selector__tools">
2173
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
2174
+ <div class="pf-v6-c-text-input-group">
2175
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2176
+ <span class="pf-v6-c-text-input-group__text">
2177
+ <span class="pf-v6-c-text-input-group__icon">
2178
2178
  <i class="fas fa-fw fa-search"></i>
2179
2179
  </span>
2180
2180
  <input
2181
- class="pf-v5-c-text-input-group__text-input"
2181
+ class="pf-v6-c-text-input-group__text-input"
2182
2182
  type="text"
2183
2183
  value
2184
2184
  aria-label="Search input"
@@ -2187,20 +2187,20 @@ cssPrefix: pf-v5-c-dual-list-selector
2187
2187
  </div>
2188
2188
  </div>
2189
2189
  </div>
2190
- <div class="pf-v5-c-dual-list-selector__tools-actions">
2190
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
2191
2191
  <button
2192
- class="pf-v5-c-button pf-m-plain"
2192
+ class="pf-v6-c-button pf-m-plain"
2193
2193
  type="button"
2194
2194
  aria-label="Sort"
2195
2195
  >
2196
2196
  <i
2197
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
2197
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2198
2198
  aria-hidden="true"
2199
2199
  ></i>
2200
2200
  </button>
2201
- <div class="pf-v5-c-dropdown">
2201
+ <div class="pf-v6-c-dropdown">
2202
2202
  <button
2203
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2203
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
2204
2204
  id="dropdown-kebab-tree-chosen-button"
2205
2205
  aria-expanded="false"
2206
2206
  type="button"
@@ -2209,28 +2209,28 @@ cssPrefix: pf-v5-c-dual-list-selector
2209
2209
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2210
2210
  </button>
2211
2211
  <ul
2212
- class="pf-v5-c-dropdown__menu"
2212
+ class="pf-v6-c-dropdown__menu"
2213
2213
  aria-labelledby="dropdown-kebab-tree-chosen-button"
2214
2214
  hidden
2215
2215
  role="menu"
2216
2216
  >
2217
2217
  <li role="none">
2218
2218
  <a
2219
- class="pf-v5-c-dropdown__menu-item"
2219
+ class="pf-v6-c-dropdown__menu-item"
2220
2220
  role="menuitem"
2221
2221
  href="#"
2222
2222
  >Link</a>
2223
2223
  </li>
2224
2224
  <li role="none">
2225
2225
  <button
2226
- class="pf-v5-c-dropdown__menu-item"
2226
+ class="pf-v6-c-dropdown__menu-item"
2227
2227
  role="menuitem"
2228
2228
  type="button"
2229
2229
  >Action</button>
2230
2230
  </li>
2231
2231
  <li role="none">
2232
2232
  <a
2233
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2233
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2234
2234
  role="menuitem"
2235
2235
  href="#"
2236
2236
  aria-disabled="true"
@@ -2239,16 +2239,16 @@ cssPrefix: pf-v5-c-dual-list-selector
2239
2239
  </li>
2240
2240
  <li role="none">
2241
2241
  <button
2242
- class="pf-v5-c-dropdown__menu-item"
2242
+ class="pf-v6-c-dropdown__menu-item"
2243
2243
  role="menuitem"
2244
2244
  type="button"
2245
2245
  disabled
2246
2246
  >Disabled action</button>
2247
2247
  </li>
2248
- <li class="pf-v5-c-divider" role="separator"></li>
2248
+ <li class="pf-v6-c-divider" role="separator"></li>
2249
2249
  <li role="none">
2250
2250
  <a
2251
- class="pf-v5-c-dropdown__menu-item"
2251
+ class="pf-v6-c-dropdown__menu-item"
2252
2252
  role="menuitem"
2253
2253
  href="#"
2254
2254
  >Separated link</a>
@@ -2257,15 +2257,15 @@ cssPrefix: pf-v5-c-dual-list-selector
2257
2257
  </div>
2258
2258
  </div>
2259
2259
  </div>
2260
- <div class="pf-v5-c-dual-list-selector__status">
2260
+ <div class="pf-v6-c-dual-list-selector__status">
2261
2261
  <span
2262
- class="pf-v5-c-dual-list-selector__status-text"
2262
+ class="pf-v6-c-dual-list-selector__status-text"
2263
2263
  id="tree-chosen-status-text"
2264
2264
  >0 of 0 items selected</span>
2265
2265
  </div>
2266
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
2266
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
2267
2267
  <ul
2268
- class="pf-v5-c-dual-list-selector__list"
2268
+ class="pf-v6-c-dual-list-selector__list"
2269
2269
  role="listbox"
2270
2270
  aria-labelledby="tree-chosen-status-text"
2271
2271
  aria-multiselectable="true"
@@ -2280,23 +2280,23 @@ cssPrefix: pf-v5-c-dual-list-selector
2280
2280
  ### Tree view with chosen and disabled options
2281
2281
 
2282
2282
  ```html
2283
- <div class="pf-v5-c-dual-list-selector">
2284
- <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
2285
- <div class="pf-v5-c-dual-list-selector__header">
2286
- <div class="pf-v5-c-dual-list-selector__title">
2287
- <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
2283
+ <div class="pf-v6-c-dual-list-selector">
2284
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
2285
+ <div class="pf-v6-c-dual-list-selector__header">
2286
+ <div class="pf-v6-c-dual-list-selector__title">
2287
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
2288
2288
  </div>
2289
2289
  </div>
2290
- <div class="pf-v5-c-dual-list-selector__tools">
2291
- <div class="pf-v5-c-dual-list-selector__tools-filter">
2292
- <div class="pf-v5-c-text-input-group">
2293
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2294
- <span class="pf-v5-c-text-input-group__text">
2295
- <span class="pf-v5-c-text-input-group__icon">
2290
+ <div class="pf-v6-c-dual-list-selector__tools">
2291
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
2292
+ <div class="pf-v6-c-text-input-group">
2293
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2294
+ <span class="pf-v6-c-text-input-group__text">
2295
+ <span class="pf-v6-c-text-input-group__icon">
2296
2296
  <i class="fas fa-fw fa-search"></i>
2297
2297
  </span>
2298
2298
  <input
2299
- class="pf-v5-c-text-input-group__text-input"
2299
+ class="pf-v6-c-text-input-group__text-input"
2300
2300
  type="text"
2301
2301
  value
2302
2302
  aria-label="Search input"
@@ -2305,20 +2305,20 @@ cssPrefix: pf-v5-c-dual-list-selector
2305
2305
  </div>
2306
2306
  </div>
2307
2307
  </div>
2308
- <div class="pf-v5-c-dual-list-selector__tools-actions">
2308
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
2309
2309
  <button
2310
- class="pf-v5-c-button pf-m-plain"
2310
+ class="pf-v6-c-button pf-m-plain"
2311
2311
  type="button"
2312
2312
  aria-label="Sort"
2313
2313
  >
2314
2314
  <i
2315
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
2315
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2316
2316
  aria-hidden="true"
2317
2317
  ></i>
2318
2318
  </button>
2319
- <div class="pf-v5-c-dropdown">
2319
+ <div class="pf-v6-c-dropdown">
2320
2320
  <button
2321
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2321
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
2322
2322
  id="dropdown-kebab-tree-options-available-button"
2323
2323
  aria-expanded="false"
2324
2324
  type="button"
@@ -2327,28 +2327,28 @@ cssPrefix: pf-v5-c-dual-list-selector
2327
2327
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2328
2328
  </button>
2329
2329
  <ul
2330
- class="pf-v5-c-dropdown__menu"
2330
+ class="pf-v6-c-dropdown__menu"
2331
2331
  aria-labelledby="dropdown-kebab-tree-options-available-button"
2332
2332
  hidden
2333
2333
  role="menu"
2334
2334
  >
2335
2335
  <li role="none">
2336
2336
  <a
2337
- class="pf-v5-c-dropdown__menu-item"
2337
+ class="pf-v6-c-dropdown__menu-item"
2338
2338
  role="menuitem"
2339
2339
  href="#"
2340
2340
  >Link</a>
2341
2341
  </li>
2342
2342
  <li role="none">
2343
2343
  <button
2344
- class="pf-v5-c-dropdown__menu-item"
2344
+ class="pf-v6-c-dropdown__menu-item"
2345
2345
  role="menuitem"
2346
2346
  type="button"
2347
2347
  >Action</button>
2348
2348
  </li>
2349
2349
  <li role="none">
2350
2350
  <a
2351
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2351
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2352
2352
  role="menuitem"
2353
2353
  href="#"
2354
2354
  aria-disabled="true"
@@ -2357,16 +2357,16 @@ cssPrefix: pf-v5-c-dual-list-selector
2357
2357
  </li>
2358
2358
  <li role="none">
2359
2359
  <button
2360
- class="pf-v5-c-dropdown__menu-item"
2360
+ class="pf-v6-c-dropdown__menu-item"
2361
2361
  role="menuitem"
2362
2362
  type="button"
2363
2363
  disabled
2364
2364
  >Disabled action</button>
2365
2365
  </li>
2366
- <li class="pf-v5-c-divider" role="separator"></li>
2366
+ <li class="pf-v6-c-divider" role="separator"></li>
2367
2367
  <li role="none">
2368
2368
  <a
2369
- class="pf-v5-c-dropdown__menu-item"
2369
+ class="pf-v6-c-dropdown__menu-item"
2370
2370
  role="menuitem"
2371
2371
  href="#"
2372
2372
  >Separated link</a>
@@ -2375,66 +2375,66 @@ cssPrefix: pf-v5-c-dual-list-selector
2375
2375
  </div>
2376
2376
  </div>
2377
2377
  </div>
2378
- <div class="pf-v5-c-dual-list-selector__status">
2378
+ <div class="pf-v6-c-dual-list-selector__status">
2379
2379
  <span
2380
- class="pf-v5-c-dual-list-selector__status-text"
2380
+ class="pf-v6-c-dual-list-selector__status-text"
2381
2381
  id="tree-options-available-status-text"
2382
2382
  >0 of 10 items selected</span>
2383
2383
  </div>
2384
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
2384
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
2385
2385
  <ul
2386
- class="pf-v5-c-dual-list-selector__list"
2386
+ class="pf-v6-c-dual-list-selector__list"
2387
2387
  role="tree"
2388
2388
  aria-labelledby="tree-options-available-status-text"
2389
2389
  aria-multiselectable="true"
2390
2390
  aria-activedescendant
2391
2391
  >
2392
2392
  <li
2393
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
2393
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
2394
2394
  aria-expanded="true"
2395
2395
  role="treeitem"
2396
2396
  >
2397
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2398
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2399
- <span class="pf-v5-c-dual-list-selector__item-main">
2400
- <div class="pf-v5-c-dual-list-selector__item-toggle">
2401
- <span class="pf-v5-c-dual-list-selector__item-toggle-icon">
2397
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2398
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2399
+ <span class="pf-v6-c-dual-list-selector__item-main">
2400
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2401
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2402
2402
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2403
2403
  </span>
2404
2404
  </div>
2405
- <span class="pf-v5-c-dual-list-selector__item-check">
2406
- <div class="pf-v5-c-check pf-m-standalone">
2405
+ <span class="pf-v6-c-dual-list-selector__item-check">
2406
+ <div class="pf-v6-c-check pf-m-standalone">
2407
2407
  <input
2408
- class="pf-v5-c-check__input"
2408
+ class="pf-v6-c-check__input"
2409
2409
  type="checkbox"
2410
2410
  id="check-11"
2411
2411
  aria-label="Dual list selector item check"
2412
2412
  />
2413
2413
  </div>
2414
2414
  </span>
2415
- <span class="pf-v5-c-dual-list-selector__item-text">Colors</span>
2415
+ <span class="pf-v6-c-dual-list-selector__item-text">Colors</span>
2416
2416
  </span>
2417
- <span class="pf-v5-c-dual-list-selector__item-count">
2418
- <span class="pf-v5-c-badge pf-m-read">6</span>
2417
+ <span class="pf-v6-c-dual-list-selector__item-count">
2418
+ <span class="pf-v6-c-badge pf-m-read">6</span>
2419
2419
  </span>
2420
2420
  </div>
2421
2421
  </div>
2422
2422
 
2423
2423
  <ul
2424
- class="pf-v5-c-dual-list-selector__list"
2424
+ class="pf-v6-c-dual-list-selector__list"
2425
2425
  role="group"
2426
2426
  aria-labelledby="-status-text"
2427
2427
  >
2428
- <li class="pf-v5-c-dual-list-selector__list-item" role="treeitem">
2428
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2429
2429
  <div
2430
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
2430
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
2431
2431
  >
2432
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2433
- <span class="pf-v5-c-dual-list-selector__item-main">
2434
- <span class="pf-v5-c-dual-list-selector__item-check">
2435
- <div class="pf-v5-c-check pf-m-standalone">
2432
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2433
+ <span class="pf-v6-c-dual-list-selector__item-main">
2434
+ <span class="pf-v6-c-dual-list-selector__item-check">
2435
+ <div class="pf-v6-c-check pf-m-standalone">
2436
2436
  <input
2437
- class="pf-v5-c-check__input"
2437
+ class="pf-v6-c-check__input"
2438
2438
  type="checkbox"
2439
2439
  id="check-12"
2440
2440
  checked
@@ -2442,55 +2442,55 @@ cssPrefix: pf-v5-c-dual-list-selector
2442
2442
  />
2443
2443
  </div>
2444
2444
  </span>
2445
- <span class="pf-v5-c-dual-list-selector__item-text">Orange</span>
2445
+ <span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
2446
2446
  </span>
2447
- <span class="pf-v5-c-dual-list-selector__item-count">
2448
- <span class="pf-v5-c-badge pf-m-read"></span>
2447
+ <span class="pf-v6-c-dual-list-selector__item-count">
2448
+ <span class="pf-v6-c-badge pf-m-read"></span>
2449
2449
  </span>
2450
2450
  </div>
2451
2451
  </div>
2452
2452
  </li>
2453
- <li class="pf-v5-c-dual-list-selector__list-item" role="treeitem">
2454
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2455
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2456
- <span class="pf-v5-c-dual-list-selector__item-main">
2457
- <span class="pf-v5-c-dual-list-selector__item-check">
2458
- <div class="pf-v5-c-check pf-m-standalone">
2453
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2454
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2455
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2456
+ <span class="pf-v6-c-dual-list-selector__item-main">
2457
+ <span class="pf-v6-c-dual-list-selector__item-check">
2458
+ <div class="pf-v6-c-check pf-m-standalone">
2459
2459
  <input
2460
- class="pf-v5-c-check__input"
2460
+ class="pf-v6-c-check__input"
2461
2461
  type="checkbox"
2462
2462
  id="check-13"
2463
2463
  aria-label="Dual list selector item check"
2464
2464
  />
2465
2465
  </div>
2466
2466
  </span>
2467
- <span class="pf-v5-c-dual-list-selector__item-text">Yellow</span>
2467
+ <span class="pf-v6-c-dual-list-selector__item-text">Yellow</span>
2468
2468
  </span>
2469
- <span class="pf-v5-c-dual-list-selector__item-count">
2470
- <span class="pf-v5-c-badge pf-m-read"></span>
2469
+ <span class="pf-v6-c-dual-list-selector__item-count">
2470
+ <span class="pf-v6-c-badge pf-m-read"></span>
2471
2471
  </span>
2472
2472
  </div>
2473
2473
  </div>
2474
2474
  </li>
2475
2475
  <li
2476
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded pf-m-disabled"
2476
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded pf-m-disabled"
2477
2477
  aria-expanded="true"
2478
2478
  role="treeitem"
2479
2479
  >
2480
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2481
- <div class="pf-v5-c-dual-list-selector__item">
2482
- <span class="pf-v5-c-dual-list-selector__item-main">
2483
- <div class="pf-v5-c-dual-list-selector__item-toggle">
2480
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2481
+ <div class="pf-v6-c-dual-list-selector__item">
2482
+ <span class="pf-v6-c-dual-list-selector__item-main">
2483
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2484
2484
  <span
2485
- class="pf-v5-c-dual-list-selector__item-toggle-icon"
2485
+ class="pf-v6-c-dual-list-selector__item-toggle-icon"
2486
2486
  >
2487
2487
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2488
2488
  </span>
2489
2489
  </div>
2490
- <span class="pf-v5-c-dual-list-selector__item-check">
2491
- <div class="pf-v5-c-check pf-m-standalone">
2490
+ <span class="pf-v6-c-dual-list-selector__item-check">
2491
+ <div class="pf-v6-c-check pf-m-standalone">
2492
2492
  <input
2493
- class="pf-v5-c-check__input"
2493
+ class="pf-v6-c-check__input"
2494
2494
  type="checkbox"
2495
2495
  disabled
2496
2496
  id="check-14"
@@ -2499,33 +2499,33 @@ cssPrefix: pf-v5-c-dual-list-selector
2499
2499
  </div>
2500
2500
  </span>
2501
2501
  <span
2502
- class="pf-v5-c-dual-list-selector__item-text"
2502
+ class="pf-v6-c-dual-list-selector__item-text"
2503
2503
  >Green (disabled)</span>
2504
2504
  </span>
2505
- <span class="pf-v5-c-dual-list-selector__item-count">
2506
- <span class="pf-v5-c-badge pf-m-read"></span>
2505
+ <span class="pf-v6-c-dual-list-selector__item-count">
2506
+ <span class="pf-v6-c-badge pf-m-read"></span>
2507
2507
  </span>
2508
2508
  </div>
2509
2509
  </div>
2510
2510
 
2511
2511
  <ul
2512
- class="pf-v5-c-dual-list-selector__list"
2512
+ class="pf-v6-c-dual-list-selector__list"
2513
2513
  role="group"
2514
2514
  aria-labelledby="-status-text"
2515
2515
  >
2516
2516
  <li
2517
- class="pf-v5-c-dual-list-selector__list-item"
2517
+ class="pf-v6-c-dual-list-selector__list-item"
2518
2518
  role="treeitem"
2519
2519
  >
2520
2520
  <div
2521
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check"
2521
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
2522
2522
  >
2523
- <div class="pf-v5-c-dual-list-selector__item">
2524
- <span class="pf-v5-c-dual-list-selector__item-main">
2525
- <span class="pf-v5-c-dual-list-selector__item-check">
2526
- <div class="pf-v5-c-check pf-m-standalone">
2523
+ <div class="pf-v6-c-dual-list-selector__item">
2524
+ <span class="pf-v6-c-dual-list-selector__item-main">
2525
+ <span class="pf-v6-c-dual-list-selector__item-check">
2526
+ <div class="pf-v6-c-check pf-m-standalone">
2527
2527
  <input
2528
- class="pf-v5-c-check__input"
2528
+ class="pf-v6-c-check__input"
2529
2529
  type="checkbox"
2530
2530
  disabled
2531
2531
  id="check-15"
@@ -2534,28 +2534,28 @@ cssPrefix: pf-v5-c-dual-list-selector
2534
2534
  </div>
2535
2535
  </span>
2536
2536
  <span
2537
- class="pf-v5-c-dual-list-selector__item-text"
2537
+ class="pf-v6-c-dual-list-selector__item-text"
2538
2538
  >Light green</span>
2539
2539
  </span>
2540
- <span class="pf-v5-c-dual-list-selector__item-count">
2541
- <span class="pf-v5-c-badge pf-m-read"></span>
2540
+ <span class="pf-v6-c-dual-list-selector__item-count">
2541
+ <span class="pf-v6-c-badge pf-m-read"></span>
2542
2542
  </span>
2543
2543
  </div>
2544
2544
  </div>
2545
2545
  </li>
2546
2546
  <li
2547
- class="pf-v5-c-dual-list-selector__list-item"
2547
+ class="pf-v6-c-dual-list-selector__list-item"
2548
2548
  role="treeitem"
2549
2549
  >
2550
2550
  <div
2551
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check"
2551
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
2552
2552
  >
2553
- <div class="pf-v5-c-dual-list-selector__item">
2554
- <span class="pf-v5-c-dual-list-selector__item-main">
2555
- <span class="pf-v5-c-dual-list-selector__item-check">
2556
- <div class="pf-v5-c-check pf-m-standalone">
2553
+ <div class="pf-v6-c-dual-list-selector__item">
2554
+ <span class="pf-v6-c-dual-list-selector__item-main">
2555
+ <span class="pf-v6-c-dual-list-selector__item-check">
2556
+ <div class="pf-v6-c-check pf-m-standalone">
2557
2557
  <input
2558
- class="pf-v5-c-check__input"
2558
+ class="pf-v6-c-check__input"
2559
2559
  type="checkbox"
2560
2560
  disabled
2561
2561
  id="check-16"
@@ -2564,28 +2564,28 @@ cssPrefix: pf-v5-c-dual-list-selector
2564
2564
  </div>
2565
2565
  </span>
2566
2566
  <span
2567
- class="pf-v5-c-dual-list-selector__item-text"
2567
+ class="pf-v6-c-dual-list-selector__item-text"
2568
2568
  >Medium green</span>
2569
2569
  </span>
2570
- <span class="pf-v5-c-dual-list-selector__item-count">
2571
- <span class="pf-v5-c-badge pf-m-read"></span>
2570
+ <span class="pf-v6-c-dual-list-selector__item-count">
2571
+ <span class="pf-v6-c-badge pf-m-read"></span>
2572
2572
  </span>
2573
2573
  </div>
2574
2574
  </div>
2575
2575
  </li>
2576
2576
  <li
2577
- class="pf-v5-c-dual-list-selector__list-item"
2577
+ class="pf-v6-c-dual-list-selector__list-item"
2578
2578
  role="treeitem"
2579
2579
  >
2580
2580
  <div
2581
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check"
2581
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
2582
2582
  >
2583
- <div class="pf-v5-c-dual-list-selector__item">
2584
- <span class="pf-v5-c-dual-list-selector__item-main">
2585
- <span class="pf-v5-c-dual-list-selector__item-check">
2586
- <div class="pf-v5-c-check pf-m-standalone">
2583
+ <div class="pf-v6-c-dual-list-selector__item">
2584
+ <span class="pf-v6-c-dual-list-selector__item-main">
2585
+ <span class="pf-v6-c-dual-list-selector__item-check">
2586
+ <div class="pf-v6-c-check pf-m-standalone">
2587
2587
  <input
2588
- class="pf-v5-c-check__input"
2588
+ class="pf-v6-c-check__input"
2589
2589
  type="checkbox"
2590
2590
  disabled
2591
2591
  id="check-17"
@@ -2594,11 +2594,11 @@ cssPrefix: pf-v5-c-dual-list-selector
2594
2594
  </div>
2595
2595
  </span>
2596
2596
  <span
2597
- class="pf-v5-c-dual-list-selector__item-text"
2597
+ class="pf-v6-c-dual-list-selector__item-text"
2598
2598
  >Dark green</span>
2599
2599
  </span>
2600
- <span class="pf-v5-c-dual-list-selector__item-count">
2601
- <span class="pf-v5-c-badge pf-m-read"></span>
2600
+ <span class="pf-v6-c-dual-list-selector__item-count">
2601
+ <span class="pf-v6-c-badge pf-m-read"></span>
2602
2602
  </span>
2603
2603
  </div>
2604
2604
  </div>
@@ -2608,22 +2608,22 @@ cssPrefix: pf-v5-c-dual-list-selector
2608
2608
  </ul>
2609
2609
  </li>
2610
2610
  <li
2611
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable"
2611
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
2612
2612
  aria-expanded="true"
2613
2613
  role="treeitem"
2614
2614
  >
2615
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2616
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2617
- <span class="pf-v5-c-dual-list-selector__item-main">
2618
- <div class="pf-v5-c-dual-list-selector__item-toggle">
2619
- <span class="pf-v5-c-dual-list-selector__item-toggle-icon">
2615
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2616
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2617
+ <span class="pf-v6-c-dual-list-selector__item-main">
2618
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2619
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2620
2620
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2621
2621
  </span>
2622
2622
  </div>
2623
- <span class="pf-v5-c-dual-list-selector__item-check">
2624
- <div class="pf-v5-c-check pf-m-standalone">
2623
+ <span class="pf-v6-c-dual-list-selector__item-check">
2624
+ <div class="pf-v6-c-check pf-m-standalone">
2625
2625
  <input
2626
- class="pf-v5-c-check__input"
2626
+ class="pf-v6-c-check__input"
2627
2627
  type="checkbox"
2628
2628
  id="check-18"
2629
2629
  aria-label="Dual list selector item check"
@@ -2631,23 +2631,23 @@ cssPrefix: pf-v5-c-dual-list-selector
2631
2631
  </div>
2632
2632
  </span>
2633
2633
  <span
2634
- class="pf-v5-c-dual-list-selector__item-text"
2634
+ class="pf-v6-c-dual-list-selector__item-text"
2635
2635
  >Type something</span>
2636
2636
  </span>
2637
- <span class="pf-v5-c-dual-list-selector__item-count">
2638
- <span class="pf-v5-c-badge pf-m-read"></span>
2637
+ <span class="pf-v6-c-dual-list-selector__item-count">
2638
+ <span class="pf-v6-c-badge pf-m-read"></span>
2639
2639
  </span>
2640
2640
  </div>
2641
2641
  </div>
2642
2642
  </li>
2643
- <li class="pf-v5-c-dual-list-selector__list-item" role="treeitem">
2644
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2645
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2646
- <span class="pf-v5-c-dual-list-selector__item-main">
2647
- <span class="pf-v5-c-dual-list-selector__item-check">
2648
- <div class="pf-v5-c-check pf-m-standalone">
2643
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2644
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2645
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2646
+ <span class="pf-v6-c-dual-list-selector__item-main">
2647
+ <span class="pf-v6-c-dual-list-selector__item-check">
2648
+ <div class="pf-v6-c-check pf-m-standalone">
2649
2649
  <input
2650
- class="pf-v5-c-check__input"
2650
+ class="pf-v6-c-check__input"
2651
2651
  type="checkbox"
2652
2652
  id="check-19"
2653
2653
  aria-label="Dual list selector item check"
@@ -2655,32 +2655,32 @@ cssPrefix: pf-v5-c-dual-list-selector
2655
2655
  </div>
2656
2656
  </span>
2657
2657
  <span
2658
- class="pf-v5-c-dual-list-selector__item-text"
2658
+ class="pf-v6-c-dual-list-selector__item-text"
2659
2659
  >Type something</span>
2660
2660
  </span>
2661
- <span class="pf-v5-c-dual-list-selector__item-count">
2662
- <span class="pf-v5-c-badge pf-m-read"></span>
2661
+ <span class="pf-v6-c-dual-list-selector__item-count">
2662
+ <span class="pf-v6-c-badge pf-m-read"></span>
2663
2663
  </span>
2664
2664
  </div>
2665
2665
  </div>
2666
2666
  </li>
2667
2667
  <li
2668
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable"
2668
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
2669
2669
  aria-expanded="true"
2670
2670
  role="treeitem"
2671
2671
  >
2672
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2673
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2674
- <span class="pf-v5-c-dual-list-selector__item-main">
2675
- <div class="pf-v5-c-dual-list-selector__item-toggle">
2676
- <span class="pf-v5-c-dual-list-selector__item-toggle-icon">
2672
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2673
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2674
+ <span class="pf-v6-c-dual-list-selector__item-main">
2675
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2676
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2677
2677
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2678
2678
  </span>
2679
2679
  </div>
2680
- <span class="pf-v5-c-dual-list-selector__item-check">
2681
- <div class="pf-v5-c-check pf-m-standalone">
2680
+ <span class="pf-v6-c-dual-list-selector__item-check">
2681
+ <div class="pf-v6-c-check pf-m-standalone">
2682
2682
  <input
2683
- class="pf-v5-c-check__input"
2683
+ class="pf-v6-c-check__input"
2684
2684
  type="checkbox"
2685
2685
  id="check-20"
2686
2686
  aria-label="Dual list selector item check"
@@ -2688,11 +2688,11 @@ cssPrefix: pf-v5-c-dual-list-selector
2688
2688
  </div>
2689
2689
  </span>
2690
2690
  <span
2691
- class="pf-v5-c-dual-list-selector__item-text"
2691
+ class="pf-v6-c-dual-list-selector__item-text"
2692
2692
  >Type something</span>
2693
2693
  </span>
2694
- <span class="pf-v5-c-dual-list-selector__item-count">
2695
- <span class="pf-v5-c-badge pf-m-read"></span>
2694
+ <span class="pf-v6-c-dual-list-selector__item-count">
2695
+ <span class="pf-v6-c-badge pf-m-read"></span>
2696
2696
  </span>
2697
2697
  </div>
2698
2698
  </div>
@@ -2700,10 +2700,10 @@ cssPrefix: pf-v5-c-dual-list-selector
2700
2700
  </ul>
2701
2701
  </div>
2702
2702
  </div>
2703
- <div class="pf-v5-c-dual-list-selector__controls">
2704
- <div class="pf-v5-c-dual-list-selector__controls-item">
2703
+ <div class="pf-v6-c-dual-list-selector__controls">
2704
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2705
2705
  <button
2706
- class="pf-v5-c-button pf-m-plain"
2706
+ class="pf-v6-c-button pf-m-plain"
2707
2707
  type="button"
2708
2708
  disabled
2709
2709
  aria-label="Add selected"
@@ -2711,18 +2711,18 @@ cssPrefix: pf-v5-c-dual-list-selector
2711
2711
  <i class="fas fa-fw fa-angle-right"></i>
2712
2712
  </button>
2713
2713
  </div>
2714
- <div class="pf-v5-c-dual-list-selector__controls-item">
2714
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2715
2715
  <button
2716
- class="pf-v5-c-button pf-m-plain"
2716
+ class="pf-v6-c-button pf-m-plain"
2717
2717
  type="button"
2718
2718
  aria-label="Add all"
2719
2719
  >
2720
2720
  <i class="fas fa-fw fa-angle-double-right"></i>
2721
2721
  </button>
2722
2722
  </div>
2723
- <div class="pf-v5-c-dual-list-selector__controls-item">
2723
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2724
2724
  <button
2725
- class="pf-v5-c-button pf-m-plain"
2725
+ class="pf-v6-c-button pf-m-plain"
2726
2726
  type="button"
2727
2727
  disabled
2728
2728
  aria-label="Remove all"
@@ -2730,9 +2730,9 @@ cssPrefix: pf-v5-c-dual-list-selector
2730
2730
  <i class="fas fa-fw fa-angle-double-left"></i>
2731
2731
  </button>
2732
2732
  </div>
2733
- <div class="pf-v5-c-dual-list-selector__controls-item">
2733
+ <div class="pf-v6-c-dual-list-selector__controls-item">
2734
2734
  <button
2735
- class="pf-v5-c-button pf-m-plain"
2735
+ class="pf-v6-c-button pf-m-plain"
2736
2736
  type="button"
2737
2737
  disabled
2738
2738
  aria-label="Remove selected"
@@ -2741,22 +2741,22 @@ cssPrefix: pf-v5-c-dual-list-selector
2741
2741
  </button>
2742
2742
  </div>
2743
2743
  </div>
2744
- <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
2745
- <div class="pf-v5-c-dual-list-selector__header">
2746
- <div class="pf-v5-c-dual-list-selector__title">
2747
- <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
2744
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
2745
+ <div class="pf-v6-c-dual-list-selector__header">
2746
+ <div class="pf-v6-c-dual-list-selector__title">
2747
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
2748
2748
  </div>
2749
2749
  </div>
2750
- <div class="pf-v5-c-dual-list-selector__tools">
2751
- <div class="pf-v5-c-dual-list-selector__tools-filter">
2752
- <div class="pf-v5-c-text-input-group">
2753
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2754
- <span class="pf-v5-c-text-input-group__text">
2755
- <span class="pf-v5-c-text-input-group__icon">
2750
+ <div class="pf-v6-c-dual-list-selector__tools">
2751
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
2752
+ <div class="pf-v6-c-text-input-group">
2753
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2754
+ <span class="pf-v6-c-text-input-group__text">
2755
+ <span class="pf-v6-c-text-input-group__icon">
2756
2756
  <i class="fas fa-fw fa-search"></i>
2757
2757
  </span>
2758
2758
  <input
2759
- class="pf-v5-c-text-input-group__text-input"
2759
+ class="pf-v6-c-text-input-group__text-input"
2760
2760
  type="text"
2761
2761
  value
2762
2762
  aria-label="Search input"
@@ -2765,20 +2765,20 @@ cssPrefix: pf-v5-c-dual-list-selector
2765
2765
  </div>
2766
2766
  </div>
2767
2767
  </div>
2768
- <div class="pf-v5-c-dual-list-selector__tools-actions">
2768
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
2769
2769
  <button
2770
- class="pf-v5-c-button pf-m-plain"
2770
+ class="pf-v6-c-button pf-m-plain"
2771
2771
  type="button"
2772
2772
  aria-label="Sort"
2773
2773
  >
2774
2774
  <i
2775
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
2775
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2776
2776
  aria-hidden="true"
2777
2777
  ></i>
2778
2778
  </button>
2779
- <div class="pf-v5-c-dropdown">
2779
+ <div class="pf-v6-c-dropdown">
2780
2780
  <button
2781
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2781
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
2782
2782
  id="dropdown-kebab-tree-options-chosen-button"
2783
2783
  aria-expanded="false"
2784
2784
  type="button"
@@ -2787,28 +2787,28 @@ cssPrefix: pf-v5-c-dual-list-selector
2787
2787
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2788
2788
  </button>
2789
2789
  <ul
2790
- class="pf-v5-c-dropdown__menu"
2790
+ class="pf-v6-c-dropdown__menu"
2791
2791
  aria-labelledby="dropdown-kebab-tree-options-chosen-button"
2792
2792
  hidden
2793
2793
  role="menu"
2794
2794
  >
2795
2795
  <li role="none">
2796
2796
  <a
2797
- class="pf-v5-c-dropdown__menu-item"
2797
+ class="pf-v6-c-dropdown__menu-item"
2798
2798
  role="menuitem"
2799
2799
  href="#"
2800
2800
  >Link</a>
2801
2801
  </li>
2802
2802
  <li role="none">
2803
2803
  <button
2804
- class="pf-v5-c-dropdown__menu-item"
2804
+ class="pf-v6-c-dropdown__menu-item"
2805
2805
  role="menuitem"
2806
2806
  type="button"
2807
2807
  >Action</button>
2808
2808
  </li>
2809
2809
  <li role="none">
2810
2810
  <a
2811
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2811
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2812
2812
  role="menuitem"
2813
2813
  href="#"
2814
2814
  aria-disabled="true"
@@ -2817,16 +2817,16 @@ cssPrefix: pf-v5-c-dual-list-selector
2817
2817
  </li>
2818
2818
  <li role="none">
2819
2819
  <button
2820
- class="pf-v5-c-dropdown__menu-item"
2820
+ class="pf-v6-c-dropdown__menu-item"
2821
2821
  role="menuitem"
2822
2822
  type="button"
2823
2823
  disabled
2824
2824
  >Disabled action</button>
2825
2825
  </li>
2826
- <li class="pf-v5-c-divider" role="separator"></li>
2826
+ <li class="pf-v6-c-divider" role="separator"></li>
2827
2827
  <li role="none">
2828
2828
  <a
2829
- class="pf-v5-c-dropdown__menu-item"
2829
+ class="pf-v6-c-dropdown__menu-item"
2830
2830
  role="menuitem"
2831
2831
  href="#"
2832
2832
  >Separated link</a>
@@ -2835,66 +2835,66 @@ cssPrefix: pf-v5-c-dual-list-selector
2835
2835
  </div>
2836
2836
  </div>
2837
2837
  </div>
2838
- <div class="pf-v5-c-dual-list-selector__status">
2838
+ <div class="pf-v6-c-dual-list-selector__status">
2839
2839
  <span
2840
- class="pf-v5-c-dual-list-selector__status-text"
2840
+ class="pf-v6-c-dual-list-selector__status-text"
2841
2841
  id="tree-options-chosen-status-text"
2842
2842
  >0 of 0 items selected</span>
2843
2843
  </div>
2844
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
2844
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
2845
2845
  <ul
2846
- class="pf-v5-c-dual-list-selector__list"
2846
+ class="pf-v6-c-dual-list-selector__list"
2847
2847
  role="tree"
2848
2848
  aria-labelledby="tree-options-chosen-status-text"
2849
2849
  aria-multiselectable="true"
2850
2850
  aria-activedescendant
2851
2851
  >
2852
2852
  <li
2853
- class="pf-v5-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
2853
+ class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
2854
2854
  aria-expanded="true"
2855
2855
  role="treeitem"
2856
2856
  >
2857
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-check">
2858
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2859
- <span class="pf-v5-c-dual-list-selector__item-main">
2860
- <div class="pf-v5-c-dual-list-selector__item-toggle">
2861
- <span class="pf-v5-c-dual-list-selector__item-toggle-icon">
2857
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
2858
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2859
+ <span class="pf-v6-c-dual-list-selector__item-main">
2860
+ <div class="pf-v6-c-dual-list-selector__item-toggle">
2861
+ <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
2862
2862
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2863
2863
  </span>
2864
2864
  </div>
2865
- <span class="pf-v5-c-dual-list-selector__item-check">
2866
- <div class="pf-v5-c-check pf-m-standalone">
2865
+ <span class="pf-v6-c-dual-list-selector__item-check">
2866
+ <div class="pf-v6-c-check pf-m-standalone">
2867
2867
  <input
2868
- class="pf-v5-c-check__input"
2868
+ class="pf-v6-c-check__input"
2869
2869
  type="checkbox"
2870
2870
  id="check-21"
2871
2871
  aria-label="Dual list selector item check"
2872
2872
  />
2873
2873
  </div>
2874
2874
  </span>
2875
- <span class="pf-v5-c-dual-list-selector__item-text">Colors</span>
2875
+ <span class="pf-v6-c-dual-list-selector__item-text">Colors</span>
2876
2876
  </span>
2877
- <span class="pf-v5-c-dual-list-selector__item-count">
2878
- <span class="pf-v5-c-badge pf-m-read"></span>
2877
+ <span class="pf-v6-c-dual-list-selector__item-count">
2878
+ <span class="pf-v6-c-badge pf-m-read"></span>
2879
2879
  </span>
2880
2880
  </div>
2881
2881
  </div>
2882
2882
 
2883
2883
  <ul
2884
- class="pf-v5-c-dual-list-selector__list"
2884
+ class="pf-v6-c-dual-list-selector__list"
2885
2885
  role="group"
2886
2886
  aria-labelledby="-status-text"
2887
2887
  >
2888
- <li class="pf-v5-c-dual-list-selector__list-item" role="treeitem">
2888
+ <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
2889
2889
  <div
2890
- class="pf-v5-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
2890
+ class="pf-v6-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
2891
2891
  >
2892
- <div class="pf-v5-c-dual-list-selector__item" tabindex="0">
2893
- <span class="pf-v5-c-dual-list-selector__item-main">
2894
- <span class="pf-v5-c-dual-list-selector__item-check">
2895
- <div class="pf-v5-c-check pf-m-standalone">
2892
+ <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
2893
+ <span class="pf-v6-c-dual-list-selector__item-main">
2894
+ <span class="pf-v6-c-dual-list-selector__item-check">
2895
+ <div class="pf-v6-c-check pf-m-standalone">
2896
2896
  <input
2897
- class="pf-v5-c-check__input"
2897
+ class="pf-v6-c-check__input"
2898
2898
  type="checkbox"
2899
2899
  id="check-22"
2900
2900
  checked
@@ -2902,10 +2902,10 @@ cssPrefix: pf-v5-c-dual-list-selector
2902
2902
  />
2903
2903
  </div>
2904
2904
  </span>
2905
- <span class="pf-v5-c-dual-list-selector__item-text">Orange</span>
2905
+ <span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
2906
2906
  </span>
2907
- <span class="pf-v5-c-dual-list-selector__item-count">
2908
- <span class="pf-v5-c-badge pf-m-read"></span>
2907
+ <span class="pf-v6-c-dual-list-selector__item-count">
2908
+ <span class="pf-v6-c-badge pf-m-read"></span>
2909
2909
  </span>
2910
2910
  </div>
2911
2911
  </div>
@@ -2925,23 +2925,23 @@ cssPrefix: pf-v5-c-dual-list-selector
2925
2925
  <div
2926
2926
  id="draggable-help"
2927
2927
  >Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</div>
2928
- <div class="pf-v5-c-dual-list-selector">
2929
- <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
2930
- <div class="pf-v5-c-dual-list-selector__header">
2931
- <div class="pf-v5-c-dual-list-selector__title">
2932
- <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
2928
+ <div class="pf-v6-c-dual-list-selector">
2929
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
2930
+ <div class="pf-v6-c-dual-list-selector__header">
2931
+ <div class="pf-v6-c-dual-list-selector__title">
2932
+ <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
2933
2933
  </div>
2934
2934
  </div>
2935
- <div class="pf-v5-c-dual-list-selector__tools">
2936
- <div class="pf-v5-c-dual-list-selector__tools-filter">
2937
- <div class="pf-v5-c-text-input-group">
2938
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2939
- <span class="pf-v5-c-text-input-group__text">
2940
- <span class="pf-v5-c-text-input-group__icon">
2935
+ <div class="pf-v6-c-dual-list-selector__tools">
2936
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
2937
+ <div class="pf-v6-c-text-input-group">
2938
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2939
+ <span class="pf-v6-c-text-input-group__text">
2940
+ <span class="pf-v6-c-text-input-group__icon">
2941
2941
  <i class="fas fa-fw fa-search"></i>
2942
2942
  </span>
2943
2943
  <input
2944
- class="pf-v5-c-text-input-group__text-input"
2944
+ class="pf-v6-c-text-input-group__text-input"
2945
2945
  type="text"
2946
2946
  value
2947
2947
  aria-label="Search input"
@@ -2950,20 +2950,20 @@ cssPrefix: pf-v5-c-dual-list-selector
2950
2950
  </div>
2951
2951
  </div>
2952
2952
  </div>
2953
- <div class="pf-v5-c-dual-list-selector__tools-actions">
2953
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
2954
2954
  <button
2955
- class="pf-v5-c-button pf-m-plain"
2955
+ class="pf-v6-c-button pf-m-plain"
2956
2956
  type="button"
2957
2957
  aria-label="Sort"
2958
2958
  >
2959
2959
  <i
2960
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
2960
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2961
2961
  aria-hidden="true"
2962
2962
  ></i>
2963
2963
  </button>
2964
- <div class="pf-v5-c-dropdown">
2964
+ <div class="pf-v6-c-dropdown">
2965
2965
  <button
2966
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2966
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
2967
2967
  id="dropdown-kebab-draggable-available-button"
2968
2968
  aria-expanded="false"
2969
2969
  type="button"
@@ -2972,28 +2972,28 @@ cssPrefix: pf-v5-c-dual-list-selector
2972
2972
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2973
2973
  </button>
2974
2974
  <ul
2975
- class="pf-v5-c-dropdown__menu"
2975
+ class="pf-v6-c-dropdown__menu"
2976
2976
  aria-labelledby="dropdown-kebab-draggable-available-button"
2977
2977
  hidden
2978
2978
  role="menu"
2979
2979
  >
2980
2980
  <li role="none">
2981
2981
  <a
2982
- class="pf-v5-c-dropdown__menu-item"
2982
+ class="pf-v6-c-dropdown__menu-item"
2983
2983
  role="menuitem"
2984
2984
  href="#"
2985
2985
  >Link</a>
2986
2986
  </li>
2987
2987
  <li role="none">
2988
2988
  <button
2989
- class="pf-v5-c-dropdown__menu-item"
2989
+ class="pf-v6-c-dropdown__menu-item"
2990
2990
  role="menuitem"
2991
2991
  type="button"
2992
2992
  >Action</button>
2993
2993
  </li>
2994
2994
  <li role="none">
2995
2995
  <a
2996
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2996
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2997
2997
  role="menuitem"
2998
2998
  href="#"
2999
2999
  aria-disabled="true"
@@ -3002,16 +3002,16 @@ cssPrefix: pf-v5-c-dual-list-selector
3002
3002
  </li>
3003
3003
  <li role="none">
3004
3004
  <button
3005
- class="pf-v5-c-dropdown__menu-item"
3005
+ class="pf-v6-c-dropdown__menu-item"
3006
3006
  role="menuitem"
3007
3007
  type="button"
3008
3008
  disabled
3009
3009
  >Disabled action</button>
3010
3010
  </li>
3011
- <li class="pf-v5-c-divider" role="separator"></li>
3011
+ <li class="pf-v6-c-divider" role="separator"></li>
3012
3012
  <li role="none">
3013
3013
  <a
3014
- class="pf-v5-c-dropdown__menu-item"
3014
+ class="pf-v6-c-dropdown__menu-item"
3015
3015
  role="menuitem"
3016
3016
  href="#"
3017
3017
  >Separated link</a>
@@ -3020,52 +3020,52 @@ cssPrefix: pf-v5-c-dual-list-selector
3020
3020
  </div>
3021
3021
  </div>
3022
3022
  </div>
3023
- <div class="pf-v5-c-dual-list-selector__status">
3023
+ <div class="pf-v6-c-dual-list-selector__status">
3024
3024
  <span
3025
- class="pf-v5-c-dual-list-selector__status-text"
3025
+ class="pf-v6-c-dual-list-selector__status-text"
3026
3026
  id="draggable-available-status-text"
3027
3027
  >0 of 5 items selected</span>
3028
3028
  </div>
3029
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
3029
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
3030
3030
  <ul
3031
- class="pf-v5-c-dual-list-selector__list"
3031
+ class="pf-v6-c-dual-list-selector__list"
3032
3032
  role="listbox"
3033
3033
  aria-labelledby="draggable-available-status-text"
3034
3034
  aria-multiselectable="true"
3035
3035
  aria-activedescendant
3036
3036
  >
3037
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
3038
- <div class="pf-v5-c-dual-list-selector__list-item-row">
3039
- <span class="pf-v5-c-dual-list-selector__item">
3040
- <span class="pf-v5-c-dual-list-selector__item-main">
3041
- <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
3037
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
3038
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
3039
+ <span class="pf-v6-c-dual-list-selector__item">
3040
+ <span class="pf-v6-c-dual-list-selector__item-main">
3041
+ <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
3042
3042
  </span>
3043
- <span class="pf-v5-c-dual-list-selector__item-count">
3044
- <span class="pf-v5-c-badge pf-m-read"></span>
3043
+ <span class="pf-v6-c-dual-list-selector__item-count">
3044
+ <span class="pf-v6-c-badge pf-m-read"></span>
3045
3045
  </span>
3046
3046
  </span>
3047
3047
  </div>
3048
3048
  </li>
3049
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
3050
- <div class="pf-v5-c-dual-list-selector__list-item-row">
3051
- <span class="pf-v5-c-dual-list-selector__item">
3052
- <span class="pf-v5-c-dual-list-selector__item-main">
3053
- <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
3049
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
3050
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
3051
+ <span class="pf-v6-c-dual-list-selector__item">
3052
+ <span class="pf-v6-c-dual-list-selector__item-main">
3053
+ <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
3054
3054
  </span>
3055
- <span class="pf-v5-c-dual-list-selector__item-count">
3056
- <span class="pf-v5-c-badge pf-m-read"></span>
3055
+ <span class="pf-v6-c-dual-list-selector__item-count">
3056
+ <span class="pf-v6-c-badge pf-m-read"></span>
3057
3057
  </span>
3058
3058
  </span>
3059
3059
  </div>
3060
3060
  </li>
3061
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
3062
- <div class="pf-v5-c-dual-list-selector__list-item-row">
3063
- <span class="pf-v5-c-dual-list-selector__item">
3064
- <span class="pf-v5-c-dual-list-selector__item-main">
3065
- <span class="pf-v5-c-dual-list-selector__item-text">Item6</span>
3061
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
3062
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
3063
+ <span class="pf-v6-c-dual-list-selector__item">
3064
+ <span class="pf-v6-c-dual-list-selector__item-main">
3065
+ <span class="pf-v6-c-dual-list-selector__item-text">Item6</span>
3066
3066
  </span>
3067
- <span class="pf-v5-c-dual-list-selector__item-count">
3068
- <span class="pf-v5-c-badge pf-m-read"></span>
3067
+ <span class="pf-v6-c-dual-list-selector__item-count">
3068
+ <span class="pf-v6-c-badge pf-m-read"></span>
3069
3069
  </span>
3070
3070
  </span>
3071
3071
  </div>
@@ -3073,10 +3073,10 @@ cssPrefix: pf-v5-c-dual-list-selector
3073
3073
  </ul>
3074
3074
  </div>
3075
3075
  </div>
3076
- <div class="pf-v5-c-dual-list-selector__controls">
3077
- <div class="pf-v5-c-dual-list-selector__controls-item">
3076
+ <div class="pf-v6-c-dual-list-selector__controls">
3077
+ <div class="pf-v6-c-dual-list-selector__controls-item">
3078
3078
  <button
3079
- class="pf-v5-c-button pf-m-plain"
3079
+ class="pf-v6-c-button pf-m-plain"
3080
3080
  type="button"
3081
3081
  disabled
3082
3082
  aria-label="Add selected"
@@ -3084,18 +3084,18 @@ cssPrefix: pf-v5-c-dual-list-selector
3084
3084
  <i class="fas fa-fw fa-angle-right"></i>
3085
3085
  </button>
3086
3086
  </div>
3087
- <div class="pf-v5-c-dual-list-selector__controls-item">
3087
+ <div class="pf-v6-c-dual-list-selector__controls-item">
3088
3088
  <button
3089
- class="pf-v5-c-button pf-m-plain"
3089
+ class="pf-v6-c-button pf-m-plain"
3090
3090
  type="button"
3091
3091
  aria-label="Add all"
3092
3092
  >
3093
3093
  <i class="fas fa-fw fa-angle-double-right"></i>
3094
3094
  </button>
3095
3095
  </div>
3096
- <div class="pf-v5-c-dual-list-selector__controls-item">
3096
+ <div class="pf-v6-c-dual-list-selector__controls-item">
3097
3097
  <button
3098
- class="pf-v5-c-button pf-m-plain"
3098
+ class="pf-v6-c-button pf-m-plain"
3099
3099
  type="button"
3100
3100
  disabled
3101
3101
  aria-label="Remove all"
@@ -3103,9 +3103,9 @@ cssPrefix: pf-v5-c-dual-list-selector
3103
3103
  <i class="fas fa-fw fa-angle-double-left"></i>
3104
3104
  </button>
3105
3105
  </div>
3106
- <div class="pf-v5-c-dual-list-selector__controls-item">
3106
+ <div class="pf-v6-c-dual-list-selector__controls-item">
3107
3107
  <button
3108
- class="pf-v5-c-button pf-m-plain"
3108
+ class="pf-v6-c-button pf-m-plain"
3109
3109
  type="button"
3110
3110
  disabled
3111
3111
  aria-label="Remove selected"
@@ -3114,22 +3114,22 @@ cssPrefix: pf-v5-c-dual-list-selector
3114
3114
  </button>
3115
3115
  </div>
3116
3116
  </div>
3117
- <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
3118
- <div class="pf-v5-c-dual-list-selector__header">
3119
- <div class="pf-v5-c-dual-list-selector__title">
3120
- <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
3117
+ <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
3118
+ <div class="pf-v6-c-dual-list-selector__header">
3119
+ <div class="pf-v6-c-dual-list-selector__title">
3120
+ <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
3121
3121
  </div>
3122
3122
  </div>
3123
- <div class="pf-v5-c-dual-list-selector__tools">
3124
- <div class="pf-v5-c-dual-list-selector__tools-filter">
3125
- <div class="pf-v5-c-text-input-group">
3126
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
3127
- <span class="pf-v5-c-text-input-group__text">
3128
- <span class="pf-v5-c-text-input-group__icon">
3123
+ <div class="pf-v6-c-dual-list-selector__tools">
3124
+ <div class="pf-v6-c-dual-list-selector__tools-filter">
3125
+ <div class="pf-v6-c-text-input-group">
3126
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
3127
+ <span class="pf-v6-c-text-input-group__text">
3128
+ <span class="pf-v6-c-text-input-group__icon">
3129
3129
  <i class="fas fa-fw fa-search"></i>
3130
3130
  </span>
3131
3131
  <input
3132
- class="pf-v5-c-text-input-group__text-input"
3132
+ class="pf-v6-c-text-input-group__text-input"
3133
3133
  type="text"
3134
3134
  value
3135
3135
  aria-label="Search input"
@@ -3138,20 +3138,20 @@ cssPrefix: pf-v5-c-dual-list-selector
3138
3138
  </div>
3139
3139
  </div>
3140
3140
  </div>
3141
- <div class="pf-v5-c-dual-list-selector__tools-actions">
3141
+ <div class="pf-v6-c-dual-list-selector__tools-actions">
3142
3142
  <button
3143
- class="pf-v5-c-button pf-m-plain"
3143
+ class="pf-v6-c-button pf-m-plain"
3144
3144
  type="button"
3145
3145
  aria-label="Sort"
3146
3146
  >
3147
3147
  <i
3148
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
3148
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
3149
3149
  aria-hidden="true"
3150
3150
  ></i>
3151
3151
  </button>
3152
- <div class="pf-v5-c-dropdown">
3152
+ <div class="pf-v6-c-dropdown">
3153
3153
  <button
3154
- class="pf-v5-c-dropdown__toggle pf-m-plain"
3154
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
3155
3155
  id="dropdown-kebab-draggable-chosen-button"
3156
3156
  aria-expanded="false"
3157
3157
  type="button"
@@ -3160,28 +3160,28 @@ cssPrefix: pf-v5-c-dual-list-selector
3160
3160
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3161
3161
  </button>
3162
3162
  <ul
3163
- class="pf-v5-c-dropdown__menu"
3163
+ class="pf-v6-c-dropdown__menu"
3164
3164
  aria-labelledby="dropdown-kebab-draggable-chosen-button"
3165
3165
  hidden
3166
3166
  role="menu"
3167
3167
  >
3168
3168
  <li role="none">
3169
3169
  <a
3170
- class="pf-v5-c-dropdown__menu-item"
3170
+ class="pf-v6-c-dropdown__menu-item"
3171
3171
  role="menuitem"
3172
3172
  href="#"
3173
3173
  >Link</a>
3174
3174
  </li>
3175
3175
  <li role="none">
3176
3176
  <button
3177
- class="pf-v5-c-dropdown__menu-item"
3177
+ class="pf-v6-c-dropdown__menu-item"
3178
3178
  role="menuitem"
3179
3179
  type="button"
3180
3180
  >Action</button>
3181
3181
  </li>
3182
3182
  <li role="none">
3183
3183
  <a
3184
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
3184
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
3185
3185
  role="menuitem"
3186
3186
  href="#"
3187
3187
  aria-disabled="true"
@@ -3190,16 +3190,16 @@ cssPrefix: pf-v5-c-dual-list-selector
3190
3190
  </li>
3191
3191
  <li role="none">
3192
3192
  <button
3193
- class="pf-v5-c-dropdown__menu-item"
3193
+ class="pf-v6-c-dropdown__menu-item"
3194
3194
  role="menuitem"
3195
3195
  type="button"
3196
3196
  disabled
3197
3197
  >Disabled action</button>
3198
3198
  </li>
3199
- <li class="pf-v5-c-divider" role="separator"></li>
3199
+ <li class="pf-v6-c-divider" role="separator"></li>
3200
3200
  <li role="none">
3201
3201
  <a
3202
- class="pf-v5-c-dropdown__menu-item"
3202
+ class="pf-v6-c-dropdown__menu-item"
3203
3203
  role="menuitem"
3204
3204
  href="#"
3205
3205
  >Separated link</a>
@@ -3208,96 +3208,96 @@ cssPrefix: pf-v5-c-dual-list-selector
3208
3208
  </div>
3209
3209
  </div>
3210
3210
  </div>
3211
- <div class="pf-v5-c-dual-list-selector__status">
3211
+ <div class="pf-v6-c-dual-list-selector__status">
3212
3212
  <span
3213
- class="pf-v5-c-dual-list-selector__status-text"
3213
+ class="pf-v6-c-dual-list-selector__status-text"
3214
3214
  id="draggable-chosen-status-text"
3215
3215
  >0 of 0 items selected</span>
3216
3216
  </div>
3217
- <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
3217
+ <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
3218
3218
  <ul
3219
- class="pf-v5-c-dual-list-selector__list"
3219
+ class="pf-v6-c-dual-list-selector__list"
3220
3220
  role="listbox"
3221
3221
  aria-labelledby="draggable-chosen-status-text"
3222
3222
  aria-multiselectable="true"
3223
3223
  aria-activedescendant
3224
3224
  >
3225
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
3226
- <div class="pf-v5-c-dual-list-selector__list-item-row">
3227
- <div class="pf-v5-c-dual-list-selector__draggable">
3228
- <span class="pf-v5-c-button pf-m-plain pf-m-disabled">
3225
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
3226
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
3227
+ <div class="pf-v6-c-dual-list-selector__draggable">
3228
+ <span class="pf-v6-c-button pf-m-plain pf-m-disabled">
3229
3229
  <i class="fas fa-grip-vertical" aria-hidden="true"></i>
3230
3230
  </span>
3231
3231
  </div>
3232
- <span class="pf-v5-c-dual-list-selector__item">
3233
- <span class="pf-v5-c-dual-list-selector__item-main">
3232
+ <span class="pf-v6-c-dual-list-selector__item">
3233
+ <span class="pf-v6-c-dual-list-selector__item-main">
3234
3234
  <span
3235
- class="pf-v5-c-dual-list-selector__item-text"
3235
+ class="pf-v6-c-dual-list-selector__item-text"
3236
3236
  id="draggable-list-item-2-item-text"
3237
3237
  >Item2 - draggable icon disabled</span>
3238
3238
  </span>
3239
- <span class="pf-v5-c-dual-list-selector__item-count">
3240
- <span class="pf-v5-c-badge pf-m-read"></span>
3239
+ <span class="pf-v6-c-dual-list-selector__item-count">
3240
+ <span class="pf-v6-c-badge pf-m-read"></span>
3241
3241
  </span>
3242
3242
  </span>
3243
3243
  </div>
3244
3244
  </li>
3245
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
3246
- <div class="pf-v5-c-dual-list-selector__list-item-row">
3247
- <div class="pf-v5-c-dual-list-selector__draggable">
3248
- <span class="pf-v5-c-button pf-m-plain">
3245
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
3246
+ <div class="pf-v6-c-dual-list-selector__list-item-row">
3247
+ <div class="pf-v6-c-dual-list-selector__draggable">
3248
+ <span class="pf-v6-c-button pf-m-plain">
3249
3249
  <i class="fas fa-grip-vertical" aria-hidden="true"></i>
3250
3250
  </span>
3251
3251
  </div>
3252
- <span class="pf-v5-c-dual-list-selector__item">
3253
- <span class="pf-v5-c-dual-list-selector__item-main">
3252
+ <span class="pf-v6-c-dual-list-selector__item">
3253
+ <span class="pf-v6-c-dual-list-selector__item-main">
3254
3254
  <span
3255
- class="pf-v5-c-dual-list-selector__item-text"
3255
+ class="pf-v6-c-dual-list-selector__item-text"
3256
3256
  id="draggable-list-item-3-item-text"
3257
3257
  >Item3</span>
3258
3258
  </span>
3259
- <span class="pf-v5-c-dual-list-selector__item-count">
3260
- <span class="pf-v5-c-badge pf-m-read"></span>
3259
+ <span class="pf-v6-c-dual-list-selector__item-count">
3260
+ <span class="pf-v6-c-badge pf-m-read"></span>
3261
3261
  </span>
3262
3262
  </span>
3263
3263
  </div>
3264
3264
  </li>
3265
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
3266
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-ghost-row">
3267
- <div class="pf-v5-c-dual-list-selector__draggable">
3268
- <span class="pf-v5-c-button pf-m-plain pf-m-disabled">
3265
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
3266
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-ghost-row">
3267
+ <div class="pf-v6-c-dual-list-selector__draggable">
3268
+ <span class="pf-v6-c-button pf-m-plain pf-m-disabled">
3269
3269
  <i class="fas fa-grip-vertical" aria-hidden="true"></i>
3270
3270
  </span>
3271
3271
  </div>
3272
- <span class="pf-v5-c-dual-list-selector__item">
3273
- <span class="pf-v5-c-dual-list-selector__item-main">
3272
+ <span class="pf-v6-c-dual-list-selector__item">
3273
+ <span class="pf-v6-c-dual-list-selector__item-main">
3274
3274
  <span
3275
- class="pf-v5-c-dual-list-selector__item-text"
3275
+ class="pf-v6-c-dual-list-selector__item-text"
3276
3276
  id="draggable-list-item-5-item-text"
3277
3277
  >Item5 - ghost row</span>
3278
3278
  </span>
3279
- <span class="pf-v5-c-dual-list-selector__item-count">
3280
- <span class="pf-v5-c-badge pf-m-read"></span>
3279
+ <span class="pf-v6-c-dual-list-selector__item-count">
3280
+ <span class="pf-v6-c-badge pf-m-read"></span>
3281
3281
  </span>
3282
3282
  </span>
3283
3283
  </div>
3284
3284
  </li>
3285
- <li class="pf-v5-c-dual-list-selector__list-item" role="option">
3286
- <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
3287
- <div class="pf-v5-c-dual-list-selector__draggable">
3288
- <span class="pf-v5-c-button pf-m-plain">
3285
+ <li class="pf-v6-c-dual-list-selector__list-item" role="option">
3286
+ <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
3287
+ <div class="pf-v6-c-dual-list-selector__draggable">
3288
+ <span class="pf-v6-c-button pf-m-plain">
3289
3289
  <i class="fas fa-grip-vertical" aria-hidden="true"></i>
3290
3290
  </span>
3291
3291
  </div>
3292
- <span class="pf-v5-c-dual-list-selector__item">
3293
- <span class="pf-v5-c-dual-list-selector__item-main">
3292
+ <span class="pf-v6-c-dual-list-selector__item">
3293
+ <span class="pf-v6-c-dual-list-selector__item-main">
3294
3294
  <span
3295
- class="pf-v5-c-dual-list-selector__item-text"
3295
+ class="pf-v6-c-dual-list-selector__item-text"
3296
3296
  id="draggable-list-item-7-item-text"
3297
3297
  >Item7 - selected</span>
3298
3298
  </span>
3299
- <span class="pf-v5-c-dual-list-selector__item-count">
3300
- <span class="pf-v5-c-badge pf-m-read"></span>
3299
+ <span class="pf-v6-c-dual-list-selector__item-count">
3300
+ <span class="pf-v6-c-badge pf-m-read"></span>
3301
3301
  </span>
3302
3302
  </span>
3303
3303
  </div>
@@ -3307,7 +3307,7 @@ cssPrefix: pf-v5-c-dual-list-selector
3307
3307
  </div>
3308
3308
  </div>
3309
3309
  <div
3310
- class="pf-v5-screen-reader"
3310
+ class="pf-v6-screen-reader"
3311
3311
  aria-live="assertive"
3312
3312
  >This is the aria-live section that provides real-time feedback to the user.</div>
3313
3313