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

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 (341) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +66 -116
  92. package/components/Form/form.scss +63 -128
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -12,15 +12,16 @@ cssPrefix: pf-v5-c-tabs
12
12
 
13
13
  ```html
14
14
  <div class="pf-v5-c-tabs" role="region" id="default-tabs">
15
- <button
16
- class="pf-v5-c-tabs__scroll-button"
17
- type="button"
18
- disabled
19
- aria-hidden="true"
20
- aria-label="Scroll left"
21
- >
22
- <i class="fas fa-angle-left" aria-hidden="true"></i>
23
- </button>
15
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
16
+ <button
17
+ class="pf-v5-c-button pf-m-plain"
18
+ type="button"
19
+ aria-label="Scroll left"
20
+ disabled
21
+ >
22
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
23
+ </button>
24
+ </div>
24
25
  <ul class="pf-v5-c-tabs__list" role="tablist">
25
26
  <li class="pf-v5-c-tabs__item" role="presentation">
26
27
  <button
@@ -87,15 +88,16 @@ cssPrefix: pf-v5-c-tabs
87
88
  </li>
88
89
  </ul>
89
90
 
90
- <button
91
- class="pf-v5-c-tabs__scroll-button"
92
- type="button"
93
- disabled
94
- aria-hidden="true"
95
- aria-label="Scroll right"
96
- >
97
- <i class="fas fa-angle-right" aria-hidden="true"></i>
98
- </button>
91
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
92
+ <button
93
+ class="pf-v5-c-button pf-m-plain"
94
+ type="button"
95
+ aria-label="Scroll right"
96
+ disabled
97
+ >
98
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
99
+ </button>
100
+ </div>
99
101
  </div>
100
102
 
101
103
  ```
@@ -117,14 +119,16 @@ cssPrefix: pf-v5-c-tabs
117
119
  role="region"
118
120
  id="overflow-beginning-of-list"
119
121
  >
120
- <button
121
- class="pf-v5-c-tabs__scroll-button"
122
- type="button"
123
- disabled
124
- aria-label="Scroll left"
125
- >
126
- <i class="fas fa-angle-left" aria-hidden="true"></i>
127
- </button>
122
+ <div class="pf-v5-c-tabs__scroll-button">
123
+ <button
124
+ class="pf-v5-c-button pf-m-plain"
125
+ type="button"
126
+ aria-label="Scroll left"
127
+ disabled
128
+ >
129
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
130
+ </button>
131
+ </div>
128
132
  <ul class="pf-v5-c-tabs__list" role="tablist">
129
133
  <li class="pf-v5-c-tabs__item" role="presentation">
130
134
  <button
@@ -219,13 +223,15 @@ cssPrefix: pf-v5-c-tabs
219
223
  </li>
220
224
  </ul>
221
225
 
222
- <button
223
- class="pf-v5-c-tabs__scroll-button"
224
- type="button"
225
- aria-label="Scroll right"
226
- >
227
- <i class="fas fa-angle-right" aria-hidden="true"></i>
228
- </button>
226
+ <div class="pf-v5-c-tabs__scroll-button">
227
+ <button
228
+ class="pf-v5-c-button pf-m-plain"
229
+ type="button"
230
+ aria-label="Scroll right"
231
+ >
232
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
233
+ </button>
234
+ </div>
229
235
  </div>
230
236
 
231
237
  ```
@@ -235,7 +241,7 @@ cssPrefix: pf-v5-c-tabs
235
241
  | Class | Applied to | Outcome |
236
242
  | -- | -- | -- |
237
243
  | `.pf-m-scrollable` | `.pf-v5-c-tabs` | Enables the directional scroll buttons. |
238
- | `.pf-v5-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
244
+ | `.pf-v5-c-tabs__scroll-button` | `<div>` | Initiates a tabs component scroll button container. |
239
245
 
240
246
  ### Horizontal overflow example
241
247
 
@@ -1158,15 +1164,16 @@ cssPrefix: pf-v5-c-tabs
1158
1164
 
1159
1165
  ```html
1160
1166
  <div class="pf-v5-c-tabs pf-m-box" role="region" id="box-tabs">
1161
- <button
1162
- class="pf-v5-c-tabs__scroll-button"
1163
- type="button"
1164
- disabled
1165
- aria-hidden="true"
1166
- aria-label="Scroll left"
1167
- >
1168
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1169
- </button>
1167
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1168
+ <button
1169
+ class="pf-v5-c-button pf-m-plain"
1170
+ type="button"
1171
+ aria-label="Scroll left"
1172
+ disabled
1173
+ >
1174
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1175
+ </button>
1176
+ </div>
1170
1177
  <ul class="pf-v5-c-tabs__list" role="tablist">
1171
1178
  <li class="pf-v5-c-tabs__item" role="presentation">
1172
1179
  <button
@@ -1233,15 +1240,16 @@ cssPrefix: pf-v5-c-tabs
1233
1240
  </li>
1234
1241
  </ul>
1235
1242
 
1236
- <button
1237
- class="pf-v5-c-tabs__scroll-button"
1238
- type="button"
1239
- disabled
1240
- aria-hidden="true"
1241
- aria-label="Scroll right"
1242
- >
1243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1244
- </button>
1243
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1244
+ <button
1245
+ class="pf-v5-c-button pf-m-plain"
1246
+ type="button"
1247
+ aria-label="Scroll right"
1248
+ disabled
1249
+ >
1250
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1251
+ </button>
1252
+ </div>
1245
1253
  </div>
1246
1254
 
1247
1255
  ```
@@ -1254,14 +1262,16 @@ cssPrefix: pf-v5-c-tabs
1254
1262
  role="region"
1255
1263
  id="box-overflow"
1256
1264
  >
1257
- <button
1258
- class="pf-v5-c-tabs__scroll-button"
1259
- type="button"
1260
- disabled
1261
- aria-label="Scroll left"
1262
- >
1263
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1264
- </button>
1265
+ <div class="pf-v5-c-tabs__scroll-button">
1266
+ <button
1267
+ class="pf-v5-c-button pf-m-plain"
1268
+ type="button"
1269
+ aria-label="Scroll left"
1270
+ disabled
1271
+ >
1272
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1273
+ </button>
1274
+ </div>
1265
1275
  <ul class="pf-v5-c-tabs__list" role="tablist">
1266
1276
  <li class="pf-v5-c-tabs__item" role="presentation">
1267
1277
  <button
@@ -1356,13 +1366,15 @@ cssPrefix: pf-v5-c-tabs
1356
1366
  </li>
1357
1367
  </ul>
1358
1368
 
1359
- <button
1360
- class="pf-v5-c-tabs__scroll-button"
1361
- type="button"
1362
- aria-label="Scroll right"
1363
- >
1364
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1365
- </button>
1369
+ <div class="pf-v5-c-tabs__scroll-button">
1370
+ <button
1371
+ class="pf-v5-c-button pf-m-plain"
1372
+ type="button"
1373
+ aria-label="Scroll right"
1374
+ >
1375
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1376
+ </button>
1377
+ </div>
1366
1378
  </div>
1367
1379
 
1368
1380
  ```
@@ -1444,30 +1456,31 @@ cssPrefix: pf-v5-c-tabs
1444
1456
 
1445
1457
  ```
1446
1458
 
1447
- ### Box tabs color scheme light 300 example
1459
+ ### Box tabs secondary variant example
1448
1460
 
1449
1461
  ```html
1450
1462
  <div
1451
- class="pf-v5-c-tabs pf-m-box pf-m-color-scheme--light-300"
1463
+ class="pf-v5-c-tabs pf-m-box pf-m-secondary"
1452
1464
  role="region"
1453
- id="box-tabs-color-scheme-light-300"
1465
+ id="box-tabs-secondary"
1454
1466
  >
1455
- <button
1456
- class="pf-v5-c-tabs__scroll-button"
1457
- type="button"
1458
- disabled
1459
- aria-hidden="true"
1460
- aria-label="Scroll left"
1461
- >
1462
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1463
- </button>
1467
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1468
+ <button
1469
+ class="pf-v5-c-button pf-m-plain"
1470
+ type="button"
1471
+ aria-label="Scroll left"
1472
+ disabled
1473
+ >
1474
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1475
+ </button>
1476
+ </div>
1464
1477
  <ul class="pf-v5-c-tabs__list" role="tablist">
1465
1478
  <li class="pf-v5-c-tabs__item" role="presentation">
1466
1479
  <button
1467
1480
  type="button"
1468
1481
  class="pf-v5-c-tabs__link"
1469
1482
  role="tab"
1470
- id="box-tabs-color-scheme-light-300-users-link"
1483
+ id="box-tabs-secondary-users-link"
1471
1484
  >
1472
1485
  <span class="pf-v5-c-tabs__item-text">Users</span>
1473
1486
  </button>
@@ -1477,7 +1490,7 @@ cssPrefix: pf-v5-c-tabs
1477
1490
  type="button"
1478
1491
  class="pf-v5-c-tabs__link"
1479
1492
  role="tab"
1480
- id="box-tabs-color-scheme-light-300-containers-link"
1493
+ id="box-tabs-secondary-containers-link"
1481
1494
  >
1482
1495
  <span class="pf-v5-c-tabs__item-text">Containers</span>
1483
1496
  </button>
@@ -1487,7 +1500,7 @@ cssPrefix: pf-v5-c-tabs
1487
1500
  type="button"
1488
1501
  class="pf-v5-c-tabs__link"
1489
1502
  role="tab"
1490
- id="box-tabs-color-scheme-light-300-database-link"
1503
+ id="box-tabs-secondary-database-link"
1491
1504
  >
1492
1505
  <span class="pf-v5-c-tabs__item-text">Database</span>
1493
1506
  </button>
@@ -1499,7 +1512,7 @@ cssPrefix: pf-v5-c-tabs
1499
1512
  class="pf-v5-c-tabs__link"
1500
1513
  disabled
1501
1514
  role="tab"
1502
- id="box-tabs-color-scheme-light-300-disabled-link"
1515
+ id="box-tabs-secondary-disabled-link"
1503
1516
  >
1504
1517
  <span class="pf-v5-c-tabs__item-text">Disabled</span>
1505
1518
  </button>
@@ -1510,7 +1523,7 @@ cssPrefix: pf-v5-c-tabs
1510
1523
  class="pf-v5-c-tabs__link pf-m-aria-disabled"
1511
1524
  aria-disabled="true"
1512
1525
  role="tab"
1513
- id="box-tabs-color-scheme-light-300-aria-disabled-link"
1526
+ id="box-tabs-secondary-aria-disabled-link"
1514
1527
  >
1515
1528
  <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
1516
1529
  </button>
@@ -1520,24 +1533,25 @@ cssPrefix: pf-v5-c-tabs
1520
1533
  type="button"
1521
1534
  class="pf-v5-c-tabs__link"
1522
1535
  role="tab"
1523
- id="box-tabs-color-scheme-light-300-network-wired-link"
1536
+ id="box-tabs-secondary-network-wired-link"
1524
1537
  >
1525
1538
  <span class="pf-v5-c-tabs__item-text">Network</span>
1526
1539
  </button>
1527
1540
  </li>
1528
1541
  </ul>
1529
1542
 
1530
- <button
1531
- class="pf-v5-c-tabs__scroll-button"
1532
- type="button"
1533
- disabled
1534
- aria-hidden="true"
1535
- aria-label="Scroll right"
1536
- >
1537
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1538
- </button>
1543
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1544
+ <button
1545
+ class="pf-v5-c-button pf-m-plain"
1546
+ type="button"
1547
+ aria-label="Scroll right"
1548
+ disabled
1549
+ >
1550
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1551
+ </button>
1552
+ </div>
1539
1553
  </div>
1540
- <div class="tabs-example-block tabs-example-block--m-color-scheme--light-300"></div>
1554
+ <div class="tabs-example-block tabs-example-block--m-secondary"></div>
1541
1555
 
1542
1556
  ```
1543
1557
 
@@ -1551,15 +1565,16 @@ cssPrefix: pf-v5-c-tabs
1551
1565
  role="region"
1552
1566
  id="default-tab-insets"
1553
1567
  >
1554
- <button
1555
- class="pf-v5-c-tabs__scroll-button"
1556
- type="button"
1557
- disabled
1558
- aria-hidden="true"
1559
- aria-label="Scroll left"
1560
- >
1561
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1562
- </button>
1568
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1569
+ <button
1570
+ class="pf-v5-c-button pf-m-plain"
1571
+ type="button"
1572
+ aria-label="Scroll left"
1573
+ disabled
1574
+ >
1575
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1576
+ </button>
1577
+ </div>
1563
1578
  <ul class="pf-v5-c-tabs__list" role="tablist">
1564
1579
  <li class="pf-v5-c-tabs__item" role="presentation">
1565
1580
  <button
@@ -1624,15 +1639,16 @@ cssPrefix: pf-v5-c-tabs
1624
1639
  </li>
1625
1640
  </ul>
1626
1641
 
1627
- <button
1628
- class="pf-v5-c-tabs__scroll-button"
1629
- type="button"
1630
- disabled
1631
- aria-hidden="true"
1632
- aria-label="Scroll right"
1633
- >
1634
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1635
- </button>
1642
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1643
+ <button
1644
+ class="pf-v5-c-button pf-m-plain"
1645
+ type="button"
1646
+ aria-label="Scroll right"
1647
+ disabled
1648
+ >
1649
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1650
+ </button>
1651
+ </div>
1636
1652
  </div>
1637
1653
 
1638
1654
  ```
@@ -1645,15 +1661,16 @@ cssPrefix: pf-v5-c-tabs
1645
1661
  role="region"
1646
1662
  id="box-tab-insets"
1647
1663
  >
1648
- <button
1649
- class="pf-v5-c-tabs__scroll-button"
1650
- type="button"
1651
- disabled
1652
- aria-hidden="true"
1653
- aria-label="Scroll left"
1654
- >
1655
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1656
- </button>
1664
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1665
+ <button
1666
+ class="pf-v5-c-button pf-m-plain"
1667
+ type="button"
1668
+ aria-label="Scroll left"
1669
+ disabled
1670
+ >
1671
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1672
+ </button>
1673
+ </div>
1657
1674
  <ul class="pf-v5-c-tabs__list" role="tablist">
1658
1675
  <li class="pf-v5-c-tabs__item" role="presentation">
1659
1676
  <button
@@ -1718,15 +1735,16 @@ cssPrefix: pf-v5-c-tabs
1718
1735
  </li>
1719
1736
  </ul>
1720
1737
 
1721
- <button
1722
- class="pf-v5-c-tabs__scroll-button"
1723
- type="button"
1724
- disabled
1725
- aria-hidden="true"
1726
- aria-label="Scroll right"
1727
- >
1728
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1729
- </button>
1738
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1739
+ <button
1740
+ class="pf-v5-c-button pf-m-plain"
1741
+ type="button"
1742
+ aria-label="Scroll right"
1743
+ disabled
1744
+ >
1745
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1746
+ </button>
1747
+ </div>
1730
1748
  </div>
1731
1749
 
1732
1750
  ```
@@ -1735,15 +1753,16 @@ cssPrefix: pf-v5-c-tabs
1735
1753
 
