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

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 (382) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +859 -833
  29. package/base/tokens/_tokens-dark.scss +306 -284
  30. package/base/tokens/_tokens-default.scss +415 -329
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +68 -68
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +18 -17
  39. package/components/ActionList/action-list.scss +26 -16
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -16
  49. package/components/BackToTop/back-to-top.scss +14 -14
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +417 -359
  61. package/components/Button/button.scss +472 -484
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +117 -203
  65. package/components/Card/card.scss +137 -246
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  73. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  74. package/components/CodeBlock/code-block.css +24 -12
  75. package/components/CodeBlock/code-block.scss +24 -13
  76. package/components/CodeEditor/code-editor.css +31 -22
  77. package/components/CodeEditor/code-editor.scss +30 -21
  78. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  79. package/components/Content/content.css +40 -37
  80. package/components/Content/content.scss +40 -37
  81. package/components/ContextSelector/context-selector.css +41 -26
  82. package/components/ContextSelector/context-selector.scss +40 -25
  83. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  84. package/components/DataList/data-list-grid.css +21 -21
  85. package/components/DataList/data-list-grid.scss +3 -3
  86. package/components/DataList/data-list.css +165 -209
  87. package/components/DataList/data-list.scss +138 -185
  88. package/components/DatePicker/date-picker.css +8 -8
  89. package/components/DatePicker/date-picker.scss +8 -8
  90. package/components/DescriptionList/description-list.css +47 -39
  91. package/components/DescriptionList/description-list.scss +33 -30
  92. package/components/Divider/divider.css +97 -177
  93. package/components/Divider/divider.scss +60 -79
  94. package/components/DragDrop/drag-drop.css +26 -22
  95. package/components/DragDrop/drag-drop.scss +26 -25
  96. package/components/Drawer/drawer.css +216 -158
  97. package/components/Drawer/drawer.scss +199 -150
  98. package/components/Dropdown/dropdown.css +76 -69
  99. package/components/Dropdown/dropdown.scss +67 -62
  100. package/components/DualListSelector/dual-list-selector.css +29 -15
  101. package/components/DualListSelector/dual-list-selector.scss +30 -15
  102. package/components/EmptyState/empty-state.css +64 -38
  103. package/components/EmptyState/empty-state.scss +70 -38
  104. package/components/ExpandableSection/expandable-section.css +75 -66
  105. package/components/ExpandableSection/expandable-section.scss +82 -80
  106. package/components/FileUpload/file-upload.css +31 -43
  107. package/components/FileUpload/file-upload.scss +31 -49
  108. package/components/Form/form.css +111 -154
  109. package/components/Form/form.scss +101 -160
  110. package/components/FormControl/form-control.css +95 -111
  111. package/components/FormControl/form-control.scss +97 -92
  112. package/components/HelperText/helper-text.css +29 -35
  113. package/components/HelperText/helper-text.scss +31 -41
  114. package/components/Hint/hint.css +37 -27
  115. package/components/Hint/hint.scss +37 -30
  116. package/components/Icon/icon.css +155 -19
  117. package/components/Icon/icon.scss +188 -21
  118. package/components/InlineEdit/inline-edit.css +12 -11
  119. package/components/InlineEdit/inline-edit.scss +12 -11
  120. package/components/InputGroup/input-group.css +32 -42
  121. package/components/InputGroup/input-group.scss +31 -33
  122. package/components/JumpLinks/jump-links.css +61 -58
  123. package/components/JumpLinks/jump-links.scss +61 -60
  124. package/components/Label/label-group.css +48 -50
  125. package/components/Label/label-group.scss +48 -51
  126. package/components/Label/label.css +382 -363
  127. package/components/Label/label.scss +441 -356
  128. package/components/List/list.css +25 -25
  129. package/components/List/list.scss +26 -26
  130. package/components/LogViewer/log-viewer.css +14 -14
  131. package/components/LogViewer/log-viewer.scss +14 -14
  132. package/components/Login/login.css +104 -122
  133. package/components/Login/login.scss +92 -91
  134. package/components/Masthead/masthead.css +262 -506
  135. package/components/Masthead/masthead.scss +123 -289
  136. package/components/Menu/menu.css +82 -65
  137. package/components/Menu/menu.scss +85 -69
  138. package/components/MenuToggle/menu-toggle.css +37 -31
  139. package/components/MenuToggle/menu-toggle.scss +37 -33
  140. package/components/ModalBox/modal-box.css +76 -69
  141. package/components/ModalBox/modal-box.scss +74 -70
  142. package/components/MultipleFileUpload/multiple-file-upload.css +87 -57
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +92 -60
  144. package/components/Nav/nav.css +248 -899
  145. package/components/Nav/nav.scss +304 -1059
  146. package/components/Nav/themes/dark/nav.scss +2 -2
  147. package/components/NotificationBadge/notification-badge.css +66 -85
  148. package/components/NotificationBadge/notification-badge.scss +72 -103
  149. package/components/NotificationDrawer/notification-drawer.css +130 -128
  150. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  151. package/components/NumberInput/number-input.css +10 -10
  152. package/components/NumberInput/number-input.scss +9 -14
  153. package/components/OptionsMenu/options-menu.css +43 -31
  154. package/components/OptionsMenu/options-menu.scss +43 -31
  155. package/components/OverflowMenu/overflow-menu.css +17 -47
  156. package/components/OverflowMenu/overflow-menu.scss +27 -65
  157. package/components/Page/page.css +182 -232
  158. package/components/Page/page.scss +130 -195
  159. package/components/Pagination/pagination.css +74 -121
  160. package/components/Pagination/pagination.scss +55 -125
  161. package/components/Panel/panel.css +40 -30
  162. package/components/Panel/panel.scss +42 -33
  163. package/components/Popover/popover.css +108 -87
  164. package/components/Popover/popover.scss +120 -109
  165. package/components/Progress/progress.css +40 -52
  166. package/components/Progress/progress.scss +48 -62
  167. package/components/ProgressStepper/progress-stepper.css +98 -89
  168. package/components/ProgressStepper/progress-stepper.scss +90 -84
  169. package/components/Radio/radio.css +30 -23
  170. package/components/Radio/radio.scss +31 -25
  171. package/components/Select/select.css +56 -47
  172. package/components/Select/select.scss +56 -47
  173. package/components/Sidebar/sidebar.css +31 -14
  174. package/components/Sidebar/sidebar.scss +34 -16
  175. package/components/SimpleList/simple-list.css +45 -56
  176. package/components/SimpleList/simple-list.scss +51 -55
  177. package/components/Skeleton/skeleton.css +24 -25
  178. package/components/Skeleton/skeleton.scss +21 -26
  179. package/components/SkipToContent/skip-to-content.css +9 -6
  180. package/components/SkipToContent/skip-to-content.scss +8 -6
  181. package/components/Slider/slider.css +80 -55
  182. package/components/Slider/slider.scss +96 -65
  183. package/components/Spinner/spinner.css +17 -34
  184. package/components/Spinner/spinner.scss +19 -47
  185. package/components/Switch/switch.css +49 -41
  186. package/components/Switch/switch.scss +51 -42
  187. package/components/TabContent/tab-content.css +21 -12
  188. package/components/TabContent/tab-content.scss +22 -15
  189. package/components/Table/table-grid.css +256 -195
  190. package/components/Table/table-grid.scss +53 -39
  191. package/components/Table/table-scrollable.css +4 -4
  192. package/components/Table/table-scrollable.scss +6 -4
  193. package/components/Table/table-tree-view.css +112 -105
  194. package/components/Table/table-tree-view.scss +38 -33
  195. package/components/Table/table.css +105 -89
  196. package/components/Table/table.scss +105 -89
  197. package/components/Tabs/tabs.css +210 -214
  198. package/components/Tabs/tabs.scss +222 -254
  199. package/components/TextInputGroup/text-input-group.css +15 -15
  200. package/components/TextInputGroup/text-input-group.scss +15 -15
  201. package/components/Tile/tile.css +47 -88
  202. package/components/Tile/tile.scss +45 -91
  203. package/components/Timestamp/timestamp.css +12 -9
  204. package/components/Timestamp/timestamp.scss +11 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +68 -59
  208. package/components/ToggleGroup/toggle-group.scss +72 -57
  209. package/components/Toolbar/toolbar.css +2553 -1054
  210. package/components/Toolbar/toolbar.scss +234 -516
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/ActionList/examples/ActionList.md +73 -22
  222. package/docs/components/Alert/examples/Alert.md +3 -3
  223. package/docs/components/Avatar/examples/Avatar.md +5 -19
  224. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  225. package/docs/components/Badge/examples/Badge.md +21 -0
  226. package/docs/components/Banner/examples/Banner.md +48 -25
  227. package/docs/components/Brand/examples/Brand.css +12 -0
  228. package/docs/components/Brand/examples/Brand.md +51 -32
  229. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  230. package/docs/components/Button/examples/Button.css +6 -2
  231. package/docs/components/Button/examples/Button.md +1425 -87
  232. package/docs/components/Card/examples/Card.md +565 -148
  233. package/docs/components/Check/examples/Check.md +71 -58
  234. package/docs/components/Chip/examples/Chip.md +1 -1
  235. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  236. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  237. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  238. package/docs/components/Content/examples/Content.md +5 -5
  239. package/docs/components/Divider/examples/Divider.css +3 -1
  240. package/docs/components/Divider/examples/Divider.md +4 -5
  241. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  242. package/docs/components/Drawer/examples/Drawer.md +294 -256
  243. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  244. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  245. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  246. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  247. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  248. package/docs/components/Form/examples/Form.md +134 -89
  249. package/docs/components/Icon/examples/Icon.md +82 -11
  250. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  251. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  252. package/docs/components/Label/examples/Label.css +4 -0
  253. package/docs/components/Label/examples/Label.md +3091 -704
  254. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  255. package/docs/components/LogViewer/examples/LogViewer.md +300 -210
  256. package/docs/components/Login/examples/Login.md +10 -5
  257. package/docs/components/Masthead/examples/masthead.md +443 -65
  258. package/docs/components/Menu/examples/Menu.css +8 -0
  259. package/docs/components/Menu/examples/Menu.md +594 -543
  260. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  261. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  262. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  263. package/docs/components/Nav/examples/Navigation.css +3 -42
  264. package/docs/components/Nav/examples/Navigation.md +305 -353
  265. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  266. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  267. package/docs/components/Page/examples/Page.css +0 -8
  268. package/docs/components/Page/examples/Page.md +22 -21
  269. package/docs/components/Pagination/examples/Pagination.md +663 -637
  270. package/docs/components/Panel/examples/Panel.md +12 -0
  271. package/docs/components/Popover/examples/Popover.css +4 -9
  272. package/docs/components/Popover/examples/Popover.md +1 -1
  273. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  274. package/docs/components/Radio/examples/Radio.md +62 -54
  275. package/docs/components/Select/deprecated/Select.md +184 -177
  276. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  277. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  278. package/docs/components/TabContent/examples/TabContent.md +10 -10
  279. package/docs/components/Table/examples/Table.css +2 -2
  280. package/docs/components/Table/examples/Table.md +10 -10
  281. package/docs/components/Tabs/examples/Tabs.css +1 -1
  282. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  283. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  284. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  285. package/docs/components/Tile/examples/Tile.css +1 -1
  286. package/docs/components/Tile/examples/Tile.md +264 -144
  287. package/docs/components/Title/examples/Title.md +18 -0
  288. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  289. package/docs/components/Toolbar/examples/Toolbar.md +1211 -3487
  290. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  291. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  292. package/docs/components/Truncate/examples/Truncate.css +2 -2
  293. package/docs/components/Truncate/examples/Truncate.md +2 -2
  294. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  295. package/docs/demos/Alert/examples/Alert.md +330 -87
  296. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  297. package/docs/demos/Banner/examples/Banner.md +211 -60
  298. package/docs/demos/Card/examples/Card.css +3 -3
  299. package/docs/demos/Card/examples/Card.md +28 -12
  300. package/docs/demos/CardView/examples/CardView.md +265 -207
  301. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  302. package/docs/demos/Dashboard/examples/Dashboard.md +105 -32
  303. package/docs/demos/DataList/examples/DataList.md +1002 -935
  304. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  305. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  306. package/docs/demos/Form/examples/BasicForms.md +138 -84
  307. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  308. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  309. package/docs/demos/Modal/examples/Modal.md +645 -198
  310. package/docs/demos/Nav/examples/Nav.md +691 -902
  311. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  312. package/docs/demos/Page/examples/Page.md +942 -273
  313. package/docs/demos/Page/examples/Penta.md +66 -26
  314. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  315. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  316. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1333 -946
  317. package/docs/demos/Skeleton/examples/Skeleton.md +109 -64
  318. package/docs/demos/Table/examples/Table.md +3857 -3418
  319. package/docs/demos/Tabs/examples/Tabs.md +664 -215
  320. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  321. package/docs/demos/Toolbar/examples/Toolbar.md +1313 -1475
  322. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  323. package/docs/layouts/Flex/examples/Flex.md +16 -16
  324. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  325. package/icons/pficons.mjs +1 -0
  326. package/layouts/Flex/flex.css +115 -43
  327. package/layouts/Flex/flex.scss +20 -8
  328. package/package.json +36 -32
  329. package/patternfly-addons.css +732 -972
  330. package/patternfly-base-no-globals-theme-dark-unversioned.css +895 -847
  331. package/patternfly-base-no-globals.css +895 -847
  332. package/patternfly-base-theme-dark-unversioned.css +899 -850
  333. package/patternfly-base.css +899 -850
  334. package/patternfly-no-globals.css +9935 -8997
  335. package/patternfly-theme-dark-unversioned.css +9940 -9001
  336. package/patternfly.css +9940 -9001
  337. package/patternfly.min.css +1 -1
  338. package/patternfly.min.css.map +1 -1
  339. package/sass-utilities/functions.scss +6 -0
  340. package/sass-utilities/mixins.scss +80 -2
  341. package/sass-utilities/scss-variables.scss +8 -8
  342. package/sass-utilities/themes/dark/mixins.scss +3 -1
  343. package/utilities/Accessibility/accessibility.css +12 -12
  344. package/utilities/Spacing/spacing.css +720 -960
  345. package/utilities/Spacing/spacing.scss +4 -8
  346. package/base/themes/dark/_variables.scss +0 -102
  347. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  348. package/components/Accordion/themes/dark/accordion.scss +0 -9
  349. package/components/Alert/themes/dark/alert.scss +0 -17
  350. package/components/Badge/themes/dark/badge.scss +0 -9
  351. package/components/Banner/themes/dark/banner.scss +0 -14
  352. package/components/Button/themes/dark/button.scss +0 -51
  353. package/components/Card/themes/dark/card.scss +0 -20
  354. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  355. package/components/DataList/themes/dark/data-list.scss +0 -10
  356. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  357. package/components/Drawer/themes/dark/drawer.scss +0 -13
  358. package/components/Form/themes/dark/form.scss +0 -7
  359. package/components/FormControl/themes/dark/form-control.scss +0 -24
  360. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  361. package/components/Hint/themes/dark/hint.scss +0 -8
  362. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  363. package/components/Label/themes/dark/label.scss +0 -53
  364. package/components/Login/themes/dark/login.scss +0 -12
  365. package/components/Masthead/themes/dark/masthead.scss +0 -14
  366. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  367. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  368. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  369. package/components/Page/themes/dark/page.scss +0 -69
  370. package/components/Pagination/themes/dark/pagination.scss +0 -7
  371. package/components/Panel/themes/dark/panel.scss +0 -7
  372. package/components/Popover/themes/dark/popover.scss +0 -11
  373. package/components/Progress/themes/dark/progress.scss +0 -9
  374. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  375. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  376. package/components/Switch/themes/dark/switch.scss +0 -11
  377. package/components/Tabs/themes/dark/tabs.scss +0 -10
  378. package/components/Tile/themes/dark/tile.scss +0 -10
  379. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  380. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  381. package/docs/components/Avatar/examples/Avatar.css +0 -3
  382. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/Accordion/examples/Accordion.md CHANGED
