@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.10

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_fixed-width.scss +3 -1
  5. package/assets/fontawesome/_icons.scss +1333 -1330
  6. package/assets/fontawesome/_index.scss +11 -0
  7. package/assets/fontawesome/_larger.scss +4 -2
  8. package/assets/fontawesome/_list.scss +4 -2
  9. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  10. package/assets/fontawesome/_screen-reader.scss +1 -0
  11. package/assets/fontawesome/_stacked.scss +3 -1
  12. package/assets/fontawesome/_variables.scss +4 -4
  13. package/assets/fontawesome/fontawesome.scss +12 -12
  14. package/assets/icons/iconUnicodes.json +6 -0
  15. package/assets/images/img_avatar-dark.svg +22 -16
  16. package/assets/images/img_avatar-light.svg +25 -18
  17. package/assets/images/pf-background.svg +21 -21
  18. package/assets/images/pf_logo.svg +11 -11
  19. package/assets/images/pf_logo_white.svg +16 -17
  20. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  21. package/assets/pficon/pficon.scss +310 -271
  22. package/base/_index.scss +10 -0
  23. package/base/{_globals.scss → normalize.scss} +15 -48
  24. package/base/patternfly-common.css +14 -0
  25. package/base/patternfly-common.scss +69 -2
  26. package/base/patternfly-fa-icons.css +2787 -1420
  27. package/base/patternfly-fa-icons.scss +53 -2
  28. package/base/patternfly-fonts.css +10 -80
  29. package/base/patternfly-fonts.scss +49 -2
  30. package/base/patternfly-pf-icons.css +158 -134
  31. package/base/patternfly-pf-icons.scss +1 -2
  32. package/base/patternfly-svg-icons.css +5 -0
  33. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  34. package/base/patternfly-variables.css +1094 -1206
  35. package/base/patternfly-variables.scss +20 -2
  36. package/base/reset.scss +33 -0
  37. package/base/tokens/_index.scss +6 -0
  38. package/base/tokens/tokens-charts-dark.scss +173 -0
  39. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  40. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +310 -294
  41. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +580 -447
  42. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +16 -34
  43. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  44. package/components/AboutModalBox/about-modal-box.css +86 -81
  45. package/components/AboutModalBox/about-modal-box.scss +80 -82
  46. package/components/Accordion/accordion.css +46 -45
  47. package/components/Accordion/accordion.scss +56 -55
  48. package/components/ActionList/action-list.css +6 -5
  49. package/components/ActionList/action-list.scss +7 -5
  50. package/components/Alert/alert-group.css +72 -19
  51. package/components/Alert/alert-group.scss +105 -18
  52. package/components/Alert/alert.css +52 -59
  53. package/components/Alert/alert.scss +56 -65
  54. package/components/Avatar/avatar.css +42 -41
  55. package/components/Avatar/avatar.scss +8 -7
  56. package/components/BackToTop/back-to-top.css +19 -17
  57. package/components/BackToTop/back-to-top.scss +17 -17
  58. package/components/Backdrop/backdrop.css +1 -1
  59. package/components/Backdrop/backdrop.scss +3 -4
  60. package/components/BackgroundImage/background-image.scss +3 -4
  61. package/components/Badge/badge.css +29 -7
  62. package/components/Badge/badge.scss +33 -9
  63. package/components/Banner/banner.css +30 -37
  64. package/components/Banner/banner.scss +30 -43
  65. package/components/Brand/brand.css +14 -10
  66. package/components/Brand/brand.scss +8 -5
  67. package/components/Breadcrumb/breadcrumb.css +23 -24
  68. package/components/Breadcrumb/breadcrumb.scss +25 -28
  69. package/components/Button/button.css +152 -130
  70. package/components/Button/button.scss +157 -133
  71. package/components/CalendarMonth/calendar-month.css +47 -47
  72. package/components/CalendarMonth/calendar-month.scss +50 -51
  73. package/components/Card/card.css +111 -94
  74. package/components/Card/card.scss +119 -93
  75. package/components/Check/check.css +6 -6
  76. package/components/Check/check.scss +8 -9
  77. package/components/ClipboardCopy/clipboard-copy.css +34 -45
  78. package/components/ClipboardCopy/clipboard-copy.scss +36 -49
  79. package/components/CodeBlock/code-block.css +21 -20
  80. package/components/CodeBlock/code-block.scss +21 -21
  81. package/components/CodeEditor/code-editor.css +36 -35
  82. package/components/CodeEditor/code-editor.scss +36 -36
  83. package/components/Content/content.css +167 -153
  84. package/components/Content/content.scss +204 -145
  85. package/components/DataList/data-list-grid.css +117 -117
  86. package/components/DataList/data-list-grid.scss +22 -20
  87. package/components/DataList/data-list.css +308 -312
  88. package/components/DataList/data-list.scss +145 -152
  89. package/components/DatePicker/date-picker.css +17 -17
  90. package/components/DatePicker/date-picker.scss +17 -18
  91. package/components/DescriptionList/description-list-order.css +5 -5
  92. package/components/DescriptionList/description-list-order.scss +3 -1
  93. package/components/DescriptionList/description-list.css +52 -50
  94. package/components/DescriptionList/description-list.scss +32 -37
  95. package/components/Divider/divider.css +104 -107
  96. package/components/Divider/divider.scss +19 -19
  97. package/components/DragDrop/drag-drop.css +4 -2
  98. package/components/DragDrop/drag-drop.scss +3 -3
  99. package/components/Drawer/drawer.css +119 -114
  100. package/components/Drawer/drawer.scss +139 -134
  101. package/components/DualListSelector/dual-list-selector.css +65 -62
  102. package/components/DualListSelector/dual-list-selector.scss +55 -52
  103. package/components/EmptyState/empty-state.css +38 -37
  104. package/components/EmptyState/empty-state.scss +39 -39
  105. package/components/ExpandableSection/expandable-section.css +27 -86
  106. package/components/ExpandableSection/expandable-section.scss +32 -101
  107. package/components/FileUpload/file-upload.css +3 -3
  108. package/components/FileUpload/file-upload.scss +3 -4
  109. package/components/Form/form.css +177 -125
  110. package/components/Form/form.scss +121 -115
  111. package/components/FormControl/form-control.css +68 -64
  112. package/components/FormControl/form-control.scss +80 -74
  113. package/components/HelperText/helper-text.css +5 -4
  114. package/components/HelperText/helper-text.scss +8 -6
  115. package/components/Hint/hint.css +25 -25
  116. package/components/Hint/hint.scss +25 -27
  117. package/components/Icon/icon.css +10 -10
  118. package/components/Icon/icon.scss +11 -12
  119. package/components/InlineEdit/inline-edit.css +12 -12
  120. package/components/InlineEdit/inline-edit.scss +12 -13
  121. package/components/InputGroup/input-group.css +17 -17
  122. package/components/InputGroup/input-group.scss +19 -20
  123. package/components/JumpLinks/jump-links.css +80 -96
  124. package/components/JumpLinks/jump-links.scss +80 -100
  125. package/components/Label/label-group.css +28 -28
  126. package/components/Label/label-group.scss +29 -30
  127. package/components/Label/label.css +103 -88
  128. package/components/Label/label.scss +114 -95
  129. package/components/List/list.css +44 -47
  130. package/components/List/list.scss +51 -58
  131. package/components/Login/login.css +122 -118
  132. package/components/Login/login.scss +105 -112
  133. package/components/Masthead/masthead.css +273 -175
  134. package/components/Masthead/masthead.scss +102 -68
  135. package/components/Menu/menu.css +151 -95
  136. package/components/Menu/menu.scss +59 -40
  137. package/components/MenuToggle/menu-toggle.css +131 -110
  138. package/components/MenuToggle/menu-toggle.scss +152 -130
  139. package/components/ModalBox/modal-box.css +53 -45
  140. package/components/ModalBox/modal-box.scss +52 -46
  141. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  143. package/components/Nav/nav.css +33 -9
  144. package/components/Nav/nav.scss +46 -13
  145. package/components/NotificationDrawer/notification-drawer.css +50 -51
  146. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  147. package/components/NumberInput/number-input.css +7 -11
  148. package/components/NumberInput/number-input.scss +5 -7
  149. package/components/OverflowMenu/overflow-menu.css +2 -1
  150. package/components/OverflowMenu/overflow-menu.scss +3 -1
  151. package/components/Page/page.css +177 -517
  152. package/components/Page/page.scss +157 -384
  153. package/components/Pagination/pagination.css +82 -79
  154. package/components/Pagination/pagination.scss +43 -40
  155. package/components/Panel/panel.css +33 -30
  156. package/components/Panel/panel.scss +35 -33
  157. package/components/Popover/popover.css +54 -52
  158. package/components/Popover/popover.scss +55 -54
  159. package/components/Progress/progress.css +8 -4
  160. package/components/Progress/progress.scss +14 -11
  161. package/components/ProgressStepper/progress-stepper.css +246 -245
  162. package/components/ProgressStepper/progress-stepper.scss +118 -118
  163. package/components/Radio/radio.css +9 -9
  164. package/components/Radio/radio.scss +11 -12
  165. package/components/Sidebar/sidebar.css +139 -139
  166. package/components/Sidebar/sidebar.scss +61 -61
  167. package/components/SimpleList/simple-list.css +21 -20
  168. package/components/SimpleList/simple-list.scss +22 -23
  169. package/components/Skeleton/skeleton.css +4 -4
  170. package/components/Skeleton/skeleton.scss +7 -8
  171. package/components/SkipToContent/skip-to-content.css +7 -6
  172. package/components/SkipToContent/skip-to-content.scss +7 -7
  173. package/components/Slider/slider.css +31 -31
  174. package/components/Slider/slider.scss +54 -55
  175. package/components/Spinner/spinner.scss +4 -5
  176. package/components/Switch/switch.css +4 -10
  177. package/components/Switch/switch.scss +8 -17
  178. package/components/TabContent/tab-content.css +25 -25
  179. package/components/TabContent/tab-content.scss +28 -28
  180. package/components/Table/table-grid.css +434 -508
  181. package/components/Table/table-grid.scss +131 -150
  182. package/components/Table/table-scrollable.css +31 -34
  183. package/components/Table/table-scrollable.scss +44 -41
  184. package/components/Table/table-tree-view.css +287 -279
  185. package/components/Table/table-tree-view.scss +84 -84
  186. package/components/Table/table.css +316 -279
  187. package/components/Table/table.scss +346 -301
  188. package/components/Tabs/tabs.css +215 -240
  189. package/components/Tabs/tabs.scss +130 -162
  190. package/components/TextInputGroup/text-input-group.css +122 -64
  191. package/components/TextInputGroup/text-input-group.scss +144 -87
  192. package/components/Tile/tile.css +15 -15
  193. package/components/Tile/tile.scss +16 -17
  194. package/components/Timestamp/timestamp.css +13 -19
  195. package/components/Timestamp/timestamp.scss +16 -22
  196. package/components/Title/title.css +14 -13
  197. package/components/Title/title.scss +15 -15
  198. package/components/ToggleGroup/toggle-group.css +37 -37
  199. package/components/ToggleGroup/toggle-group.scss +38 -41
  200. package/components/Toolbar/toolbar.css +547 -1431
  201. package/components/Toolbar/toolbar.scss +159 -123
  202. package/components/Tooltip/tooltip.css +28 -27
  203. package/components/Tooltip/tooltip.scss +31 -30
  204. package/components/TreeView/tree-view.css +184 -184
  205. package/components/TreeView/tree-view.scss +133 -133
  206. package/components/Truncate/truncate.css +2 -2
  207. package/components/Truncate/truncate.scss +7 -8
  208. package/components/Wizard/wizard.css +190 -154
  209. package/components/Wizard/wizard.scss +211 -165
  210. package/components/_index.css +22381 -0
  211. package/components/_index.scss +82 -0
  212. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  213. package/docs/components/Accordion/examples/Accordion.md +1 -1
  214. package/docs/components/ActionList/examples/ActionList.md +64 -24
  215. package/docs/components/Alert/examples/Alert.md +116 -74
  216. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  217. package/docs/components/Badge/examples/Badge.md +6 -16
  218. package/docs/components/Banner/examples/Banner.md +16 -10
  219. package/docs/components/Brand/examples/Brand.md +2 -2
  220. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  221. package/docs/components/Button/examples/Button.md +537 -368
  222. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  223. package/docs/components/Card/examples/Card.md +372 -658
  224. package/docs/components/Check/examples/Check.md +10 -15
  225. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  226. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  227. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  228. package/docs/components/Content/examples/Content.md +600 -60
  229. package/docs/components/DataList/examples/DataList.md +291 -1028
  230. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  231. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  232. package/docs/components/Drawer/examples/Drawer.md +60 -21
  233. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  234. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  235. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  236. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  237. package/docs/components/Form/examples/Form.md +100 -26
  238. package/docs/components/Hint/examples/Hint.md +54 -164
  239. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  240. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  241. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  242. package/docs/components/Label/examples/Label.md +2577 -406
  243. package/docs/components/Login/examples/Login.md +372 -334
  244. package/docs/components/Masthead/examples/masthead.md +515 -484
  245. package/docs/components/Menu/examples/Menu.md +77 -138
  246. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  247. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  248. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  249. package/docs/components/Nav/examples/Navigation.css +2 -7
  250. package/docs/components/Nav/examples/Navigation.md +337 -270
  251. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  252. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  253. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  254. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  255. package/docs/components/Page/examples/Page.css +5 -9
  256. package/docs/components/Page/examples/Page.md +254 -181
  257. package/docs/components/Pagination/examples/Pagination.md +336 -756
  258. package/docs/components/Panel/examples/Panel.md +3 -2
  259. package/docs/components/Popover/examples/Popover.md +60 -15
  260. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  261. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  262. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  263. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  264. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  265. package/docs/components/Slider/examples/Slider.md +53 -45
  266. package/docs/components/Spinner/examples/Spinner.md +1 -1
  267. package/docs/components/Switch/examples/Switch.md +33 -148
  268. package/docs/components/Table/examples/Table.css +11 -6
  269. package/docs/components/Table/examples/Table.md +5302 -2464
  270. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  271. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  273. package/docs/components/Tile/examples/Tile.css +5 -5
  274. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  275. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  276. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  277. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  278. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  279. package/docs/components/TreeView/examples/TreeView.md +627 -49
  280. package/docs/components/Truncate/examples/Truncate.css +1 -2
  281. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  282. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  283. package/docs/demos/Alert/examples/Alert.md +924 -909
  284. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  285. package/docs/demos/Banner/examples/Banner.md +641 -659
  286. package/docs/demos/Button/examples/Button.md +8 -8
  287. package/docs/demos/Card/examples/Card.css +6 -6
  288. package/docs/demos/Card/examples/Card.md +419 -606
  289. package/docs/demos/CardView/examples/CardView.md +822 -1435
  290. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  291. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  292. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  293. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  294. package/docs/demos/Form/examples/BasicForms.md +153 -88
  295. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  296. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  297. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  298. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  299. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  300. package/docs/demos/Page/examples/Page.css +11 -0
  301. package/docs/demos/Page/examples/Page.md +3753 -2540
  302. package/docs/demos/Panel/Panel.md +88 -0
  303. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  304. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  305. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  306. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  307. package/docs/demos/Table/examples/Table.md +14272 -15154
  308. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  309. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  310. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  311. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  312. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  313. package/docs/layouts/Flex/examples/Flex.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.md +50 -50
  315. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  316. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  317. package/docs/layouts/Grid/examples/Grid.css +3 -3
  318. package/docs/layouts/Grid/examples/Grid.md +33 -33
  319. package/docs/layouts/Level/examples/Level.css +5 -5
  320. package/docs/layouts/Split/examples/Split.css +4 -4
  321. package/docs/layouts/Stack/examples/Stack.css +5 -5
  322. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  323. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  324. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  325. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  326. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  327. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  328. package/docs/utilities/Display/examples/Display.css +3 -10
  329. package/docs/utilities/Display/examples/Display.md +21 -12
  330. package/docs/utilities/Flex/examples/Flex.css +7 -7
  331. package/docs/utilities/Flex/examples/Flex.md +82 -40
  332. package/docs/utilities/Float/examples/Float.css +5 -5
  333. package/docs/utilities/Float/examples/Float.md +6 -6
  334. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  336. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  337. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  338. package/docs/utilities/Text/examples/Text.md +78 -77
  339. package/icons/pficons.mjs +6 -0
  340. package/layouts/Bullseye/bullseye.css +4 -0
  341. package/layouts/Bullseye/bullseye.scss +5 -1
  342. package/layouts/Flex/flex.css +241 -237
  343. package/layouts/Flex/flex.scss +48 -44
  344. package/layouts/Gallery/gallery.css +15 -11
  345. package/layouts/Gallery/gallery.scss +9 -5
  346. package/layouts/Grid/grid.css +20 -16
  347. package/layouts/Grid/grid.scss +12 -8
  348. package/layouts/Level/level.css +5 -1
  349. package/layouts/Level/level.scss +6 -2
  350. package/layouts/Split/split.css +5 -1
  351. package/layouts/Split/split.scss +6 -2
  352. package/layouts/Stack/stack.css +5 -1
  353. package/layouts/Stack/stack.scss +6 -2
  354. package/layouts/_index.css +3461 -0
  355. package/layouts/_index.scss +8 -0
  356. package/package.json +39 -39
  357. package/patternfly-addons.css +2071 -2648
  358. package/patternfly-addons.scss +2 -12
  359. package/patternfly-base-no-globals.css +4227 -3064
  360. package/patternfly-base-no-globals.scss +5 -3
  361. package/patternfly-base.css +4307 -3140
  362. package/patternfly-base.scss +2 -6
  363. package/patternfly-charts.css +579 -240
  364. package/patternfly-charts.scss +352 -337
  365. package/patternfly-no-globals.css +21105 -23238
  366. package/patternfly-no-globals.scss +5 -4
  367. package/patternfly.css +21209 -23338
  368. package/patternfly.min.css +1 -1
  369. package/patternfly.min.css.map +1 -1
  370. package/patternfly.scss +6 -4
  371. package/sass-utilities/_index.scss +6 -0
  372. package/sass-utilities/functions.scss +25 -25
  373. package/sass-utilities/{_init.scss → init.scss} +6 -6
  374. package/sass-utilities/mixins.scss +108 -72
  375. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  376. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  377. package/sass-utilities/scss-variables.scss +48 -261
  378. package/utilities/Accessibility/accessibility.css +15 -15
  379. package/utilities/Accessibility/accessibility.scss +8 -6
  380. package/utilities/Alignment/alignment.css +29 -29
  381. package/utilities/Alignment/alignment.scss +6 -4
  382. package/utilities/BackgroundColor/background-color.css +67 -0
  383. package/utilities/BackgroundColor/background-color.scss +16 -0
  384. package/utilities/BoxShadow/box-shadow.css +15 -39
  385. package/utilities/BoxShadow/box-shadow.scss +19 -28
  386. package/utilities/Display/display.css +43 -5
  387. package/utilities/Display/display.scss +7 -4
  388. package/utilities/Flex/flex.css +50 -50
  389. package/utilities/Flex/flex.scss +21 -20
  390. package/utilities/Float/float.css +29 -29
  391. package/utilities/Float/float.scss +6 -6
  392. package/utilities/Sizing/sizing.css +58 -58
  393. package/utilities/Sizing/sizing.scss +23 -21
  394. package/utilities/Spacing/spacing.css +1372 -1372
  395. package/utilities/Spacing/spacing.scss +6 -6
  396. package/utilities/Text/text.css +419 -662
  397. package/utilities/Text/text.scss +81 -107
  398. package/utilities/_index.css +7815 -0
  399. package/utilities/_index.scss +10 -0
  400. package/assets/fontawesome/_core.scss +0 -20
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/ModalBox/examples/ModalBox.md CHANGED
@@ -18,11 +18,15 @@ cssPrefix: pf-v6-c-modal-box
18
18
  >