1736
1754
  ```html
1737
1755
  <div class="pf-v5-c-tabs pf-m-page-insets" role="region" id="page-insets">
1738
- <button
1739
- class="pf-v5-c-tabs__scroll-button"
1740
- type="button"
1741
- disabled
1742
- aria-hidden="true"
1743
- aria-label="Scroll left"
1744
- >
1745
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1746
- </button>
1756
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1757
+ <button
1758
+ class="pf-v5-c-button pf-m-plain"
1759
+ type="button"
1760
+ aria-label="Scroll left"
1761
+ disabled
1762
+ >
1763
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1764
+ </button>
1765
+ </div>
1747
1766
  <ul class="pf-v5-c-tabs__list" role="tablist">
1748
1767
  <li class="pf-v5-c-tabs__item" role="presentation">
1749
1768
  <button
@@ -1808,15 +1827,16 @@ cssPrefix: pf-v5-c-tabs
1808
1827
  </li>
1809
1828
  </ul>
1810
1829
 
1811
- <button
1812
- class="pf-v5-c-tabs__scroll-button"
1813
- type="button"
1814
- disabled
1815
- aria-hidden="true"
1816
- aria-label="Scroll right"
1817
- >
1818
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1819
- </button>
1830
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1831
+ <button
1832
+ class="pf-v5-c-button pf-m-plain"
1833
+ type="button"
1834
+ aria-label="Scroll right"
1835
+ disabled
1836
+ >
1837
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1838
+ </button>
1839
+ </div>
1820
1840
  </div>
1821
1841
 
1822
1842
  ```
@@ -1834,15 +1854,16 @@ cssPrefix: pf-v5-c-tabs
1834
1854
 
1835
1855
  ```html
1836
1856
  <div class="pf-v5-c-tabs" role="region" id="icons-and-text">
1837
- <button
1838
- class="pf-v5-c-tabs__scroll-button"
1839
- type="button"
1840
- disabled
1841
- aria-hidden="true"
1842
- aria-label="Scroll left"
1843
- >
1844
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1845
- </button>
1857
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1858
+ <button
1859
+ class="pf-v5-c-button pf-m-plain"
1860
+ type="button"
1861
+ aria-label="Scroll left"
1862
+ disabled
1863
+ >
1864
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1865
+ </button>
1866
+ </div>
1846
1867
  <ul class="pf-v5-c-tabs__list" role="tablist">
1847
1868
  <li class="pf-v5-c-tabs__item" role="presentation">
1848
1869
  <button
@@ -1925,15 +1946,16 @@ cssPrefix: pf-v5-c-tabs
1925
1946
  </li>
1926
1947
  </ul>
1927
1948
 
1928
- <button
1929
- class="pf-v5-c-tabs__scroll-button"
1930
- type="button"
1931
- disabled
1932
- aria-hidden="true"
1933
- aria-label="Scroll right"
1934
- >
1935
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1936
- </button>
1949
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
1950
+ <button
1951
+ class="pf-v5-c-button pf-m-plain"
1952
+ type="button"
1953
+ aria-label="Scroll right"
1954
+ disabled
1955
+ >
1956
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1957
+ </button>
1958
+ </div>
1937
1959
  </div>
1938
1960
 
1939
1961
  ```
@@ -1944,13 +1966,15 @@ cssPrefix: pf-v5-c-tabs
1944
1966
 
1945
1967
  ```html
1946
1968
  <div class="pf-v5-c-tabs pf-m-scrollable" role="region" id="tabs-with-sub-tabs">
1947
- <button
1948
- class="pf-v5-c-tabs__scroll-button"
1949
- type="button"
1950
- aria-label="Scroll left"
1951
- >
1952
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1953
- </button>
1969
+ <div class="pf-v5-c-tabs__scroll-button">
1970
+ <button
1971
+ class="pf-v5-c-button pf-m-plain"
1972
+ type="button"
1973
+ aria-label="Scroll left"
1974
+ >
1975
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1976
+ </button>
1977
+ </div>
1954
1978
  <ul class="pf-v5-c-tabs__list" role="tablist">
1955
1979
  <li class="pf-v5-c-tabs__item" role="presentation">
1956
1980
  <button
@@ -2015,34 +2039,38 @@ cssPrefix: pf-v5-c-tabs
2015
2039
  </li>
2016
2040
  </ul>
2017
2041
 
2018
- <button
2019
- class="pf-v5-c-tabs__scroll-button"
2020
- type="button"
2021
- aria-label="Scroll right"
2022
- >
2023
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2024
- </button>
2042
+ <div class="pf-v5-c-tabs__scroll-button">
2043
+ <button
2044
+ class="pf-v5-c-button pf-m-plain"
2045
+ type="button"
2046
+ aria-label="Scroll right"
2047
+ >
2048
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2049
+ </button>
2050
+ </div>
2025
2051
  </div>
2026
2052
 
2027
2053
  <div
2028
- class="pf-v5-c-tabs pf-m-secondary pf-m-scrollable"
2054
+ class="pf-v5-c-tabs pf-m-subtab pf-m-scrollable"
2029
2055
  role="region"
2030
- id="tabs-with-sub-tabs-secondary"
2056
+ id="tabs-with-sub-tabs-subtab"
2031
2057
  >
2032
- <button
2033
- class="pf-v5-c-tabs__scroll-button"
2034
- type="button"
2035
- aria-label="Scroll left"
2036
- >
2037
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2038
- </button>
2058
+ <div class="pf-v5-c-tabs__scroll-button">
2059
+ <button
2060
+ class="pf-v5-c-button pf-m-plain"
2061
+ type="button"
2062
+ aria-label="Scroll left"
2063
+ >
2064
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2065
+ </button>
2066
+ </div>
2039
2067
  <ul class="pf-v5-c-tabs__list" role="tablist">
2040
2068
  <li class="pf-v5-c-tabs__item" role="presentation">
2041
2069
  <button
2042
2070
  type="button"
2043
2071
  class="pf-v5-c-tabs__link"
2044
2072
  role="tab"
2045
- id="tabs-with-sub-tabs-secondary-sub-1-link"
2073
+ id="tabs-with-sub-tabs-subtab-sub-1-link"
2046
2074
  >
2047
2075
  <span class="pf-v5-c-tabs__item-text">Item 1</span>
2048
2076
  </button>
@@ -2052,7 +2080,7 @@ cssPrefix: pf-v5-c-tabs
2052
2080
  type="button"
2053
2081
  class="pf-v5-c-tabs__link"
2054
2082
  role="tab"
2055
- id="tabs-with-sub-tabs-secondary-sub-2-link"
2083
+ id="tabs-with-sub-tabs-subtab-sub-2-link"
2056
2084
  >
2057
2085
  <span class="pf-v5-c-tabs__item-text">Item 2</span>
2058
2086
  </button>
@@ -2062,7 +2090,7 @@ cssPrefix: pf-v5-c-tabs
2062
2090
  type="button"
2063
2091
  class="pf-v5-c-tabs__link"
2064
2092
  role="tab"
2065
- id="tabs-with-sub-tabs-secondary-sub-3-link"
2093
+ id="tabs-with-sub-tabs-subtab-sub-3-link"
2066
2094
  >
2067
2095
  <span class="pf-v5-c-tabs__item-text">Item 3</span>
2068
2096
  </button>
@@ -2073,7 +2101,7 @@ cssPrefix: pf-v5-c-tabs
2073
2101
  type="button"
2074
2102
  class="pf-v5-c-tabs__link"
2075
2103
  role="tab"
2076
- id="tabs-with-sub-tabs-secondary-sub-4-link"
2104
+ id="tabs-with-sub-tabs-subtab-sub-4-link"
2077
2105
  >
2078
2106
  <span class="pf-v5-c-tabs__item-text">Item 4</span>
2079
2107
  </button>
@@ -2083,7 +2111,7 @@ cssPrefix: pf-v5-c-tabs
2083
2111
  type="button"
2084
2112
  class="pf-v5-c-tabs__link"
2085
2113
  role="tab"
2086
- id="tabs-with-sub-tabs-secondary-sub-5-link"
2114
+ id="tabs-with-sub-tabs-subtab-sub-5-link"
2087
2115
  >
2088
2116
  <span class="pf-v5-c-tabs__item-text">Item 5</span>
2089
2117
  </button>
@@ -2093,20 +2121,22 @@ cssPrefix: pf-v5-c-tabs
2093
2121
  type="button"
2094
2122
  class="pf-v5-c-tabs__link"
2095
2123
  role="tab"
2096
- id="tabs-with-sub-tabs-secondary-sub-6-link"
2124
+ id="tabs-with-sub-tabs-subtab-sub-6-link"
2097
2125
  >
2098
2126
  <span class="pf-v5-c-tabs__item-text">Item 6</span>
2099
2127
  </button>
2100
2128
  </li>
2101
2129
  </ul>
2102
2130
 
2103
- <button
2104
- class="pf-v5-c-tabs__scroll-button"
2105
- type="button"
2106
- aria-label="Scroll right"
2107
- >
2108
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2109
- </button>
2131
+ <div class="pf-v5-c-tabs__scroll-button">
2132
+ <button
2133
+ class="pf-v5-c-button pf-m-plain"
2134
+ type="button"
2135
+ aria-label="Scroll right"
2136
+ >
2137
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2138
+ </button>
2139
+ </div>
2110
2140
  </div>
2111
2141
 
2112
2142
  ```
@@ -2119,13 +2149,15 @@ cssPrefix: pf-v5-c-tabs
2119
2149
  role="region"
2120
2150
  id="box-tabs-with-sub-tabs"
2121
2151
  >
2122
- <button
2123
- class="pf-v5-c-tabs__scroll-button"
2124
- type="button"
2125
- aria-label="Scroll left"
2126
- >
2127
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2128
- </button>
2152
+ <div class="pf-v5-c-tabs__scroll-button">
2153
+ <button
2154
+ class="pf-v5-c-button pf-m-plain"
2155
+ type="button"
2156
+ aria-label="Scroll left"
2157
+ >
2158
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2159
+ </button>
2160
+ </div>
2129
2161
  <ul class="pf-v5-c-tabs__list" role="tablist">
2130
2162
  <li class="pf-v5-c-tabs__item" role="presentation">
2131
2163
  <button
@@ -2190,34 +2222,38 @@ cssPrefix: pf-v5-c-tabs
2190
2222
  </li>
2191
2223
  </ul>
2192
2224
 
2193
- <button
2194
- class="pf-v5-c-tabs__scroll-button"
2195
- type="button"
2196
- aria-label="Scroll right"
2197
- >
2198
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2199
- </button>
2225
+ <div class="pf-v5-c-tabs__scroll-button">
2226
+ <button
2227
+ class="pf-v5-c-button pf-m-plain"
2228
+ type="button"
2229
+ aria-label="Scroll right"
2230
+ >
2231
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2232
+ </button>
2233
+ </div>
2200
2234
  </div>
2201
2235
 
2202
2236
  <div
2203
- class="pf-v5-c-tabs pf-m-secondary pf-m-scrollable"
2237
+ class="pf-v5-c-tabs pf-m-subtab pf-m-scrollable"
2204
2238
  role="region"
2205
- id="box-tabs-with-sub-tabs-secondary"
2239
+ id="box-tabs-with-sub-tabs-subtab"
2206
2240
  >
2207
- <button
2208
- class="pf-v5-c-tabs__scroll-button"
2209
- type="button"
2210
- aria-label="Scroll left"
2211
- >
2212
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2213
- </button>
2241
+ <div class="pf-v5-c-tabs__scroll-button">
2242
+ <button
2243
+ class="pf-v5-c-button pf-m-plain"
2244
+ type="button"
2245
+ aria-label="Scroll left"
2246
+ >
2247
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2248
+ </button>
2249
+ </div>
2214
2250
  <ul class="pf-v5-c-tabs__list" role="tablist">
2215
2251
  <li class="pf-v5-c-tabs__item" role="presentation">
2216
2252
  <button
2217
2253
  type="button"
2218
2254
  class="pf-v5-c-tabs__link"
2219
2255
  role="tab"
2220
- id="box-tabs-with-sub-tabs-secondary-sub-1-link"
2256
+ id="box-tabs-with-sub-tabs-subtab-sub-1-link"
2221
2257
  >
2222
2258
  <span class="pf-v5-c-tabs__item-text">Item 1</span>
2223
2259
  </button>
@@ -2227,7 +2263,7 @@ cssPrefix: pf-v5-c-tabs
2227
2263
  type="button"
2228
2264
  class="pf-v5-c-tabs__link"
2229
2265
  role="tab"
2230
- id="box-tabs-with-sub-tabs-secondary-sub-2-link"
2266
+ id="box-tabs-with-sub-tabs-subtab-sub-2-link"
2231
2267
  >
2232
2268
  <span class="pf-v5-c-tabs__item-text">Item 2</span>
2233
2269
  </button>
@@ -2237,7 +2273,7 @@ cssPrefix: pf-v5-c-tabs
2237
2273
  type="button"
2238
2274
  class="pf-v5-c-tabs__link"
2239
2275
  role="tab"
2240
- id="box-tabs-with-sub-tabs-secondary-sub-3-link"
2276
+ id="box-tabs-with-sub-tabs-subtab-sub-3-link"
2241
2277
  >
2242
2278
  <span class="pf-v5-c-tabs__item-text">Item 3</span>
2243
2279
  </button>
@@ -2248,7 +2284,7 @@ cssPrefix: pf-v5-c-tabs
2248
2284
  type="button"
2249
2285
  class="pf-v5-c-tabs__link"
2250
2286
  role="tab"
2251
- id="box-tabs-with-sub-tabs-secondary-sub-4-link"
2287
+ id="box-tabs-with-sub-tabs-subtab-sub-4-link"
2252
2288
  >
2253
2289
  <span class="pf-v5-c-tabs__item-text">Item 4</span>
2254
2290
  </button>
@@ -2258,7 +2294,7 @@ cssPrefix: pf-v5-c-tabs
2258
2294
  type="button"
2259
2295
  class="pf-v5-c-tabs__link"
2260
2296
  role="tab"
2261
- id="box-tabs-with-sub-tabs-secondary-sub-5-link"
2297
+ id="box-tabs-with-sub-tabs-subtab-sub-5-link"
2262
2298
  >
2263
2299
  <span class="pf-v5-c-tabs__item-text">Item 5</span>
2264
2300
  </button>
@@ -2268,20 +2304,22 @@ cssPrefix: pf-v5-c-tabs
2268
2304
  type="button"
2269
2305
  class="pf-v5-c-tabs__link"
2270
2306
  role="tab"
2271
- id="box-tabs-with-sub-tabs-secondary-sub-6-link"
2307
+ id="box-tabs-with-sub-tabs-subtab-sub-6-link"
2272
2308
  >
2273
2309
  <span class="pf-v5-c-tabs__item-text">Item 6</span>
2274
2310
  </button>
2275
2311
  </li>
2276
2312
  </ul>
2277
2313
 
2278
- <button
2279
- class="pf-v5-c-tabs__scroll-button"
2280
- type="button"
2281
- aria-label="Scroll right"
2282
- >
2283
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2284
- </button>
2314
+ <div class="pf-v5-c-tabs__scroll-button">
2315
+ <button
2316
+ class="pf-v5-c-button pf-m-plain"
2317
+ type="button"
2318
+ aria-label="Scroll right"
2319
+ >
2320
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2321
+ </button>
2322
+ </div>
2285
2323
  </div>
2286
2324
 
2287
2325
  ```
@@ -2292,15 +2330,16 @@ cssPrefix: pf-v5-c-tabs
2292
2330
 
2293
2331
  ```html
2294
2332
  <div class="pf-v5-c-tabs pf-m-fill" role="region" id="filled-tabs">
2295
- <button
2296
- class="pf-v5-c-tabs__scroll-button"
2297
- type="button"
2298
- disabled
2299
- aria-hidden="true"
2300
- aria-label="Scroll left"
2301
- >
2302
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2303
- </button>
2333
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2334
+ <button
2335
+ class="pf-v5-c-button pf-m-plain"
2336
+ type="button"
2337
+ aria-label="Scroll left"
2338
+ disabled
2339
+ >
2340
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2341
+ </button>
2342
+ </div>
2304
2343
  <ul class="pf-v5-c-tabs__list" role="tablist">