@@ -8,91 +8,109 @@ cssPrefix: pf-v5-c-accordion
8
8
 
9
9
  ```html
10
10
  <div class="pf-v5-c-accordion">
11
- <h3>
12
- <button
13
- class="pf-v5-c-accordion__toggle"
14
- type="button"
15
- aria-expanded="false"
16
- >
17
- <span class="pf-v5-c-accordion__toggle-text">Item one</span>
18
-
19
- <span class="pf-v5-c-accordion__toggle-icon">
20
- <i class="fas fa-angle-right" aria-hidden="true"></i>
21
- </span>
22
- </button>
23
- </h3>
24
- <div class="pf-v5-c-accordion__expandable-content" hidden>
25
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
11
+ <div class="pf-v5-c-accordion__item">
12
+ <h3>
13
+ <button
14
+ class="pf-v5-c-accordion__toggle"
15
+ type="button"
16
+ aria-expanded="false"
17
+ >
18
+ <span class="pf-v5-c-accordion__toggle-text">Item one</span>
19
+
20
+ <span class="pf-v5-c-accordion__toggle-icon">
21
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
22
+ </span>
23
+ </button>
24
+ </h3>
25
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
26
+ <div
27
+ class="pf-v5-c-accordion__expandable-content-body"
28
+ >This text is hidden</div>
29
+ </div>
26
30
  </div>
27
31
 
28
- <h3>
29
- <button
30
- class="pf-v5-c-accordion__toggle"
31
- type="button"
32
- aria-expanded="false"
33
- >
34
- <span class="pf-v5-c-accordion__toggle-text">Item two</span>
35
-
36
- <span class="pf-v5-c-accordion__toggle-icon">
37
- <i class="fas fa-angle-right" aria-hidden="true"></i>
38
- </span>
39
- </button>
40
- </h3>
41
- <div class="pf-v5-c-accordion__expandable-content" hidden>
42
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
32
+ <div class="pf-v5-c-accordion__item">
33
+ <h3>
34
+ <button
35
+ class="pf-v5-c-accordion__toggle"
36
+ type="button"
37
+ aria-expanded="false"
38
+ >
39
+ <span class="pf-v5-c-accordion__toggle-text">Item two</span>
40
+
41
+ <span class="pf-v5-c-accordion__toggle-icon">
42
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
43
+ </span>
44
+ </button>
45
+ </h3>
46
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
47
+ <div
48
+ class="pf-v5-c-accordion__expandable-content-body"
49
+ >This text is hidden</div>
50
+ </div>
43
51
  </div>
44
52
 
45
- <h3>
46
- <button
47
- class="pf-v5-c-accordion__toggle"
48
- type="button"
49
- aria-expanded="false"
50
- >
51
- <span class="pf-v5-c-accordion__toggle-text">Item three</span>
52
-
53
- <span class="pf-v5-c-accordion__toggle-icon">
54
- <i class="fas fa-angle-right" aria-hidden="true"></i>
55
- </span>
56
- </button>
57
- </h3>
58
- <div class="pf-v5-c-accordion__expandable-content" hidden>
59
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
53
+ <div class="pf-v5-c-accordion__item">
54
+ <h3>
55
+ <button
56
+ class="pf-v5-c-accordion__toggle"
57
+ type="button"
58
+ aria-expanded="false"
59
+ >
60
+ <span class="pf-v5-c-accordion__toggle-text">Item three</span>
61
+
62
+ <span class="pf-v5-c-accordion__toggle-icon">
63
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
64
+ </span>
65
+ </button>
66
+ </h3>
67
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
68
+ <div
69
+ class="pf-v5-c-accordion__expandable-content-body"
70
+ >This text is hidden</div>
71
+ </div>
60
72
  </div>
61
73
 
62
- <h3>
63
- <button
64
- class="pf-v5-c-accordion__toggle pf-m-expanded"
65
- type="button"
66
- aria-expanded="true"
67
- >
68
- <span class="pf-v5-c-accordion__toggle-text">Item four</span>
69
-
70
- <span class="pf-v5-c-accordion__toggle-icon">
71
- <i class="fas fa-angle-right" aria-hidden="true"></i>
72
- </span>
73
- </button>
74
- </h3>
75
- <div class="pf-v5-c-accordion__expandable-content pf-m-expanded">
76
- <div
77
- class="pf-v5-c-accordion__expandable-content-body"
78
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
74
+ <div class="pf-v5-c-accordion__item pf-m-expanded">
75
+ <h3>
76
+ <button
77
+ class="pf-v5-c-accordion__toggle"
78
+ type="button"
79
+ aria-expanded="true"
80
+ >
81
+ <span class="pf-v5-c-accordion__toggle-text">Item four</span>
82
+
83
+ <span class="pf-v5-c-accordion__toggle-icon">
84
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
85
+ </span>
86
+ </button>
87
+ </h3>
88
+ <div class="pf-v5-c-accordion__expandable-content">
89
+ <div
90
+ class="pf-v5-c-accordion__expandable-content-body"
91
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
92
+ </div>
79
93
  </div>
80
94
 
81
- <h3>
82
- <button
83
- class="pf-v5-c-accordion__toggle"
84
- type="button"
85
- aria-expanded="false"
86
- >
87
- <span class="pf-v5-c-accordion__toggle-text">Item five</span>
88
-
89
- <span class="pf-v5-c-accordion__toggle-icon">
90
- <i class="fas fa-angle-right" aria-hidden="true"></i>
91
- </span>
92
- </button>
93
- </h3>
94
- <div class="pf-v5-c-accordion__expandable-content" hidden>
95
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
95
+ <div class="pf-v5-c-accordion__item">
96
+ <h3>
97
+ <button
98
+ class="pf-v5-c-accordion__toggle"
99
+ type="button"
100
+ aria-expanded="false"
101
+ >
102
+ <span class="pf-v5-c-accordion__toggle-text">Item five</span>
103
+
104
+ <span class="pf-v5-c-accordion__toggle-icon">
105
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
106
+ </span>
107
+ </button>
108
+ </h3>
109
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
110
+ <div
111
+ class="pf-v5-c-accordion__expandable-content-body"
112
+ >This text is hidden</div>
113
+ </div>
96
114
  </div>
97
115
  </div>
98
116
 
@@ -102,103 +120,121 @@ cssPrefix: pf-v5-c-accordion
102
120
 
103
121
  ```html