19
19
  <div class="pf-v6-c-modal-box__close">
20
20
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
21
- <i class="fas fa-times" aria-hidden="true"></i>
21
+ <span class="pf-v6-c-button__icon">
22
+ <i class="fas fa-times" aria-hidden="true"></i>
23
+ </span>
22
24
  </button>
23
25
  </div>
24
26
  <header class="pf-v6-c-modal-box__header">
25
- <h1 class="pf-v6-c-modal-box__title" id="modal-title">Modal title</h1>
27
+ <div class="pf-v6-c-modal-box__header-main">
28
+ <h1 class="pf-v6-c-modal-box__title" id="modal-title">Modal title</h1>
29
+ </div>
26
30
  </header>
27
31
  <div
28
32
  class="pf-v6-c-modal-box__body"
@@ -45,7 +49,9 @@ cssPrefix: pf-v6-c-modal-box
45
49
  >
46
50
  <div class="pf-v6-c-modal-box__close">
47
51
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
48
- <i class="fas fa-times" aria-hidden="true"></i>
52
+ <span class="pf-v6-c-button__icon">
53
+ <i class="fas fa-times" aria-hidden="true"></i>
54
+ </span>
49
55
  </button>
50
56
  </div>
51
57
  <header class="pf-v6-c-modal-box__header pf-m-help">