2305
2344
  <li class="pf-v5-c-tabs__item" role="presentation">
2306
2345
  <button
@@ -2334,15 +2373,16 @@ cssPrefix: pf-v5-c-tabs
2334
2373
  </li>
2335
2374
  </ul>
2336
2375
 
2337
- <button
2338
- class="pf-v5-c-tabs__scroll-button"
2339
- type="button"
2340
- disabled
2341
- aria-hidden="true"
2342
- aria-label="Scroll right"
2343
- >
2344
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2345
- </button>
2376
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2377
+ <button
2378
+ class="pf-v5-c-button pf-m-plain"
2379
+ type="button"
2380
+ aria-label="Scroll right"
2381
+ disabled
2382
+ >
2383
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2384
+ </button>
2385
+ </div>
2346
2386
  </div>
2347
2387
 
2348
2388
  ```
@@ -2351,15 +2391,16 @@ cssPrefix: pf-v5-c-tabs
2351
2391
 
2352
2392
  ```html
2353
2393
  <div class="pf-v5-c-tabs pf-m-fill" role="region" id="filled-with-icons">
2354
- <button
2355
- class="pf-v5-c-tabs__scroll-button"
2356
- type="button"
2357
- disabled
2358
- aria-hidden="true"
2359
- aria-label="Scroll left"
2360
- >
2361
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2362
- </button>
2394
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2395
+ <button
2396
+ class="pf-v5-c-button pf-m-plain"
2397
+ type="button"
2398
+ aria-label="Scroll left"
2399
+ disabled
2400
+ >
2401
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2402
+ </button>
2403
+ </div>
2363
2404
  <ul class="pf-v5-c-tabs__list" role="tablist">
2364
2405
  <li class="pf-v5-c-tabs__item" role="presentation">
2365
2406
  <button
@@ -2402,15 +2443,16 @@ cssPrefix: pf-v5-c-tabs
2402
2443
  </li>
2403
2444
  </ul>
2404
2445
 
2405
- <button
2406
- class="pf-v5-c-tabs__scroll-button"
2407
- type="button"
2408
- disabled
2409
- aria-hidden="true"
2410
- aria-label="Scroll right"
2411
- >
2412
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2413
- </button>
2446
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2447
+ <button
2448
+ class="pf-v5-c-button pf-m-plain"
2449
+ type="button"
2450
+ aria-label="Scroll right"
2451
+ disabled
2452
+ >
2453
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2454
+ </button>
2455
+ </div>
2414
2456
  </div>
2415
2457
 
2416
2458
  ```
@@ -2419,15 +2461,16 @@ cssPrefix: pf-v5-c-tabs
2419
2461
 
2420
2462
  ```html
2421
2463
  <div class="pf-v5-c-tabs pf-m-fill pf-m-box" role="region" id="filled-box">
2422
- <button
2423
- class="pf-v5-c-tabs__scroll-button"
2424
- type="button"
2425
- disabled
2426
- aria-hidden="true"
2427
- aria-label="Scroll left"
2428
- >
2429
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2430
- </button>
2464
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2465
+ <button
2466
+ class="pf-v5-c-button pf-m-plain"
2467
+ type="button"
2468
+ aria-label="Scroll left"
2469
+ disabled
2470
+ >
2471
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2472
+ </button>
2473
+ </div>
2431
2474
  <ul class="pf-v5-c-tabs__list" role="tablist">
2432
2475
  <li class="pf-v5-c-tabs__item" role="presentation">
2433
2476
  <button
@@ -2461,15 +2504,16 @@ cssPrefix: pf-v5-c-tabs
2461
2504
  </li>
2462
2505
  </ul>
2463
2506
 
2464
- <button
2465
- class="pf-v5-c-tabs__scroll-button"
2466
- type="button"
2467
- disabled
2468
- aria-hidden="true"
2469
- aria-label="Scroll right"
2470
- >
2471
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2472
- </button>
2507
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2508
+ <button
2509
+ class="pf-v5-c-button pf-m-plain"
2510
+ type="button"
2511
+ aria-label="Scroll right"
2512
+ disabled
2513
+ >
2514
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2515
+ </button>
2516
+ </div>
2473
2517
  </div>
2474
2518
 
2475
2519
  ```
@@ -2482,15 +2526,16 @@ cssPrefix: pf-v5-c-tabs
2482
2526
  role="region"
2483
2527
  id="filled-box-with-icons"
2484
2528
  >
2485
- <button
2486
- class="pf-v5-c-tabs__scroll-button"
2487
- type="button"
2488
- disabled
2489
- aria-hidden="true"
2490
- aria-label="Scroll left"
2491
- >
2492
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2493
- </button>
2529
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2530
+ <button
2531
+ class="pf-v5-c-button pf-m-plain"
2532
+ type="button"
2533
+ aria-label="Scroll left"
2534
+ disabled
2535
+ >
2536
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2537
+ </button>
2538
+ </div>
2494
2539
  <ul class="pf-v5-c-tabs__list" role="tablist">
2495
2540
  <li class="pf-v5-c-tabs__item" role="presentation">
2496
2541
  <button
@@ -2533,15 +2578,16 @@ cssPrefix: pf-v5-c-tabs
2533
2578
  </li>
2534
2579
  </ul>
2535
2580
 
2536
- <button
2537
- class="pf-v5-c-tabs__scroll-button"
2538
- type="button"
2539
- disabled
2540
- aria-hidden="true"
2541
- aria-label="Scroll right"
2542
- >
2543
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2544
- </button>
2581
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2582
+ <button
2583
+ class="pf-v5-c-button pf-m-plain"
2584
+ type="button"
2585
+ aria-label="Scroll right"
2586
+ disabled
2587
+ >
2588
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2589
+ </button>
2590
+ </div>
2545
2591
  </div>
2546
2592
 
2547
2593
  ```
@@ -2563,13 +2609,15 @@ cssPrefix: pf-v5-c-tabs
2563
2609
  role="region"
2564
2610
  id="using-the-nav-element"
2565
2611
  >
2566
- <button
2567
- class="pf-v5-c-tabs__scroll-button"
2568
- type="button"
2569
- aria-label="Scroll left"
2570
- >
2571
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2572
- </button>
2612
+ <div class="pf-v5-c-tabs__scroll-button">
2613
+ <button
2614
+ class="pf-v5-c-button pf-m-plain"
2615
+ type="button"
2616
+ aria-label="Scroll left"
2617
+ >
2618
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2619
+ </button>
2620
+ </div>
2573
2621
  <ul class="pf-v5-c-tabs__list" role="tablist">
2574
2622
  <li class="pf-v5-c-tabs__item" role="presentation">
2575
2623
  <a
@@ -2637,13 +2685,15 @@ cssPrefix: pf-v5-c-tabs
2637
2685
  </li>
2638
2686
  </ul>
2639
2687
 
2640
- <button
2641
- class="pf-v5-c-tabs__scroll-button"
2642
- type="button"
2643
- aria-label="Scroll right"
2644
- >
2645
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2646
- </button>
2688
+ <div class="pf-v5-c-tabs__scroll-button">
2689
+ <button
2690
+ class="pf-v5-c-button pf-m-plain"
2691
+ type="button"
2692
+ aria-label="Scroll right"
2693
+ >
2694
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2695
+ </button>
2696
+ </div>
2647
2697
  </nav>
2648
2698
 
2649
2699
  ```
@@ -2657,15 +2707,16 @@ cssPrefix: pf-v5-c-tabs
2657
2707
  role="region"
2658
2708
  id="sub-tabs-using-the-nav-element"
2659
2709
  >
2660
- <button
2661
- class="pf-v5-c-tabs__scroll-button"
2662
- type="button"
2663
- disabled
2664
- aria-hidden="true"
2665
- aria-label="Scroll left"
2666
- >
2667
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2668
- </button>
2710
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2711
+ <button
2712
+ class="pf-v5-c-button pf-m-plain"
2713
+ type="button"
2714
+ aria-label="Scroll left"
2715
+ disabled
2716
+ >
2717
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2718
+ </button>
2719
+ </div>
2669
2720
  <ul class="pf-v5-c-tabs__list" role="tablist">
2670
2721
  <li class="pf-v5-c-tabs__item" role="presentation">
2671
2722
  <a
@@ -2730,39 +2781,41 @@ cssPrefix: pf-v5-c-tabs
2730
2781
  </li>
2731
2782
  </ul>
2732
2783
 
2733
- <button
2734
- class="pf-v5-c-tabs__scroll-button"
2735
- type="button"
2736
- disabled
2737
- aria-hidden="true"
2738
- aria-label="Scroll right"
2739
- >
2740
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2741
- </button>
2784
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2785
+ <button
2786
+ class="pf-v5-c-button pf-m-plain"
2787
+ type="button"
2788
+ aria-label="Scroll right"
2789
+ disabled
2790
+ >
2791
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2792
+ </button>
2793
+ </div>
2742
2794
  </nav>
2743
2795
 
2744
2796
  <nav
2745
- class="pf-v5-c-tabs pf-m-secondary"
2746
- aria-label="Tabs secondary nav"
2797
+ class="pf-v5-c-tabs pf-m-subtab"
2798
+ aria-label="Tabs subtab nav"
2747
2799
  role="region"
2748
- id="sub-tabs-using-the-nav-element-secondary"
2800
+ id="sub-tabs-using-the-nav-element-subtab"
2749
2801
  >
2750
- <button
2751
- class="pf-v5-c-tabs__scroll-button"
2752
- type="button"
2753
- disabled
2754
- aria-hidden="true"
2755
- aria-label="Scroll left"
2756
- >
2757
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2758
- </button>
2802
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2803
+ <button
2804
+ class="pf-v5-c-button pf-m-plain"
2805
+ type="button"
2806
+ aria-label="Scroll left"
2807
+ disabled
2808
+ >
2809
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2810
+ </button>
2811
+ </div>
2759
2812
  <ul class="pf-v5-c-tabs__list" role="tablist">
2760
2813
  <li class="pf-v5-c-tabs__item" role="presentation">
2761
2814
  <a
2762
2815
  class="pf-v5-c-tabs__link"
2763
2816
  href="#"
2764
2817
  role="tab"
2765
- id="sub-tabs-using-the-nav-element-secondary-sub-1-link"
2818
+ id="sub-tabs-using-the-nav-element-subtab-sub-1-link"
2766
2819
  >
2767
2820
  <span class="pf-v5-c-tabs__item-text">Item 1</span>
2768
2821
  </a>
@@ -2772,7 +2825,7 @@ cssPrefix: pf-v5-c-tabs
2772
2825
  class="pf-v5-c-tabs__link"
2773
2826
  href="#"
2774
2827
  role="tab"
2775
- id="sub-tabs-using-the-nav-element-secondary-sub-2-link"
2828
+ id="sub-tabs-using-the-nav-element-subtab-sub-2-link"
2776
2829
  >
2777
2830
  <span class="pf-v5-c-tabs__item-text">Item 2</span>
2778
2831
  </a>
@@ -2782,7 +2835,7 @@ cssPrefix: pf-v5-c-tabs
2782
2835
  class="pf-v5-c-tabs__link"
2783
2836
  href="#"
2784
2837
  role="tab"
2785
- id="sub-tabs-using-the-nav-element-secondary-sub-3-link"
2838
+ id="sub-tabs-using-the-nav-element-subtab-sub-3-link"
2786
2839
  >
2787
2840
  <span class="pf-v5-c-tabs__item-text">Item 3</span>
2788
2841
  </a>
@@ -2795,7 +2848,7 @@ cssPrefix: pf-v5-c-tabs
2795
2848
  tabindex="-1"
2796
2849
  href="#"
2797
2850
  role="tab"
2798
- id="sub-tabs-using-the-nav-element-secondary-sub-disabled-link"
2851
+ id="sub-tabs-using-the-nav-element-subtab-sub-disabled-link"
2799
2852
  >
2800
2853
  <span class="pf-v5-c-tabs__item-text">Disabled</span>
2801
2854
  </a>
@@ -2806,7 +2859,7 @@ cssPrefix: pf-v5-c-tabs
2806
2859
  aria-disabled="true"
2807
2860
  href="#"
2808
2861
  role="tab"
2809
- id="sub-tabs-using-the-nav-element-secondary-sub-aria-disabled-link"
2862
+ id="sub-tabs-using-the-nav-element-subtab-sub-aria-disabled-link"
2810
2863
  >
2811
2864
  <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
2812
2865
  </a>
@@ -2816,22 +2869,23 @@ cssPrefix: pf-v5-c-tabs
2816
2869
  class="pf-v5-c-tabs__link"
2817
2870
  href="#"
2818
2871
  role="tab"
2819
- id="sub-tabs-using-the-nav-element-secondary-sub-6-link"
2872
+ id="sub-tabs-using-the-nav-element-subtab-sub-6-link"
2820
2873
  >
2821
2874
  <span class="pf-v5-c-tabs__item-text">Item 6</span>
2822
2875
  </a>
2823
2876
  </li>
2824
2877
  </ul>
2825
2878
 
2826
- <button
2827
- class="pf-v5-c-tabs__scroll-button"
2828
- type="button"
2829
- disabled
2830
- aria-hidden="true"
2831
- aria-label="Scroll right"
2832
- >
2833
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2834
- </button>
2879
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
2880
+ <button
2881
+ class="pf-v5-c-button pf-m-plain"
2882
+ type="button"
2883
+ aria-label="Scroll right"
2884
+ disabled
2885
+ >
2886
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2887
+ </button>
2888
+ </div>
2835
2889
  </nav>
2836
2890
 
2837
2891
  ```
@@ -2846,14 +2900,16 @@ cssPrefix: pf-v5-c-tabs
2846
2900
  role="region"
2847
2901
  id="help-button-default-example"
2848
2902
  >
2849
- <button
2850
- class="pf-v5-c-tabs__scroll-button"
2851
- type="button"
2852
- disabled
2853
- aria-label="Scroll left"
2854
- >
2855
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2856
- </button>
2903
+ <div class="pf-v5-c-tabs__scroll-button">
2904
+ <button
2905
+ class="pf-v5-c-button pf-m-plain"
2906
+ type="button"
2907
+ aria-label="Scroll left"
2908
+ disabled
2909
+ >
2910
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2911
+ </button>
2912
+ </div>
2857
2913
  <ul class="pf-v5-c-tabs__list" role="tablist">
2858
2914
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
2859
2915
  <button
@@ -2937,6 +2993,7 @@ cssPrefix: pf-v5-c-tabs
2937
2993
  class="pf-v5-c-button pf-m-plain"
2938
2994
  type="button"
2939
2995
  aria-label="More info for Disabled label"
2996
+ disabled
2940
2997
  >
2941
2998
  <span class="pf-v5-c-tabs__item-action-icon">
2942
2999
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -2959,9 +3016,10 @@ cssPrefix: pf-v5-c-tabs
2959
3016
  </button>
2960
3017
  <span class="pf-v5-c-tabs__item-action">
2961
3018
  <button
2962
- class="pf-v5-c-button pf-m-plain"
3019
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
2963
3020
  type="button"
2964
3021
  aria-label="More info for ARIA disabled label"
3022
+ aria-disabled="true"
2965
3023
  >
2966
3024
  <span class="pf-v5-c-tabs__item-action-icon">
2967
3025
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3018,13 +3076,15 @@ cssPrefix: pf-v5-c-tabs
3018
3076
  </li>
3019
3077
  </ul>
3020
3078
 