104
122
  <div class="pf-v5-c-accordion">
105
- <h3>
106
- <button
107
- class="pf-v5-c-accordion__toggle"
108
- type="button"
109
- aria-expanded="false"
110
- >
111
- <span class="pf-v5-c-accordion__toggle-text">Item one</span>
112
-
113
- <span class="pf-v5-c-accordion__toggle-icon">
114
- <i class="fas fa-angle-right" aria-hidden="true"></i>
115
- </span>
116
- </button>
117
- </h3>
118
- <div class="pf-v5-c-accordion__expandable-content pf-m-fixed" hidden>
119
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
123
+ <div class="pf-v5-c-accordion__item">
124
+ <h3>
125
+ <button
126
+ class="pf-v5-c-accordion__toggle"
127
+ type="button"
128
+ aria-expanded="false"
129
+ >
130
+ <span class="pf-v5-c-accordion__toggle-text">Item one</span>
131
+
132
+ <span class="pf-v5-c-accordion__toggle-icon">
133
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
134
+ </span>
135
+ </button>
136
+ </h3>
137
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
138
+ <div
139
+ class="pf-v5-c-accordion__expandable-content-body"
140
+ >This text is hidden</div>
141
+ </div>
120
142
  </div>
121
143
 
122
- <h3>
123
- <button
124
- class="pf-v5-c-accordion__toggle pf-m-expanded"
125
- type="button"
126
- aria-expanded="true"
127
- id="accordion-fixed-item-two-toggle"
128
- >
129
- <span class="pf-v5-c-accordion__toggle-text">Item two</span>
130
-
131
- <span class="pf-v5-c-accordion__toggle-icon">
132
- <i class="fas fa-angle-right" aria-hidden="true"></i>
133
- </span>
134
- </button>
135
- </h3>
136
- <div
137
- class="pf-v5-c-accordion__expandable-content pf-m-expanded pf-m-fixed"
138
- role="region"
139
- tabindex="0"
140
- aria-labelledby="accordion-fixed-item-two-toggle"
141
- >
142
- <div
143
- class="pf-v5-c-accordion__expandable-content-body"
144
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
145
- <div
146
- class="pf-v5-c-accordion__expandable-content-body"
147
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
144
+ <div class="pf-v5-c-accordion__item pf-m-expanded">
145
+ <h3>
146
+ <button
147
+ class="pf-v5-c-accordion__toggle"
148
+ type="button"
149
+ aria-expanded="true"
150
+ id="accordion-fixed-item-two-toggle"
151
+ >
152
+ <span class="pf-v5-c-accordion__toggle-text">Item two</span>
153
+
154
+ <span class="pf-v5-c-accordion__toggle-icon">
155
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
156
+ </span>
157
+ </button>
158
+ </h3>
148
159
  <div