@@ -61,7 +67,9 @@ cssPrefix: pf-v6-c-modal-box
61
67
  </div>
62
68
  <div class="pf-v6-c-modal-box__header-help">
63
69
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Help">
64
- <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
70
+ <span class="pf-v6-c-button__icon">
71
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
72
+ </span>
65
73
  </button>
66
74
  </div>
67
75
  </header>
@@ -85,11 +93,15 @@ cssPrefix: pf-v6-c-modal-box
85
93
  >
86
94
  <div class="pf-v6-c-modal-box__close">
87
95
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
88
- <i class="fas fa-times" aria-hidden="true"></i>
96
+ <span class="pf-v6-c-button__icon">
97
+ <i class="fas fa-times" aria-hidden="true"></i>
98
+ </span>
89
99
  </button>
90
100
  </div>
91
101
  <header class="pf-v6-c-modal-box__header">
92
- <h1 class="pf-v6-c-modal-box__title" id="modal-sm-title">Modal title</h1>
102
+ <div class="pf-v6-c-modal-box__header-main">
103
+ <h1 class="pf-v6-c-modal-box__title" id="modal-sm-title">Modal title</h1>
104
+ </div>
93
105
  </header>
94
106
  <div class="pf-v6-c-modal-box__body" id="modal-sm-description">