3021
- <button
3022
- class="pf-v5-c-tabs__scroll-button"
3023
- type="button"
3024
- aria-label="Scroll right"
3025
- >
3026
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3027
- </button>
3079
+ <div class="pf-v5-c-tabs__scroll-button">
3080
+ <button
3081
+ class="pf-v5-c-button pf-m-plain"
3082
+ type="button"
3083
+ aria-label="Scroll right"
3084
+ >
3085
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3086
+ </button>
3087
+ </div>
3028
3088
  </div>
3029
3089
 
3030
3090
  <br />
@@ -3035,14 +3095,16 @@ cssPrefix: pf-v5-c-tabs
3035
3095
  role="region"
3036
3096
  id="help-button-box-example"
3037
3097
  >
3038
- <button
3039
- class="pf-v5-c-tabs__scroll-button"
3040
- type="button"
3041
- disabled
3042
- aria-label="Scroll left"
3043
- >
3044
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3045
- </button>
3098
+ <div class="pf-v5-c-tabs__scroll-button">
3099
+ <button
3100
+ class="pf-v5-c-button pf-m-plain"
3101
+ type="button"
3102
+ aria-label="Scroll left"
3103
+ disabled
3104
+ >
3105
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3106
+ </button>
3107
+ </div>
3046
3108
  <ul class="pf-v5-c-tabs__list" role="tablist">
3047
3109
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
3048
3110
  <button
@@ -3126,6 +3188,7 @@ cssPrefix: pf-v5-c-tabs
3126
3188
  class="pf-v5-c-button pf-m-plain"
3127
3189
  type="button"
3128
3190
  aria-label="More info for Disabled label"
3191
+ disabled
3129
3192
  >
3130
3193
  <span class="pf-v5-c-tabs__item-action-icon">
3131
3194
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3148,9 +3211,10 @@ cssPrefix: pf-v5-c-tabs
3148
3211
  </button>
3149
3212
  <span class="pf-v5-c-tabs__item-action">
3150
3213
  <button
3151
- class="pf-v5-c-button pf-m-plain"
3214
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
3152
3215
  type="button"
3153
3216
  aria-label="More info for ARIA disabled label"
3217
+ aria-disabled="true"
3154
3218
  >
3155
3219
  <span class="pf-v5-c-tabs__item-action-icon">
3156
3220
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3207,38 +3271,42 @@ cssPrefix: pf-v5-c-tabs
3207
3271
  </li>
3208
3272
  </ul>
3209
3273
 
3210
- <button
3211
- class="pf-v5-c-tabs__scroll-button"
3212
- type="button"
3213
- aria-label="Scroll right"
3214
- >
3215
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3216
- </button>
3274
+ <div class="pf-v5-c-tabs__scroll-button">
3275
+ <button
3276
+ class="pf-v5-c-button pf-m-plain"
3277
+ type="button"
3278
+ aria-label="Scroll right"
3279
+ >
3280
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3281
+ </button>
3282
+ </div>
3217
3283
  </div>
3218
3284
 
3219
3285
  <br />
3220
3286
  <br />
3221
3287
 
3222
3288
  <div
3223
- class="pf-v5-c-tabs pf-m-box pf-m-color-scheme--light-300 pf-m-scrollable"
3289
+ class="pf-v5-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
3224
3290
  role="region"
3225
- id="help-button-box-light-300-example"
3291
+ id="help-button-box-secondary-example"
3226
3292
  >
3227
- <button
3228
- class="pf-v5-c-tabs__scroll-button"
3229
- type="button"
3230
- disabled
3231
- aria-label="Scroll left"
3232
- >
3233
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3234
- </button>
3293
+ <div class="pf-v5-c-tabs__scroll-button">
3294
+ <button
3295
+ class="pf-v5-c-button pf-m-plain"
3296
+ type="button"
3297
+ aria-label="Scroll left"
3298
+ disabled
3299
+ >
3300
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3301
+ </button>
3302
+ </div>
3235
3303
  <ul class="pf-v5-c-tabs__list" role="tablist">
3236
3304
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
3237
3305
  <button
3238
3306
  type="button"
3239
3307
  class="pf-v5-c-tabs__link"
3240
3308
  role="tab"
3241
- id="help-button-box-light-300-example-users-link"
3309
+ id="help-button-box-secondary-example-users-link"
3242
3310
  >
3243
3311
  <span class="pf-v5-c-tabs__item-text">Users</span>
3244
3312
  </button>
@@ -3259,7 +3327,7 @@ cssPrefix: pf-v5-c-tabs
3259
3327
  type="button"
3260
3328
  class="pf-v5-c-tabs__link"
3261
3329
  role="tab"
3262
- id="help-button-box-light-300-example-containers-link"
3330
+ id="help-button-box-secondary-example-containers-link"
3263
3331
  >
3264
3332
  <span class="pf-v5-c-tabs__item-text">Containers</span>
3265
3333
  </button>
@@ -3280,7 +3348,7 @@ cssPrefix: pf-v5-c-tabs
3280
3348
  type="button"
3281
3349
  class="pf-v5-c-tabs__link"
3282
3350
  role="tab"
3283
- id="help-button-box-light-300-example-database-link"
3351
+ id="help-button-box-secondary-example-database-link"
3284
3352
  >
3285
3353
  <span class="pf-v5-c-tabs__item-text">Database</span>
3286
3354
  </button>
@@ -3306,7 +3374,7 @@ cssPrefix: pf-v5-c-tabs
3306
3374
  class="pf-v5-c-tabs__link"
3307
3375
  disabled
3308
3376
  role="tab"
3309
- id="help-button-box-light-300-example-disabled-link"
3377
+ id="help-button-box-secondary-example-disabled-link"
3310
3378
  >
3311
3379
  <span class="pf-v5-c-tabs__item-text">Disabled</span>
3312
3380
  </button>
@@ -3315,6 +3383,7 @@ cssPrefix: pf-v5-c-tabs
3315
3383
  class="pf-v5-c-button pf-m-plain"
3316
3384
  type="button"
3317
3385
  aria-label="More info for Disabled label"
3386
+ disabled
3318
3387
  >
3319
3388
  <span class="pf-v5-c-tabs__item-action-icon">
3320
3389
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3331,15 +3400,16 @@ cssPrefix: pf-v5-c-tabs
3331
3400
  class="pf-v5-c-tabs__link pf-m-aria-disabled"
3332
3401
  aria-disabled="true"
3333
3402
  role="tab"
3334
- id="help-button-box-light-300-example-aria-disabled-link"
3403
+ id="help-button-box-secondary-example-aria-disabled-link"
3335
3404
  >
3336
3405
  <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
3337
3406
  </button>
3338
3407
  <span class="pf-v5-c-tabs__item-action">
3339
3408
  <button
3340
- class="pf-v5-c-button pf-m-plain"
3409
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
3341
3410
  type="button"
3342
3411
  aria-label="More info for ARIA disabled label"
3412
+ aria-disabled="true"
3343
3413
  >
3344
3414
  <span class="pf-v5-c-tabs__item-action-icon">
3345
3415
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3356,7 +3426,7 @@ cssPrefix: pf-v5-c-tabs
3356
3426
  class="pf-v5-c-tabs__link"
3357
3427
  disabled
3358
3428
  role="tab"
3359
- id="help-button-box-light-300-example-help-disabled-link"
3429
+ id="help-button-box-secondary-example-help-disabled-link"
3360
3430
  >
3361
3431
  <span class="pf-v5-c-tabs__item-text">Help disabled</span>
3362
3432
  </button>
@@ -3378,7 +3448,7 @@ cssPrefix: pf-v5-c-tabs
3378
3448
  type="button"
3379
3449
  class="pf-v5-c-tabs__link"
3380
3450
  role="tab"
3381
- id="help-button-box-light-300-example-network-wired-link"
3451
+ id="help-button-box-secondary-example-network-wired-link"
3382
3452
  >
3383
3453
  <span class="pf-v5-c-tabs__item-text">Network</span>
3384
3454
  </button>
@@ -3396,13 +3466,15 @@ cssPrefix: pf-v5-c-tabs
3396
3466
  </li>
3397
3467
  </ul>
3398
3468
 
3399
- <button
3400
- class="pf-v5-c-tabs__scroll-button"
3401
- type="button"
3402
- aria-label="Scroll right"
3403
- >
3404
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3405
- </button>
3469
+ <div class="pf-v5-c-tabs__scroll-button">
3470
+ <button
3471
+ class="pf-v5-c-button pf-m-plain"
3472
+ type="button"
3473
+ aria-label="Scroll right"
3474
+ >
3475
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3476
+ </button>
3477
+ </div>
3406
3478
  </div>
3407
3479
 
3408
3480
  <br />
@@ -3413,14 +3485,16 @@ cssPrefix: pf-v5-c-tabs
3413
3485
  role="region"
3414
3486
  id="help-button-icons-text-example"
3415
3487
  >
3416
- <button
3417
- class="pf-v5-c-tabs__scroll-button"
3418
- type="button"
3419
- disabled
3420
- aria-label="Scroll left"
3421
- >
3422
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3423
- </button>
3488
+ <div class="pf-v5-c-tabs__scroll-button">
3489
+ <button
3490
+ class="pf-v5-c-button pf-m-plain"
3491
+ type="button"
3492
+ aria-label="Scroll left"
3493
+ disabled
3494
+ >
3495
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3496
+ </button>
3497
+ </div>
3424
3498
  <ul class="pf-v5-c-tabs__list" role="tablist">
3425
3499
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
3426
3500
  <button
@@ -3516,6 +3590,7 @@ cssPrefix: pf-v5-c-tabs
3516
3590
  class="pf-v5-c-button pf-m-plain"
3517
3591
  type="button"
3518
3592
  aria-label="More info for Disabled label"
3593
+ disabled
3519
3594
  >
3520
3595
  <span class="pf-v5-c-tabs__item-action-icon">
3521
3596
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3541,9 +3616,10 @@ cssPrefix: pf-v5-c-tabs
3541
3616
  </button>
3542
3617
  <span class="pf-v5-c-tabs__item-action">
3543
3618
  <button
3544
- class="pf-v5-c-button pf-m-plain"
3619
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
3545
3620
  type="button"
3546
3621
  aria-label="More info for ARIA disabled label"
3622
+ aria-disabled="true"
3547
3623
  >
3548
3624
  <span class="pf-v5-c-tabs__item-action-icon">
3549
3625
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3606,13 +3682,15 @@ cssPrefix: pf-v5-c-tabs
3606
3682
  </li>
3607
3683
  </ul>
3608
3684
 
3609
- <button
3610
- class="pf-v5-c-tabs__scroll-button"
3611
- type="button"
3612
- aria-label="Scroll right"
3613
- >
3614
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3615
- </button>
3685
+ <div class="pf-v5-c-tabs__scroll-button">
3686
+ <button
3687
+ class="pf-v5-c-button pf-m-plain"
3688
+ type="button"
3689
+ aria-label="Scroll right"
3690
+ >
3691
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3692
+ </button>
3693
+ </div>
3616
3694
  </div>
3617
3695
 
3618
3696
  <br />
@@ -3623,14 +3701,16 @@ cssPrefix: pf-v5-c-tabs
3623
3701
  role="region"
3624
3702
  id="help-button-filled-example"
3625
3703
  >
3626
- <button
3627
- class="pf-v5-c-tabs__scroll-button"
3628
- type="button"
3629
- disabled
3630
- aria-label="Scroll left"
3631
- >
3632
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3633
- </button>
3704
+ <div class="pf-v5-c-tabs__scroll-button">
3705
+ <button
3706
+ class="pf-v5-c-button pf-m-plain"
3707
+ type="button"
3708
+ aria-label="Scroll left"
3709
+ disabled
3710
+ >
3711
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3712
+ </button>
3713
+ </div>
3634
3714
  <ul class="pf-v5-c-tabs__list" role="tablist">
3635
3715
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
3636
3716
  <button
@@ -3697,15 +3777,16 @@ cssPrefix: pf-v5-c-tabs
3697
3777
  </li>
3698
3778
  </ul>
3699
3779
 
3700
- <button
3701
- class="pf-v5-c-tabs__scroll-button"
3702
- type="button"
3703
- disabled
3704
- aria-hidden="true"
3705
- aria-label="Scroll right"
3706
- >
3707
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3708
- </button>
3780
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
3781
+ <button
3782
+ class="pf-v5-c-button pf-m-plain"
3783
+ type="button"
3784
+ aria-label="Scroll right"
3785
+ disabled
3786
+ >
3787
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3788
+ </button>
3789
+ </div>
3709
3790
  </div>
3710
3791
 
3711
3792
  <br />
@@ -3716,14 +3797,16 @@ cssPrefix: pf-v5-c-tabs
3716
3797
  role="region"
3717
3798
  id="help-button-secondary-primary-example"
3718
3799
  >
3719
- <button
3720
- class="pf-v5-c-tabs__scroll-button"
3721
- type="button"
3722
- disabled
3723
- aria-label="Scroll left"
3724
- >
3725
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3726
- </button>
3800
+ <div class="pf-v5-c-tabs__scroll-button">
3801
+ <button
3802
+ class="pf-v5-c-button pf-m-plain"
3803
+ type="button"
3804
+ aria-label="Scroll left"
3805
+ disabled
3806
+ >
3807
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3808
+ </button>
3809
+ </div>
3727
3810
  <ul class="pf-v5-c-tabs__list" role="tablist">
3728
3811
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
3729
3812
  <button
@@ -3807,6 +3890,7 @@ cssPrefix: pf-v5-c-tabs
3807
3890
  class="pf-v5-c-button pf-m-plain"
3808
3891
  type="button"
3809
3892
  aria-label="More info for Disabled label"
3893
+ disabled
3810
3894
  >
3811
3895
  <span class="pf-v5-c-tabs__item-action-icon">
3812
3896
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3829,9 +3913,10 @@ cssPrefix: pf-v5-c-tabs
3829
3913
  </button>
3830
3914
  <span class="pf-v5-c-tabs__item-action">
3831
3915
  <button
3832
- class="pf-v5-c-button pf-m-plain"
3916
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
3833
3917
  type="button"
3834
3918
  aria-label="More info for ARIA disabled label"
3919
+ aria-disabled="true"
3835
3920
  >
3836
3921
  <span class="pf-v5-c-tabs__item-action-icon">
3837
3922
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -3888,27 +3973,31 @@ cssPrefix: pf-v5-c-tabs
3888
3973
  </li>
3889
3974
  </ul>
3890
3975
 
3891
- <button
3892
- class="pf-v5-c-tabs__scroll-button"
3893
- type="button"
3894
- aria-label="Scroll right"
3895
- >
3896
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3897
- </button>
3976
+ <div class="pf-v5-c-tabs__scroll-button">
3977
+ <button
3978
+ class="pf-v5-c-button pf-m-plain"
3979
+ type="button"
3980
+ aria-label="Scroll right"
3981
+ >
3982
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3983
+ </button>
3984
+ </div>
3898
3985
  </div>
3899
3986
  <div
3900
- class="pf-v5-c-tabs pf-m-secondary pf-m-scrollable"
3987
+ class="pf-v5-c-tabs pf-m-subtab pf-m-scrollable"
3901
3988
  role="region"
3902
3989
  id="help-button-secondary-secondary-example"
3903
3990
  >
3904
- <button
3905
- class="pf-v5-c-tabs__scroll-button"
3906
- type="button"
3907
- disabled
3908
- aria-label="Scroll left"
3909
- >
3910
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3911
- </button>
3991
+ <div class="pf-v5-c-tabs__scroll-button">
3992
+ <button
3993
+ class="pf-v5-c-button pf-m-plain"
3994
+ type="button"
3995
+ aria-label="Scroll left"
3996
+ disabled
3997
+ >
3998
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3999
+ </button>
4000
+ </div>
3912
4001
  <ul class="pf-v5-c-tabs__list" role="tablist">
