@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.50

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 (360) 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 +889 -787
  29. package/base/tokens/_tokens-dark.scss +322 -265
  30. package/base/tokens/_tokens-default.scss +428 -306
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +69 -71
  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 +2 -2
  39. package/components/ActionList/action-list.scss +2 -2
  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 -15
  49. package/components/BackToTop/back-to-top.scss +14 -13
  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 +401 -358
  61. package/components/Button/button.scss +459 -486
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +28 -17
  65. package/components/Card/card.scss +32 -17
  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 +19 -10
  73. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  74. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  75. package/components/CodeBlock/code-block.css +6 -3
  76. package/components/CodeBlock/code-block.scss +6 -3
  77. package/components/CodeEditor/code-editor.css +31 -22
  78. package/components/CodeEditor/code-editor.scss +30 -21
  79. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  80. package/components/Content/content.css +40 -37
  81. package/components/Content/content.scss +40 -37
  82. package/components/ContextSelector/context-selector.css +41 -26
  83. package/components/ContextSelector/context-selector.scss +40 -25
  84. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  85. package/components/DataList/data-list-grid.css +21 -21
  86. package/components/DataList/data-list-grid.scss +3 -3
  87. package/components/DataList/data-list.css +165 -209
  88. package/components/DataList/data-list.scss +138 -185
  89. package/components/DatePicker/date-picker.css +8 -8
  90. package/components/DatePicker/date-picker.scss +8 -8
  91. package/components/DescriptionList/description-list.css +8 -5
  92. package/components/DescriptionList/description-list.scss +8 -5
  93. package/components/Divider/divider.css +97 -177
  94. package/components/Divider/divider.scss +60 -79
  95. package/components/DragDrop/drag-drop.css +8 -8
  96. package/components/DragDrop/drag-drop.scss +8 -8
  97. package/components/Drawer/drawer.css +120 -62
  98. package/components/Drawer/drawer.scss +94 -44
  99. package/components/Dropdown/dropdown.css +76 -69
  100. package/components/Dropdown/dropdown.scss +67 -62
  101. package/components/DualListSelector/dual-list-selector.css +29 -15
  102. package/components/DualListSelector/dual-list-selector.scss +30 -15
  103. package/components/EmptyState/empty-state.css +64 -38
  104. package/components/EmptyState/empty-state.scss +70 -38
  105. package/components/ExpandableSection/expandable-section.css +75 -66
  106. package/components/ExpandableSection/expandable-section.scss +82 -80
  107. package/components/FileUpload/file-upload.css +9 -15
  108. package/components/FileUpload/file-upload.scss +9 -15
  109. package/components/Form/form.css +111 -154
  110. package/components/Form/form.scss +101 -160
  111. package/components/FormControl/form-control.css +95 -111
  112. package/components/FormControl/form-control.scss +97 -92
  113. package/components/HelperText/helper-text.css +29 -35
  114. package/components/HelperText/helper-text.scss +31 -41
  115. package/components/Hint/hint.css +37 -27
  116. package/components/Hint/hint.scss +37 -30
  117. package/components/Icon/icon.css +1 -1
  118. package/components/Icon/icon.scss +1 -1
  119. package/components/InlineEdit/inline-edit.css +9 -9
  120. package/components/InlineEdit/inline-edit.scss +9 -9
  121. package/components/InputGroup/input-group.css +12 -6
  122. package/components/InputGroup/input-group.scss +11 -5
  123. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  124. package/components/JumpLinks/jump-links.css +27 -24
  125. package/components/JumpLinks/jump-links.scss +26 -24
  126. package/components/Label/label-group.css +13 -10
  127. package/components/Label/label-group.scss +13 -10
  128. package/components/Label/label.css +9 -9
  129. package/components/Label/label.scss +9 -9
  130. package/components/List/list.css +25 -25
  131. package/components/List/list.scss +26 -26
  132. package/components/LogViewer/log-viewer.css +14 -14
  133. package/components/LogViewer/log-viewer.scss +14 -14
  134. package/components/Login/login.css +104 -122
  135. package/components/Login/login.scss +92 -91
  136. package/components/Masthead/masthead.css +273 -498
  137. package/components/Masthead/masthead.scss +137 -282
  138. package/components/Menu/menu.css +82 -65
  139. package/components/Menu/menu.scss +85 -69
  140. package/components/MenuToggle/menu-toggle.css +37 -31
  141. package/components/MenuToggle/menu-toggle.scss +37 -33
  142. package/components/ModalBox/modal-box.css +76 -69
  143. package/components/ModalBox/modal-box.scss +74 -70
  144. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  145. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  146. package/components/Nav/nav.css +249 -898
  147. package/components/Nav/nav.scss +316 -1071
  148. package/components/Nav/themes/dark/nav.scss +2 -2
  149. package/components/NotificationBadge/notification-badge.css +66 -85
  150. package/components/NotificationBadge/notification-badge.scss +72 -103
  151. package/components/NotificationDrawer/notification-drawer.css +130 -128
  152. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  153. package/components/NumberInput/number-input.css +2 -2
  154. package/components/NumberInput/number-input.scss +2 -2
  155. package/components/OptionsMenu/options-menu.css +43 -31
  156. package/components/OptionsMenu/options-menu.scss +43 -31
  157. package/components/OverflowMenu/overflow-menu.css +2 -2
  158. package/components/OverflowMenu/overflow-menu.scss +2 -2
  159. package/components/Page/page.css +232 -271
  160. package/components/Page/page.scss +180 -231
  161. package/components/Pagination/pagination.css +71 -121
  162. package/components/Pagination/pagination.scss +56 -127
  163. package/components/Panel/panel.css +40 -30
  164. package/components/Panel/panel.scss +42 -33
  165. package/components/Popover/popover.css +108 -87
  166. package/components/Popover/popover.scss +120 -109
  167. package/components/Progress/progress.css +40 -52
  168. package/components/Progress/progress.scss +48 -62
  169. package/components/ProgressStepper/progress-stepper.css +26 -20
  170. package/components/ProgressStepper/progress-stepper.scss +25 -19
  171. package/components/Radio/radio.css +30 -23
  172. package/components/Radio/radio.scss +31 -25
  173. package/components/Select/select.css +56 -47
  174. package/components/Select/select.scss +56 -47
  175. package/components/Sidebar/sidebar.css +11 -5
  176. package/components/Sidebar/sidebar.scss +11 -5
  177. package/components/SimpleList/simple-list.css +45 -56
  178. package/components/SimpleList/simple-list.scss +51 -55
  179. package/components/Skeleton/skeleton.css +24 -25
  180. package/components/Skeleton/skeleton.scss +21 -26
  181. package/components/SkipToContent/skip-to-content.css +9 -6
  182. package/components/SkipToContent/skip-to-content.scss +8 -6
  183. package/components/Slider/slider.css +80 -55
  184. package/components/Slider/slider.scss +96 -65
  185. package/components/Spinner/spinner.css +17 -34
  186. package/components/Spinner/spinner.scss +19 -47
  187. package/components/Switch/switch.css +49 -41
  188. package/components/Switch/switch.scss +51 -42
  189. package/components/TabContent/tab-content.css +21 -12
  190. package/components/TabContent/tab-content.scss +22 -15
  191. package/components/Table/table-grid.css +264 -203
  192. package/components/Table/table-grid.scss +61 -47
  193. package/components/Table/table-scrollable.css +4 -4
  194. package/components/Table/table-scrollable.scss +6 -4
  195. package/components/Table/table-tree-view.css +112 -105
  196. package/components/Table/table-tree-view.scss +38 -33
  197. package/components/Table/table.css +105 -89
  198. package/components/Table/table.scss +105 -89
  199. package/components/Tabs/tabs.css +76 -48
  200. package/components/Tabs/tabs.scss +74 -48
  201. package/components/TextInputGroup/text-input-group.css +15 -15
  202. package/components/TextInputGroup/text-input-group.scss +15 -15
  203. package/components/Tile/tile.css +10 -10
  204. package/components/Tile/tile.scss +10 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +14 -11
  208. package/components/ToggleGroup/toggle-group.scss +14 -11
  209. package/components/Toolbar/toolbar.css +57 -43
  210. package/components/Toolbar/toolbar.scss +45 -25
  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/Alert/examples/Alert.md +3 -3
  222. package/docs/components/Avatar/examples/Avatar.md +5 -19
  223. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  224. package/docs/components/Badge/examples/Badge.md +21 -0
  225. package/docs/components/Banner/examples/Banner.md +48 -25
  226. package/docs/components/Brand/examples/Brand.css +12 -0
  227. package/docs/components/Brand/examples/Brand.md +51 -32
  228. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  229. package/docs/components/Button/examples/Button.css +6 -2
  230. package/docs/components/Button/examples/Button.md +1425 -87
  231. package/docs/components/Card/examples/Card.md +143 -37
  232. package/docs/components/Check/examples/Check.md +71 -58
  233. package/docs/components/Chip/examples/Chip.md +1 -1
  234. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  235. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  236. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  237. package/docs/components/Content/examples/Content.md +5 -5
  238. package/docs/components/Divider/examples/Divider.css +3 -1
  239. package/docs/components/Divider/examples/Divider.md +4 -5
  240. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  241. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  242. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  243. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  244. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  245. package/docs/components/Form/examples/Form.md +134 -89
  246. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  247. package/docs/components/Label/examples/Label.md +12 -12
  248. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  249. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  250. package/docs/components/Login/examples/Login.md +10 -5
  251. package/docs/components/Masthead/examples/masthead.md +443 -65
  252. package/docs/components/Menu/examples/Menu.css +8 -0
  253. package/docs/components/Menu/examples/Menu.md +594 -543
  254. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  255. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  256. package/docs/components/Nav/examples/Navigation.css +3 -47
  257. package/docs/components/Nav/examples/Navigation.md +305 -353
  258. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  259. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  260. package/docs/components/Page/examples/Page.css +0 -8
  261. package/docs/components/Page/examples/Page.md +22 -21
  262. package/docs/components/Pagination/examples/Pagination.md +663 -637
  263. package/docs/components/Panel/examples/Panel.md +12 -0
  264. package/docs/components/Popover/examples/Popover.css +4 -9
  265. package/docs/components/Popover/examples/Popover.md +1 -1
  266. package/docs/components/Radio/examples/Radio.md +62 -54
  267. package/docs/components/Select/deprecated/Select.md +184 -177
  268. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  269. package/docs/components/TabContent/examples/TabContent.md +10 -10
  270. package/docs/components/Table/examples/Table.css +2 -2
  271. package/docs/components/Table/examples/Table.md +10 -10
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  274. package/docs/components/Tile/examples/Tile.css +1 -1
  275. package/docs/components/Title/examples/Title.md +18 -0
  276. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  277. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  278. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  279. package/docs/components/Truncate/examples/Truncate.css +2 -2
  280. package/docs/components/Truncate/examples/Truncate.md +2 -2
  281. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  282. package/docs/demos/Alert/examples/Alert.md +327 -84
  283. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  284. package/docs/demos/Banner/examples/Banner.md +209 -58
  285. package/docs/demos/Card/examples/Card.css +3 -3
  286. package/docs/demos/Card/examples/Card.md +28 -12
  287. package/docs/demos/CardView/examples/CardView.md +263 -205
  288. package/docs/demos/ContextSelector/examples/ContextSelector.md +373 -90
  289. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  290. package/docs/demos/DataList/examples/DataList.md +995 -928
  291. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  292. package/docs/demos/Drawer/examples/Drawer.md +505 -140
  293. package/docs/demos/Form/examples/BasicForms.md +131 -80
  294. package/docs/demos/JumpLinks/examples/JumpLinks.md +606 -168
  295. package/docs/demos/Masthead/examples/Masthead.md +767 -323
  296. package/docs/demos/Modal/examples/Modal.md +639 -192
  297. package/docs/demos/Nav/examples/Nav.md +685 -896
  298. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  299. package/docs/demos/Page/examples/Page.md +933 -264
  300. package/docs/demos/Page/examples/Penta.md +569 -501
  301. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  302. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  303. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1296 -917
  304. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  305. package/docs/demos/Table/examples/Table.md +3832 -3390
  306. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  307. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  308. package/docs/demos/Toolbar/examples/Toolbar.md +1331 -1493
  309. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  310. package/docs/layouts/Flex/examples/Flex.md +16 -16
  311. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  312. package/icons/pficons.mjs +1 -0
  313. package/layouts/Flex/flex.css +115 -43
  314. package/layouts/Flex/flex.scss +20 -8
  315. package/package.json +36 -32
  316. package/patternfly-addons.css +732 -972
  317. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  318. package/patternfly-base-no-globals.css +923 -799
  319. package/patternfly-base-theme-dark-unversioned.css +928 -803
  320. package/patternfly-base.css +928 -803
  321. package/patternfly-no-globals.css +6092 -6615
  322. package/patternfly-theme-dark-unversioned.css +6097 -6619
  323. package/patternfly.css +6097 -6619
  324. package/patternfly.min.css +1 -1
  325. package/patternfly.min.css.map +1 -1
  326. package/sass-utilities/functions.scss +6 -0
  327. package/sass-utilities/mixins.scss +62 -2
  328. package/sass-utilities/scss-variables.scss +8 -8
  329. package/sass-utilities/themes/dark/mixins.scss +3 -1
  330. package/utilities/Accessibility/accessibility.css +12 -12
  331. package/utilities/Spacing/spacing.css +720 -960
  332. package/utilities/Spacing/spacing.scss +4 -8
  333. package/base/themes/dark/_variables.scss +0 -102
  334. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  335. package/components/Accordion/themes/dark/accordion.scss +0 -9
  336. package/components/Alert/themes/dark/alert.scss +0 -17
  337. package/components/Badge/themes/dark/badge.scss +0 -9
  338. package/components/Banner/themes/dark/banner.scss +0 -14
  339. package/components/Button/themes/dark/button.scss +0 -51
  340. package/components/DataList/themes/dark/data-list.scss +0 -10
  341. package/components/Form/themes/dark/form.scss +0 -7
  342. package/components/FormControl/themes/dark/form-control.scss +0 -24
  343. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  344. package/components/Hint/themes/dark/hint.scss +0 -8
  345. package/components/Login/themes/dark/login.scss +0 -12
  346. package/components/Masthead/themes/dark/masthead.scss +0 -14
  347. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  348. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  349. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  350. package/components/Page/themes/dark/page.scss +0 -69
  351. package/components/Pagination/themes/dark/pagination.scss +0 -7
  352. package/components/Panel/themes/dark/panel.scss +0 -7
  353. package/components/Popover/themes/dark/popover.scss +0 -11
  354. package/components/Progress/themes/dark/progress.scss +0 -9
  355. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  356. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  357. package/components/Switch/themes/dark/switch.scss +0 -11
  358. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  359. package/docs/components/Avatar/examples/Avatar.css +0 -3
  360. 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. |