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

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/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  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. |