3913
4002
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
3914
4003
  <button
@@ -3992,6 +4081,7 @@ cssPrefix: pf-v5-c-tabs
3992
4081
  class="pf-v5-c-button pf-m-plain"
3993
4082
  type="button"
3994
4083
  aria-label="More info for Disabled label"
4084
+ disabled
3995
4085
  >
3996
4086
  <span class="pf-v5-c-tabs__item-action-icon">
3997
4087
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -4014,9 +4104,10 @@ cssPrefix: pf-v5-c-tabs
4014
4104
  </button>
4015
4105
  <span class="pf-v5-c-tabs__item-action">
4016
4106
  <button
4017
- class="pf-v5-c-button pf-m-plain"
4107
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
4018
4108
  type="button"
4019
4109
  aria-label="More info for ARIA disabled label"
4110
+ aria-disabled="true"
4020
4111
  >
4021
4112
  <span class="pf-v5-c-tabs__item-action-icon">
4022
4113
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -4073,13 +4164,15 @@ cssPrefix: pf-v5-c-tabs
4073
4164
  </li>
4074
4165
  </ul>
4075
4166
 
4076
- <button
4077
- class="pf-v5-c-tabs__scroll-button"
4078
- type="button"
4079
- aria-label="Scroll right"
4080
- >
4081
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4082
- </button>
4167
+ <div class="pf-v5-c-tabs__scroll-button">
4168
+ <button
4169
+ class="pf-v5-c-button pf-m-plain"
4170
+ type="button"
4171
+ aria-label="Scroll right"
4172
+ >
4173
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4174
+ </button>
4175
+ </div>
4083
4176
  </div>
4084
4177
 
4085
4178
  ```
@@ -4092,14 +4185,16 @@ cssPrefix: pf-v5-c-tabs
4092
4185
  role="region"
4093
4186
  id="close-button-default-example"
4094
4187
  >
4095
- <button
4096
- class="pf-v5-c-tabs__scroll-button"
4097
- type="button"
4098
- disabled
4099
- aria-label="Scroll left"
4100
- >
4101
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4102
- </button>
4188
+ <div class="pf-v5-c-tabs__scroll-button">
4189
+ <button
4190
+ class="pf-v5-c-button pf-m-plain"
4191
+ type="button"
4192
+ aria-label="Scroll left"
4193
+ disabled
4194
+ >
4195
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4196
+ </button>
4197
+ </div>
4103
4198
  <ul class="pf-v5-c-tabs__list" role="tablist">
4104
4199
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
4105
4200
  <button
@@ -4183,6 +4278,7 @@ cssPrefix: pf-v5-c-tabs
4183
4278
  class="pf-v5-c-button pf-m-plain"
4184
4279
  type="button"
4185
4280
  aria-label="Close Disabled"
4281
+ disabled
4186
4282
  >
4187
4283
  <span class="pf-v5-c-tabs__item-action-icon">
4188
4284
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -4205,9 +4301,10 @@ cssPrefix: pf-v5-c-tabs
4205
4301
  </button>
4206
4302
  <span class="pf-v5-c-tabs__item-action">
4207
4303
  <button
4208
- class="pf-v5-c-button pf-m-plain"
4304
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
4209
4305
  type="button"
4210
4306
  aria-label="Close ARIA disabled"
4307
+ aria-disabled="true"
4211
4308
  >
4212
4309
  <span class="pf-v5-c-tabs__item-action-icon">
4213
4310
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -4264,13 +4361,15 @@ cssPrefix: pf-v5-c-tabs
4264
4361
  </li>
4265
4362
  </ul>
4266
4363
 
4267
- <button
4268
- class="pf-v5-c-tabs__scroll-button"
4269
- type="button"
4270
- aria-label="Scroll right"
4271
- >
4272
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4273
- </button>
4364
+ <div class="pf-v5-c-tabs__scroll-button">
4365
+ <button
4366
+ class="pf-v5-c-button pf-m-plain"
4367
+ type="button"
4368
+ aria-label="Scroll right"
4369
+ >
4370
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4371
+ </button>
4372
+ </div>
4274
4373
  </div>
4275
4374
 
4276
4375
  <br />
@@ -4281,14 +4380,16 @@ cssPrefix: pf-v5-c-tabs
4281
4380
  role="region"
4282
4381
  id="close-button-box-example"
4283
4382
  >
4284
- <button
4285
- class="pf-v5-c-tabs__scroll-button"
4286
- type="button"
4287
- disabled
4288
- aria-label="Scroll left"
4289
- >
4290
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4291
- </button>
4383
+ <div class="pf-v5-c-tabs__scroll-button">
4384
+ <button
4385
+ class="pf-v5-c-button pf-m-plain"
4386
+ type="button"
4387
+ aria-label="Scroll left"
4388
+ disabled
4389
+ >
4390
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4391
+ </button>
4392
+ </div>
4292
4393
  <ul class="pf-v5-c-tabs__list" role="tablist">
4293
4394
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
4294
4395
  <button
@@ -4372,6 +4473,7 @@ cssPrefix: pf-v5-c-tabs
4372
4473
  class="pf-v5-c-button pf-m-plain"
4373
4474
  type="button"
4374
4475
  aria-label="Close Disabled"
4476
+ disabled
4375
4477
  >
4376
4478
  <span class="pf-v5-c-tabs__item-action-icon">
4377
4479
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -4394,9 +4496,10 @@ cssPrefix: pf-v5-c-tabs
4394
4496
  </button>
4395
4497
  <span class="pf-v5-c-tabs__item-action">
4396
4498
  <button
4397
- class="pf-v5-c-button pf-m-plain"
4499
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
4398
4500
  type="button"
4399
4501
  aria-label="Close ARIA disabled"
4502
+ aria-disabled="true"
4400
4503
  >
4401
4504
  <span class="pf-v5-c-tabs__item-action-icon">
4402
4505
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -4453,38 +4556,42 @@ cssPrefix: pf-v5-c-tabs
4453
4556
  </li>
4454
4557
  </ul>
4455
4558
 
4456
- <button
4457
- class="pf-v5-c-tabs__scroll-button"
4458
- type="button"
4459
- aria-label="Scroll right"
4460
- >
4461
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4462
- </button>
4559
+ <div class="pf-v5-c-tabs__scroll-button">
4560
+ <button
4561
+ class="pf-v5-c-button pf-m-plain"
4562
+ type="button"
4563
+ aria-label="Scroll right"
4564
+ >
4565
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4566
+ </button>
4567
+ </div>
4463
4568
  </div>
4464
4569
 
4465
4570
  <br />
4466
4571
  <br />
4467
4572
 
4468
4573
  <div
4469
- class="pf-v5-c-tabs pf-m-box pf-m-color-scheme--light-300 pf-m-scrollable"
4574
+ class="pf-v5-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
4470
4575
  role="region"
4471
- id="close-button-box-light-300-example"
4576
+ id="close-button-box-secondary-example"
4472
4577
  >
4473
- <button
4474
- class="pf-v5-c-tabs__scroll-button"
4475
- type="button"
4476
- disabled
4477
- aria-label="Scroll left"
4478
- >
4479
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4480
- </button>
4578
+ <div class="pf-v5-c-tabs__scroll-button">
4579
+ <button
4580
+ class="pf-v5-c-button pf-m-plain"
4581
+ type="button"
4582
+ aria-label="Scroll left"
4583
+ disabled
4584
+ >
4585
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4586
+ </button>
4587
+ </div>
4481
4588
  <ul class="pf-v5-c-tabs__list" role="tablist">
4482
4589
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
4483
4590
  <button
4484
4591
  type="button"
4485
4592
  class="pf-v5-c-tabs__link"
4486
4593
  role="tab"
4487
- id="close-button-box-light-300-example-users-link"
4594
+ id="close-button-box-secondary-example-users-link"
4488
4595
  >
4489
4596
  <span class="pf-v5-c-tabs__item-text">Users</span>
4490
4597
  </button>
@@ -4505,7 +4612,7 @@ cssPrefix: pf-v5-c-tabs
4505
4612
  type="button"
4506
4613
  class="pf-v5-c-tabs__link"
4507
4614
  role="tab"
4508
- id="close-button-box-light-300-example-containers-link"
4615
+ id="close-button-box-secondary-example-containers-link"
4509
4616
  >
4510
4617
  <span class="pf-v5-c-tabs__item-text">Containers</span>
4511
4618
  </button>
@@ -4526,7 +4633,7 @@ cssPrefix: pf-v5-c-tabs
4526
4633
  type="button"
4527
4634
  class="pf-v5-c-tabs__link"
4528
4635
  role="tab"
4529
- id="close-button-box-light-300-example-database-link"
4636
+ id="close-button-box-secondary-example-database-link"
4530
4637
  >
4531
4638
  <span class="pf-v5-c-tabs__item-text">Database</span>
4532
4639
  </button>
@@ -4552,7 +4659,7 @@ cssPrefix: pf-v5-c-tabs
4552
4659
  class="pf-v5-c-tabs__link"
4553
4660
  disabled
4554
4661
  role="tab"
4555
- id="close-button-box-light-300-example-disabled-link"
4662
+ id="close-button-box-secondary-example-disabled-link"
4556
4663
  >
4557
4664
  <span class="pf-v5-c-tabs__item-text">Disabled</span>
4558
4665
  </button>
@@ -4561,6 +4668,7 @@ cssPrefix: pf-v5-c-tabs
4561
4668
  class="pf-v5-c-button pf-m-plain"
4562
4669
  type="button"
4563
4670
  aria-label="Close Disabled"
4671
+ disabled
4564
4672
  >
4565
4673
  <span class="pf-v5-c-tabs__item-action-icon">
4566
4674
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -4577,15 +4685,16 @@ cssPrefix: pf-v5-c-tabs
4577
4685
  class="pf-v5-c-tabs__link pf-m-aria-disabled"
4578
4686
  aria-disabled="true"
4579
4687
  role="tab"
4580
- id="close-button-box-light-300-example-aria-disabled-link"
4688
+ id="close-button-box-secondary-example-aria-disabled-link"
4581
4689
  >
4582
4690
  <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
4583
4691
  </button>
4584
4692
  <span class="pf-v5-c-tabs__item-action">
4585
4693
  <button
4586
- class="pf-v5-c-button pf-m-plain"
4694
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
4587
4695
  type="button"
4588
4696
  aria-label="Close ARIA disabled"
4697
+ aria-disabled="true"
4589
4698
  >
4590
4699
  <span class="pf-v5-c-tabs__item-action-icon">
4591
4700
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -4602,7 +4711,7 @@ cssPrefix: pf-v5-c-tabs
4602
4711
  class="pf-v5-c-tabs__link"
4603
4712
  disabled
4604
4713
  role="tab"
4605
- id="close-button-box-light-300-example-close-disabled-link"
4714
+ id="close-button-box-secondary-example-close-disabled-link"
4606
4715
  >
4607
4716
  <span class="pf-v5-c-tabs__item-text">Close disabled</span>
4608
4717
  </button>
@@ -4624,7 +4733,7 @@ cssPrefix: pf-v5-c-tabs
4624
4733
  type="button"
4625
4734
  class="pf-v5-c-tabs__link"
4626
4735
  role="tab"
4627
- id="close-button-box-light-300-example-network-wired-link"
4736
+ id="close-button-box-secondary-example-network-wired-link"
4628
4737
  >
4629
4738
  <span class="pf-v5-c-tabs__item-text">Network</span>
4630
4739
  </button>
@@ -4642,13 +4751,15 @@ cssPrefix: pf-v5-c-tabs
4642
4751
  </li>
4643
4752
  </ul>
4644
4753
 
4645
- <button
4646
- class="pf-v5-c-tabs__scroll-button"
4647
- type="button"
4648
- aria-label="Scroll right"
4649
- >
4650
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4651
- </button>
4754
+ <div class="pf-v5-c-tabs__scroll-button">
4755
+ <button
4756
+ class="pf-v5-c-button pf-m-plain"
4757
+ type="button"
4758
+ aria-label="Scroll right"
4759
+ >
4760
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4761
+ </button>
4762
+ </div>
4652
4763
  </div>
4653
4764
 
4654
4765
  <br />
@@ -4659,14 +4770,16 @@ cssPrefix: pf-v5-c-tabs
4659
4770
  role="region"
4660
4771
  id="close-button-icons-text-example"
4661
4772
  >
4662
- <button
4663
- class="pf-v5-c-tabs__scroll-button"
4664
- type="button"
4665
- disabled
4666
- aria-label="Scroll left"
4667
- >
4668
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4669
- </button>
4773
+ <div class="pf-v5-c-tabs__scroll-button">
4774
+ <button
4775
+ class="pf-v5-c-button pf-m-plain"
4776
+ type="button"
4777
+ aria-label="Scroll left"
4778
+ disabled
4779
+ >
4780
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4781
+ </button>
4782
+ </div>
4670
4783
  <ul class="pf-v5-c-tabs__list" role="tablist">
4671
4784
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
4672
4785
  <button
@@ -4762,6 +4875,7 @@ cssPrefix: pf-v5-c-tabs
4762
4875
  class="pf-v5-c-button pf-m-plain"
4763
4876
  type="button"
4764
4877
  aria-label="Close Disabled"
4878
+ disabled
4765
4879
  >
4766
4880
  <span class="pf-v5-c-tabs__item-action-icon">
4767
4881
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -4787,9 +4901,10 @@ cssPrefix: pf-v5-c-tabs
4787
4901
  </button>
4788
4902
  <span class="pf-v5-c-tabs__item-action">
4789
4903
  <button
4790
- class="pf-v5-c-button pf-m-plain"
4904
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
4791
4905
  type="button"
4792
4906
  aria-label="Close ARIA disabled"
4907
+ aria-disabled="true"
4793
4908
  >
4794
4909
  <span class="pf-v5-c-tabs__item-action-icon">
4795
4910
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -4852,13 +4967,15 @@ cssPrefix: pf-v5-c-tabs
4852
4967
  </li>
4853
4968
  </ul>
4854
4969
 
4855
- <button
4856
- class="pf-v5-c-tabs__scroll-button"
4857
- type="button"
4858
- aria-label="Scroll right"
4859
- >
4860
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4861
- </button>
4970
+ <div class="pf-v5-c-tabs__scroll-button">
4971
+ <button
4972
+ class="pf-v5-c-button pf-m-plain"
4973
+ type="button"
4974
+ aria-label="Scroll right"
4975
+ >
4976
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4977
+ </button>
4978
+ </div>
4862
4979
  </div>
4863
4980
 
4864
4981
  <br />
@@ -4869,14 +4986,16 @@ cssPrefix: pf-v5-c-tabs
4869
4986
  role="region"
4870
4987
  id="close-button-filled-example"
4871
4988
  >
4872
- <button
4873
- class="pf-v5-c-tabs__scroll-button"
4874
- type="button"
4875
- disabled
4876
- aria-label="Scroll left"
4877
- >
4878
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4879
- </button>
4989
+ <div class="pf-v5-c-tabs__scroll-button">
4990
+ <button
4991
+ class="pf-v5-c-button pf-m-plain"
4992
+ type="button"
4993
+ aria-label="Scroll left"
4994
+ disabled
4995
+ >
4996
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4997
+ </button>
4998
+ </div>
4880
4999
  <ul class="pf-v5-c-tabs__list" role="tablist">
4881
5000
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
4882
5001
  <button
@@ -4943,15 +5062,16 @@ cssPrefix: pf-v5-c-tabs
4943
5062
  </li>
4944
5063
  </ul>
4945
5064
 
4946
- <button
4947
- class="pf-v5-c-tabs__scroll-button"
4948
- type="button"
4949
- disabled
4950
- aria-hidden="true"
4951
- aria-label="Scroll right"
4952
- >
4953
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4954
- </button>
5065
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
5066
+ <button
5067
+ class="pf-v5-c-button pf-m-plain"
5068
+ type="button"
5069
+ aria-label="Scroll right"
5070
+ disabled
5071
+ >
5072
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5073
+ </button>
5074
+ </div>
4955
5075
  </div>
4956
5076
 
4957
5077
  <br />
@@ -4962,14 +5082,16 @@ cssPrefix: pf-v5-c-tabs
4962
5082
  role="region"
4963
5083
  id="close-button-secondary-primary-example"
4964
5084
  >
4965
- <button
4966
- class="pf-v5-c-tabs__scroll-button"
4967
- type="button"
4968
- disabled
4969
- aria-label="Scroll left"
4970
- >
4971
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4972
- </button>
5085
+ <div class="pf-v5-c-tabs__scroll-button">
5086
+ <button
5087
+ class="pf-v5-c-button pf-m-plain"
5088
+ type="button"
5089
+ aria-label="Scroll left"
5090
+ disabled
5091
+ >
5092
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
5093
+ </button>
5094
+ </div>
4973
5095
  <ul class="pf-v5-c-tabs__list" role="tablist">
4974
5096
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
4975
5097
  <button
@@ -5053,6 +5175,7 @@ cssPrefix: pf-v5-c-tabs
5053
5175
  class="pf-v5-c-button pf-m-plain"
5054
5176
  type="button"
5055
5177
  aria-label="Close Disabled"
5178
+ disabled
5056
5179
  >
5057
5180
  <span class="pf-v5-c-tabs__item-action-icon">
5058
5181
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -5075,9 +5198,10 @@ cssPrefix: pf-v5-c-tabs
5075
5198
  </button>
5076
5199
  <span class="pf-v5-c-tabs__item-action">
5077
5200
  <button
5078
- class="pf-v5-c-button pf-m-plain"
5201
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
5079
5202
  type="button"
5080
5203
  aria-label="Close ARIA disabled"
5204
+ aria-disabled="true"
5081
5205
  >
5082
5206
  <span class="pf-v5-c-tabs__item-action-icon">
5083
5207
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -5134,27 +5258,31 @@ cssPrefix: pf-v5-c-tabs
5134
5258
  </li>
5135
5259
  </ul>
5136
5260
 
5137
- <button
5138
- class="pf-v5-c-tabs__scroll-button"
5139
- type="button"
5140
- aria-label="Scroll right"
5141
- >
5142
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5143
- </button>
5261
+ <div class="pf-v5-c-tabs__scroll-button">
5262
+ <button
5263
+ class="pf-v5-c-button pf-m-plain"
5264
+ type="button"
5265
+ aria-label="Scroll right"
5266
+ >
5267
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5268
+ </button>
5269
+ </div>
5144
5270
  </div>
5145
5271
  <div
5146
- class="pf-v5-c-tabs pf-m-secondary pf-m-scrollable"
5272
+ class="pf-v5-c-tabs pf-m-subtab pf-m-scrollable"
5147
5273
  role="region"
5148
5274
  id="close-button-secondary-secondary-example"
5149
5275
  >
5150
- <button
5151
- class="pf-v5-c-tabs__scroll-button"
5152
- type="button"
5153
- disabled
5154
- aria-label="Scroll left"
5155
- >
5156
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5157
- </button>
5276
+ <div class="pf-v5-c-tabs__scroll-button">
5277
+ <button
5278
+ class="pf-v5-c-button pf-m-plain"
5279
+ type="button"
5280
+ aria-label="Scroll left"
5281
+ disabled
5282
+ >
5283
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
5284
+ </button>
5285
+ </div>
5158
5286
  <ul class="pf-v5-c-tabs__list" role="tablist">
5159
5287
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
5160
5288
  <button
@@ -5238,6 +5366,7 @@ cssPrefix: pf-v5-c-tabs
5238
5366
  class="pf-v5-c-button pf-m-plain"
5239
5367
  type="button"
5240
5368
  aria-label="Close Disabled"
5369
+ disabled
5241
5370
  >
5242
5371
  <span class="pf-v5-c-tabs__item-action-icon">
5243
5372
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -5260,9 +5389,10 @@ cssPrefix: pf-v5-c-tabs
5260
5389
  </button>
5261
5390
  <span class="pf-v5-c-tabs__item-action">
5262
5391
  <button
5263
- class="pf-v5-c-button pf-m-plain"
5392
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
5264
5393
  type="button"
5265
5394
  aria-label="Close ARIA disabled"
5395
+ aria-disabled="true"
5266
5396
  >
5267
5397
  <span class="pf-v5-c-tabs__item-action-icon">
5268
5398
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -5319,13 +5449,15 @@ cssPrefix: pf-v5-c-tabs
5319
5449
  </li>
5320
5450
  </ul>
5321
5451
 
5322
- <button
5323
- class="pf-v5-c-tabs__scroll-button"
5324
- type="button"
5325
- aria-label="Scroll right"
5326
- >
5327
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5328
- </button>
5452
+ <div class="pf-v5-c-tabs__scroll-button">
5453
+ <button
5454
+ class="pf-v5-c-button pf-m-plain"
5455
+ type="button"
5456
+ aria-label="Scroll right"
5457
+ >
5458
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5459
+ </button>
5460
+ </div>
5329
5461
  </div>
5330
5462
 
5331
5463
  ```