149
- class="pf-v5-c-accordion__expandable-content-body"
150
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
160
+ class="pf-v5-c-accordion__expandable-content pf-m-fixed"
161
+ role="region"
162
+ tabindex="0"
163
+ aria-labelledby="accordion-fixed-item-two-toggle"
164
+ >
165
+ <div
166
+ class="pf-v5-c-accordion__expandable-content-body"
167
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
168
+ <div
169
+ class="pf-v5-c-accordion__expandable-content-body"
170
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
171
+ <div
172
+ class="pf-v5-c-accordion__expandable-content-body"
173
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
174
+ </div>
151
175
  </div>
152
176
 
153
- <h3>
154
- <button
155
- class="pf-v5-c-accordion__toggle"
156
- type="button"
157
- aria-expanded="false"
158
- >
159
- <span class="pf-v5-c-accordion__toggle-text">Item three</span>
160
-
161
- <span class="pf-v5-c-accordion__toggle-icon">
162
- <i class="fas fa-angle-right" aria-hidden="true"></i>
163
- </span>
164
- </button>
165
- </h3>
166
- <div class="pf-v5-c-accordion__expandable-content pf-m-fixed" hidden>
167
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
177
+ <div class="pf-v5-c-accordion__item">
178
+ <h3>
179
+ <button
180
+ class="pf-v5-c-accordion__toggle"
181
+ type="button"
182
+ aria-expanded="false"
183
+ >
184
+ <span class="pf-v5-c-accordion__toggle-text">Item three</span>
185
+
186
+ <span class="pf-v5-c-accordion__toggle-icon">
187
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
188
+ </span>
189
+ </button>
190
+ </h3>
191
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
192
+ <div
193
+ class="pf-v5-c-accordion__expandable-content-body"
194
+ >This text is hidden</div>
195
+ </div>
168
196
  </div>
169
197
 
170
- <h3>
171
- <button
172
- class="pf-v5-c-accordion__toggle"
173
- type="button"
174
- aria-expanded="false"
175
- >
176
- <span class="pf-v5-c-accordion__toggle-text">Item four</span>
177
-
178
- <span class="pf-v5-c-accordion__toggle-icon">
179
- <i class="fas fa-angle-right" aria-hidden="true"></i>
180
- </span>
181
- </button>
182
- </h3>
183
- <div class="pf-v5-c-accordion__expandable-content pf-m-fixed" hidden>
184
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
198
+ <div class="pf-v5-c-accordion__item">
199
+ <h3>
200
+ <button
201
+ class="pf-v5-c-accordion__toggle"
202
+ type="button"
203
+ aria-expanded="false"
204
+ >
205
+ <span class="pf-v5-c-accordion__toggle-text">Item four</span>
206
+
207
+ <span class="pf-v5-c-accordion__toggle-icon">
208
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
209
+ </span>
210
+ </button>
211
+ </h3>
212
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
213
+ <div
214
+ class="pf-v5-c-accordion__expandable-content-body"
215
+ >This text is hidden</div>
216
+ </div>
185
217
  </div>
