@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/demos/Alert/examples/Alert.md CHANGED
@@ -11,91 +11,99 @@ section: components
11
11
  <a
12
12
  class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-alert-basic-example"
14
- >Skip to content</a>
14
+ >
15
+ <span class="pf-v6-c-button__text">Skip to content</span>
16
+ </a>
15
17
  </div>
16
18
  <header class="pf-v6-c-masthead" id="alert-basic-example-masthead">
17
- <span class="pf-v6-c-masthead__toggle">
18
- <button
19
- class="pf-v6-c-button pf-m-plain"
20
- type="button"
21
- aria-label="Global navigation"
22
- >
23
- <i class="fas fa-bars" aria-hidden="true"></i>
24
- </button>
25
- </span>
26
19
  <div class="pf-v6-c-masthead__main">
27
- <a class="pf-v6-c-masthead__brand" href="#">
28
- <svg height="40px" viewBox="0 0 679 158">
29
- <title>PF-HorizontalLogo-Color</title>
30
- <defs>
31
- <linearGradient
32
- x1="68%"
33
- y1="2.25860997e-13%"
34
- x2="32%"
35
- y2="100%"
36
- id="linearGradient-alert-basic-example-masthead"
37
- >
38
- <stop stop-color="#2B9AF3" offset="0%" />
39
- <stop
40
- stop-color="#73BCF7"
41
- stop-opacity="0.502212631"
42
- offset="100%"
43
- />
44
- </linearGradient>
45
- </defs>
46
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
- <g
48
- transform="translate(206.000000, 45.750000)"
49
- fill="var(--pf-t--global--text--color--regular)"
50
- fill-rule="nonzero"
51
- >
52
- <path
53
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
54
- />
55
- <path
56
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
57
- />
58
- <path
59
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
60
- />
61
- <path
62
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
63
- />
64
- <path
65
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
66
- />
67
- <path
68
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
69
- />
70
- <path
71
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
72
- />
73
- <polygon
74
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
75
- />
76
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
- <path
78
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
79
- />
80
- </g>
81
- <g transform="translate(0.000000, 0.000000)">
82
- <path
83
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
84
- fill="#0066CC"
85
- />
86
- <path
87
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
- fill="url(#linearGradient-alert-basic-example-masthead)"
89
- />
90
- <path
91
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
92
- fill="url(#linearGradient-alert-basic-example-masthead)"
93
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
- />
20
+ <span class="pf-v6-c-masthead__toggle">
21
+ <button
22
+ class="pf-v6-c-button pf-m-plain"
23
+ type="button"
24
+ aria-label="Global navigation"
25
+ >
26
+ <span class="pf-v6-c-button__icon">
27
+ <i class="fas fa-bars" aria-hidden="true"></i>
28
+ </span>
29
+ </button>
30
+ </span>
31
+ <div class="pf-v6-c-masthead__brand">
32
+ <a class="pf-v6-c-masthead__logo" href="#">
33
+ <svg height="37px" viewBox="0 0 679 158">
34
+ <title>PF-HorizontalLogo-Color</title>
35
+ <defs>
36
+ <linearGradient
37
+ x1="68%"
38
+ y1="2.25860997e-13%"
39
+ x2="32%"
40
+ y2="100%"
41
+ id="linearGradient-alert-basic-example-masthead"
42
+ >
43
+ <stop stop-color="#2B9AF3" offset="0%" />
44
+ <stop
45
+ stop-color="#73BCF7"
46
+ stop-opacity="0.502212631"
47
+ offset="100%"
48
+ />
49
+ </linearGradient>
50
+ </defs>
51
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
52
+ <g
53
+ transform="translate(206.000000, 45.750000)"
54
+ fill="var(--pf-t--global--text--color--regular)"
55
+ fill-rule="nonzero"
56
+ >
57
+ <path
58
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
59
+ />
60
+ <path
61
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
62
+ />
63
+ <path
64
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
65
+ />
66
+ <path
67
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
68
+ />
69
+ <path
70
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
71
+ />
72
+ <path
73
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
74
+ />
75
+ <path
76
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
77
+ />
78
+ <polygon
79
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
80
+ />
81
+ <polygon
82
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
83
+ />
84
+ <path
85
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
86
+ />
87
+ </g>
88
+ <g transform="translate(0.000000, 0.000000)">
89
+ <path
90
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
91
+ fill="#0066CC"
92
+ />
93
+ <path
94
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
95
+ fill="url(#linearGradient-alert-basic-example-masthead)"
96
+ />
97
+ <path
98
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
99
+ fill="url(#linearGradient-alert-basic-example-masthead)"
100
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
101
+ />
102
+ </g>
95
103
  </g>
96
- </g>
97
- </svg>
98
- </a>
104
+ </svg>
105
+ </a>
106
+ </div>
99
107
  </div>
100
108
  <div class="pf-v6-c-masthead__content">
101
109
  <div
@@ -104,41 +112,11 @@ section: components
104
112
  >
105
113
  <div class="pf-v6-c-toolbar__content">
106
114
  <div class="pf-v6-c-toolbar__content-section">
107
- <div class="pf-v6-c-toolbar__item">
108
- <button
109
- class="pf-v6-c-menu-toggle"
110
- type="button"
111
- aria-expanded="false"
112
- >
113
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
114
- <span class="pf-v6-c-menu-toggle__controls">
115
- <span class="pf-v6-c-menu-toggle__toggle-icon">
116
- <i class="fas fa-caret-down" aria-hidden="true"></i>
117
- </span>
118
- </span>
119
- </button>
120
- </div>
121
-
122
- <div class="pf-v6-c-toolbar__item">
123
- <button
124
- class="pf-v6-c-menu-toggle"
125
- type="button"
126
- aria-expanded="false"
127
- >
128
- <span class="pf-v6-c-menu-toggle__text">Services</span>
129
- <span class="pf-v6-c-menu-toggle__controls">
130
- <span class="pf-v6-c-menu-toggle__toggle-icon">
131
- <i class="fas fa-caret-down" aria-hidden="true"></i>
132
- </span>
133
- </span>
134
- </button>
135
- </div>
136
-
137
115
  <div
138
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
116
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
139
117
  >
140
118
  <div
141
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
119
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
142
120
  >
143
121
  <div class="pf-v6-c-toolbar__item">
144
122
  <button
@@ -177,6 +155,7 @@ section: components
177
155
  </button>
178
156
  </div>
179
157
  </div>
158
+
180
159
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
181
160
  <button
182
161
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -204,114 +183,126 @@ section: components
204
183
  >
205
184
  <ul class="pf-v6-c-nav__list" role="list">
206
185
  <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
186
+ <a href="#" class="pf-v6-c-nav__link">
187
+ <span class="pf-v6-c-nav__link-text">System panel</span>
188
+ </a>
208
189
  </li>
209
190
  <li class="pf-v6-c-nav__item">
210
191
  <a
211
192
  href="#"
212
193
  class="pf-v6-c-nav__link pf-m-current"
213
194
  aria-current="page"
214
- >Policy</a>
195
+ >
196
+ <span class="pf-v6-c-nav__link-text">Policy</span>
197
+ </a>
215
198
  </li>
216
199
  <li class="pf-v6-c-nav__item">
217
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
200
+ <a href="#" class="pf-v6-c-nav__link">
201
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
202
+ </a>
218
203
  </li>
219
204
  <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
205
+ <a href="#" class="pf-v6-c-nav__link">
206
+ <span class="pf-v6-c-nav__link-text">Network services</span>
207
+ </a>
221
208
  </li>
222
209
  <li class="pf-v6-c-nav__item">
223
- <a href="#" class="pf-v6-c-nav__link">Server</a>
210
+ <a href="#" class="pf-v6-c-nav__link">
211
+ <span class="pf-v6-c-nav__link-text">Server</span>
212
+ </a>
224
213
  </li>
225
214
  </ul>
226
215
  </nav>
227
216
  </div>
228
217
  </div>
229
- <main
230
- class="pf-v6-c-page__main"
231
- tabindex="-1"
232
- id="main-content-alert-basic-example"
233
- >
234
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v6-c-page__main-body">
236
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v6-c-breadcrumb__list" role="list">
238
- <li class="pf-v6-c-breadcrumb__item">
239
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
- </li>
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <span class="pf-v6-c-breadcrumb__item-divider">
243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
- </span>
218
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
219
+ <main
220
+ class="pf-v6-c-page__main"
221
+ tabindex="-1"
222
+ id="main-content-alert-basic-example"
223
+ >
224
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
225
+ <div class="pf-v6-c-page__main-body">
226
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
227
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
228
+ <li class="pf-v6-c-breadcrumb__item">
229
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
230
+ </li>
231
+ <li class="pf-v6-c-breadcrumb__item">
232
+ <span class="pf-v6-c-breadcrumb__item-divider">
233
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
234
+ </span>
245
235
 