@@ -5338,14 +5470,16 @@ cssPrefix: pf-v5-c-tabs
5338
5470
  role="region"
5339
5471
  id="help-close-button-default-example"
5340
5472
  >
5341
- <button
5342
- class="pf-v5-c-tabs__scroll-button"
5343
- type="button"
5344
- disabled
5345
- aria-label="Scroll left"
5346
- >
5347
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5348
- </button>
5473
+ <div class="pf-v5-c-tabs__scroll-button">
5474
+ <button
5475
+ class="pf-v5-c-button pf-m-plain"
5476
+ type="button"
5477
+ aria-label="Scroll left"
5478
+ disabled
5479
+ >
5480
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
5481
+ </button>
5482
+ </div>
5349
5483
  <ul class="pf-v5-c-tabs__list" role="tablist">
5350
5484
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
5351
5485
  <button
@@ -5465,6 +5599,7 @@ cssPrefix: pf-v5-c-tabs
5465
5599
  class="pf-v5-c-button pf-m-plain"
5466
5600
  type="button"
5467
5601
  aria-label="More info for Disabled label"
5602
+ disabled
5468
5603
  >
5469
5604
  <span class="pf-v5-c-tabs__item-action-icon">
5470
5605
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -5477,6 +5612,7 @@ cssPrefix: pf-v5-c-tabs
5477
5612
  class="pf-v5-c-button pf-m-plain"
5478
5613
  type="button"
5479
5614
  aria-label="Close Disabled"
5615
+ disabled
5480
5616
  >
5481
5617
  <span class="pf-v5-c-tabs__item-action-icon">
5482
5618
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -5499,9 +5635,10 @@ cssPrefix: pf-v5-c-tabs
5499
5635
  </button>
5500
5636
  <span class="pf-v5-c-tabs__item-action">
5501
5637
  <button
5502
- class="pf-v5-c-button pf-m-plain"
5638
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
5503
5639
  type="button"
5504
5640
  aria-label="More info for ARIA disabled label"
5641
+ aria-disabled="true"
5505
5642
  >
5506
5643
  <span class="pf-v5-c-tabs__item-action-icon">
5507
5644
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -5511,9 +5648,10 @@ cssPrefix: pf-v5-c-tabs
5511
5648
 
5512
5649
  <span class="pf-v5-c-tabs__item-action">
5513
5650
  <button
5514
- class="pf-v5-c-button pf-m-plain"
5651
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
5515
5652
  type="button"
5516
5653
  aria-label="Close ARIA disabled"
5654
+ aria-disabled="true"
5517
5655
  >
5518
5656
  <span class="pf-v5-c-tabs__item-action-icon">
5519
5657
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -5671,13 +5809,15 @@ cssPrefix: pf-v5-c-tabs
5671
5809
  </li>
5672
5810
  </ul>
5673
5811
 
5674
- <button
5675
- class="pf-v5-c-tabs__scroll-button"
5676
- type="button"
5677
- aria-label="Scroll right"
5678
- >
5679
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5680
- </button>
5812
+ <div class="pf-v5-c-tabs__scroll-button">
5813
+ <button
5814
+ class="pf-v5-c-button pf-m-plain"
5815
+ type="button"
5816
+ aria-label="Scroll right"
5817
+ >
5818
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5819
+ </button>
5820
+ </div>
5681
5821
  </div>
5682
5822
 
5683
5823
  <br />
@@ -5688,14 +5828,16 @@ cssPrefix: pf-v5-c-tabs
5688
5828
  role="region"
5689
5829
  id="help-close-button-box-example"
5690
5830
  >
5691
- <button
5692
- class="pf-v5-c-tabs__scroll-button"
5693
- type="button"
5694
- disabled
5695
- aria-label="Scroll left"
5696
- >
5697
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5698
- </button>
5831
+ <div class="pf-v5-c-tabs__scroll-button">
5832
+ <button
5833
+ class="pf-v5-c-button pf-m-plain"
5834
+ type="button"
5835
+ aria-label="Scroll left"
5836
+ disabled
5837
+ >
5838
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
5839
+ </button>
5840
+ </div>
5699
5841
  <ul class="pf-v5-c-tabs__list" role="tablist">
5700
5842
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
5701
5843
  <button
@@ -5815,6 +5957,7 @@ cssPrefix: pf-v5-c-tabs
5815
5957
  class="pf-v5-c-button pf-m-plain"
5816
5958
  type="button"
5817
5959
  aria-label="More info for Disabled label"
5960
+ disabled
5818
5961
  >
5819
5962
  <span class="pf-v5-c-tabs__item-action-icon">
5820
5963
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -5827,6 +5970,7 @@ cssPrefix: pf-v5-c-tabs
5827
5970
  class="pf-v5-c-button pf-m-plain"
5828
5971
  type="button"
5829
5972
  aria-label="Close Disabled"
5973
+ disabled
5830
5974
  >
5831
5975
  <span class="pf-v5-c-tabs__item-action-icon">
5832
5976
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -5849,9 +5993,10 @@ cssPrefix: pf-v5-c-tabs
5849
5993
  </button>
5850
5994
  <span class="pf-v5-c-tabs__item-action">
5851
5995
  <button
5852
- class="pf-v5-c-button pf-m-plain"
5996
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
5853
5997
  type="button"
5854
5998
  aria-label="More info for ARIA disabled label"
5999
+ aria-disabled="true"
5855
6000
  >
5856
6001
  <span class="pf-v5-c-tabs__item-action-icon">
5857
6002
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -5861,9 +6006,10 @@ cssPrefix: pf-v5-c-tabs
5861
6006
 
5862
6007
  <span class="pf-v5-c-tabs__item-action">
5863
6008
  <button
5864
- class="pf-v5-c-button pf-m-plain"
6009
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
5865
6010
  type="button"
5866
6011
  aria-label="Close ARIA disabled"
6012
+ aria-disabled="true"
5867
6013
  >
5868
6014
  <span class="pf-v5-c-tabs__item-action-icon">
5869
6015
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -6021,38 +6167,42 @@ cssPrefix: pf-v5-c-tabs
6021
6167
  </li>
6022
6168
  </ul>
6023
6169
 
6024
- <button
6025
- class="pf-v5-c-tabs__scroll-button"
6026
- type="button"
6027
- aria-label="Scroll right"
6028
- >
6029
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6030
- </button>
6170
+ <div class="pf-v5-c-tabs__scroll-button">
6171
+ <button
6172
+ class="pf-v5-c-button pf-m-plain"
6173
+ type="button"
6174
+ aria-label="Scroll right"
6175
+ >
6176
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
6177
+ </button>
6178
+ </div>
6031
6179
  </div>
6032
6180
 
6033
6181
  <br />
6034
6182
  <br />
6035
6183
 
6036
6184
  <div
6037
- class="pf-v5-c-tabs pf-m-box pf-m-color-scheme--light-300 pf-m-scrollable"
6185
+ class="pf-v5-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
6038
6186
  role="region"
6039
- id="help-close-button-box-light-300-example"
6187
+ id="help-close-button-box-secondary-example"
6040
6188
  >
6041
- <button
6042
- class="pf-v5-c-tabs__scroll-button"
6043
- type="button"
6044
- disabled
6045
- aria-label="Scroll left"
6046
- >
6047
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6048
- </button>
6189
+ <div class="pf-v5-c-tabs__scroll-button">
6190
+ <button
6191
+ class="pf-v5-c-button pf-m-plain"
6192
+ type="button"
6193
+ aria-label="Scroll left"
6194
+ disabled
6195
+ >
6196
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
6197
+ </button>
6198
+ </div>
6049
6199
  <ul class="pf-v5-c-tabs__list" role="tablist">
6050
6200
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
6051
6201
  <button
6052
6202
  type="button"
6053
6203
  class="pf-v5-c-tabs__link"
6054
6204
  role="tab"
6055
- id="help-close-button-box-light-300-example-users-link"
6205
+ id="help-close-button-box-secondary-example-users-link"
6056
6206
  >
6057
6207
  <span class="pf-v5-c-tabs__item-text">Users</span>
6058
6208
  </button>
@@ -6085,7 +6235,7 @@ cssPrefix: pf-v5-c-tabs
6085
6235
  type="button"
6086
6236
  class="pf-v5-c-tabs__link"
6087
6237
  role="tab"
6088
- id="help-close-button-box-light-300-example-containers-link"
6238
+ id="help-close-button-box-secondary-example-containers-link"
6089
6239
  >
6090
6240
  <span class="pf-v5-c-tabs__item-text">Containers</span>
6091
6241
  </button>
@@ -6118,7 +6268,7 @@ cssPrefix: pf-v5-c-tabs
6118
6268
  type="button"
6119
6269
  class="pf-v5-c-tabs__link"
6120
6270
  role="tab"
6121
- id="help-close-button-box-light-300-example-database-link"
6271
+ id="help-close-button-box-secondary-example-database-link"
6122
6272
  >
6123
6273
  <span class="pf-v5-c-tabs__item-text">Database</span>
6124
6274
  </button>
@@ -6156,7 +6306,7 @@ cssPrefix: pf-v5-c-tabs
6156
6306
  class="pf-v5-c-tabs__link"
6157
6307
  disabled
6158
6308
  role="tab"
6159
- id="help-close-button-box-light-300-example-disabled-link"
6309
+ id="help-close-button-box-secondary-example-disabled-link"
6160
6310
  >
6161
6311
  <span class="pf-v5-c-tabs__item-text">Disabled</span>
6162
6312
  </button>
@@ -6165,6 +6315,7 @@ cssPrefix: pf-v5-c-tabs
6165
6315
  class="pf-v5-c-button pf-m-plain"
6166
6316
  type="button"
6167
6317
  aria-label="More info for Disabled label"
6318
+ disabled
6168
6319
  >
6169
6320
  <span class="pf-v5-c-tabs__item-action-icon">
6170
6321
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -6177,6 +6328,7 @@ cssPrefix: pf-v5-c-tabs
6177
6328
  class="pf-v5-c-button pf-m-plain"
6178
6329
  type="button"
6179
6330
  aria-label="Close Disabled"
6331
+ disabled
6180
6332
  >
6181
6333
  <span class="pf-v5-c-tabs__item-action-icon">