186
218
 
187
- <h3>
188
- <button
189
- class="pf-v5-c-accordion__toggle"
190
- type="button"
191
- aria-expanded="false"
192
- >
193
- <span class="pf-v5-c-accordion__toggle-text">Item five</span>
194
-
195
- <span class="pf-v5-c-accordion__toggle-icon">
196
- <i class="fas fa-angle-right" aria-hidden="true"></i>
197
- </span>
198
- </button>
199
- </h3>
200
- <div class="pf-v5-c-accordion__expandable-content pf-m-fixed" hidden>
201
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
219
+ <div class="pf-v5-c-accordion__item">
220
+ <h3>
221
+ <button
222
+ class="pf-v5-c-accordion__toggle"
223
+ type="button"
224
+ aria-expanded="false"
225
+ >
226
+ <span class="pf-v5-c-accordion__toggle-text">Item five</span>
227
+
228
+ <span class="pf-v5-c-accordion__toggle-icon">
229
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
230
+ </span>
231
+ </button>
232
+ </h3>
233
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
234
+ <div
235
+ class="pf-v5-c-accordion__expandable-content-body"
236
+ >This text is hidden</div>
237
+ </div>
202
238
  </div>
203
239
  </div>
204
240
 
@@ -208,92 +244,110 @@ cssPrefix: pf-v5-c-accordion
208
244
 
209
245
  ```html
210
246
  <dl class="pf-v5-c-accordion">
211
- <dt>
212
- <button
213
- class="pf-v5-c-accordion__toggle"
214
- type="button"
215
- aria-expanded="false"
216
- >
217
- <span class="pf-v5-c-accordion__toggle-text">Item one</span>
218
-
219
- <span class="pf-v5-c-accordion__toggle-icon">
220
- <i class="fas fa-angle-right" aria-hidden="true"></i>
221
- </span>
222
- </button>
223
- </dt>
224
- <dd class="pf-v5-c-accordion__expandable-content" hidden>
225
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
226
- </dd>
227
-
228
- <dt>
229
- <button
230
- class="pf-v5-c-accordion__toggle"
231
- type="button"
232
- aria-expanded="false"
233
- >
234
- <span class="pf-v5-c-accordion__toggle-text">Item two</span>
235
-
236
- <span class="pf-v5-c-accordion__toggle-icon">
237
- <i class="fas fa-angle-right" aria-hidden="true"></i>
238
- </span>
239
- </button>
240
- </dt>
241
- <dd class="pf-v5-c-accordion__expandable-content" hidden>
242
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
243
- </dd>
244
-
245
- <dt>
246
- <button
247
- class="pf-v5-c-accordion__toggle"
248
- type="button"
249
- aria-expanded="false"
250
- >
251
- <span class="pf-v5-c-accordion__toggle-text">Item three</span>
252
-
253
- <span class="pf-v5-c-accordion__toggle-icon">
254
- <i class="fas fa-angle-right" aria-hidden="true"></i>
255
- </span>
256
- </button>
257
- </dt>
258
- <dd class="pf-v5-c-accordion__expandable-content" hidden>
259
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
260
- </dd>
261
-
262
- <dt>
263
- <button
264
- class="pf-v5-c-accordion__toggle pf-m-expanded"
265
- type="button"
266
- aria-expanded="true"
267
- >
268
- <span class="pf-v5-c-accordion__toggle-text">Item four</span>
269
-
270
- <span class="pf-v5-c-accordion__toggle-icon">
271
- <i class="fas fa-angle-right" aria-hidden="true"></i>
272
- </span>
273
- </button>
274
- </dt>
275
- <dd class="pf-v5-c-accordion__expandable-content pf-m-expanded">
276
- <div
277
- class="pf-v5-c-accordion__expandable-content-body"
278
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
279
- </dd>
280
-
281
- <dt>
282
- <button
283
- class="pf-v5-c-accordion__toggle"
284
- type="button"
285
- aria-expanded="false"
286
- >
287
- <span class="pf-v5-c-accordion__toggle-text">Item five</span>
288
-
289
- <span class="pf-v5-c-accordion__toggle-icon">
290
- <i class="fas fa-angle-right" aria-hidden="true"></i>
291
- </span>
292
- </button>
293
- </dt>
294
- <dd class="pf-v5-c-accordion__expandable-content" hidden>
295
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
296
- </dd>
247
+ <div class="pf-v5-c-accordion__item">
248
+ <dt>
249
+ <button
250
+ class="pf-v5-c-accordion__toggle"
251
+ type="button"
252
+ aria-expanded="false"
253
+ >
254
+ <span class="pf-v5-c-accordion__toggle-text">Item one</span>
255
+
256
+ <span class="pf-v5-c-accordion__toggle-icon">
257
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
258
+ </span>
259
+ </button>
260
+ </dt>
261
+ <dd class="pf-v5-c-accordion__expandable-content" hidden>
262
+ <div
263
+ class="pf-v5-c-accordion__expandable-content-body"
264
+ >This text is hidden</div>
265
+ </dd>
266
+ </div>
267
+
268
+ <div class="pf-v5-c-accordion__item">
269
+ <dt>
270
+ <button
271
+ class="pf-v5-c-accordion__toggle"
272
+ type="button"
273
+ aria-expanded="false"
274
+ >
275
+ <span class="pf-v5-c-accordion__toggle-text">Item two</span>
276
+
277
+ <span class="pf-v5-c-accordion__toggle-icon">
278
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
279
+ </span>
280
+ </button>
281
+ </dt>
282
+ <dd class="pf-v5-c-accordion__expandable-content" hidden>
283
+ <div
284
+ class="pf-v5-c-accordion__expandable-content-body"
285
+ >This text is hidden</div>
286
+ </dd>
287
+ </div>
288
+
289
+ <div class="pf-v5-c-accordion__item">
290
+ <dt>
291
+ <button
292
+ class="pf-v5-c-accordion__toggle"
293
+ type="button"
294
+ aria-expanded="false"
295
+ >
296
+ <span class="pf-v5-c-accordion__toggle-text">Item three</span>
297
+
298
+ <span class="pf-v5-c-accordion__toggle-icon">
299
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
300
+ </span>
301
+ </button>
302
+ </dt>
303
+ <dd class="pf-v5-c-accordion__expandable-content" hidden>
304
+ <div
305
+ class="pf-v5-c-accordion__expandable-content-body"
306
+ >This text is hidden</div>
307
+ </dd>
308
+ </div>
309
+
310
+ <div class="pf-v5-c-accordion__item pf-m-expanded">
311
+ <dt>
312
+ <button
313
+ class="pf-v5-c-accordion__toggle"
314
+ type="button"
315
+ aria-expanded="true"
316
+ >
317
+ <span class="pf-v5-c-accordion__toggle-text">Item four</span>
318
+
319
+ <span class="pf-v5-c-accordion__toggle-icon">
320
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
321
+ </span>
322
+ </button>
323
+ </dt>
324
+ <dd class="pf-v5-c-accordion__expandable-content">
325
+ <div
326
+ class="pf-v5-c-accordion__expandable-content-body"
327
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
328
+ </dd>
329
+ </div>
330
+
331
+ <div class="pf-v5-c-accordion__item">
332
+ <dt>
333
+ <button
334
+ class="pf-v5-c-accordion__toggle"
335
+ type="button"
336
+ aria-expanded="false"
337
+ >
338
+ <span class="pf-v5-c-accordion__toggle-text">Item five</span>
339
+
340
+ <span class="pf-v5-c-accordion__toggle-icon">
341
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
342
+ </span>
343
+ </button>
344
+ </dt>
345
+ <dd class="pf-v5-c-accordion__expandable-content" hidden>
346
+ <div
347
+ class="pf-v5-c-accordion__expandable-content-body"
348
+ >This text is hidden</div>
349
+ </dd>
350
+ </div>
297
351
  </dl>
298
352
 
299
353
  ```