95
107
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -114,11 +126,15 @@ cssPrefix: pf-v6-c-modal-box
114
126
  >
115
127
  <div class="pf-v6-c-modal-box__close">
116
128
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
117
- <i class="fas fa-times" aria-hidden="true"></i>
129
+ <span class="pf-v6-c-button__icon">
130
+ <i class="fas fa-times" aria-hidden="true"></i>
131
+ </span>
118
132
  </button>
119
133
  </div>
120
134
  <header class="pf-v6-c-modal-box__header">
121
- <h1 class="pf-v6-c-modal-box__title" id="modal-md-title">Modal title</h1>
135
+ <div class="pf-v6-c-modal-box__header-main">
136
+ <h1 class="pf-v6-c-modal-box__title" id="modal-md-title">Modal title</h1>
137
+ </div>
122
138
  </header>
123
139
  <div class="pf-v6-c-modal-box__body" id="modal-md-description">
124
140
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -143,11 +159,15 @@ cssPrefix: pf-v6-c-modal-box
143
159
  >
144
160
  <div class="pf-v6-c-modal-box__close">
145
161
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
146
- <i class="fas fa-times" aria-hidden="true"></i>
162
+ <span class="pf-v6-c-button__icon">
163
+ <i class="fas fa-times" aria-hidden="true"></i>
164
+ </span>
147
165
  </button>