246
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
- </li>
248
- <li class="pf-v6-c-breadcrumb__item">
249
- <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
- </span>
236
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
237
+ </li>
238
+ <li class="pf-v6-c-breadcrumb__item">
239
+ <span class="pf-v6-c-breadcrumb__item-divider">
240
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
241
+ </span>
252
242
 
253
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
- </li>
255
- <li class="pf-v6-c-breadcrumb__item">
256
- <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
- </span>
243
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
244
+ </li>
245
+ <li class="pf-v6-c-breadcrumb__item">
246
+ <span class="pf-v6-c-breadcrumb__item-divider">
247
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
248
+ </span>
259
249
 
260
- <a
261
- href="#"
262
- class="pf-v6-c-breadcrumb__link pf-m-current"
263
- aria-current="page"
264
- >Section landing</a>
265
- </li>
266
- </ol>
267
- </nav>
268
- </div>
269
- </section>
270
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v6-c-page__main-body">
272
- <div class="pf-v6-c-content">
273
- <h1>Main title</h1>
274
- <p>This is a full page demo.</p>
250
+ <a
251
+ href="#"
252
+ class="pf-v6-c-breadcrumb__link pf-m-current"
253
+ aria-current="page"
254
+ >Section landing</a>
255
+ </li>
256
+ </ol>
257
+ </nav>
275
258
  </div>
276
- </div>
277
- </section>
278
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
279
- <div class="pf-v6-c-page__main-body">
280
- <div class="pf-v6-l-gallery pf-m-gutter">
281
- <div class="pf-v6-c-card">
282
- <div class="pf-v6-c-card__body">This is a card</div>
283
- </div>
284
- <div class="pf-v6-c-card">
285
- <div class="pf-v6-c-card__body">This is a card</div>
286
- </div>
287
- <div class="pf-v6-c-card">
288
- <div class="pf-v6-c-card__body">This is a card</div>
289
- </div>
290
- <div class="pf-v6-c-card">
291
- <div class="pf-v6-c-card__body">This is a card</div>
292
- </div>
293
- <div class="pf-v6-c-card">
294
- <div class="pf-v6-c-card__body">This is a card</div>
295
- </div>
296
- <div class="pf-v6-c-card">
297
- <div class="pf-v6-c-card__body">This is a card</div>
259
+ </section>
260
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
261
+ <div class="pf-v6-c-page__main-body">
262
+ <div class="pf-v6-c-content">
263
+ <h1>Main title</h1>
264
+ <p>This is a full page demo.</p>
298
265
  </div>
299
- <div class="pf-v6-c-card">
300
- <div class="pf-v6-c-card__body">This is a card</div>
301
- </div>
302
- <div class="pf-v6-c-card">
303
- <div class="pf-v6-c-card__body">This is a card</div>
304
- </div>
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
266
+ </div>
267
+ </section>
268
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
269
+ <div class="pf-v6-c-page__main-body">
270
+ <div class="pf-v6-l-gallery pf-m-gutter">
271
+ <div class="pf-v6-c-card">
272
+ <div class="pf-v6-c-card__body">This is a card</div>
273
+ </div>
274
+ <div class="pf-v6-c-card">
275
+ <div class="pf-v6-c-card__body">This is a card</div>
276
+ </div>
277
+ <div class="pf-v6-c-card">
278
+ <div class="pf-v6-c-card__body">This is a card</div>
279
+ </div>
280
+ <div class="pf-v6-c-card">
281
+ <div class="pf-v6-c-card__body">This is a card</div>
282
+ </div>
283
+ <div class="pf-v6-c-card">
284
+ <div class="pf-v6-c-card__body">This is a card</div>
285
+ </div>
286
+ <div class="pf-v6-c-card">
287
+ <div class="pf-v6-c-card__body">This is a card</div>
288
+ </div>
289
+ <div class="pf-v6-c-card">
290
+ <div class="pf-v6-c-card__body">This is a card</div>
291
+ </div>
292
+ <div class="pf-v6-c-card">
293
+ <div class="pf-v6-c-card__body">This is a card</div>
294
+ </div>
295
+ <div class="pf-v6-c-card">
296
+ <div class="pf-v6-c-card__body">This is a card</div>
297
+ </div>
298
+ <div class="pf-v6-c-card">
299
+ <div class="pf-v6-c-card__body">This is a card</div>
300
+ </div>
310
301
  </div>
311
302
  </div>
312
- </div>
313
- </section>
314
- </main>
303
+ </section>
304
+ </main>
305
+ </div>
315
306
  </div>
316
307
  <ul class="pf-v6-c-alert-group pf-m-toast" role="list">
317
308
  <li class="pf-v6-c-alert-group__item">
@@ -329,7 +320,9 @@ section: components
329
320
  type="button"
330
321
  aria-label="Close success alert: Newest notification"
331
322
  >
332
- <i class="fas fa-times" aria-hidden="true"></i>
323
+ <span class="pf-v6-c-button__icon">
324
+ <i class="fas fa-times" aria-hidden="true"></i>
325
+ </span>
333
326
  </button>
334
327
  </div>
335
328
  <div class="pf-v6-c-alert__description">
@@ -352,7 +345,9 @@ section: components
352
345
  type="button"
353
346
  aria-label="Close warning alert: second newest notification"
354
347
  >
355
- <i class="fas fa-times" aria-hidden="true"></i>
348
+ <span class="pf-v6-c-button__icon">
349
+ <i class="fas fa-times" aria-hidden="true"></i>
350
+ </span>
356
351
  </button>
357
352
  </div>
358
353
  <div class="pf-v6-c-alert__description">
@@ -375,7 +370,9 @@ section: components
375
370
  type="button"
376
371
  aria-label="Close danger alert: Last notification"
377
372
  >
378
- <i class="fas fa-times" aria-hidden="true"></i>
373
+ <span class="pf-v6-c-button__icon">
374
+ <i class="fas fa-times" aria-hidden="true"></i>
375
+ </span>
379
376
  </button>
380
377
  </div>
381
378
  <div class="pf-v6-c-alert__description">
@@ -395,91 +392,99 @@ section: components
395
392
  <a
396
393
  class="pf-v6-c-button pf-m-primary"
397
394
  href="#main-content-alert-horizontal-example"
398
- >Skip to content</a>
395
+ >
396
+ <span class="pf-v6-c-button__text">Skip to content</span>
397
+ </a>
399
398
  </div>
400
399
  <header class="pf-v6-c-masthead" id="alert-horizontal-example-masthead">
401
- <span class="pf-v6-c-masthead__toggle">
402
- <button
403
- class="pf-v6-c-button pf-m-plain"
404
- type="button"
405
- aria-label="Global navigation"
406
- >
407
- <i class="fas fa-bars" aria-hidden="true"></i>
408
- </button>
409
- </span>
410
400
  <div class="pf-v6-c-masthead__main">