@@ -302,91 +356,109 @@ cssPrefix: pf-v5-c-accordion
302
356
 
303
357
  ```html
304
358
  <div class="pf-v5-c-accordion pf-m-bordered">
305
- <h3>
306
- <button
307
- class="pf-v5-c-accordion__toggle"
308
- type="button"
309
- aria-expanded="false"
310
- >
311
- <span class="pf-v5-c-accordion__toggle-text">Item one</span>
312
-
313
- <span class="pf-v5-c-accordion__toggle-icon">
314
- <i class="fas fa-angle-right" aria-hidden="true"></i>
315
- </span>
316
- </button>
317
- </h3>
318
- <div class="pf-v5-c-accordion__expandable-content" hidden>
319
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
359
+ <div class="pf-v5-c-accordion__item">
360
+ <h3>
361
+ <button
362
+ class="pf-v5-c-accordion__toggle"
363
+ type="button"
364
+ aria-expanded="false"
365
+ >
366
+ <span class="pf-v5-c-accordion__toggle-text">Item one</span>
367
+
368
+ <span class="pf-v5-c-accordion__toggle-icon">
369
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
370
+ </span>
371
+ </button>
372
+ </h3>
373
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
374
+ <div
375
+ class="pf-v5-c-accordion__expandable-content-body"
376
+ >This text is hidden</div>
377
+ </div>
320
378
  </div>
321
379
 
322
- <h3>
323
- <button
324
- class="pf-v5-c-accordion__toggle pf-m-expanded"
325
- type="button"
326
- aria-expanded="true"
327
- >
328
- <span class="pf-v5-c-accordion__toggle-text">Item two</span>
329
-
330
- <span class="pf-v5-c-accordion__toggle-icon">
331
- <i class="fas fa-angle-right" aria-hidden="true"></i>
332
- </span>
333
- </button>
334
- </h3>
335
- <div class="pf-v5-c-accordion__expandable-content pf-m-expanded">
336
- <div class="pf-v5-c-accordion__expandable-content-body">
337
- <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
380
+ <div class="pf-v5-c-accordion__item">
381
+ <h3>
382
+ <button
383
+ class="pf-v5-c-accordion__toggle"
384
+ type="button"
385
+ aria-expanded="false"
386
+ >
387
+ <span class="pf-v5-c-accordion__toggle-text">Item two</span>
388
+
389
+ <span class="pf-v5-c-accordion__toggle-icon">
390
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
391
+ </span>
392
+ </button>
393
+ </h3>
394
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
395
+ <div
396
+ class="pf-v5-c-accordion__expandable-content-body"
397
+ >This text is hidden</div>
338
398
  </div>
339
399
  </div>
340
400
 
341
- <h3>
342
- <button
343
- class="pf-v5-c-accordion__toggle"
344
- type="button"
345
- aria-expanded="false"
346
- >
347
- <span class="pf-v5-c-accordion__toggle-text">Item three</span>
348
-
349
- <span class="pf-v5-c-accordion__toggle-icon">
350
- <i class="fas fa-angle-right" aria-hidden="true"></i>
351
- </span>
352
- </button>
353
- </h3>
354
- <div class="pf-v5-c-accordion__expandable-content" hidden>
355
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
401
+ <div class="pf-v5-c-accordion__item">
402
+ <h3>
403
+ <button
404
+ class="pf-v5-c-accordion__toggle"
405
+ type="button"
406
+ aria-expanded="false"
407
+ >
408
+ <span class="pf-v5-c-accordion__toggle-text">Item three</span>
409
+
410
+ <span class="pf-v5-c-accordion__toggle-icon">
411
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
412
+ </span>
413
+ </button>
414
+ </h3>
415
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
416
+ <div
417
+ class="pf-v5-c-accordion__expandable-content-body"
418
+ >This text is hidden</div>
419
+ </div>
356
420
  </div>
357
421
 
358
- <h3>
359
- <button
360
- class="pf-v5-c-accordion__toggle"
361
- type="button"
362
- aria-expanded="false"
363
- >
364
- <span class="pf-v5-c-accordion__toggle-text">Item four</span>
365
-
366
- <span class="pf-v5-c-accordion__toggle-icon">
367
- <i class="fas fa-angle-right" aria-hidden="true"></i>
368
- </span>
369
- </button>
370
- </h3>
371
- <div class="pf-v5-c-accordion__expandable-content" hidden>
372
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
422
+ <div class="pf-v5-c-accordion__item pf-m-expanded">
423
+ <h3>
424
+ <button
425
+ class="pf-v5-c-accordion__toggle"
426
+ type="button"
427
+ aria-expanded="true"
428
+ >
429
+ <span class="pf-v5-c-accordion__toggle-text">Item four</span>
430
+
431
+ <span class="pf-v5-c-accordion__toggle-icon">
432
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
433
+ </span>
434
+ </button>
435
+ </h3>
436
+ <div class="pf-v5-c-accordion__expandable-content">
437
+ <div
438
+ class="pf-v5-c-accordion__expandable-content-body"
439
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
440
+ </div>
373
441
  </div>
374
442
 
375
- <h3>
376
- <button
377
- class="pf-v5-c-accordion__toggle"
378
- type="button"
379
- aria-expanded="false"
380
- >
381
- <span class="pf-v5-c-accordion__toggle-text">Item five</span>
382
-
383
- <span class="pf-v5-c-accordion__toggle-icon">
384
- <i class="fas fa-angle-right" aria-hidden="true"></i>
385
- </span>
386
- </button>
387
- </h3>
388
- <div class="pf-v5-c-accordion__expandable-content" hidden>
389
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
443
+ <div class="pf-v5-c-accordion__item">
444
+ <h3>
445
+ <button
446
+ class="pf-v5-c-accordion__toggle"
447
+ type="button"
448
+ aria-expanded="false"
449
+ >
450
+ <span class="pf-v5-c-accordion__toggle-text">Item five</span>
451
+
452
+ <span class="pf-v5-c-accordion__toggle-icon">
453
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
454
+ </span>
455
+ </button>
456
+ </h3>
457
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
458
+ <div
459
+ class="pf-v5-c-accordion__expandable-content-body"
460
+ >This text is hidden</div>
461
+ </div>
390
462
  </div>
391
463
  </div>
392
464
 
@@ -396,104 +468,221 @@ cssPrefix: pf-v5-c-accordion
396
468
 
397
469
  ```html