148
166
  </div>
149
167
  <header class="pf-v6-c-modal-box__header">
150
- <h1 class="pf-v6-c-modal-box__title" id="modal-lg-title">Modal title</h1>
168
+ <div class="pf-v6-c-modal-box__header-main">
169
+ <h1 class="pf-v6-c-modal-box__title" id="modal-lg-title">Modal title</h1>
170
+ </div>
151
171
  </header>
152
172
  <div class="pf-v6-c-modal-box__body" id="modal-lg-description">
153
173
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -172,7 +192,9 @@ cssPrefix: pf-v6-c-modal-box
172
192
  >
173
193
  <div class="pf-v6-c-modal-box__close">
174
194
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
175
- <i class="fas fa-times" aria-hidden="true"></i>
195
+ <span class="pf-v6-c-button__icon">
196
+ <i class="fas fa-times" aria-hidden="true"></i>
197
+ </span>
176
198
  </button>
177
199
  </div>
178
200
  <div class="pf-v6-c-modal-box__body">
@@ -197,18 +219,22 @@ cssPrefix: pf-v6-c-modal-box
197
219
  >
198
220
  <div class="pf-v6-c-modal-box__close">
199
221
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
200
- <i class="fas fa-times" aria-hidden="true"></i>
222
+ <span class="pf-v6-c-button__icon">
223
+ <i class="fas fa-times" aria-hidden="true"></i>
224
+ </span>
201
225
  </button>