411
- <a class="pf-v6-c-masthead__brand" href="#">
412
- <svg height="40px" viewBox="0 0 679 158">
413
- <title>PF-HorizontalLogo-Color</title>
414
- <defs>
415
- <linearGradient
416
- x1="68%"
417
- y1="2.25860997e-13%"
418
- x2="32%"
419
- y2="100%"
420
- id="linearGradient-alert-horizontal-example-masthead"
421
- >
422
- <stop stop-color="#2B9AF3" offset="0%" />
423
- <stop
424
- stop-color="#73BCF7"
425
- stop-opacity="0.502212631"
426
- offset="100%"
427
- />
428
- </linearGradient>
429
- </defs>
430
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
431
- <g
432
- transform="translate(206.000000, 45.750000)"
433
- fill="var(--pf-t--global--text--color--regular)"
434
- fill-rule="nonzero"
435
- >
436
- <path
437
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
438
- />
439
- <path
440
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
441
- />
442
- <path
443
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
444
- />
445
- <path
446
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
447
- />
448
- <path
449
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
450
- />
451
- <path
452
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
453
- />
454
- <path
455
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
456
- />
457
- <polygon
458
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
459
- />
460
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
461
- <path
462
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
463
- />
464
- </g>
465
- <g transform="translate(0.000000, 0.000000)">
466
- <path
467
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
468
- fill="#0066CC"
469
- />
470
- <path
471
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
472
- fill="url(#linearGradient-alert-horizontal-example-masthead)"
473
- />
474
- <path
475
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
476
- fill="url(#linearGradient-alert-horizontal-example-masthead)"
477
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
478
- />
401
+ <span class="pf-v6-c-masthead__toggle">
402
+ <button
403
+ class="pf-v6-c-button pf-m-plain"
404
+ type="button"
405
+ aria-label="Global navigation"
406
+ >
407
+ <span class="pf-v6-c-button__icon">
408
+ <i class="fas fa-bars" aria-hidden="true"></i>
409
+ </span>
410
+ </button>
411
+ </span>
412
+ <div class="pf-v6-c-masthead__brand">
413
+ <a class="pf-v6-c-masthead__logo" href="#">
414
+ <svg height="37px" viewBox="0 0 679 158">
415
+ <title>PF-HorizontalLogo-Color</title>
416
+ <defs>
417
+ <linearGradient
418
+ x1="68%"
419
+ y1="2.25860997e-13%"
420
+ x2="32%"
421
+ y2="100%"
422
+ id="linearGradient-alert-horizontal-example-masthead"
423
+ >
424
+ <stop stop-color="#2B9AF3" offset="0%" />
425
+ <stop
426
+ stop-color="#73BCF7"
427
+ stop-opacity="0.502212631"
428
+ offset="100%"
429
+ />
430
+ </linearGradient>
431
+ </defs>
432
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
433
+ <g
434
+ transform="translate(206.000000, 45.750000)"
435
+ fill="var(--pf-t--global--text--color--regular)"
436
+ fill-rule="nonzero"
437
+ >
438
+ <path
439
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
440
+ />
441
+ <path
442
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
443
+ />
444
+ <path
445
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
446
+ />
447
+ <path
448
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
449
+ />
450
+ <path
451
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
452
+ />
453
+ <path
454
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
455
+ />
456
+ <path
457
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
458
+ />
459
+ <polygon
460
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
461
+ />
462
+ <polygon
463
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
464
+ />
465
+ <path
466
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
467
+ />
468
+ </g>
469
+ <g transform="translate(0.000000, 0.000000)">
470
+ <path
471
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
472
+ fill="#0066CC"
473
+ />
474
+ <path
475
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
476
+ fill="url(#linearGradient-alert-horizontal-example-masthead)"
477
+ />
478
+ <path
479
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
480
+ fill="url(#linearGradient-alert-horizontal-example-masthead)"
481
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
482
+ />
483
+ </g>
479
484
  </g>
480
- </g>
481
- </svg>
482
- </a>
485
+ </svg>
486
+ </a>
487
+ </div>
483
488
  </div>
484
489
  <div class="pf-v6-c-masthead__content">
485
490
  <div
@@ -488,41 +493,11 @@ section: components
488
493
  >
489
494
  <div class="pf-v6-c-toolbar__content">
490
495
  <div class="pf-v6-c-toolbar__content-section">
491
- <div class="pf-v6-c-toolbar__item">
492
- <button
493
- class="pf-v6-c-menu-toggle"
494
- type="button"
495
- aria-expanded="false"
496
- >
497
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
498
- <span class="pf-v6-c-menu-toggle__controls">
499
- <span class="pf-v6-c-menu-toggle__toggle-icon">
500
- <i class="fas fa-caret-down" aria-hidden="true"></i>
501
- </span>
502
- </span>
503
- </button>
504
- </div>
505
-
506
- <div class="pf-v6-c-toolbar__item">
507
- <button
508
- class="pf-v6-c-menu-toggle"
509
- type="button"
510
- aria-expanded="false"
511
- >
512
- <span class="pf-v6-c-menu-toggle__text">Services</span>
513
- <span class="pf-v6-c-menu-toggle__controls">
514
- <span class="pf-v6-c-menu-toggle__toggle-icon">
515
- <i class="fas fa-caret-down" aria-hidden="true"></i>
516
- </span>
517
- </span>
518
- </button>
519
- </div>
520
-
521
496
  <div
522
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
497
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
523
498
  >
524
499
  <div
525
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
500
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
526
501
  >
527
502
  <div class="pf-v6-c-toolbar__item">
528
503
  <button
@@ -561,6 +536,7 @@ section: components
561
536
  </button>
562
537
  </div>
563
538
  </div>
539
+
564
540
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
565
541
  <button
566
542
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -588,278 +564,303 @@ section: components
588
564
  >
589
565
  <ul class="pf-v6-c-nav__list" role="list">
590
566
  <li class="pf-v6-c-nav__item">
591
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
567
+ <a href="#" class="pf-v6-c-nav__link">
568
+ <span class="pf-v6-c-nav__link-text">System panel</span>
569
+ </a>
592
570
  </li>
593
571
  <li class="pf-v6-c-nav__item">
594
572
  <a
595
573
  href="#"
596
574
  class="pf-v6-c-nav__link pf-m-current"
597
575
  aria-current="page"
598
- >Policy</a>
576
+ >
577
+ <span class="pf-v6-c-nav__link-text">Policy</span>
578
+ </a>
599
579
  </li>
600
580
  <li class="pf-v6-c-nav__item">
601
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
581
+ <a href="#" class="pf-v6-c-nav__link">
582
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
583
+ </a>
602
584
  </li>
603
585
  <li class="pf-v6-c-nav__item">
604
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
586
+ <a href="#" class="pf-v6-c-nav__link">
587
+ <span class="pf-v6-c-nav__link-text">Network services</span>
588
+ </a>
605
589
  </li>
606
590
  <li class="pf-v6-c-nav__item">
607
- <a href="#" class="pf-v6-c-nav__link">Server</a>
591
+ <a href="#" class="pf-v6-c-nav__link">
592
+ <span class="pf-v6-c-nav__link-text">Server</span>
593
+ </a>
608
594
  </li>
609
595
  </ul>
610
596
  </nav>
611
597
  </div>
612
598
  </div>
613
- <main
614
- class="pf-v6-c-page__main"
615
- tabindex="-1"
616
- id="main-content-alert-horizontal-example"
617
- >
618
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
619
- <div class="pf-v6-c-page__main-body">
620
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
621
- <ol class="pf-v6-c-breadcrumb__list" role="list">
622
- <li class="pf-v6-c-breadcrumb__item">
623
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
624
- </li>
625
- <li class="pf-v6-c-breadcrumb__item">
626
- <span class="pf-v6-c-breadcrumb__item-divider">
627
- <i class="fas fa-angle-right" aria-hidden="true"></i>
628
- </span>
599
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
600
+ <main
601
+ class="pf-v6-c-page__main"
602
+ tabindex="-1"
603
+ id="main-content-alert-horizontal-example"
604
+ >
605
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
606
+ <div class="pf-v6-c-page__main-body">
607
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
608
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
609
+ <li class="pf-v6-c-breadcrumb__item">
610
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
611
+ </li>
612
+ <li class="pf-v6-c-breadcrumb__item">
613
+ <span class="pf-v6-c-breadcrumb__item-divider">
614
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
615
+ </span>
629
616
 
630
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
631
- </li>
632
- <li class="pf-v6-c-breadcrumb__item">
633
- <span class="pf-v6-c-breadcrumb__item-divider">
634
- <i class="fas fa-angle-right" aria-hidden="true"></i>
635
- </span>
617
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
618
+ </li>
619
+ <li class="pf-v6-c-breadcrumb__item">
620
+ <span class="pf-v6-c-breadcrumb__item-divider">
621
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
622
+ </span>
636
623
 
637
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
638
- </li>
639
- <li class="pf-v6-c-breadcrumb__item">
640
- <span class="pf-v6-c-breadcrumb__item-divider">
641
- <i class="fas fa-angle-right" aria-hidden="true"></i>
642
- </span>
624
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
625
+ </li>
626
+ <li class="pf-v6-c-breadcrumb__item">
627
+ <span class="pf-v6-c-breadcrumb__item-divider">
628
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
629
+ </span>
643
630
 
644
- <a
645
- href="#"
646
- class="pf-v6-c-breadcrumb__link pf-m-current"
647
- aria-current="page"
648
- >Section landing</a>
649
- </li>
650
- </ol>
651
- </nav>
652
- </div>
653
- </section>
654
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
655
- <div class="pf-v6-c-page__main-body">
656
- <div class="pf-v6-c-content">
657
- <h1>Main title</h1>
658
- <p>This is a full page demo.</p>
631
+ <a
632
+ href="#"
633
+ class="pf-v6-c-breadcrumb__link pf-m-current"
634
+ aria-current="page"
635
+ >Section landing</a>
636
+ </li>
637
+ </ol>
638
+ </nav>
659
639
  </div>