6182
6334
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -6193,15 +6345,16 @@ cssPrefix: pf-v5-c-tabs
6193
6345
  class="pf-v5-c-tabs__link pf-m-aria-disabled"
6194
6346
  aria-disabled="true"
6195
6347
  role="tab"
6196
- id="help-close-button-box-light-300-example-aria-disabled-link"
6348
+ id="help-close-button-box-secondary-example-aria-disabled-link"
6197
6349
  >
6198
6350
  <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
6199
6351
  </button>
6200
6352
  <span class="pf-v5-c-tabs__item-action">
6201
6353
  <button
6202
- class="pf-v5-c-button pf-m-plain"
6354
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
6203
6355
  type="button"
6204
6356
  aria-label="More info for ARIA disabled label"
6357
+ aria-disabled="true"
6205
6358
  >
6206
6359
  <span class="pf-v5-c-tabs__item-action-icon">
6207
6360
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -6211,9 +6364,10 @@ cssPrefix: pf-v5-c-tabs
6211
6364
 
6212
6365
  <span class="pf-v5-c-tabs__item-action">
6213
6366
  <button
6214
- class="pf-v5-c-button pf-m-plain"
6367
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
6215
6368
  type="button"
6216
6369
  aria-label="Close ARIA disabled"
6370
+ aria-disabled="true"
6217
6371
  >
6218
6372
  <span class="pf-v5-c-tabs__item-action-icon">
6219
6373
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -6230,7 +6384,7 @@ cssPrefix: pf-v5-c-tabs
6230
6384
  class="pf-v5-c-tabs__link"
6231
6385
  disabled
6232
6386
  role="tab"
6233
- id="help-close-button-box-light-300-example-help-disabled-link"
6387
+ id="help-close-button-box-secondary-example-help-disabled-link"
6234
6388
  >
6235
6389
  <span class="pf-v5-c-tabs__item-text">Help disabled</span>
6236
6390
  </button>
@@ -6268,7 +6422,7 @@ cssPrefix: pf-v5-c-tabs
6268
6422
  class="pf-v5-c-tabs__link"
6269
6423
  disabled
6270
6424
  role="tab"
6271
- id="help-close-button-box-light-300-example-close-disabled-link"
6425
+ id="help-close-button-box-secondary-example-close-disabled-link"
6272
6426
  >
6273
6427
  <span class="pf-v5-c-tabs__item-text">Close disabled</span>
6274
6428
  </button>
@@ -6306,7 +6460,7 @@ cssPrefix: pf-v5-c-tabs
6306
6460
  class="pf-v5-c-tabs__link"
6307
6461
  disabled
6308
6462
  role="tab"
6309
- id="help-close-button-box-light-300-example-help-close-disabled-link"
6463
+ id="help-close-button-box-secondary-example-help-close-disabled-link"
6310
6464
  >
6311
6465
  <span class="pf-v5-c-tabs__item-text">Help and close disabled</span>
6312
6466
  </button>
@@ -6341,7 +6495,7 @@ cssPrefix: pf-v5-c-tabs
6341
6495
  type="button"
6342
6496
  class="pf-v5-c-tabs__link"
6343
6497
  role="tab"
6344
- id="help-close-button-box-light-300-example-network-wired-link"
6498
+ id="help-close-button-box-secondary-example-network-wired-link"
6345
6499
  >
6346
6500
  <span class="pf-v5-c-tabs__item-text">Network</span>
6347
6501
  </button>
@@ -6371,13 +6525,15 @@ cssPrefix: pf-v5-c-tabs
6371
6525
  </li>
6372
6526
  </ul>
6373
6527
 
6374
- <button
6375
- class="pf-v5-c-tabs__scroll-button"
6376
- type="button"
6377
- aria-label="Scroll right"
6378
- >
6379
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6380
- </button>
6528
+ <div class="pf-v5-c-tabs__scroll-button">
6529
+ <button
6530
+ class="pf-v5-c-button pf-m-plain"
6531
+ type="button"
6532
+ aria-label="Scroll right"
6533
+ >
6534
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
6535
+ </button>
6536
+ </div>
6381
6537
  </div>
6382
6538
 
6383
6539
  <br />
@@ -6388,14 +6544,16 @@ cssPrefix: pf-v5-c-tabs
6388
6544
  role="region"
6389
6545
  id="help-close-button-icons-text-example"
6390
6546
  >
6391
- <button
6392
- class="pf-v5-c-tabs__scroll-button"
6393
- type="button"
6394
- disabled
6395
- aria-label="Scroll left"
6396
- >
6397
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6398
- </button>
6547
+ <div class="pf-v5-c-tabs__scroll-button">
6548
+ <button
6549
+ class="pf-v5-c-button pf-m-plain"
6550
+ type="button"
6551
+ aria-label="Scroll left"
6552
+ disabled
6553
+ >
6554
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
6555
+ </button>
6556
+ </div>
6399
6557
  <ul class="pf-v5-c-tabs__list" role="tablist">
6400
6558
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
6401
6559
  <button
@@ -6527,6 +6685,7 @@ cssPrefix: pf-v5-c-tabs
6527
6685
  class="pf-v5-c-button pf-m-plain"
6528
6686
  type="button"
6529
6687
  aria-label="More info for Disabled label"
6688
+ disabled
6530
6689
  >
6531
6690
  <span class="pf-v5-c-tabs__item-action-icon">
6532
6691
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -6539,6 +6698,7 @@ cssPrefix: pf-v5-c-tabs
6539
6698
  class="pf-v5-c-button pf-m-plain"
6540
6699
  type="button"
6541
6700
  aria-label="Close Disabled"
6701
+ disabled
6542
6702
  >
6543
6703
  <span class="pf-v5-c-tabs__item-action-icon">
6544
6704
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -6564,9 +6724,10 @@ cssPrefix: pf-v5-c-tabs
6564
6724
  </button>
6565
6725
  <span class="pf-v5-c-tabs__item-action">
6566
6726
  <button
6567
- class="pf-v5-c-button pf-m-plain"
6727
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
6568
6728
  type="button"
6569
6729
  aria-label="More info for ARIA disabled label"
6730
+ aria-disabled="true"
6570
6731
  >
6571
6732
  <span class="pf-v5-c-tabs__item-action-icon">
6572
6733
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -6576,9 +6737,10 @@ cssPrefix: pf-v5-c-tabs
6576
6737
 
6577
6738
  <span class="pf-v5-c-tabs__item-action">
6578
6739
  <button
6579
- class="pf-v5-c-button pf-m-plain"
6740
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
6580
6741
  type="button"
6581
6742
  aria-label="Close ARIA disabled"
6743
+ aria-disabled="true"
6582
6744
  >
6583
6745
  <span class="pf-v5-c-tabs__item-action-icon">
6584
6746
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -6748,13 +6910,15 @@ cssPrefix: pf-v5-c-tabs
6748
6910
  </li>
6749
6911
  </ul>
6750
6912
 
6751
- <button
6752
- class="pf-v5-c-tabs__scroll-button"
6753
- type="button"
6754
- aria-label="Scroll right"
6755
- >
6756
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6757
- </button>
6913
+ <div class="pf-v5-c-tabs__scroll-button">
6914
+ <button
6915
+ class="pf-v5-c-button pf-m-plain"
6916
+ type="button"
6917
+ aria-label="Scroll right"
6918
+ >
6919
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
6920
+ </button>
6921
+ </div>
6758
6922
  </div>
6759
6923
 
6760
6924
  <br />
@@ -6765,14 +6929,16 @@ cssPrefix: pf-v5-c-tabs
6765
6929
  role="region"
6766
6930
  id="help-close-button-filled-example"
6767
6931
  >
6768
- <button
6769
- class="pf-v5-c-tabs__scroll-button"
6770
- type="button"
6771
- disabled
6772
- aria-label="Scroll left"
6773
- >
6774
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6775
- </button>
6932
+ <div class="pf-v5-c-tabs__scroll-button">
6933
+ <button
6934
+ class="pf-v5-c-button pf-m-plain"
6935
+ type="button"
6936
+ aria-label="Scroll left"
6937
+ disabled
6938
+ >
6939
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
6940
+ </button>
6941
+ </div>
6776
6942
  <ul class="pf-v5-c-tabs__list" role="tablist">
6777
6943
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
6778
6944
  <button
@@ -6875,15 +7041,16 @@ cssPrefix: pf-v5-c-tabs
6875
7041
  </li>
6876
7042
  </ul>
6877
7043
 
6878
- <button
6879
- class="pf-v5-c-tabs__scroll-button"
6880
- type="button"
6881
- disabled
6882
- aria-hidden="true"
6883
- aria-label="Scroll right"
6884
- >
6885
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6886
- </button>
7044
+ <div class="pf-v5-c-tabs__scroll-button" aria-hidden="true">
7045
+ <button
7046
+ class="pf-v5-c-button pf-m-plain"
7047
+ type="button"
7048
+ aria-label="Scroll right"
7049
+ disabled
7050
+ >
7051
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
7052
+ </button>
7053
+ </div>
6887
7054
  </div>
6888
7055
 
6889
7056
  <br />
@@ -6894,14 +7061,16 @@ cssPrefix: pf-v5-c-tabs
6894
7061
  role="region"
6895
7062
  id="help-close-button-secondary-primary-example"
6896
7063
  >
6897
- <button
6898
- class="pf-v5-c-tabs__scroll-button"
6899
- type="button"
6900
- disabled
6901
- aria-label="Scroll left"
6902
- >
6903
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6904
- </button>
7064
+ <div class="pf-v5-c-tabs__scroll-button">
7065
+ <button
7066
+ class="pf-v5-c-button pf-m-plain"
7067
+ type="button"
7068
+ aria-label="Scroll left"
7069
+ disabled
7070
+ >
7071
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
7072
+ </button>
7073
+ </div>
6905
7074
  <ul class="pf-v5-c-tabs__list" role="tablist">
6906
7075
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
6907
7076
  <button
@@ -7021,6 +7190,7 @@ cssPrefix: pf-v5-c-tabs
7021
7190
  class="pf-v5-c-button pf-m-plain"
7022
7191
  type="button"
7023
7192
  aria-label="More info for Disabled label"
7193
+ disabled
7024
7194
  >
7025
7195
  <span class="pf-v5-c-tabs__item-action-icon">
7026
7196
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -7033,6 +7203,7 @@ cssPrefix: pf-v5-c-tabs
7033
7203
  class="pf-v5-c-button pf-m-plain"
7034
7204
  type="button"
7035
7205
  aria-label="Close Disabled"
7206
+ disabled
7036
7207
  >
7037
7208
  <span class="pf-v5-c-tabs__item-action-icon">
7038
7209
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -7055,9 +7226,10 @@ cssPrefix: pf-v5-c-tabs
7055
7226
  </button>
7056
7227
  <span class="pf-v5-c-tabs__item-action">
7057
7228
  <button
7058
- class="pf-v5-c-button pf-m-plain"
7229
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
7059
7230
  type="button"
7060
7231
  aria-label="More info for ARIA disabled label"
7232
+ aria-disabled="true"
7061
7233
  >
7062
7234
  <span class="pf-v5-c-tabs__item-action-icon">
7063
7235
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -7067,9 +7239,10 @@ cssPrefix: pf-v5-c-tabs
7067
7239
 
7068
7240
  <span class="pf-v5-c-tabs__item-action">
7069
7241
  <button
7070
- class="pf-v5-c-button pf-m-plain"
7242
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
7071
7243
  type="button"
7072
7244
  aria-label="Close ARIA disabled"
7245
+ aria-disabled="true"
7073
7246
  >
7074
7247
  <span class="pf-v5-c-tabs__item-action-icon">
7075
7248
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -7227,27 +7400,31 @@ cssPrefix: pf-v5-c-tabs
7227
7400
  </li>
7228
7401
  </ul>
7229
7402
 
7230
- <button
7231
- class="pf-v5-c-tabs__scroll-button"
7232
- type="button"
7233
- aria-label="Scroll right"
7234
- >
7235
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7236
- </button>
7403
+ <div class="pf-v5-c-tabs__scroll-button">
7404
+ <button
7405
+ class="pf-v5-c-button pf-m-plain"
7406
+ type="button"
7407
+ aria-label="Scroll right"
7408
+ >
7409
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
7410
+ </button>
7411
+ </div>
7237
7412
  </div>
7238
7413
  <div
7239
- class="pf-v5-c-tabs pf-m-secondary pf-m-scrollable"
7414
+ class="pf-v5-c-tabs pf-m-subtab pf-m-scrollable"
7240
7415
  role="region"
7241
7416
  id="help-close-button-secondary-secondary-example"
7242
7417
  >
7243
- <button
7244
- class="pf-v5-c-tabs__scroll-button"
7245
- type="button"
7246
- disabled
7247
- aria-label="Scroll left"
7248
- >
7249
- <i class="fas fa-angle-left" aria-hidden="true"></i>
7250
- </button>
7418
+ <div class="pf-v5-c-tabs__scroll-button">
7419
+ <button
7420
+ class="pf-v5-c-button pf-m-plain"
7421
+ type="button"
7422
+ aria-label="Scroll left"
7423
+ disabled
7424
+ >
7425
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
7426
+ </button>
7427
+ </div>
7251
7428
  <ul class="pf-v5-c-tabs__list" role="tablist">
7252
7429
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
7253
7430
  <button
@@ -7367,6 +7544,7 @@ cssPrefix: pf-v5-c-tabs
7367
7544
  class="pf-v5-c-button pf-m-plain"
7368
7545
  type="button"
7369
7546
  aria-label="More info for Disabled label"
7547
+ disabled
7370
7548
  >
7371
7549
  <span class="pf-v5-c-tabs__item-action-icon">
7372
7550
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -7379,6 +7557,7 @@ cssPrefix: pf-v5-c-tabs
7379
7557
  class="pf-v5-c-button pf-m-plain"
7380
7558
  type="button"
7381
7559
  aria-label="Close Disabled"
7560
+ disabled
7382
7561
  >
7383
7562
  <span class="pf-v5-c-tabs__item-action-icon">
7384
7563
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -7401,9 +7580,10 @@ cssPrefix: pf-v5-c-tabs
7401
7580
  </button>
7402
7581
  <span class="pf-v5-c-tabs__item-action">
7403
7582
  <button
7404
- class="pf-v5-c-button pf-m-plain"
7583
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
7405
7584
  type="button"
7406
7585
  aria-label="More info for ARIA disabled label"
7586
+ aria-disabled="true"
7407
7587
  >
7408
7588
  <span class="pf-v5-c-tabs__item-action-icon">
7409
7589
  <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
@@ -7413,9 +7593,10 @@ cssPrefix: pf-v5-c-tabs
7413
7593
 
7414
7594
  <span class="pf-v5-c-tabs__item-action">
7415
7595
  <button
7416
- class="pf-v5-c-button pf-m-plain"
7596
+ class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
7417
7597
  type="button"
7418
7598
  aria-label="Close ARIA disabled"
7599
+ aria-disabled="true"
7419
7600
  >
7420
7601
  <span class="pf-v5-c-tabs__item-action-icon">
7421
7602
  <i class="fas fa-times" aria-hidden="true"></i>
@@ -7573,13 +7754,15 @@ cssPrefix: pf-v5-c-tabs
7573
7754
  </li>
7574
7755
  </ul>
7575
7756
 
7576
- <button
7577
- class="pf-v5-c-tabs__scroll-button"
7578
- type="button"
7579
- aria-label="Scroll right"
7580
- >
7581
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7582
- </button>
7757
+ <div class="pf-v5-c-tabs__scroll-button">
7758
+ <button
7759
+ class="pf-v5-c-button pf-m-plain"
7760
+ type="button"
7761
+ aria-label="Scroll right"
7762
+ >
7763
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
7764
+ </button>
7765
+ </div>
7583
7766
  </div>