202
226
  </div>
203
227
  <header class="pf-v6-c-modal-box__header">
204
- <h1
205
- class="pf-v6-c-modal-box__title"
206
- id="modal-with-description-title"
207
- >Modal title</h1>
208
- <div
209
- class="pf-v6-c-modal-box__description"
210
- id="modal-with-description-description"
211
- >A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.</div>
228
+ <div class="pf-v6-c-modal-box__header-main">
229
+ <h1
230
+ class="pf-v6-c-modal-box__title"
231
+ id="modal-with-description-title"
232
+ >Modal title</h1>
233
+ <div
234
+ class="pf-v6-c-modal-box__description"
235
+ id="modal-with-description-description"
236
+ >A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.</div>
237
+ </div>
212
238
  </header>
213
239
  <div
214
240
  class="pf-v6-c-modal-box__body"
@@ -230,11 +256,15 @@ cssPrefix: pf-v6-c-modal-box
230
256
  >
231
257
  <div class="pf-v6-c-modal-box__close">
232
258
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
233
- <i class="fas fa-times" aria-hidden="true"></i>
259
+ <span class="pf-v6-c-button__icon">
260
+ <i class="fas fa-times" aria-hidden="true"></i>
261
+ </span>
234
262
  </button>
235
263
  </div>
236
264
  <header class="pf-v6-c-modal-box__header">
237
- <h1 class="pf-v6-c-title pf-m-4xl" id="modal-custom-title">Custom title</h1>
265
+ <div class="pf-v6-c-modal-box__header-main">
266
+ <h1 class="pf-v6-c-title pf-m-4xl" id="modal-custom-title">Custom title</h1>
267
+ </div>
238
268
  </header>
239
269
  <div
240
270
  class="pf-v6-c-modal-box__body"
@@ -273,16 +303,20 @@ cssPrefix: pf-v6-c-modal-box
273
303
  >
274
304
  <div class="pf-v6-c-modal-box__close">
275
305
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
276
- <i class="fas fa-times" aria-hidden="true"></i>
306
+ <span class="pf-v6-c-button__icon">
307
+ <i class="fas fa-times" aria-hidden="true"></i>
308
+ </span>
277
309
  </button>
278
310
  </div>
279
311
  <header class="pf-v6-c-modal-box__header">
280
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="icon-title">
281
- <span class="pf-v6-c-modal-box__title-icon">
282
- <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
283
- </span>
284
- <span class="pf-v6-c-modal-box__title-text">Modal with icon title</span>
285
- </h1>
312
+ <div class="pf-v6-c-modal-box__header-main">
313
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="icon-title">
314
+ <span class="pf-v6-c-modal-box__title-icon">
315
+ <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
316
+ </span>
317
+ <span class="pf-v6-c-modal-box__title-text">Modal with icon title</span>
318
+ </h1>
319
+ </div>
286
320
  </header>
287
321
  <div class="pf-v6-c-modal-box__body" id="icon-description">Modal description</div>
288
322
  <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
@@ -302,20 +336,24 @@ cssPrefix: pf-v6-c-modal-box
302
336
  >