660
- </div>
661
- </section>
662
- <section class="pf-v6-c-page__main-section pf-m-light">
663
- <form class="pf-v6-c-form pf-m-limit-width pf-m-horizontal" novalidate>
664
- <div class="pf-v6-c-form__alert">
665
- <div
666
- class="pf-v6-c-alert pf-m-danger pf-m-inline"
667
- aria-label="Inline danger alert"
668
- >
669
- <div class="pf-v6-c-alert__icon">
670
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
671
- </div>
672
- <p class="pf-v6-c-alert__title">
673
- <span class="pf-v6-screen-reader">Danger alert:</span>
674
- Fill out all required fields before continuing.
675
- </p>
640
+ </section>
641
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
642
+ <div class="pf-v6-c-page__main-body">
643
+ <div class="pf-v6-c-content">
644
+ <h1>Main title</h1>
645
+ <p>This is a full page demo.</p>
676
646
  </div>
677
647
  </div>
678
- <div class="pf-v6-c-form__group">
679
- <div class="pf-v6-c-form__group-label"><label
680
- class="pf-v6-c-form__label"
681
- for="alert-horizontal-example-form-name"
682
- >
683
- <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span
684
- class="pf-v6-c-form__label-required"
685
- aria-hidden="true"
686
- >&#42;</span></label>
687
- </div>
688
- <div class="pf-v6-c-form__group-control">
689
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
690
- <input
691
- required
692
- type="text"
693
- id="alert-horizontal-example-form-name"
694
- name="alert-horizontal-example-form-name"
695
- aria-invalid="true"
696
- aria-describedby="alert-horizontal-example-form-name-helper"
697
- />
698
- <span class="pf-v6-c-form-control__utilities">
699
- <span class="pf-v6-c-form-control__icon pf-m-status">
700
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
701
- </span>
702
- </span>
703
- </span>
704
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
705
- <div class="pf-v6-c-helper-text">
706
- <div
707
- class="pf-v6-c-helper-text__item pf-m-error"
708
- id="alert-horizontal-example-form-name-helper"
648
+ </section>
649
+ <section class="pf-v6-c-page__main-section">
650
+ <div class="pf-v6-c-page__main-body">
651
+ <form
652
+ class="pf-v6-c-form pf-m-limit-width pf-m-horizontal"
653
+ novalidate
654
+ >
655
+ <div class="pf-v6-c-form__alert">
656
+ <div
657
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
658
+ aria-label="Inline danger alert"
659
+ >
660
+ <div class="pf-v6-c-alert__icon">
661
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
662
+ </div>
663
+ <p class="pf-v6-c-alert__title">
664
+ <span class="pf-v6-screen-reader">Danger alert:</span>
665
+ Fill out all required fields before continuing.
666
+ </p>
667
+ </div>
668
+ </div>
669
+ <div class="pf-v6-c-form__group">
670
+ <div class="pf-v6-c-form__group-label"><label
671
+ class="pf-v6-c-form__label"
672
+ for="alert-horizontal-example-form-name"
709
673
  >
710
- <span class="pf-v6-c-helper-text__item-icon">
711
- <i
712
- class="fas fa-fw fa-exclamation-circle"
713
- aria-hidden="true"
714
- ></i>
674
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span
675
+ class="pf-v6-c-form__label-required"
676
+ aria-hidden="true"
677
+ >&#42;</span></label>
678
+ </div>
679
+ <div class="pf-v6-c-form__group-control">
680
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
681
+ <input
682
+ required
683
+ type="text"
684
+ id="alert-horizontal-example-form-name"
685
+ name="alert-horizontal-example-form-name"
686
+ aria-invalid="true"
687
+ aria-describedby="alert-horizontal-example-form-name-helper"
688
+ />
689
+ <span class="pf-v6-c-form-control__utilities">
690
+ <span class="pf-v6-c-form-control__icon pf-m-status">
691
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
692
+ </span>
715
693
  </span>
716
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
694
+ </span>
695
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
696
+ <div class="pf-v6-c-helper-text">
697
+ <div
698
+ class="pf-v6-c-helper-text__item pf-m-error"
699
+ id="alert-horizontal-example-form-name-helper"
700
+ >
701
+ <span class="pf-v6-c-helper-text__item-icon">
702
+ <i
703
+ class="fas fa-fw fa-exclamation-circle"
704
+ aria-hidden="true"
705
+ ></i>
706
+ </span>
707
+ <span
708
+ class="pf-v6-c-helper-text__item-text"
709
+ >Required field</span>
710
+ </div>
711
+ </div>
717
712
  </div>
718
713
  </div>
719
714
  </div>
720
- </div>
721
- </div>
722
- <div class="pf-v6-c-form__group">
723
- <div class="pf-v6-c-form__group-label"><label
724
- class="pf-v6-c-form__label"
725
- for="alert-horizontal-example-form-email"
726
- >
727
- <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
728
- class="pf-v6-c-form__label-required"
729
- aria-hidden="true"
730
- >&#42;</span></label>
731
- </div>
732
- <div class="pf-v6-c-form__group-control">
733
- <span class="pf-v6-c-form-control pf-m-required">
734
- <input
735
- required
736
- type="text"
737
- value="patternfly@patternfly.com"
738
- id="alert-horizontal-example-form-email"
739
- name="alert-horizontal-example-form-email"
740
- />
741
- </span>
742
- </div>
743
- </div>
744
- <div class="pf-v6-c-form__group">
745
- <div class="pf-v6-c-form__group-label"><label
746
- class="pf-v6-c-form__label"
747
- for="alert-horizontal-example-form-phone"
748
- >
749
- <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span
750
- class="pf-v6-c-form__label-required"
751
- aria-hidden="true"
752
- >&#42;</span></label>
753
- </div>
754
- <div class="pf-v6-c-form__group-control">
755
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
756
- <input
757
- required
758
- type="text"
759
- id="alert-horizontal-example-form-phone"
760
- name="alert-horizontal-example-form-phone"
761
- aria-invalid="true"
762
- aria-describedby="alert-horizontal-example-form-phone-helper"
763
- />
764
- <span class="pf-v6-c-form-control__utilities">
765
- <span class="pf-v6-c-form-control__icon pf-m-status">
766
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
715
+ <div class="pf-v6-c-form__group">
716
+ <div class="pf-v6-c-form__group-label"><label
717
+ class="pf-v6-c-form__label"
718
+ for="alert-horizontal-example-form-email"
719
+ >
720
+ <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
721
+ class="pf-v6-c-form__label-required"
722
+ aria-hidden="true"
723
+ >&#42;</span></label>
724
+ </div>
725
+ <div class="pf-v6-c-form__group-control">
726
+ <span class="pf-v6-c-form-control pf-m-required">
727
+ <input
728
+ required
729
+ type="text"
730
+ value="patternfly@patternfly.com"
731
+ id="alert-horizontal-example-form-email"
732
+ name="alert-horizontal-example-form-email"
733
+ />
767
734
  </span>
768
- </span>
769
- </span>
770
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
771
- <div class="pf-v6-c-helper-text">
772
- <div
773
- class="pf-v6-c-helper-text__item pf-m-error"
774
- id="alert-horizontal-example-form-phone-helper"
735
+ </div>
736
+ </div>
737
+ <div class="pf-v6-c-form__group">
738
+ <div class="pf-v6-c-form__group-label"><label
739
+ class="pf-v6-c-form__label"
740
+ for="alert-horizontal-example-form-phone"
775
741
  >
776
- <span class="pf-v6-c-helper-text__item-icon">
777
- <i
778
- class="fas fa-fw fa-exclamation-circle"
779
- aria-hidden="true"
780
- ></i>
742
+ <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span
743
+ class="pf-v6-c-form__label-required"
744
+ aria-hidden="true"
745
+ >&#42;</span></label>
746
+ </div>
747
+ <div class="pf-v6-c-form__group-control">
748
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
749
+ <input
750
+ required
751
+ type="text"
752
+ id="alert-horizontal-example-form-phone"
753
+ name="alert-horizontal-example-form-phone"
754
+ aria-invalid="true"
755
+ aria-describedby="alert-horizontal-example-form-phone-helper"
756
+ />
757
+ <span class="pf-v6-c-form-control__utilities">
758
+ <span class="pf-v6-c-form-control__icon pf-m-status">
759
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
760
+ </span>
781
761
  </span>
