@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

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 (334) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. 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. |