303
337
  <div class="pf-v6-c-modal-box__close">
304
338
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
305
- <i class="fas fa-times" aria-hidden="true"></i>
339
+ <span class="pf-v6-c-button__icon">
340
+ <i class="fas fa-times" aria-hidden="true"></i>
341
+ </span>
306
342
  </button>
307
343
  </div>
308
344
  <header class="pf-v6-c-modal-box__header">
309
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="custom-alert-title">
310
- <span class="pf-v6-c-modal-box__title-icon">
311
- <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
312
- </span>
313
- <span class="pf-v6-u-screen-reader">
314
- Default
315
- alert:
316
- </span>
317
- <span class="pf-v6-c-modal-box__title-text">Custom alert modal title</span>
318
- </h1>
345
+ <div class="pf-v6-c-modal-box__header-main">
346
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="custom-alert-title">
347
+ <span class="pf-v6-c-modal-box__title-icon">
348
+ <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
349
+ </span>
350
+ <span class="pf-v6-u-screen-reader">
351
+ Default
352
+ alert:
353
+ </span>
354
+ <span class="pf-v6-c-modal-box__title-text">Custom alert modal title</span>
355
+ </h1>
356
+ </div>
319
357
  </header>
320
358
  <div
321
359
  class="pf-v6-c-modal-box__body"
@@ -338,20 +376,24 @@ cssPrefix: pf-v6-c-modal-box
338
376
  >
339
377
  <div class="pf-v6-c-modal-box__close">
340
378
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
341
- <i class="fas fa-times" aria-hidden="true"></i>
379
+ <span class="pf-v6-c-button__icon">
380
+ <i class="fas fa-times" aria-hidden="true"></i>
381
+ </span>
342
382
  </button>
343
383
  </div>
344
384
  <header class="pf-v6-c-modal-box__header">
345
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="info-alert-title">
346
- <span class="pf-v6-c-modal-box__title-icon">
347
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
348
- </span>
349
- <span class="pf-v6-u-screen-reader">
350
- Info
351
- alert:
352
- </span>
353
- <span class="pf-v6-c-modal-box__title-text">Info alert modal title</span>
354
- </h1>
385
+ <div class="pf-v6-c-modal-box__header-main">
386
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="info-alert-title">
387
+ <span class="pf-v6-c-modal-box__title-icon">
388
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
389
+ </span>
390
+ <span class="pf-v6-u-screen-reader">
391
+ Info
392
+ alert:
393
+ </span>
394
+ <span class="pf-v6-c-modal-box__title-text">Info alert modal title</span>
395
+ </h1>
396
+ </div>
355
397
  </header>
356
398
  <div
357
399
  class="pf-v6-c-modal-box__body"
@@ -374,20 +416,24 @@ cssPrefix: pf-v6-c-modal-box
374
416
  >
375
417
  <div class="pf-v6-c-modal-box__close">
376
418
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
377
- <i class="fas fa-times" aria-hidden="true"></i>
419
+ <span class="pf-v6-c-button__icon">
420
+ <i class="fas fa-times" aria-hidden="true"></i>
421
+ </span>
378
422
  </button>
379
423
  </div>
380
424
  <header class="pf-v6-c-modal-box__header">
381
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="success-alert-title">
382
- <span class="pf-v6-c-modal-box__title-icon">
383
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
384
- </span>
385
- <span class="pf-v6-u-screen-reader">
386
- Success
387
- alert:
388
- </span>
389
- <span class="pf-v6-c-modal-box__title-text">Success alert modal title</span>
390
- </h1>
425
+ <div class="pf-v6-c-modal-box__header-main">
426
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="success-alert-title">
427
+ <span class="pf-v6-c-modal-box__title-icon">
428
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
429
+ </span>
430
+ <span class="pf-v6-u-screen-reader">
431
+ Success
432
+ alert:
433
+ </span>
434
+ <span class="pf-v6-c-modal-box__title-text">Success alert modal title</span>
435
+ </h1>
436
+ </div>
391
437
  </header>
392
438
  <div
393
439
  class="pf-v6-c-modal-box__body"
@@ -410,20 +456,24 @@ cssPrefix: pf-v6-c-modal-box
410
456
  >
411
457
  <div class="pf-v6-c-modal-box__close">
412
458
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
413
- <i class="fas fa-times" aria-hidden="true"></i>
459
+ <span class="pf-v6-c-button__icon">
460
+ <i class="fas fa-times" aria-hidden="true"></i>
461
+ </span>
414
462
  </button>
415
463
  </div>
416
464
  <header class="pf-v6-c-modal-box__header">