782
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
762
+ </span>
763
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
764
+ <div class="pf-v6-c-helper-text">
765
+ <div
766
+ class="pf-v6-c-helper-text__item pf-m-error"
767
+ id="alert-horizontal-example-form-phone-helper"
768
+ >
769
+ <span class="pf-v6-c-helper-text__item-icon">
770
+ <i
771
+ class="fas fa-fw fa-exclamation-circle"
772
+ aria-hidden="true"
773
+ ></i>
774
+ </span>
775
+ <span
776
+ class="pf-v6-c-helper-text__item-text"
777
+ >Required field</span>
778
+ </div>
779
+ </div>
783
780
  </div>
784
781
  </div>
785
782
  </div>
786
- </div>
787
- </div>
788
- <div
789
- class="pf-v6-c-form__group"
790
- role="group"
791
- aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
792
- >
793
- <div
794
- class="pf-v6-c-form__group-label pf-m-no-padding-top"
795
- id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
796
- ><span
797
- class="pf-v6-c-form__label"
798
- for="alert-horizontal-example-form-check-group"
783
+ <div
784
+ class="pf-v6-c-form__group"
785
+ role="group"
786
+ aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
799
787
  >
800
- <span class="pf-v6-c-form__label-text">Your experience</span>&nbsp;<span
801
- class="pf-v6-c-form__label-required"
802
- aria-hidden="true"
803
- >&#42;</span></span>
804
- </div>
805
- <div class="pf-v6-c-form__group-control">
806
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
807
- <div class="pf-v6-c-helper-text">
808
- <div
809
- class="pf-v6-c-helper-text__item pf-m-error"
810
- id="alert-horizontal-example-form-check-group-helper"
788
+ <div
789
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
790
+ id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
791
+ ><span
792
+ class="pf-v6-c-form__label"
793
+ for="alert-horizontal-example-form-check-group"
811
794
  >
812
- <span class="pf-v6-c-helper-text__item-icon">
813
- <i
814
- class="fas fa-fw fa-exclamation-circle"
815
- aria-hidden="true"
816
- ></i>
817
- </span>
818
- <span
819
- class="pf-v6-c-helper-text__item-text"
820
- >This is a required field</span>
821
- </div>
795
+ <span class="pf-v6-c-form__label-text">Your experience</span>&nbsp;<span
796
+ class="pf-v6-c-form__label-required"
797
+ aria-hidden="true"
798
+ >&#42;</span></span>
822
799
  </div>
823
- </div>
824
- <div class="pf-v6-c-check">
825
- <input
826
- class="pf-v6-c-check__input"
827
- type="checkbox"
828
- id="alt-checkbox1"
829
- name="alt-checkbox1"
830
- />
800
+ <div class="pf-v6-c-form__group-control">
801
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
802
+ <div class="pf-v6-c-helper-text">
803
+ <div
804
+ class="pf-v6-c-helper-text__item pf-m-error"
805
+ id="alert-horizontal-example-form-check-group-helper"
806
+ >
807
+ <span class="pf-v6-c-helper-text__item-icon">
808
+ <i
809
+ class="fas fa-fw fa-exclamation-circle"
810
+ aria-hidden="true"
811
+ ></i>
812
+ </span>
813
+ <span
814
+ class="pf-v6-c-helper-text__item-text"
815
+ >This is a required field</span>
816
+ </div>
817
+ </div>
818
+ </div>
819
+ <div class="pf-v6-c-check">
820
+ <input
821
+ class="pf-v6-c-check__input"
822
+ type="checkbox"
823
+ id="alt-checkbox1"
824
+ name="alt-checkbox1"
825
+ />
831
826
 
832
- <label
833
- class="pf-v6-c-check__label"
834
- for="alt-checkbox1"
835
- >Follow up via email.</label>
836
- </div>
837
- <div class="pf-v6-c-check">
838
- <input
839
- class="pf-v6-c-check__input"
840
- type="checkbox"
841
- id="alt-checkbox2"
842
- name="alt-checkbox2"
843
- />
827
+ <label
828
+ class="pf-v6-c-check__label"
829
+ for="alt-checkbox1"
830
+ >Follow up via email.</label>
831
+ </div>
832
+ <div class="pf-v6-c-check">
833
+ <input
834
+ class="pf-v6-c-check__input"
835
+ type="checkbox"
836
+ id="alt-checkbox2"
837
+ name="alt-checkbox2"
838
+ />
844
839
 
845
- <label
846
- class="pf-v6-c-check__label"
847
- for="alt-checkbox2"
848
- >Remember my password for 30 days.</label>
840
+ <label
841
+ class="pf-v6-c-check__label"
842
+ for="alt-checkbox2"
843
+ >Remember my password for 30 days.</label>
844
+ </div>
845
+ </div>
849
846
  </div>
850
- </div>
851
- </div>
852
- <div class="pf-v6-c-form__group pf-m-action">
853
- <div class="pf-v6-c-form__group-control">
854
- <div class="pf-v6-c-form__actions">
855
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
856
- <button class="pf-v6-c-button pf-m-secondary" type="reset">Cancel</button>
847
+ <div class="pf-v6-c-form__group pf-m-action">
848
+ <div class="pf-v6-c-form__group-control">
849
+ <div class="pf-v6-c-form__actions">
850
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
851
+ <span class="pf-v6-c-button__text">Submit</span>
852
+ </button>
853
+ <button class="pf-v6-c-button pf-m-secondary" type="reset">
854
+ <span class="pf-v6-c-button__text">Cancel</span>
855
+ </button>
856
+ </div>
857
+ </div>
857
858
  </div>
858
- </div>
859
+ </form>
859
860
  </div>
860
- </form>
861
- </section>
862
- </main>
861
+ </section>
862
+ </main>
863
+ </div>
863
864
  </div>
864
865
 