398
470
  <div class="pf-v5-c-accordion pf-m-display-lg pf-m-bordered">
399
- <h3>
400
- <button
401
- class="pf-v5-c-accordion__toggle"
402
- type="button"
403
- aria-expanded="false"
404
- >
405
- <span class="pf-v5-c-accordion__toggle-text">Item one</span>
406
-
407
- <span class="pf-v5-c-accordion__toggle-icon">
408
- <i class="fas fa-angle-right" aria-hidden="true"></i>
409
- </span>
410
- </button>
411
- </h3>
412
- <div class="pf-v5-c-accordion__expandable-content" hidden>
413
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
471
+ <div class="pf-v5-c-accordion__item">
472
+ <h3>
473
+ <button
474
+ class="pf-v5-c-accordion__toggle"
475
+ type="button"
476
+ aria-expanded="false"
477
+ >
478
+ <span class="pf-v5-c-accordion__toggle-text">Item one</span>
479
+
480
+ <span class="pf-v5-c-accordion__toggle-icon">
481
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
482
+ </span>
483
+ </button>
484
+ </h3>
485
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
486
+ <div
487
+ class="pf-v5-c-accordion__expandable-content-body"
488
+ >This text is hidden</div>
489
+ </div>
414
490
  </div>
415
491
 
416
- <h3>
417
- <button
418
- class="pf-v5-c-accordion__toggle pf-m-expanded"
419
- type="button"
420
- aria-expanded="true"
421
- >
422
- <span class="pf-v5-c-accordion__toggle-text">Item two</span>
423
-
424
- <span class="pf-v5-c-accordion__toggle-icon">
425
- <i class="fas fa-angle-right" aria-hidden="true"></i>
426
- </span>
427
- </button>
428
- </h3>
429
- <div class="pf-v5-c-accordion__expandable-content pf-m-expanded">
430
- <div
431
- class="pf-v5-c-accordion__expandable-content-body"
432
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
492
+ <div class="pf-v5-c-accordion__item">
493
+ <h3>
494
+ <button
495
+ class="pf-v5-c-accordion__toggle"
496
+ type="button"
497
+ aria-expanded="false"
498
+ >
499
+ <span class="pf-v5-c-accordion__toggle-text">Item two</span>
500
+
501
+ <span class="pf-v5-c-accordion__toggle-icon">
502
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
503
+ </span>
504
+ </button>
505
+ </h3>
506
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
507
+ <div
508
+ class="pf-v5-c-accordion__expandable-content-body"
509
+ >This text is hidden</div>
510
+ </div>
433
511
  </div>
434
512
 
435
- <h3>
436
- <button
437
- class="pf-v5-c-accordion__toggle"
438
- type="button"
439
- aria-expanded="false"
440
- >
441
- <span class="pf-v5-c-accordion__toggle-text">Item three</span>
442
-
443
- <span class="pf-v5-c-accordion__toggle-icon">
444
- <i class="fas fa-angle-right" aria-hidden="true"></i>
445
- </span>
446
- </button>
447
- </h3>
448
- <div class="pf-v5-c-accordion__expandable-content" hidden>
449
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
513
+ <div class="pf-v5-c-accordion__item">
514
+ <h3>
515
+ <button
516
+ class="pf-v5-c-accordion__toggle"
517
+ type="button"
518
+ aria-expanded="false"
519
+ >
520
+ <span class="pf-v5-c-accordion__toggle-text">Item three</span>
521
+
522
+ <span class="pf-v5-c-accordion__toggle-icon">
523
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
524
+ </span>
525
+ </button>
526
+ </h3>
527
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
528
+ <div
529
+ class="pf-v5-c-accordion__expandable-content-body"
530
+ >This text is hidden</div>
531
+ </div>
450
532
  </div>
451
533
 
452
- <h3>
453
- <button
454
- class="pf-v5-c-accordion__toggle pf-m-expanded"
455
- type="button"
456
- aria-expanded="true"
457
- >
458
- <span class="pf-v5-c-accordion__toggle-text">Item four</span>
459
-
460
- <span class="pf-v5-c-accordion__toggle-icon">
461
- <i class="fas fa-angle-right" aria-hidden="true"></i>
462
- </span>
463
- </button>
464
- </h3>
465
- <div class="pf-v5-c-accordion__expandable-content pf-m-expanded">
466
- <div
467
- class="pf-v5-c-accordion__expandable-content-body"
468
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
469
- <div class="pf-v5-c-accordion__expandable-content-body">
534
+ <div class="pf-v5-c-accordion__item pf-m-expanded">
535
+ <h3>
470
536
  <button
471
- class="pf-v5-c-button pf-m-link pf-m-inline pf-m-display-lg"
537
+ class="pf-v5-c-accordion__toggle"
472
538
  type="button"
539
+ aria-expanded="true"
473
540
  >
474
- Call to action
475
- <span class="pf-v5-c-button__icon pf-m-end">
476
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
541
+ <span class="pf-v5-c-accordion__toggle-text">Item four</span>
542
+
543
+ <span class="pf-v5-c-accordion__toggle-icon">
544
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
477
545
  </span>
478
546
  </button>
547
+ </h3>
548
+ <div class="pf-v5-c-accordion__expandable-content">
549
+ <div
550
+ class="pf-v5-c-accordion__expandable-content-body"
551
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
479
552
  </div>
480
553
  </div>
481
554
 