417
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="warning-alert-title">
418
- <span class="pf-v6-c-modal-box__title-icon">
419
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
420
- </span>
421
- <span class="pf-v6-u-screen-reader">
422
- Warning
423
- alert:
424
- </span>
425
- <span class="pf-v6-c-modal-box__title-text">Warning alert modal title</span>
426
- </h1>
465
+ <div class="pf-v6-c-modal-box__header-main">
466
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="warning-alert-title">
467
+ <span class="pf-v6-c-modal-box__title-icon">
468
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
469
+ </span>
470
+ <span class="pf-v6-u-screen-reader">
471
+ Warning
472
+ alert:
473
+ </span>
474
+ <span class="pf-v6-c-modal-box__title-text">Warning alert modal title</span>
475
+ </h1>
476
+ </div>
427
477
  </header>
428
478
  <div
429
479
  class="pf-v6-c-modal-box__body"
@@ -446,20 +496,24 @@ cssPrefix: pf-v6-c-modal-box
446
496
  >
447
497
  <div class="pf-v6-c-modal-box__close">
448
498
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
449
- <i class="fas fa-times" aria-hidden="true"></i>
499
+ <span class="pf-v6-c-button__icon">
500
+ <i class="fas fa-times" aria-hidden="true"></i>
501
+ </span>
450
502
  </button>
451
503
  </div>
452
504
  <header class="pf-v6-c-modal-box__header">
453
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="danger-alert-title">
454
- <span class="pf-v6-c-modal-box__title-icon">
455
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
456
- </span>
457
- <span class="pf-v6-u-screen-reader">
458
- Danger
459
- alert:
460
- </span>
461
- <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
462
- </h1>
505
+ <div class="pf-v6-c-modal-box__header-main">
506
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="danger-alert-title">
507
+ <span class="pf-v6-c-modal-box__title-icon">
508
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
509
+ </span>
510
+ <span class="pf-v6-u-screen-reader">
511
+ Danger
512
+ alert:
513
+ </span>
514
+ <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
515
+ </h1>
516
+ </div>
463
517
  </header>
464
518
  <div
465
519
  class="pf-v6-c-modal-box__body"
@@ -474,7 +528,7 @@ cssPrefix: pf-v6-c-modal-box
474
528
 
475
529
  The status modifier classes can be applied directly to the modal title element, instead of the parent modal.
476
530
 
477
- ```html isFullscreen isBeta
531
+ ```html isFullscreen
478
532
  <div
479
533
  class="pf-v6-c-modal-box"
480
534
  role="dialog"
@@ -484,23 +538,27 @@ The status modifier classes can be applied directly to the modal title element,
484
538
  >
485
539
  <div class="pf-v6-c-modal-box__close">
486
540
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
487
- <i class="fas fa-times" aria-hidden="true"></i>
541
+ <span class="pf-v6-c-button__icon">
542
+ <i class="fas fa-times" aria-hidden="true"></i>
543
+ </span>
488
544
  </button>
489
545
  </div>
490
546
  <header class="pf-v6-c-modal-box__header">
491
- <h1
492
- class="pf-v6-c-modal-box__title pf-m-icon pf-m-danger"
493
- id="danger-alert-title-title"
494
- >
495
- <span class="pf-v6-c-modal-box__title-icon">
496
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
497
- </span>
498
- <span class="pf-v6-u-screen-reader">
499
- Danger
500
- alert:
501
- </span>
502
- <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
503
- </h1>
547
+ <div class="pf-v6-c-modal-box__header-main">
548
+ <h1
549
+ class="pf-v6-c-modal-box__title pf-m-icon pf-m-danger"
550
+ id="danger-alert-title-title"
551
+ >
552
+ <span class="pf-v6-c-modal-box__title-icon">
553
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
554
+ </span>
555
+ <span class="pf-v6-u-screen-reader">
556
+ Danger
557
+ alert:
558
+ </span>
559
+ <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
560
+ </h1>
561
+ </div>
504
562
  </header>
505
563
  <div
506
564
  class="pf-v6-c-modal-box__body"
@@ -539,7 +597,7 @@ A modal box is a generic rectangular container that can be used to build modals.
539
597
  | `.pf-v6-c-modal-box__close` | `<div>` | Creates a container for the modal box close button. **Required** if there is a close button. |
540
598
  | `.pf-v6-c-button.pf-m-plain` | `<button>` | Initiates a modal box close button. |
541
599
  | `.pf-v6-c-modal-box__header` | `<header>` | Initiates a modal box header. **Required** if using a `.pf-v6-c-modal-box__title`. |
542
- | `.pf-v6-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when `pf-v6-c-modal-box__header-help` is used. |
600
+ | `.pf-v6-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when using a modal header. |
543
601
  | `.pf-v6-c-modal-box__header-help` | `<div>` | Initiates the help button container in the modal box header actions. |
544
602
  | `.pf-v6-c-modal-box__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. **Required** if using a modal description. |
545
603
  | `.pf-v6-c-modal-box__title-icon` | `<span>` | Initiates a container for the modal box title icon. |