865
866
  ```
@@ -872,91 +873,99 @@ section: components
872
873
  <a
873
874
  class="pf-v6-c-button pf-m-primary"
874
875
  href="#main-content-alert-stacked-example"
875
- >Skip to content</a>
876
+ >
877
+ <span class="pf-v6-c-button__text">Skip to content</span>
878
+ </a>
876
879
  </div>
877
880
  <header class="pf-v6-c-masthead" id="alert-stacked-example-masthead">
878
- <span class="pf-v6-c-masthead__toggle">
879
- <button
880
- class="pf-v6-c-button pf-m-plain"
881
- type="button"
882
- aria-label="Global navigation"
883
- >
884
- <i class="fas fa-bars" aria-hidden="true"></i>
885
- </button>
886
- </span>
887
881
  <div class="pf-v6-c-masthead__main">
888
- <a class="pf-v6-c-masthead__brand" href="#">
889
- <svg height="40px" viewBox="0 0 679 158">
890
- <title>PF-HorizontalLogo-Color</title>
891
- <defs>
892
- <linearGradient
893
- x1="68%"
894
- y1="2.25860997e-13%"
895
- x2="32%"
896
- y2="100%"
897
- id="linearGradient-alert-stacked-example-masthead"
898
- >
899
- <stop stop-color="#2B9AF3" offset="0%" />
900
- <stop
901
- stop-color="#73BCF7"
902
- stop-opacity="0.502212631"
903
- offset="100%"
904
- />
905
- </linearGradient>
906
- </defs>
907
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
908
- <g
909
- transform="translate(206.000000, 45.750000)"
910
- fill="var(--pf-t--global--text--color--regular)"
911
- fill-rule="nonzero"
912
- >
913
- <path
914
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
915
- />
916
- <path
917
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
918
- />
919
- <path
920
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
921
- />
922
- <path
923
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
924
- />
925
- <path
926
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
927
- />
928
- <path
929
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
930
- />
931
- <path
932
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
933
- />
934
- <polygon
935
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
936
- />
937
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
938
- <path
939
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
940
- />
941
- </g>
942
- <g transform="translate(0.000000, 0.000000)">
943
- <path
944
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
945
- fill="#0066CC"
946
- />
947
- <path
948
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
949
- fill="url(#linearGradient-alert-stacked-example-masthead)"
950
- />
951
- <path
952
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
953
- fill="url(#linearGradient-alert-stacked-example-masthead)"
954
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
955
- />
882
+ <span class="pf-v6-c-masthead__toggle">
883
+ <button
884
+ class="pf-v6-c-button pf-m-plain"
885
+ type="button"
886
+ aria-label="Global navigation"
887
+ >
888
+ <span class="pf-v6-c-button__icon">
889
+ <i class="fas fa-bars" aria-hidden="true"></i>
890
+ </span>
891
+ </button>
892
+ </span>
893
+ <div class="pf-v6-c-masthead__brand">
894
+ <a class="pf-v6-c-masthead__logo" href="#">
895
+ <svg height="37px" viewBox="0 0 679 158">
896
+ <title>PF-HorizontalLogo-Color</title>
897
+ <defs>
898
+ <linearGradient
899
+ x1="68%"
900
+ y1="2.25860997e-13%"
901
+ x2="32%"
902
+ y2="100%"
903
+ id="linearGradient-alert-stacked-example-masthead"
904
+ >
905
+ <stop stop-color="#2B9AF3" offset="0%" />
906
+ <stop
907
+ stop-color="#73BCF7"
908
+ stop-opacity="0.502212631"
909
+ offset="100%"
910
+ />
911
+ </linearGradient>
912
+ </defs>
913
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
914
+ <g
915
+ transform="translate(206.000000, 45.750000)"
916
+ fill="var(--pf-t--global--text--color--regular)"
917
+ fill-rule="nonzero"
918
+ >
919
+ <path
920
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
921
+ />
922
+ <path
923
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
924
+ />
925
+ <path
926
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
927
+ />
928
+ <path
929
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
930
+ />
931
+ <path
932
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
933
+ />
934
+ <path
935
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
936
+ />
937
+ <path
938
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
939
+ />
940
+ <polygon
941
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
942
+ />
943
+ <polygon
944
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
945
+ />
946
+ <path
947
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
948
+ />
949
+ </g>
950
+ <g transform="translate(0.000000, 0.000000)">
951
+ <path
952
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
953
+ fill="#0066CC"
954
+ />
955
+ <path
956
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
957
+ fill="url(#linearGradient-alert-stacked-example-masthead)"
958
+ />
959
+ <path
960
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
961
+ fill="url(#linearGradient-alert-stacked-example-masthead)"
962
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
963
+ />
964
+ </g>
956
965
  </g>
957
- </g>
958
- </svg>
959
- </a>
966
+ </svg>
967
+ </a>
968
+ </div>
960
969
  </div>
961
970
  <div class="pf-v6-c-masthead__content">
962
971
  <div
@@ -965,41 +974,11 @@ section: components
965
974
  >
966
975
  <div class="pf-v6-c-toolbar__content">
967
976
  <div class="pf-v6-c-toolbar__content-section">
968
- <div class="pf-v6-c-toolbar__item">
969
- <button
970
- class="pf-v6-c-menu-toggle"
971
- type="button"
972
- aria-expanded="false"
973
- >
974
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
975
- <span class="pf-v6-c-menu-toggle__controls">
976
- <span class="pf-v6-c-menu-toggle__toggle-icon">
977
- <i class="fas fa-caret-down" aria-hidden="true"></i>
978
- </span>
979
- </span>
980
- </button>
981
- </div>
982
-
983
- <div class="pf-v6-c-toolbar__item">
984
- <button
985
- class="pf-v6-c-menu-toggle"
986
- type="button"
987
- aria-expanded="false"
988
- >
989
- <span class="pf-v6-c-menu-toggle__text">Services</span>
990
- <span class="pf-v6-c-menu-toggle__controls">
991
- <span class="pf-v6-c-menu-toggle__toggle-icon">
992
- <i class="fas fa-caret-down" aria-hidden="true"></i>
993
- </span>
994
- </span>
995
- </button>
996
- </div>
997
-
998
977
  <div
999
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
978
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
1000
979
  >
1001
980
  <div
1002
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
981
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1003
982
  >
1004
983
  <div class="pf-v6-c-toolbar__item">
1005
984
  <button
@@ -1038,6 +1017,7 @@ section: components
1038
1017
  </button>
1039
1018
  </div>
1040
1019
  </div>
1020
+
1041
1021
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1042
1022
  <button
1043
1023
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1065,305 +1045,340 @@ section: components
1065
1045
  >
1066
1046
  <ul class="pf-v6-c-nav__list" role="list">
1067
1047
  <li class="pf-v6-c-nav__item">
1068
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1048
+ <a href="#" class="pf-v6-c-nav__link">
1049
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1050
+ </a>
1069
1051
  </li>
1070
1052
  <li class="pf-v6-c-nav__item">
1071
1053
  <a
1072
1054
  href="#"
1073
1055
  class="pf-v6-c-nav__link pf-m-current"
1074
1056
  aria-current="page"
1075
- >Policy</a>
1057
+ >
1058
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1059
+ </a>
1076
1060
  </li>
1077
1061
  <li class="pf-v6-c-nav__item">
1078
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1062
+ <a href="#" class="pf-v6-c-nav__link">
1063
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1064
+ </a>
1079
1065
  </li>
1080
1066
  <li class="pf-v6-c-nav__item">
1081
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1067
+ <a href="#" class="pf-v6-c-nav__link">
1068
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1069
+ </a>
1082
1070
  </li>
1083
1071
  <li class="pf-v6-c-nav__item">
1084
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1072
+ <a href="#" class="pf-v6-c-nav__link">
1073
+ <span class="pf-v6-c-nav__link-text">Server</span>
1074
+ </a>
1085
1075
  </li>
1086
1076
  </ul>
1087
1077
  </nav>
1088
1078
  </div>
1089
1079
  </div>
1090
- <main
1091
- class="pf-v6-c-page__main"
1092
- tabindex="-1"
1093
- id="main-content-alert-stacked-example"
1094
- >
1095
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1096
- <div class="pf-v6-c-page__main-body">
1097
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1098
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1099
- <li class="pf-v6-c-breadcrumb__item">
1100
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1101
- </li>
1102
- <li class="pf-v6-c-breadcrumb__item">
1103
- <span class="pf-v6-c-breadcrumb__item-divider">
1104
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1105
- </span>
1080
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1081
+ <main
1082
+ class="pf-v6-c-page__main"
1083
+ tabindex="-1"
1084
+ id="main-content-alert-stacked-example"
1085
+ >
1086
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1087
+ <div class="pf-v6-c-page__main-body">
1088
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1089
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1090
+ <li class="pf-v6-c-breadcrumb__item">
1091
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1092
+ </li>
1093
+ <li class="pf-v6-c-breadcrumb__item">
1094
+ <span class="pf-v6-c-breadcrumb__item-divider">
1095
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1096
+ </span>
1106
1097
 
1107
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1108
- </li>
1109
- <li class="pf-v6-c-breadcrumb__item">
1110
- <span class="pf-v6-c-breadcrumb__item-divider">
1111
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1112
- </span>
1098
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1099
+ </li>
1100
+ <li class="pf-v6-c-breadcrumb__item">
1101
+ <span class="pf-v6-c-breadcrumb__item-divider">
1102
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1103
+ </span>
1113
1104
 
1114
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1115
- </li>
1116
- <li class="pf-v6-c-breadcrumb__item">
1117
- <span class="pf-v6-c-breadcrumb__item-divider">
1118
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1119
- </span>
1105
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1106
+ </li>
1107
+ <li class="pf-v6-c-breadcrumb__item">
1108
+ <span class="pf-v6-c-breadcrumb__item-divider">
1109
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1110
+ </span>
1120
1111
 
1121
- <a
1122
- href="#"
1123
- class="pf-v6-c-breadcrumb__link pf-m-current"
1124
- aria-current="page"
1125
- >Section landing</a>
1126
- </li>
1127
- </ol>
1128
- </nav>
1129
- </div>
1130
- </section>
1131
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1132
- <div class="pf-v6-c-page__main-body">
1133
- <div class="pf-v6-c-content">
1134
- <h1>Main title</h1>
1135
- <p>This is a full page demo.</p>
1112
+ <a
1113
+ href="#"
1114
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1115
+ aria-current="page"
1116
+ >Section landing</a>
1117
+ </li>
1118
+ </ol>
1119
+ </nav>
1136
1120
  </div>
1137
- </div>
1138
- </section>
1139
- <section class="pf-v6-c-page__main-section pf-m-light">
1140
- <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1141
- <div class="pf-v6-c-form__alert">
1142
- <div
1143
- class="pf-v6-c-alert pf-m-danger pf-m-inline"
1144
- aria-label="Inline danger alert"
1145
- >
1146
- <div class="pf-v6-c-alert__icon">
1147
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1148
- </div>
1149
- <p class="pf-v6-c-alert__title">
1150
- <span class="pf-v6-screen-reader">Danger alert:</span>
1151
- Fill out all required fields before continuing.
1152
- </p>
1121
+ </section>
1122
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1123
+ <div class="pf-v6-c-page__main-body">
1124
+ <div class="pf-v6-c-content">
1125
+ <h1>Main title</h1>
1126
+ <p>This is a full page demo.</p>
1153
1127
  </div>
1154
1128
  </div>
1155
- <div class="pf-v6-c-form__group">
1156
- <div class="pf-v6-c-form__group-label"><label
1157
- class="pf-v6-c-form__label"
1158
- for="alert-stacked-example-form-name"
1159
- >
1160
- <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span
1161
- class="pf-v6-c-form__label-required"
1162
- aria-hidden="true"
1163
- >&#42;</span></label>
1164
- </div>
1165
- <div class="pf-v6-c-form__group-control">
1166
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1167
- <input
1168
- required
1169
- type="text"
1170
- id="alert-stacked-example-form-name"
1171
- name="alert-stacked-example-form-name"
1172
- aria-invalid="true"
1173
- aria-describedby="alert-stacked-example-form-helper"
1174
- />
1175
- <span class="pf-v6-c-form-control__utilities">
1176
- <span class="pf-v6-c-form-control__icon pf-m-status">
1177
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1178
- </span>
1179
- </span>
1180
- </span>
1181
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
1182
- <div class="pf-v6-c-helper-text">
1183
- <div
1184
- class="pf-v6-c-helper-text__item pf-m-error"
1185
- id="alert-stacked-example-form-name-helper"
1129
+ </section>
1130
+ <section class="pf-v6-c-page__main-section">
1131
+ <div class="pf-v6-c-page__main-body">
1132
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1133
+ <div class="pf-v6-c-form__alert">
1134
+ <div
1135
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
1136
+ aria-label="Inline danger alert"
1137
+ >
1138
+ <div class="pf-v6-c-alert__icon">
1139
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1140
+ </div>
1141
+ <p class="pf-v6-c-alert__title">
1142
+ <span class="pf-v6-screen-reader">Danger alert:</span>
1143
+ Fill out all required fields before continuing.
1144
+ </p>
1145
+ </div>
1146
+ </div>
1147
+ <div class="pf-v6-c-form__group">
1148
+ <div class="pf-v6-c-form__group-label"><label
1149
+ class="pf-v6-c-form__label"
1150
+ for="alert-stacked-example-form-name"
1186
1151
  >
1187
- <span class="pf-v6-c-helper-text__item-icon">
1188
- <i
1189
- class="fas fa-fw fa-exclamation-circle"
1190
- aria-hidden="true"
1191
- ></i>
1152
+ <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span
1153
+ class="pf-v6-c-form__label-required"
1154
+ aria-hidden="true"
1155
+ >&#42;</span></label>
1156
+ </div>
1157
+ <div class="pf-v6-c-form__group-control">
1158
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1159
+ <input
1160
+ required
1161
+ type="text"
1162
+ id="alert-stacked-example-form-name"
1163
+ name="alert-stacked-example-form-name"
1164
+ aria-invalid="true"
1165
+ aria-describedby="alert-stacked-example-form-helper"
1166
+ />
1167
+ <span class="pf-v6-c-form-control__utilities">
1168
+ <span class="pf-v6-c-form-control__icon pf-m-status">
1169
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1170
+ </span>
1192
1171
  </span>
1193
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
1172
+ </span>
1173
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1174
+ <div class="pf-v6-c-helper-text">
1175
+ <div
1176
+ class="pf-v6-c-helper-text__item pf-m-error"
1177
+ id="alert-stacked-example-form-name-helper"
1178
+ >
1179
+ <span class="pf-v6-c-helper-text__item-icon">
1180
+ <i
1181
+ class="fas fa-fw fa-exclamation-circle"
1182
+ aria-hidden="true"
1183
+ ></i>
1184
+ </span>
1185
+ <span
1186
+ class="pf-v6-c-helper-text__item-text"
1187
+ >Required field</span>
1188
+ </div>
1189
+ </div>
1194
1190
  </div>
1195
1191
  </div>
1196
1192
  </div>
1197
- </div>
1198
- </div>
1199
- <div class="pf-v6-c-form__group">
1200
- <div class="pf-v6-c-form__group-label"><label
1201
- class="pf-v6-c-form__label"
1202
- for="alert-stacked-example-form-email"
1203
- >
1204
- <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
1205
- class="pf-v6-c-form__label-required"
1206
- aria-hidden="true"
1207
- >&#42;</span></label>
1208
- </div>
1209
- <div class="pf-v6-c-form__group-control">
1210
- <span class="pf-v6-c-form-control pf-m-required">
1211
- <input
1212
- required
1213
- type="text"
1214
- value="patternfly.com"
1215
- id="alert-stacked-example-form-email"
1216
- name="alert-stacked-example-form-email"
1217
- />
1218
- </span>
1219
- </div>
1220
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
1221
- <div class="pf-v6-c-helper-text">
1222
- <div
1223
- class="pf-v6-c-helper-text__item pf-m-error"
1224
- id="alert-stacked-example-form-email-helper"
1225
- >
1226
- <span class="pf-v6-c-helper-text__item-icon">
1227
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1193
+ <div class="pf-v6-c-form__group">
1194
+ <div class="pf-v6-c-form__group-label"><label
1195
+ class="pf-v6-c-form__label"
1196
+ for="alert-stacked-example-form-email"
1197
+ >
1198
+ <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
1199
+ class="pf-v6-c-form__label-required"
1200
+ aria-hidden="true"
1201
+ >&#42;</span></label>
1202
+ </div>
1203
+ <div class="pf-v6-c-form__group-control">
1204
+ <span class="pf-v6-c-form-control pf-m-required">
1205
+ <input
1206
+ required
1207
+ type="text"
1208
+ value="patternfly.com"
1209
+ id="alert-stacked-example-form-email"
1210
+ name="alert-stacked-example-form-email"
1211
+ />
1228
1212
  </span>
1229
- <span
1230
- class="pf-v6-c-helper-text__item-text"
1231
- >Enter a valid email address: example@gmail.com</span>
1213
+ </div>
1214
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1215
+ <div class="pf-v6-c-helper-text">
1216
+ <div
1217
+ class="pf-v6-c-helper-text__item pf-m-error"
1218
+ id="alert-stacked-example-form-email-helper"
1219
+ >
1220
+ <span class="pf-v6-c-helper-text__item-icon">
1221
+ <i
1222
+ class="fas fa-fw fa-exclamation-circle"
1223
+ aria-hidden="true"
1224
+ ></i>
1225
+ </span>
1226
+ <span
1227
+ class="pf-v6-c-helper-text__item-text"
1228
+ >Enter a valid email address: example@gmail.com</span>
1229
+ </div>
1230
+ </div>
1232
1231
  </div>
1233
1232
  </div>
1234
- </div>
1235
- </div>
1236
- <div class="pf-v6-c-form__group">
1237
- <div class="pf-v6-c-form__group-label"><label
1238
- class="pf-v6-c-form__label"
1239
- for="alert-stacked-example-form-state"
1240
- >
1241
- <span class="pf-v6-c-form__label-text">State of residence</span>&nbsp;<span
1242
- class="pf-v6-c-form__label-required"
1243
- aria-hidden="true"
1244
- >&#42;</span></label>
1245
- </div>
1246
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1247
- <select
1248
- class
1249
- required
1250
- aria-invalid="true"
1251
- id="select-group-error"
1252
- name="select-group-error"
1253
- aria-label="Error state select group example"
1254
- >
1255
- <option value>Select a state</option>
1256
- <option value="Option 1">CA</option>
1257
- <option value="Option 2">FL</option>
1258
- <option value="Option 3">MA</option>
1259
- <option value="Option 4">NY</option>
1260
- </select>
1261
- <span class="pf-v6-c-form-control__utilities">
1262
- <span class="pf-v6-c-form-control__icon pf-m-status">
1263
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1264
- </span>
1265
- <span class="pf-v6-c-form-control__toggle-icon">
1266
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1233
+ <div class="pf-v6-c-form__group">
1234
+ <div class="pf-v6-c-form__group-label"><label
1235
+ class="pf-v6-c-form__label"
1236
+ for="alert-stacked-example-form-state"
1237
+ >
1238
+ <span class="pf-v6-c-form__label-text">State of residence</span>&nbsp;<span
1239
+ class="pf-v6-c-form__label-required"
1240
+ aria-hidden="true"
1241
+ >&#42;</span></label>
1242
+ </div>
1243
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1244
+ <select
1245
+ class
1246
+ required
1247
+ aria-invalid="true"
1248
+ id="select-group-error"
1249
+ name="select-group-error"
1250
+ aria-label="Error state select group example"
1251
+ >
1252
+ <option value>Select a state</option>
1253
+ <option value="Option 1">CA</option>
1254
+ <option value="Option 2">FL</option>
1255
+ <option value="Option 3">MA</option>
1256
+ <option value="Option 4">NY</option>
1257
+ </select>
1258
+ <span class="pf-v6-c-form-control__utilities">
1259
+ <span class="pf-v6-c-form-control__icon pf-m-status">
1260
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1261
+ </span>
1262
+ <span class="pf-v6-c-form-control__toggle-icon">
1263
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1264
+ </span>
1265
+ </span>
1267
1266
  </span>
1268
- </span>
1269
- </span>
1270
- <div
1271
- class="pf-v6-c-form__helper-text"
1272
- aria-live="polite"
1273
- id="alert-stacked-example-form-state-form-email-helper-state"
1274
- >
1275
- <div class="pf-v6-c-helper-text">
1276
1267
  <div
1277
- class="pf-v6-c-helper-text__item pf-m-error"
1278
- id="alert-stacked-example-form-state-helper"
1268
+ class="pf-v6-c-form__helper-text"
1269
+ aria-live="polite"
1270
+ id="alert-stacked-example-form-state-form-email-helper-state"
1279
1271
  >
1280
- <span class="pf-v6-c-helper-text__item-icon">
1281
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1282
- </span>
1283
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
1272
+ <div class="pf-v6-c-helper-text">
1273
+ <div
1274
+ class="pf-v6-c-helper-text__item pf-m-error"
1275
+ id="alert-stacked-example-form-state-helper"
1276
+ >
1277
+ <span class="pf-v6-c-helper-text__item-icon">
1278
+ <i
1279
+ class="fas fa-fw fa-exclamation-circle"
1280
+ aria-hidden="true"
1281
+ ></i>
1282
+ </span>
1283
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
1284
+ </div>
1285
+ </div>
1284
1286
  </div>
1285
1287
  </div>
1286
- </div>
1287
- </div>
1288
- <div
1289
- class="pf-v6-c-form__group"
1290
- role="group"
1291
- aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1292
- >
1293
- <div
1294
- class="pf-v6-c-form__group-label pf-m-no-padding-top"
1295
- id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1296
- ><span
1297
- class="pf-v6-c-form__label"
1298
- for="alert-stacked-example-form-check-group"
1288
+ <div
1289
+ class="pf-v6-c-form__group"
1290
+ role="group"
1291
+ aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1299
1292
  >
1300
- <span class="pf-v6-c-form__label-text">How can we contact you?</span>&nbsp;<span
1301
- class="pf-v6-c-form__label-required"
1302
- aria-hidden="true"
1303
- >&#42;</span></span>
1304
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
1305
- <div class="pf-v6-c-helper-text">
1306
- <div
1307
- class="pf-v6-c-helper-text__item pf-m-error"
1308
- id="alert-stacked-example-form-check-group-helper"
1293
+ <div
1294
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
1295
+ id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1296
+ ><span
1297
+ class="pf-v6-c-form__label"
1298
+ for="alert-stacked-example-form-check-group"
1309
1299
  >
1310
- <span class="pf-v6-c-helper-text__item-icon">
1311
- <i
1312
- class="fas fa-fw fa-exclamation-circle"
1313
- aria-hidden="true"
1314
- ></i>
1315
- </span>
1316
- <span
1317
- class="pf-v6-c-helper-text__item-text"
1318
- >This is a required field</span>
1300
+ <span class="pf-v6-c-form__label-text">How can we contact you?</span>&nbsp;<span
1301
+ class="pf-v6-c-form__label-required"
1302
+ aria-hidden="true"
1303
+ >&#42;</span></span>
1304
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1305
+ <div class="pf-v6-c-helper-text">
1306
+ <div
1307
+ class="pf-v6-c-helper-text__item pf-m-error"
1308
+ id="alert-stacked-example-form-check-group-helper"
1309
+ >
1310
+ <span class="pf-v6-c-helper-text__item-icon">
1311
+ <i
1312
+ class="fas fa-fw fa-exclamation-circle"
1313
+ aria-hidden="true"
1314
+ ></i>
1315
+ </span>
1316
+ <span
1317
+ class="pf-v6-c-helper-text__item-text"
1318
+ >This is a required field</span>
1319
+ </div>
1320
+ </div>
1319
1321
  </div>
1320
1322
  </div>
1321
- </div>
1322
- </div>
1323
- <div class="pf-v6-c-form__group-control pf-m-inline">
1324
- <div class="pf-v6-c-check">
1325
- <input
1326
- class="pf-v6-c-check__input"
1327
- type="checkbox"
1328
- id="alt-form-checkbox1"
1329
- name="alt-form-checkbox1"
1330
- />
1323
+ <div class="pf-v6-c-form__group-control pf-m-inline">
1324
+ <div class="pf-v6-c-check">
1325
+ <input
1326
+ class="pf-v6-c-check__input"
1327
+ type="checkbox"
1328
+ id="alt-form-checkbox1"
1329
+ name="alt-form-checkbox1"
1330
+ />
1331
1331
 
1332
- <label class="pf-v6-c-check__label" for="alt-form-checkbox1">Email</label>
1333
- </div>
1334
- <div class="pf-v6-c-check">
1335
- <input
1336
- class="pf-v6-c-check__input"
1337
- type="checkbox"
1338
- id="alt-form-checkbox2"
1339
- name="alt-form-checkbox2"
1340
- />
1332
+ <label
1333
+ class="pf-v6-c-check__label"
1334
+ for="alt-form-checkbox1"
1335
+ >Email</label>
1336
+ </div>
1337
+ <div class="pf-v6-c-check">
1338
+ <input
1339
+ class="pf-v6-c-check__input"
1340
+ type="checkbox"
1341
+ id="alt-form-checkbox2"
1342
+ name="alt-form-checkbox2"
1343
+ />
1341
1344
 
1342
- <label class="pf-v6-c-check__label" for="alt-form-checkbox2">Phone</label>
1343
- </div>
1344
- <div class="pf-v6-c-check">
1345
- <input
1346
- class="pf-v6-c-check__input"
1347
- type="checkbox"
1348
- id="alt-form-checkbox3"
1349
- name="alt-form-checkbox3"
1350
- />
1345
+ <label
1346
+ class="pf-v6-c-check__label"
1347
+ for="alt-form-checkbox2"
1348
+ >Phone</label>
1349
+ </div>
1350
+ <div class="pf-v6-c-check">
1351
+ <input
1352
+ class="pf-v6-c-check__input"
1353
+ type="checkbox"
1354
+ id="alt-form-checkbox3"
1355
+ name="alt-form-checkbox3"
1356
+ />
1351
1357
 
1352
- <label class="pf-v6-c-check__label" for="alt-form-checkbox3">Mail</label>
1358
+ <label
1359
+ class="pf-v6-c-check__label"
1360
+ for="alt-form-checkbox3"
1361
+ >Mail</label>
1362
+ </div>
1363
+ </div>
1353
1364
  </div>
1354
- </div>
1355
- </div>
1356
- <div class="pf-v6-c-form__group pf-m-action">
1357
- <div class="pf-v6-c-form__group-control">
1358
- <div class="pf-v6-c-form__actions">
1359
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1360
- <button class="pf-v6-c-button pf-m-secondary" type="reset">Cancel</button>
1365
+ <div class="pf-v6-c-form__group pf-m-action">
1366
+ <div class="pf-v6-c-form__group-control">
1367
+ <div class="pf-v6-c-form__actions">
1368
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1369
+ <span class="pf-v6-c-button__text">Submit</span>
1370
+ </button>
1371
+ <button class="pf-v6-c-button pf-m-secondary" type="reset">
1372
+ <span class="pf-v6-c-button__text">Cancel</span>
1373
+ </button>
1374
+ </div>
1375
+ </div>
1361
1376
  </div>
1362
- </div>
1377
+ </form>
1363
1378
  </div>
1364
- </form>
1365
- </section>
1366
- </main>
1379
+ </section>
1380
+ </main>
1381
+ </div>
1367
1382
  </div>
1368
1383
 
1369
1384
  ```