482
- <h3>
483
- <button
484
- class="pf-v5-c-accordion__toggle"
485
- type="button"
486
- aria-expanded="false"
487
- >
488
- <span class="pf-v5-c-accordion__toggle-text">Item five</span>
489
-
490
- <span class="pf-v5-c-accordion__toggle-icon">
491
- <i class="fas fa-angle-right" aria-hidden="true"></i>
492
- </span>
493
- </button>
494
- </h3>
495
- <div class="pf-v5-c-accordion__expandable-content" hidden>
496
- <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
555
+ <div class="pf-v5-c-accordion__item">
556
+ <h3>
557
+ <button
558
+ class="pf-v5-c-accordion__toggle"
559
+ type="button"
560
+ aria-expanded="false"
561
+ >
562
+ <span class="pf-v5-c-accordion__toggle-text">Item five</span>
563
+
564
+ <span class="pf-v5-c-accordion__toggle-icon">
565
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
566
+ </span>
567
+ </button>
568
+ </h3>
569
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
570
+ <div
571
+ class="pf-v5-c-accordion__expandable-content-body"
572
+ >This text is hidden</div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+
577
+ ```
578
+
579
+ ### Toggle icon at start
580
+
581
+ ```html isBeta
582
+ <div class="pf-v5-c-accordion pf-m-toggle-start">
583
+ <div class="pf-v5-c-accordion__item">
584
+ <h3>
585
+ <button
586
+ class="pf-v5-c-accordion__toggle"
587
+ type="button"
588
+ aria-expanded="false"
589
+ >
590
+ <span class="pf-v5-c-accordion__toggle-icon">
591
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
592
+ </span>
593
+
594
+ <span class="pf-v5-c-accordion__toggle-text">Item one</span>
595
+ </button>
596
+ </h3>
597
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
598
+ <div
599
+ class="pf-v5-c-accordion__expandable-content-body"
600
+ >This text is hidden</div>
601
+ </div>
602
+ </div>
603
+
604
+ <div class="pf-v5-c-accordion__item">
605
+ <h3>
606
+ <button
607
+ class="pf-v5-c-accordion__toggle"
608
+ type="button"
609
+ aria-expanded="false"
610
+ >
611
+ <span class="pf-v5-c-accordion__toggle-icon">
612
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
613
+ </span>
614
+
615
+ <span class="pf-v5-c-accordion__toggle-text">Item two</span>
616
+ </button>
617
+ </h3>
618
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
619
+ <div
620
+ class="pf-v5-c-accordion__expandable-content-body"
621
+ >This text is hidden</div>
622
+ </div>
623
+ </div>
624
+
625
+ <div class="pf-v5-c-accordion__item">
626
+ <h3>
627
+ <button
628
+ class="pf-v5-c-accordion__toggle"
629
+ type="button"
630
+ aria-expanded="false"
631
+ >
632
+ <span class="pf-v5-c-accordion__toggle-icon">
633
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
634
+ </span>
635
+
636
+ <span class="pf-v5-c-accordion__toggle-text">Item three</span>
637
+ </button>
638
+ </h3>
639
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
640
+ <div
641
+ class="pf-v5-c-accordion__expandable-content-body"
642
+ >This text is hidden</div>
643
+ </div>
644
+ </div>
645
+
646
+ <div class="pf-v5-c-accordion__item pf-m-expanded">
647
+ <h3>
648
+ <button
649
+ class="pf-v5-c-accordion__toggle"
650
+ type="button"
651
+ aria-expanded="true"
652
+ >
653
+ <span class="pf-v5-c-accordion__toggle-icon">
654
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
655
+ </span>
656
+
657
+ <span class="pf-v5-c-accordion__toggle-text">Item four</span>
658
+ </button>
659
+ </h3>
660
+ <div class="pf-v5-c-accordion__expandable-content">
661
+ <div
662
+ class="pf-v5-c-accordion__expandable-content-body"
663
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
664
+ </div>
665
+ </div>
666
+
667
+ <div class="pf-v5-c-accordion__item">
668
+ <h3>
669
+ <button
670
+ class="pf-v5-c-accordion__toggle"
671
+ type="button"
672
+ aria-expanded="false"
673
+ >
674
+ <span class="pf-v5-c-accordion__toggle-icon">
675
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
676
+ </span>
677
+
678
+ <span class="pf-v5-c-accordion__toggle-text">Item five</span>
679
+ </button>
680
+ </h3>
681
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
682
+ <div
683
+ class="pf-v5-c-accordion__expandable-content-body"
684
+ >This text is hidden</div>
685
+ </div>
497
686
  </div>
498
687
  </div>
499
688
 
@@ -503,18 +692,26 @@ cssPrefix: pf-v5-c-accordion
503
692
 
504
693
  ### Overview
505
694
 
506
- There are two variations to build the accordion component:
507
- One way uses `<div>` and `<h1 - h6>` tags to build the component.
508
- In these examples `.pf-v5-c-accordion` uses `<div>`, `.pf-v5-c-accordion__toggle` uses `<h3><button>`, and `.pf-v5-c-accordion__expandable-content` uses `<div>`. The heading level that you use should fit within the rest of the headings outlined on your page.
695
+ There are two variations to build the accordion component. The first is to use `<div>` and `<h1 - h6>` tags:
696
+
697
+ * `.pf-v5-c-accordion` is placed on a `<div>`,
698
+ * `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<h1-h6>`, and
699
+ * `.pf-v5-c-accordion__expandable-content` is placed on a `<div>`.
700
+
701
+ The heading level that you use should fit within the rest of the headings outlined on your page.
509
702
 
510
703
  Another variation is using the definition list:
511
- In these examples `.pf-v5-c-accordion` uses `<dl>`, `.pf-v5-c-accordion__toggle` uses `<dt><button>`, and `.pf-v5-c-accordion__expandable-content` uses `<dd>`.
704
+
705
+ * `.pf-v5-c-accordion` is placed on a `<dl>`,
706
+ * `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<dt>`, and
707
+ * `.pf-v5-c-accordion__expandable-content` is placed on a `<dd>`.
512
708
 
513
709
  ### Usage
514
710
 
515
711
  | Class | Applied to | Outcome |
516
712
  | -- | -- | -- |
517
713
  | `.pf-v5-c-accordion` | `<div>`, `<dl>` | Initiates an accordion component. **Required**|
714
+ | `.pf-v5-c-accordion__item` | `<div>` | Initiates an accordion item component. **Required**|
518
715
  | `.pf-v5-c-accordion__toggle` | `<h1-h6><button>`, `<dt><button>` | Initiates a toggle in the accordion. **Required** |
519
716
  | `.pf-v5-c-accordion__toggle-text` | `<span>` | Initiates the text inside the toggle. **Required** |
520
717
  | `.pf-v5-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
@@ -522,5 +719,6 @@ In these examples `.pf-v5-c-accordion` uses `<dl>`, `.pf-v5-c-accordion__toggle`
522
719
  | `.pf-v5-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
523
720
  | `.pf-m-bordered` | `.pf-v5-c-accordion` | Modifies the accordion to add borders between items. |
524
721
  | `.pf-m-display-lg` | `.pf-v5-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
525
- | `.pf-m-expanded` | `.pf-v5-c-accordion__toggle`, `.pf-v5-c-accordion__expandable-content` | Modifies the accordion button and expandable content for the expanded state. |
722
+ | `.pf-m-toggle-start` | `.pf-v5-c-accordion` | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
723
+ | `.pf-m-expanded` | `.pf-v5-c-accordion__item` | Modifies the accordion item for the expanded state. |
526
724
  | `.pf-m-fixed` | `.pf-v5-c-accordion__expandable-content` | Modifies the expandable content for the fixed state. |