7584
7767
 
7585
7768
  ```
@@ -7594,14 +7777,16 @@ cssPrefix: pf-v5-c-tabs
7594
7777
  role="region"
7595
7778
  id="default-tabs-add-tab-button"
7596
7779
  >
7597
- <button
7598
- class="pf-v5-c-tabs__scroll-button"
7599
- type="button"
7600
- disabled
7601
- aria-label="Scroll left"
7602
- >
7603
- <i class="fas fa-angle-left" aria-hidden="true"></i>
7604
- </button>
7780
+ <div class="pf-v5-c-tabs__scroll-button">
7781
+ <button
7782
+ class="pf-v5-c-button pf-m-plain"
7783
+ type="button"
7784
+ aria-label="Scroll left"
7785
+ disabled
7786
+ >
7787
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
7788
+ </button>
7789
+ </div>
7605
7790
  <ul class="pf-v5-c-tabs__list" role="tablist">
7606
7791
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
7607
7792
  <button
@@ -7732,13 +7917,15 @@ cssPrefix: pf-v5-c-tabs
7732
7917
  </li>
7733
7918
  </ul>
7734
7919
 
7735
- <button
7736
- class="pf-v5-c-tabs__scroll-button"
7737
- type="button"
7738
- aria-label="Scroll right"
7739
- >
7740
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7741
- </button>
7920
+ <div class="pf-v5-c-tabs__scroll-button">
7921
+ <button
7922
+ class="pf-v5-c-button pf-m-plain"
7923
+ type="button"
7924
+ aria-label="Scroll right"
7925
+ >
7926
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
7927
+ </button>
7928
+ </div>
7742
7929
  <span class="pf-v5-c-tabs__add">
7743
7930
  <button
7744
7931
  class="pf-v5-c-button pf-m-plain"
@@ -7750,25 +7937,27 @@ cssPrefix: pf-v5-c-tabs
7750
7937
  </span>
7751
7938
  </div>
7752
7939
  <div
7753
- class="pf-v5-c-tabs pf-m-secondary pf-m-scrollable"
7940
+ class="pf-v5-c-tabs pf-m-subtab pf-m-scrollable"
7754
7941
  role="region"
7755
- id="default-tabs-add-tab-button-secondary"
7942
+ id="default-tabs-add-tab-button-subtab"
7756
7943
  >
7757
- <button
7758
- class="pf-v5-c-tabs__scroll-button"
7759
- type="button"
7760
- disabled
7761
- aria-label="Scroll left"
7762
- >
7763
- <i class="fas fa-angle-left" aria-hidden="true"></i>
7764
- </button>
7944
+ <div class="pf-v5-c-tabs__scroll-button">
7945
+ <button
7946
+ class="pf-v5-c-button pf-m-plain"
7947
+ type="button"
7948
+ aria-label="Scroll left"
7949
+ disabled
7950
+ >
7951
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
7952
+ </button>
7953
+ </div>
7765
7954
  <ul class="pf-v5-c-tabs__list" role="tablist">
7766
7955
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
7767
7956
  <button
7768
7957
  type="button"
7769
7958
  class="pf-v5-c-tabs__link"
7770
7959
  role="tab"
7771
- id="default-tabs-add-tab-button-secondary-users-link"
7960
+ id="default-tabs-add-tab-button-subtab-users-link"
7772
7961
  >
7773
7962
  <span class="pf-v5-c-tabs__item-text">Users</span>
7774
7963
  </button>
@@ -7789,7 +7978,7 @@ cssPrefix: pf-v5-c-tabs
7789
7978
  type="button"
7790
7979
  class="pf-v5-c-tabs__link"
7791
7980
  role="tab"
7792
- id="default-tabs-add-tab-button-secondary-containers-link"
7981
+ id="default-tabs-add-tab-button-subtab-containers-link"
7793
7982
  >
7794
7983
  <span class="pf-v5-c-tabs__item-text">Containers</span>
7795
7984
  </button>
@@ -7810,7 +7999,7 @@ cssPrefix: pf-v5-c-tabs
7810
7999
  type="button"
7811
8000
  class="pf-v5-c-tabs__link"
7812
8001
  role="tab"
7813
- id="default-tabs-add-tab-button-secondary-database-link"
8002
+ id="default-tabs-add-tab-button-subtab-database-link"
7814
8003
  >
7815
8004
  <span class="pf-v5-c-tabs__item-text">Database</span>
7816
8005
  </button>
@@ -7832,7 +8021,7 @@ cssPrefix: pf-v5-c-tabs
7832
8021
  type="button"
7833
8022
  class="pf-v5-c-tabs__link"
7834
8023
  role="tab"
7835
- id="default-tabs-add-tab-button-secondary-server-link"
8024
+ id="default-tabs-add-tab-button-subtab-server-link"
7836
8025
  >
7837
8026
  <span class="pf-v5-c-tabs__item-text">Server</span>
7838
8027
  </button>
@@ -7853,7 +8042,7 @@ cssPrefix: pf-v5-c-tabs
7853
8042
  type="button"
7854
8043
  class="pf-v5-c-tabs__link"
7855
8044
  role="tab"
7856
- id="default-tabs-add-tab-button-secondary-system-link"
8045
+ id="default-tabs-add-tab-button-subtab-system-link"
7857
8046
  >
7858
8047
  <span class="pf-v5-c-tabs__item-text">System</span>
7859
8048
  </button>
@@ -7874,7 +8063,7 @@ cssPrefix: pf-v5-c-tabs
7874
8063
  type="button"
7875
8064
  class="pf-v5-c-tabs__link"
7876
8065
  role="tab"
7877
- id="default-tabs-add-tab-button-secondary-network-wired-link"
8066
+ id="default-tabs-add-tab-button-subtab-network-wired-link"
7878
8067
  >
7879
8068
  <span class="pf-v5-c-tabs__item-text">Network</span>
7880
8069
  </button>
@@ -7892,13 +8081,15 @@ cssPrefix: pf-v5-c-tabs
7892
8081
  </li>
7893
8082
  </ul>
7894
8083
 
7895
- <button
7896
- class="pf-v5-c-tabs__scroll-button"
7897
- type="button"
7898
- aria-label="Scroll right"
7899
- >
7900
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7901
- </button>
8084
+ <div class="pf-v5-c-tabs__scroll-button">
8085
+ <button
8086
+ class="pf-v5-c-button pf-m-plain"
8087
+ type="button"
8088
+ aria-label="Scroll right"
8089
+ >
8090
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
8091
+ </button>
8092
+ </div>
7902
8093
  <span class="pf-v5-c-tabs__add">
7903
8094
  <button
7904
8095
  class="pf-v5-c-button pf-m-plain"
@@ -7918,14 +8109,16 @@ cssPrefix: pf-v5-c-tabs
7918
8109
  role="region"
7919
8110
  id="box-tabs-add-tab-button"
7920
8111
  >
7921
- <button
7922
- class="pf-v5-c-tabs__scroll-button"
7923
- type="button"
7924
- disabled
7925
- aria-label="Scroll left"
7926
- >
7927
- <i class="fas fa-angle-left" aria-hidden="true"></i>
7928
- </button>
8112
+ <div class="pf-v5-c-tabs__scroll-button">
8113
+ <button
8114
+ class="pf-v5-c-button pf-m-plain"
8115
+ type="button"
8116
+ aria-label="Scroll left"
8117
+ disabled
8118
+ >
8119
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
8120
+ </button>
8121
+ </div>
7929
8122
  <ul class="pf-v5-c-tabs__list" role="tablist">
7930
8123
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
7931
8124
  <button
@@ -8056,13 +8249,15 @@ cssPrefix: pf-v5-c-tabs
8056
8249
  </li>
8057
8250
  </ul>
8058
8251
 
8059
- <button
8060
- class="pf-v5-c-tabs__scroll-button"
8061
- type="button"
8062
- aria-label="Scroll right"
8063
- >
8064
- <i class="fas fa-angle-right" aria-hidden="true"></i>
8065
- </button>
8252
+ <div class="pf-v5-c-tabs__scroll-button">
8253
+ <button
8254
+ class="pf-v5-c-button pf-m-plain"
8255
+ type="button"
8256
+ aria-label="Scroll right"
8257
+ >
8258
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
8259
+ </button>
8260
+ </div>
8066
8261
  <span class="pf-v5-c-tabs__add">
8067
8262
  <button
8068
8263
  class="pf-v5-c-button pf-m-plain"
@@ -8078,25 +8273,27 @@ cssPrefix: pf-v5-c-tabs
8078
8273
  <br />
8079
8274
 
8080
8275
  <div
8081
- class="pf-v5-c-tabs pf-m-box pf-m-color-scheme--light-300 pf-m-scrollable"
8276
+ class="pf-v5-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
8082
8277
  role="region"
8083
- id="box-tabs-add-tab-button-color-scheme-light-300 "
8278
+ id="box-tabs-add-tab-button-secondary "
8084
8279
  >
8085
- <button
8086
- class="pf-v5-c-tabs__scroll-button"
8087
- type="button"
8088
- disabled
8089
- aria-label="Scroll left"
8090
- >
8091
- <i class="fas fa-angle-left" aria-hidden="true"></i>
8092
- </button>
8280
+ <div class="pf-v5-c-tabs__scroll-button">
8281
+ <button
8282
+ class="pf-v5-c-button pf-m-plain"
8283
+ type="button"
8284
+ aria-label="Scroll left"
8285
+ disabled
8286
+ >
8287
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
8288
+ </button>
8289
+ </div>
8093
8290
  <ul class="pf-v5-c-tabs__list" role="tablist">
8094
8291
  <li class="pf-v5-c-tabs__item pf-m-action" role="presentation">
8095
8292
  <button
8096
8293
  type="button"
8097
8294
  class="pf-v5-c-tabs__link"
8098
8295
  role="tab"
8099
- id="box-tabs-add-tab-button-color-scheme-light-300 -users-link"
8296
+ id="box-tabs-add-tab-button-secondary -users-link"
8100
8297
  >
8101
8298
  <span class="pf-v5-c-tabs__item-text">Users</span>
8102
8299
  </button>
@@ -8117,7 +8314,7 @@ cssPrefix: pf-v5-c-tabs
8117
8314
  type="button"
8118
8315
  class="pf-v5-c-tabs__link"
8119
8316
  role="tab"
8120
- id="box-tabs-add-tab-button-color-scheme-light-300 -containers-link"
8317
+ id="box-tabs-add-tab-button-secondary -containers-link"
8121
8318
  >
8122
8319
  <span class="pf-v5-c-tabs__item-text">Containers</span>
8123
8320
  </button>
@@ -8138,7 +8335,7 @@ cssPrefix: pf-v5-c-tabs
8138
8335
  type="button"
8139
8336
  class="pf-v5-c-tabs__link"
8140
8337
  role="tab"
8141
- id="box-tabs-add-tab-button-color-scheme-light-300 -database-link"
8338
+ id="box-tabs-add-tab-button-secondary -database-link"
8142
8339
  >
8143
8340
  <span class="pf-v5-c-tabs__item-text">Database</span>
8144
8341
  </button>
@@ -8160,7 +8357,7 @@ cssPrefix: pf-v5-c-tabs
8160
8357
  type="button"
8161
8358
  class="pf-v5-c-tabs__link"
8162
8359
  role="tab"
8163
- id="box-tabs-add-tab-button-color-scheme-light-300 -server-link"
8360
+ id="box-tabs-add-tab-button-secondary -server-link"
8164
8361
  >
8165
8362
  <span class="pf-v5-c-tabs__item-text">Server</span>
8166
8363
  </button>
@@ -8181,7 +8378,7 @@ cssPrefix: pf-v5-c-tabs
8181
8378
  type="button"
8182
8379
  class="pf-v5-c-tabs__link"
8183
8380
  role="tab"
8184
- id="box-tabs-add-tab-button-color-scheme-light-300 -system-link"
8381
+ id="box-tabs-add-tab-button-secondary -system-link"
8185
8382
  >
8186
8383
  <span class="pf-v5-c-tabs__item-text">System</span>
8187
8384
  </button>
@@ -8202,7 +8399,7 @@ cssPrefix: pf-v5-c-tabs
8202
8399
  type="button"
8203
8400
  class="pf-v5-c-tabs__link"
8204
8401
  role="tab"
8205
- id="box-tabs-add-tab-button-color-scheme-light-300 -network-wired-link"
8402
+ id="box-tabs-add-tab-button-secondary -network-wired-link"
8206
8403
  >
8207
8404
  <span class="pf-v5-c-tabs__item-text">Network</span>
8208
8405
  </button>
@@ -8220,13 +8417,15 @@ cssPrefix: pf-v5-c-tabs
8220
8417
  </li>
8221
8418
  </ul>
8222
8419
 
8223
- <button
8224
- class="pf-v5-c-tabs__scroll-button"
8225
- type="button"
8226
- aria-label="Scroll right"
8227
- >
8228
- <i class="fas fa-angle-right" aria-hidden="true"></i>
8229
- </button>
8420
+ <div class="pf-v5-c-tabs__scroll-button">
8421
+ <button
8422
+ class="pf-v5-c-button pf-m-plain"
8423
+ type="button"
8424
+ aria-label="Scroll right"
8425
+ >
8426
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
8427
+ </button>
8428
+ </div>
8230
8429
  <span class="pf-v5-c-tabs__add">
8231
8430
  <button
8232
8431
  class="pf-v5-c-button pf-m-plain"
@@ -8262,13 +8461,13 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
8262
8461
  | `.pf-v5-c-tabs__item-close` | `<span>` | Initiates a tabs component item close. |
8263
8462
  | `.pf-v5-c-tabs__item-close-icon` | `<span>` | Initiates a tabs component item close icon. |
8264
8463
  | `.pf-v5-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
8265
- | `.pf-v5-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
8464
+ | `.pf-v5-c-tabs__scroll-button` | `<div>` | Initiates a tabs component scroll button container. |
8266
8465
  | `.pf-v5-c-tabs__add` | `<span>` | Initiates a tabs component add button. |
8267
8466
  | `.pf-v5-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
8268
8467
  | `.pf-v5-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
8269
8468
  | `.pf-v5-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
8270
8469
  | `.pf-v5-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
8271
- | `.pf-m-secondary` | `.pf-v5-c-tabs` | Applies secondary styling to the tab component. |
8470
+ | `.pf-m-tubtab` | `.pf-v5-c-tabs` | Applies subtab styling to the tab component. |
8272
8471
  | `.pf-m-no-border-bottom` | `.pf-v5-c-tabs` | Removes bottom border from a tab component. |
8273
8472
  | `.pf-m-box` | `.pf-v5-c-tabs` | Applies box styling to the tab component. |
8274
8473
  | `.pf-m-vertical` | `.pf-v5-c-tabs` | Applies vertical styling to the tab component. |
@@ -8279,7 +8478,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
8279
8478
  | `.pf-m-expanded` | `.pf-v5-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
8280
8479
  | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v5-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
8281
8480
  | `.pf-m-page-insets` | `.pf-v5-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
8282
- | `.pf-m-color-scheme--light-300` | `.pf-v5-c-tabs` | Modifies the tabs component tab background colors. |
8481
+ | `.pf-m-secondary` | `.pf-v5-c-tabs.pf-m-box` | Modifies the tabs component tab background colors for the box variant. |
8283
8482
  | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v5-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
8284
8483
  | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v5-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
8285
8484
  | `.pf-m-expanded` | `.pf-v5-c-tabs` | Modifies the expandable tabs component for the expanded state. |