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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -43,6 +43,27 @@ cssPrefix: pf-v6-c-text-input-group
43
43
 
44
44
  ```
45
45
 
46
+ ### Plain
47
+
48
+ The following example shows a `TextInputGroup` with the `.pf-m-plain` class applied. A plain `TextInputGroup` must only be used when contained in an ancestor that has its own border or background color styling. <br/> <br/>
49
+ For the purposes of this example, the `TextInputGroup` is contained in a wrapper with dashed border styling to show where the component is.
50
+
51
+ ```html
52
+ <div class="pf-v6-c-text-input-group pf-m-plain">
53
+ <div class="pf-v6-c-text-input-group__main">
54
+ <span class="pf-v6-c-text-input-group__text">
55
+ <input
56
+ class="pf-v6-c-text-input-group__text-input"
57
+ type="text"
58
+ value="Text input group with plain styling"
59
+ aria-label="Type to filter"
60
+ />
61
+ </span>
62
+ </div>
63
+ </div>
64
+
65
+ ```
66
+
46
67
  ### Utilities and icon with placeholder text
47
68
 
48
69
  ```html
@@ -67,7 +88,79 @@ cssPrefix: pf-v6-c-text-input-group
67
88
  type="button"
68
89
  aria-label="Clear input"
69
90
  >
70
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
91
+ <span class="pf-v6-c-button__icon">
92
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
93
+ </span>
94
+ </button>
95
+ </div>
96
+ </div>
97
+
98
+ ```
99
+
100
+ ### With validation
101
+
102
+ ```html
103
+ <div class="pf-v6-c-text-input-group pf-m-success">
104
+ <div class="pf-v6-c-text-input-group__main">
105
+ <span class="pf-v6-c-text-input-group__text">
106
+ <input
107
+ class="pf-v6-c-text-input-group__text-input"
108
+ type="text"
109
+ value="Success validation"
110
+ aria-label="Type to filter"
111
+ />
112
+ <span class="pf-v6-c-text-input-group__icon pf-m-status">
113
+ <i aria-hidden="true" class="fas fa-check-circle"></i>
114
+ </span>
115
+ </span>
116
+ </div>
117
+ </div>
118
+ <br />
119
+ <div class="pf-v6-c-text-input-group pf-m-warning">
120
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
121
+ <span class="pf-v6-c-text-input-group__text">
122
+ <span class="pf-v6-c-text-input-group__icon">
123
+ <i class="fas fa-fw fa-search"></i>
124
+ </span>
125
+ <input
126
+ class="pf-v6-c-text-input-group__text-input"
127
+ type="text"
128
+ value="Warning validation with icon at start"
129
+ aria-label="Type to filter"
130
+ />
131
+ <span class="pf-v6-c-text-input-group__icon pf-m-status">
132
+ <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
133
+ </span>
134
+ </span>
135
+ </div>
136
+ </div>
137
+ <br />
138
+ <div class="pf-v6-c-text-input-group pf-m-error">
139
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
140
+ <span class="pf-v6-c-text-input-group__text">
141
+ <span class="pf-v6-c-text-input-group__icon">
142
+ <i class="fas fa-fw fa-search"></i>
143
+ </span>
144
+ <input
145
+ class="pf-v6-c-text-input-group__text-input"
146
+ type="text"
147
+ value="Error validation with icon at start and utilities"
148
+ aria-label="Type to filter"
149
+ />
150
+ <span class="pf-v6-c-text-input-group__icon pf-m-status">
151
+ <i aria-hidden="true" class="fas fa-exclamation-circle"></i>
152
+ </span>
153
+ </span>
154
+ </div>
155
+ <div class="pf-v6-c-text-input-group__utilities">
156
+ <button
157
+ class="pf-v6-c-button pf-m-plain"
158
+ type="button"
159
+ aria-label="Clear input"
160
+ >
161
+ <span class="pf-v6-c-button__text">
162
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
163
+ </span>
71
164
  </button>
72
165
  </div>
73
166
  </div>
@@ -79,143 +172,157 @@ cssPrefix: pf-v6-c-text-input-group
79
172
  ```html
80
173
  <div class="pf-v6-c-text-input-group">
81
174
  <div class="pf-v6-c-text-input-group__main">
82
- <div class="pf-v6-c-chip-group" role="group">
83
- <div class="pf-v6-c-chip-group__main">
175
+ <div class="pf-v6-c-label-group">
176
+ <div class="pf-v6-c-label-group__main">
84
177
  <ul
85
- class="pf-v6-c-chip-group__list"
178
+ class="pf-v6-c-label-group__list"
86
179
  role="list"
87
- aria-label="Chip group list"
180
+ aria-label="Label group list"
88
181
  >
89
- <li class="pf-v6-c-chip-group__list-item">
90
- <div class="pf-v6-c-chip">
91
- <span class="pf-v6-c-chip__content">
182
+ <li class="pf-v6-c-label-group__list-item">
183
+ <span class="pf-v6-c-label pf-m-outline">
184
+ <span class="pf-v6-c-label__content">
92
185
  <span
93
- class="pf-v6-c-chip__text"
94
- id="text-input-group-filters-chip-group-chip_one_select_collapsed"
95
- >Chip one</span>
186
+ class="pf-v6-c-label__text"
187
+ id="text-input-group-filters-label-group-label-one-text"
188
+ >Label one</span>
96
189
  </span>
97
- <span class="pf-v6-c-chip__actions">
190
+ <span class="pf-v6-c-label__actions">
98
191
  <button
99
- class="pf-v6-c-button pf-m-plain"
192
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
100
193
  type="button"
101
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_one_select_collapsed text-input-group-filters-chip-group-chip_one_select_collapsed"
194
+ id="text-input-group-filters-label-group-label-one-button"
102
195
  aria-label="Remove"
103
- id="text-input-group-filters-chip-group-remove_chip_one_select_collapsed"
196
+ aria-labelledby="text-input-group-filters-label-group-label-one-button text-input-group-filters-label-group-label-one-text"
104
197
  >
105
- <i class="fas fa-times" aria-hidden="true"></i>
198
+ <span class="pf-v6-c-button__icon">
199
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
200
+ </span>
106
201
  </button>
107
202
  </span>
108
- </div>
203
+ </span>
109
204
  </li>
110
- <li class="pf-v6-c-chip-group__list-item">
111
- <div class="pf-v6-c-chip">
112
- <span class="pf-v6-c-chip__content">
205
+ <li class="pf-v6-c-label-group__list-item">
206
+ <span class="pf-v6-c-label pf-m-outline">
207
+ <span class="pf-v6-c-label__content">
113
208
  <span
114
- class="pf-v6-c-chip__text"
115
- id="text-input-group-filters-chip-group-chip_two_select_collapsed"
116
- >Chip two</span>
209
+ class="pf-v6-c-label__text"
210
+ id="text-input-group-filters-label-group-label-two-text"
211
+ >Label two</span>
117
212
  </span>
118
- <span class="pf-v6-c-chip__actions">
213
+ <span class="pf-v6-c-label__actions">
119
214
  <button
120
- class="pf-v6-c-button pf-m-plain"
215
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
121
216
  type="button"
122
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_two_select_collapsed text-input-group-filters-chip-group-chip_two_select_collapsed"
217
+ id="text-input-group-filters-label-group-label-two-button"
123
218
  aria-label="Remove"
124
- id="text-input-group-filters-chip-group-remove_chip_two_select_collapsed"
219
+ aria-labelledby="text-input-group-filters-label-group-label-two-button text-input-group-filters-label-group-label-two-text"
125
220
  >
126
- <i class="fas fa-times" aria-hidden="true"></i>
221
+ <span class="pf-v6-c-button__icon">
222
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
223
+ </span>
127
224
  </button>
128
225
  </span>
129
- </div>
226
+ </span>
130
227
  </li>
131
- <li class="pf-v6-c-chip-group__list-item">
132
- <div class="pf-v6-c-chip">
133
- <span class="pf-v6-c-chip__content">
228
+ <li class="pf-v6-c-label-group__list-item">
229
+ <span class="pf-v6-c-label pf-m-outline">
230
+ <span class="pf-v6-c-label__content">
134
231
  <span
135
- class="pf-v6-c-chip__text"
136
- id="text-input-group-filters-chip-group-chip_three_select_collapsed"
137
- >Chip three</span>
232
+ class="pf-v6-c-label__text"
233
+ id="text-input-group-filters-label-group-label-three-text"
234
+ >Label three</span>
138
235
  </span>
139
- <span class="pf-v6-c-chip__actions">
236
+ <span class="pf-v6-c-label__actions">
140
237
  <button
141
- class="pf-v6-c-button pf-m-plain"
238
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
142
239
  type="button"
143
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_three_select_collapsed text-input-group-filters-chip-group-chip_three_select_collapsed"
240
+ id="text-input-group-filters-label-group-label-three-button"
144
241
  aria-label="Remove"
145
- id="text-input-group-filters-chip-group-remove_chip_three_select_collapsed"
242
+ aria-labelledby="text-input-group-filters-label-group-label-three-button text-input-group-filters-label-group-label-three-text"
146
243
  >
147
- <i class="fas fa-times" aria-hidden="true"></i>
244
+ <span class="pf-v6-c-button__icon">
245
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
246
+ </span>
148
247
  </button>
149
248
  </span>
150
- </div>
249
+ </span>
151
250
  </li>
152
- <li class="pf-v6-c-chip-group__list-item">
153
- <div class="pf-v6-c-chip">
154
- <span class="pf-v6-c-chip__content">
251
+ <li class="pf-v6-c-label-group__list-item">
252
+ <span class="pf-v6-c-label pf-m-outline">
253
+ <span class="pf-v6-c-label__content">
155
254
  <span
156
- class="pf-v6-c-chip__text"
157
- id="text-input-group-filters-chip-group-chip_four_select_collapsed"
158
- >Chip four</span>
255
+ class="pf-v6-c-label__text"
256
+ id="text-input-group-filters-label-group-label-four-text"
257
+ >Label four</span>
159
258
  </span>
160
- <span class="pf-v6-c-chip__actions">
259
+ <span class="pf-v6-c-label__actions">
161
260
  <button
162
- class="pf-v6-c-button pf-m-plain"
261
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
163
262
  type="button"
164
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_four_select_collapsed text-input-group-filters-chip-group-chip_four_select_collapsed"
263
+ id="text-input-group-filters-label-group-label-four-button"
165
264
  aria-label="Remove"
166
- id="text-input-group-filters-chip-group-remove_chip_four_select_collapsed"
265
+ aria-labelledby="text-input-group-filters-label-group-label-four-button text-input-group-filters-label-group-label-four-text"
167
266
  >
168
- <i class="fas fa-times" aria-hidden="true"></i>
267
+ <span class="pf-v6-c-button__icon">
268
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
269
+ </span>
169
270
  </button>
170
271
  </span>
171
- </div>
272
+ </span>
172
273
  </li>
173
- <li class="pf-v6-c-chip-group__list-item">
174
- <div class="pf-v6-c-chip">
175
- <span class="pf-v6-c-chip__content">
274
+ <li class="pf-v6-c-label-group__list-item">
275
+ <span class="pf-v6-c-label pf-m-outline">
276
+ <span class="pf-v6-c-label__content">
176
277
  <span
177
- class="pf-v6-c-chip__text"
178
- id="text-input-group-filters-chip-group-chip_five_select_collapsed"
179
- >Chip five</span>
278
+ class="pf-v6-c-label__text"
279
+ id="text-input-group-filters-label-group-label-five-text"
280
+ >Label five</span>
180
281
  </span>
181
- <span class="pf-v6-c-chip__actions">
282
+ <span class="pf-v6-c-label__actions">
182
283
  <button
183
- class="pf-v6-c-button pf-m-plain"
284
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
184
285
  type="button"
185
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_five_select_collapsed text-input-group-filters-chip-group-chip_five_select_collapsed"
286
+ id="text-input-group-filters-label-group-label-five-button"
186
287
  aria-label="Remove"
187
- id="text-input-group-filters-chip-group-remove_chip_five_select_collapsed"
288
+ aria-labelledby="text-input-group-filters-label-group-label-five-button text-input-group-filters-label-group-label-five-text"
188
289
  >
189
- <i class="fas fa-times" aria-hidden="true"></i>
290
+ <span class="pf-v6-c-button__icon">
291
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
292
+ </span>
190
293
  </button>
191
294
  </span>
192
- </div>
295
+ </span>
193
296
  </li>
194
- <li class="pf-v6-c-chip-group__list-item">
195
- <div class="pf-v6-c-chip">
196
- <span class="pf-v6-c-chip__content">
297
+ <li class="pf-v6-c-label-group__list-item">
298
+ <span class="pf-v6-c-label pf-m-outline">
299
+ <span class="pf-v6-c-label__content">
197
300
  <span
198
- class="pf-v6-c-chip__text"
199
- id="text-input-group-filters-chip-group-chip_six_select_collapsed"
200
- >Chip six</span>
301
+ class="pf-v6-c-label__text"
302
+ id="text-input-group-filters-label-group-label-six-text"
303
+ >Label six</span>
201
304
  </span>
202
- <span class="pf-v6-c-chip__actions">
305
+ <span class="pf-v6-c-label__actions">
203
306
  <button
204
- class="pf-v6-c-button pf-m-plain"
307
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
205
308
  type="button"
206
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_six_select_collapsed text-input-group-filters-chip-group-chip_six_select_collapsed"
309
+ id="text-input-group-filters-label-group-label-six-button"
207
310
  aria-label="Remove"
208
- id="text-input-group-filters-chip-group-remove_chip_six_select_collapsed"
311
+ aria-labelledby="text-input-group-filters-label-group-label-six-button text-input-group-filters-label-group-label-six-text"
209
312
  >
210
- <i class="fas fa-times" aria-hidden="true"></i>
313
+ <span class="pf-v6-c-button__icon">
314
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
315
+ </span>
211
316
  </button>
212
317
  </span>
213
- </div>
318
+ </span>
214
319
  </li>
215
- <li class="pf-v6-c-chip-group__list-item">
216
- <button class="pf-v6-c-chip pf-m-overflow">
217
- <span class="pf-v6-c-chip__content">
218
- <span class="pf-v6-c-chip__text">8 more</span>
320
+ <li class="pf-v6-c-label-group__list-item">
321
+ <button class="pf-v6-c-label pf-m-overflow">
322
+ <span class="pf-v6-c-label__content">
323
+ <span class="pf-v6-c-label__content">
324
+ <span class="pf-v6-c-label__text">8 more</span>
325
+ </span>
219
326
  </span>
220
327
  </button>
221
328
  </li>
@@ -237,7 +344,9 @@ cssPrefix: pf-v6-c-text-input-group
237
344
  type="button"
238
345
  aria-label="Clear input"
239
346
  >
240
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
347
+ <span class="pf-v6-c-button__icon">
348
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
349
+ </span>
241
350
  </button>
242
351
  </div>
243
352
  </div>
@@ -249,306 +358,334 @@ cssPrefix: pf-v6-c-text-input-group
249
358
  ```html
250
359
  <div class="pf-v6-c-text-input-group">
251
360
  <div class="pf-v6-c-text-input-group__main">
252
- <div class="pf-v6-c-chip-group" role="group">
253
- <div class="pf-v6-c-chip-group__main">
361
+ <div class="pf-v6-c-label-group">
362
+ <div class="pf-v6-c-label-group__main">
254
363
  <ul
255
- class="pf-v6-c-chip-group__list"
364
+ class="pf-v6-c-label-group__list"
256
365
  role="list"
257
- aria-label="Chip group list"
366
+ aria-label="Label group list"
258
367
  >
259
- <li class="pf-v6-c-chip-group__list-item">
260
- <div class="pf-v6-c-chip">
261
- <span class="pf-v6-c-chip__content">
368
+ <li class="pf-v6-c-label-group__list-item">
369
+ <span class="pf-v6-c-label pf-m-outline">
370
+ <span class="pf-v6-c-label__content">
262
371
  <span
263
- class="pf-v6-c-chip__text"
264
- id="text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
265
- >Chip one</span>
372
+ class="pf-v6-c-label__text"
373
+ id="text-input-group-filters-expanded-label-group-label-one-text"
374
+ >Label one</span>
266
375
  </span>
267
- <span class="pf-v6-c-chip__actions">
376
+ <span class="pf-v6-c-label__actions">
268
377
  <button
269
- class="pf-v6-c-button pf-m-plain"
378
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
270
379
  type="button"
271
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
380
+ id="text-input-group-filters-expanded-label-group-label-one-button"
272
381
  aria-label="Remove"
273
- id="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed"
382
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-one-button text-input-group-filters-expanded-label-group-label-one-text"
274
383
  >
275
- <i class="fas fa-times" aria-hidden="true"></i>
384
+ <span class="pf-v6-c-button__icon">
385
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
386
+ </span>
276
387
  </button>
277
388
  </span>
278
- </div>
389
+ </span>
279
390
  </li>
280
- <li class="pf-v6-c-chip-group__list-item">
281
- <div class="pf-v6-c-chip">
282
- <span class="pf-v6-c-chip__content">
391
+ <li class="pf-v6-c-label-group__list-item">
392
+ <span class="pf-v6-c-label pf-m-outline">
393
+ <span class="pf-v6-c-label__content">
283
394
  <span
284
- class="pf-v6-c-chip__text"
285
- id="text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
286
- >Chip two</span>
395
+ class="pf-v6-c-label__text"
396
+ id="text-input-group-filters-expanded-label-group-label-two-text"
397
+ >Label two</span>
287
398
  </span>
288
- <span class="pf-v6-c-chip__actions">
399
+ <span class="pf-v6-c-label__actions">
289
400
  <button
290
- class="pf-v6-c-button pf-m-plain"
401
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
291
402
  type="button"
292
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
403
+ id="text-input-group-filters-expanded-label-group-label-two-button"
293
404
  aria-label="Remove"
294
- id="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed"
405
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-two-button text-input-group-filters-expanded-label-group-label-two-text"
295
406
  >
296
- <i class="fas fa-times" aria-hidden="true"></i>
407
+ <span class="pf-v6-c-button__icon">
408
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
409
+ </span>
297
410
  </button>
298
411
  </span>
299
- </div>
412
+ </span>
300
413
  </li>
301
- <li class="pf-v6-c-chip-group__list-item">
302
- <div class="pf-v6-c-chip">
303
- <span class="pf-v6-c-chip__content">
414
+ <li class="pf-v6-c-label-group__list-item">
415
+ <span class="pf-v6-c-label pf-m-outline">
416
+ <span class="pf-v6-c-label__content">
304
417
  <span
305
- class="pf-v6-c-chip__text"
306
- id="text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
307
- >Chip three</span>
418
+ class="pf-v6-c-label__text"
419
+ id="text-input-group-filters-expanded-label-group-label-three-text"
420
+ >Label three</span>
308
421
  </span>
309
- <span class="pf-v6-c-chip__actions">
422
+ <span class="pf-v6-c-label__actions">
310
423
  <button
311
- class="pf-v6-c-button pf-m-plain"
424
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
312
425
  type="button"
313
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
426
+ id="text-input-group-filters-expanded-label-group-label-three-button"
314
427
  aria-label="Remove"
315
- id="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed"
428
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-three-button text-input-group-filters-expanded-label-group-label-three-text"
316
429
  >
317
- <i class="fas fa-times" aria-hidden="true"></i>
430
+ <span class="pf-v6-c-button__icon">
431
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
432
+ </span>
318
433
  </button>
319
434
  </span>
320
- </div>
435
+ </span>
321
436
  </li>
322
- <li class="pf-v6-c-chip-group__list-item">
323
- <div class="pf-v6-c-chip">
324
- <span class="pf-v6-c-chip__content">
437
+ <li class="pf-v6-c-label-group__list-item">
438
+ <span class="pf-v6-c-label pf-m-outline">
439
+ <span class="pf-v6-c-label__content">
325
440
  <span
326
- class="pf-v6-c-chip__text"
327
- id="text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
328
- >Chip four</span>
441
+ class="pf-v6-c-label__text"
442
+ id="text-input-group-filters-expanded-label-group-label-four-text"
443
+ >Label four</span>
329
444
  </span>
330
- <span class="pf-v6-c-chip__actions">
445
+ <span class="pf-v6-c-label__actions">
331
446
  <button
332
- class="pf-v6-c-button pf-m-plain"
447
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
333
448
  type="button"
334
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
449
+ id="text-input-group-filters-expanded-label-group-label-four-button"
335
450
  aria-label="Remove"
336
- id="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed"
451
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-four-button text-input-group-filters-expanded-label-group-label-four-text"
337
452
  >
338
- <i class="fas fa-times" aria-hidden="true"></i>
453
+ <span class="pf-v6-c-button__icon">
454
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
455
+ </span>
339
456
  </button>
340
457
  </span>
341
- </div>
458
+ </span>
342
459
  </li>
343
- <li class="pf-v6-c-chip-group__list-item">
344
- <div class="pf-v6-c-chip">
345
- <span class="pf-v6-c-chip__content">
460
+ <li class="pf-v6-c-label-group__list-item">
461
+ <span class="pf-v6-c-label pf-m-outline">
462
+ <span class="pf-v6-c-label__content">
346
463
  <span
347
- class="pf-v6-c-chip__text"
348
- id="text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
349
- >Chip five</span>
464
+ class="pf-v6-c-label__text"
465
+ id="text-input-group-filters-expanded-label-group-label-five-text"
466
+ >Label five</span>
350
467
  </span>
351
- <span class="pf-v6-c-chip__actions">
468
+ <span class="pf-v6-c-label__actions">
352
469
  <button
353
- class="pf-v6-c-button pf-m-plain"
470
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
354
471
  type="button"
355
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
472
+ id="text-input-group-filters-expanded-label-group-label-five-button"
356
473
  aria-label="Remove"
357
- id="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed"
474
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-five-button text-input-group-filters-expanded-label-group-label-five-text"
358
475
  >
359
- <i class="fas fa-times" aria-hidden="true"></i>
476
+ <span class="pf-v6-c-button__icon">
477
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
478
+ </span>
360
479
  </button>
361
480
  </span>
362
- </div>
481
+ </span>
363
482
  </li>
364
- <li class="pf-v6-c-chip-group__list-item">
365
- <div class="pf-v6-c-chip">
366
- <span class="pf-v6-c-chip__content">
483
+ <li class="pf-v6-c-label-group__list-item">
484
+ <span class="pf-v6-c-label pf-m-outline">
485
+ <span class="pf-v6-c-label__content">
367
486
  <span
368
- class="pf-v6-c-chip__text"
369
- id="text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
370
- >Chip six</span>
487
+ class="pf-v6-c-label__text"
488
+ id="text-input-group-filters-expanded-label-group-label-six-text"
489
+ >Label six</span>
371
490
  </span>
372
- <span class="pf-v6-c-chip__actions">
491
+ <span class="pf-v6-c-label__actions">
373
492
  <button
374
- class="pf-v6-c-button pf-m-plain"
493
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
375
494
  type="button"
376
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
495
+ id="text-input-group-filters-expanded-label-group-label-six-button"
377
496
  aria-label="Remove"
378
- id="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed"
497
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-six-button text-input-group-filters-expanded-label-group-label-six-text"
379
498
  >
380
- <i class="fas fa-times" aria-hidden="true"></i>
499
+ <span class="pf-v6-c-button__icon">
500
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
501
+ </span>
381
502
  </button>
382
503
  </span>
383
- </div>
504
+ </span>
384
505
  </li>
385
- <li class="pf-v6-c-chip-group__list-item">
386
- <div class="pf-v6-c-chip">
387
- <span class="pf-v6-c-chip__content">
506
+ <li class="pf-v6-c-label-group__list-item">
507
+ <span class="pf-v6-c-label pf-m-outline">
508
+ <span class="pf-v6-c-label__content">
388
509
  <span
389
- class="pf-v6-c-chip__text"
390
- id="text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
391
- >Chip seven</span>
510
+ class="pf-v6-c-label__text"
511
+ id="text-input-group-filters-expanded-label-group-label-seven-text"
512
+ >Label seven</span>
392
513
  </span>
393
- <span class="pf-v6-c-chip__actions">
514
+ <span class="pf-v6-c-label__actions">
394
515
  <button
395
- class="pf-v6-c-button pf-m-plain"
516
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
396
517
  type="button"
397
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
518
+ id="text-input-group-filters-expanded-label-group-label-seven-button"
398
519
  aria-label="Remove"
399
- id="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed"
520
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-seven-button text-input-group-filters-expanded-label-group-label-seven-text"
400
521
  >
401
- <i class="fas fa-times" aria-hidden="true"></i>
522
+ <span class="pf-v6-c-button__icon">
523
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
524
+ </span>
402
525
  </button>
403
526
  </span>
404
- </div>
527
+ </span>
405
528
  </li>
406
- <li class="pf-v6-c-chip-group__list-item">
407
- <div class="pf-v6-c-chip">
408
- <span class="pf-v6-c-chip__content">
529
+ <li class="pf-v6-c-label-group__list-item">
530
+ <span class="pf-v6-c-label pf-m-outline">
531
+ <span class="pf-v6-c-label__content">
409
532
  <span
410
- class="pf-v6-c-chip__text"
411
- id="text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
412
- >Chip eight</span>
533
+ class="pf-v6-c-label__text"
534
+ id="text-input-group-filters-expanded-label-group-label-eight-text"
535
+ >Label eight</span>
413
536
  </span>
414
- <span class="pf-v6-c-chip__actions">
537
+ <span class="pf-v6-c-label__actions">
415
538
  <button
416
- class="pf-v6-c-button pf-m-plain"
539
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
417
540
  type="button"
418
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
541
+ id="text-input-group-filters-expanded-label-group-label-eight-button"
419
542
  aria-label="Remove"
420
- id="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed"
543
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-eight-button text-input-group-filters-expanded-label-group-label-eight-text"
421
544
  >
422
- <i class="fas fa-times" aria-hidden="true"></i>
545
+ <span class="pf-v6-c-button__icon">
546
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
547
+ </span>
423
548
  </button>
424
549
  </span>
425
- </div>
550
+ </span>
426
551
  </li>
427
- <li class="pf-v6-c-chip-group__list-item">
428
- <div class="pf-v6-c-chip">
429
- <span class="pf-v6-c-chip__content">
552
+ <li class="pf-v6-c-label-group__list-item">
553
+ <span class="pf-v6-c-label pf-m-outline">
554
+ <span class="pf-v6-c-label__content">
430
555
  <span
431
- class="pf-v6-c-chip__text"
432
- id="text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
433
- >Chip nine</span>
556
+ class="pf-v6-c-label__text"
557
+ id="text-input-group-filters-expanded-label-group-label-nine-text"
558
+ >Label nine</span>
434
559
  </span>
435
- <span class="pf-v6-c-chip__actions">
560
+ <span class="pf-v6-c-label__actions">
436
561
  <button
437
- class="pf-v6-c-button pf-m-plain"
562
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
438
563
  type="button"
439
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
564
+ id="text-input-group-filters-expanded-label-group-label-nine-button"
440
565
  aria-label="Remove"
441
- id="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed"
566
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-nine-button text-input-group-filters-expanded-label-group-label-nine-text"
442
567
  >
443
- <i class="fas fa-times" aria-hidden="true"></i>
568
+ <span class="pf-v6-c-button__icon">
569
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
570
+ </span>
444
571
  </button>
445
572
  </span>
446
- </div>
573
+ </span>
447
574
  </li>
448
- <li class="pf-v6-c-chip-group__list-item">
449
- <div class="pf-v6-c-chip">
450
- <span class="pf-v6-c-chip__content">
575
+ <li class="pf-v6-c-label-group__list-item">
576
+ <span class="pf-v6-c-label pf-m-outline">
577
+ <span class="pf-v6-c-label__content">
451
578
  <span
452
- class="pf-v6-c-chip__text"
453
- id="text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
454
- >Chip ten</span>
579
+ class="pf-v6-c-label__text"
580
+ id="text-input-group-filters-expanded-label-group-label-ten-text"
581
+ >Label ten</span>
455
582
  </span>
456
- <span class="pf-v6-c-chip__actions">
583
+ <span class="pf-v6-c-label__actions">
457
584
  <button
458
- class="pf-v6-c-button pf-m-plain"
585
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
459
586
  type="button"
460
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
587
+ id="text-input-group-filters-expanded-label-group-label-ten-button"
461
588
  aria-label="Remove"
462
- id="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed"
589
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-ten-button text-input-group-filters-expanded-label-group-label-ten-text"
463
590
  >
464
- <i class="fas fa-times" aria-hidden="true"></i>
591
+ <span class="pf-v6-c-button__icon">
592
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
593
+ </span>
465
594
  </button>
466
595
  </span>
467
- </div>
596
+ </span>
468
597
  </li>
469
- <li class="pf-v6-c-chip-group__list-item">
470
- <div class="pf-v6-c-chip">
471
- <span class="pf-v6-c-chip__content">
598
+ <li class="pf-v6-c-label-group__list-item">
599
+ <span class="pf-v6-c-label pf-m-outline">
600
+ <span class="pf-v6-c-label__content">
472
601
  <span
473
- class="pf-v6-c-chip__text"
474
- id="text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
475
- >Chip eleven</span>
602
+ class="pf-v6-c-label__text"
603
+ id="text-input-group-filters-expanded-label-group-label-eleven-text"
604
+ >Label eleven</span>
476
605
  </span>
477
- <span class="pf-v6-c-chip__actions">
606
+ <span class="pf-v6-c-label__actions">
478
607
  <button
479
- class="pf-v6-c-button pf-m-plain"
608
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
480
609
  type="button"
481
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
610
+ id="text-input-group-filters-expanded-label-group-label-eleven-button"
482
611
  aria-label="Remove"
483
- id="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed"
612
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-eleven-button text-input-group-filters-expanded-label-group-label-eleven-text"
484
613
  >
485
- <i class="fas fa-times" aria-hidden="true"></i>
614
+ <span class="pf-v6-c-button__icon">
615
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
616
+ </span>
486
617
  </button>
487
618
  </span>
488
- </div>
619
+ </span>
489
620
  </li>
490
- <li class="pf-v6-c-chip-group__list-item">
491
- <div class="pf-v6-c-chip">
492
- <span class="pf-v6-c-chip__content">
621
+ <li class="pf-v6-c-label-group__list-item">
622
+ <span class="pf-v6-c-label pf-m-outline">
623
+ <span class="pf-v6-c-label__content">
493
624
  <span
494
- class="pf-v6-c-chip__text"
495
- id="text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
496
- >Chip twelve</span>
625
+ class="pf-v6-c-label__text"
626
+ id="text-input-group-filters-expanded-label-group-label-twelve-text"
627
+ >Label twelve</span>
497
628
  </span>
498
- <span class="pf-v6-c-chip__actions">
629
+ <span class="pf-v6-c-label__actions">
499
630
  <button
500
- class="pf-v6-c-button pf-m-plain"
631
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
501
632
  type="button"
502
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
633
+ id="text-input-group-filters-expanded-label-group-label-twelve-button"
503
634
  aria-label="Remove"
504
- id="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed"
635
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-twelve-button text-input-group-filters-expanded-label-group-label-twelve-text"
505
636
  >
506
- <i class="fas fa-times" aria-hidden="true"></i>
637
+ <span class="pf-v6-c-button__icon">
638
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
639
+ </span>
507
640
  </button>
508
641
  </span>
509
- </div>
642
+ </span>
510
643
  </li>
511
- <li class="pf-v6-c-chip-group__list-item">
512
- <div class="pf-v6-c-chip">
513
- <span class="pf-v6-c-chip__content">
644
+ <li class="pf-v6-c-label-group__list-item">
645
+ <span class="pf-v6-c-label pf-m-outline">
646
+ <span class="pf-v6-c-label__content">
514
647
  <span
515
- class="pf-v6-c-chip__text"
516
- id="text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
517
- >Chip thirteen</span>
648
+ class="pf-v6-c-label__text"
649
+ id="text-input-group-filters-expanded-label-group-label-thirteen-text"
650
+ >Label thirteen</span>
518
651
  </span>
519
- <span class="pf-v6-c-chip__actions">
652
+ <span class="pf-v6-c-label__actions">
520
653
  <button
521
- class="pf-v6-c-button pf-m-plain"
654
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
522
655
  type="button"
523
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
656
+ id="text-input-group-filters-expanded-label-group-label-thirteen-button"
524
657
  aria-label="Remove"
525
- id="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed"
658
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-thirteen-button text-input-group-filters-expanded-label-group-label-thirteen-text"
526
659
  >
527
- <i class="fas fa-times" aria-hidden="true"></i>
660
+ <span class="pf-v6-c-button__icon">
661
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
662
+ </span>
528
663
  </button>
529
664
  </span>
530
- </div>
665
+ </span>
531
666
  </li>
532
- <li class="pf-v6-c-chip-group__list-item">
533
- <div class="pf-v6-c-chip">
534
- <span class="pf-v6-c-chip__content">
667
+ <li class="pf-v6-c-label-group__list-item">
668
+ <span class="pf-v6-c-label pf-m-outline">
669
+ <span class="pf-v6-c-label__content">
535
670
  <span
536
- class="pf-v6-c-chip__text"
537
- id="text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
538
- >Chip fourteen</span>
671
+ class="pf-v6-c-label__text"
672
+ id="text-input-group-filters-expanded-label-group-label-fourteen-text"
673
+ >Label fourteen</span>
539
674
  </span>
540
- <span class="pf-v6-c-chip__actions">
675
+ <span class="pf-v6-c-label__actions">
541
676
  <button
542
- class="pf-v6-c-button pf-m-plain"
677
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
543
678
  type="button"
544
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
679
+ id="text-input-group-filters-expanded-label-group-label-fourteen-button"
545
680
  aria-label="Remove"
546
- id="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed"
681
+ aria-labelledby="text-input-group-filters-expanded-label-group-label-fourteen-button text-input-group-filters-expanded-label-group-label-fourteen-text"
547
682
  >
548
- <i class="fas fa-times" aria-hidden="true"></i>
683
+ <span class="pf-v6-c-button__icon">
684
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
685
+ </span>
549
686
  </button>
550
687
  </span>
551
- </div>
688
+ </span>
552
689
  </li>
553
690
  </ul>
554
691
  </div>
@@ -568,7 +705,9 @@ cssPrefix: pf-v6-c-text-input-group
568
705
  type="button"
569
706
  aria-label="Clear input"
570
707
  >
571
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
708
+ <span class="pf-v6-c-button__icon">
709
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
710
+ </span>
572
711
  </button>
573
712
  </div>
574
713
  </div>
@@ -646,7 +785,9 @@ cssPrefix: pf-v6-c-text-input-group
646
785
  type="button"
647
786
  aria-label="Clear input"
648
787
  >
649
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
788
+ <span class="pf-v6-c-button__icon">
789
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
790
+ </span>
650
791
  </button>
651
792
  </div>
652
793
  </div>
@@ -678,7 +819,9 @@ cssPrefix: pf-v6-c-text-input-group
678
819
  type="button"
679
820
  aria-label="Clear input"
680
821
  >
681
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
822
+ <span class="pf-v6-c-button__icon">
823
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
824
+ </span>
682
825
  </button>
683
826
  </div>
684
827
  </div>
@@ -710,7 +853,9 @@ cssPrefix: pf-v6-c-text-input-group
710
853
  type="button"
711
854
  aria-label="Clear input"
712
855
  >
713
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
856
+ <span class="pf-v6-c-button__icon">
857
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
858
+ </span>
714
859
  </button>
715
860
  </div>
716
861
  </div>
@@ -729,7 +874,9 @@ cssPrefix: pf-v6-c-text-input-group
729
874
  type="button"
730
875
  aria-label="Open search"
731
876
  >
732
- <i class="fas fa-fw fa-search" aria-hidden="true"></i>
877
+ <span class="pf-v6-c-button__icon">
878
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
879
+ </span>
733
880
  </button>
734
881
  </div>
735
882
  </div>
@@ -758,7 +905,9 @@ cssPrefix: pf-v6-c-text-input-group
758
905
  </div>
759
906
  <div class="pf-v6-c-input-group__item pf-m-plain">
760
907
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
761
- <i class="fas fa-times" aria-hidden="true"></i>
908
+ <span class="pf-v6-c-button__icon">
909
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
910
+ </span>
762
911
  </button>
763
912
  </div>
764
913
  </div>
@@ -793,7 +942,9 @@ cssPrefix: pf-v6-c-text-input-group
793
942
  type="submit"
794
943
  aria-label="Search"
795
944
  >
796
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
945
+ <span class="pf-v6-c-button__icon">
946
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
947
+ </span>
797
948
  </button>
798
949
  </div>
799
950
  </div>
@@ -825,7 +976,9 @@ cssPrefix: pf-v6-c-text-input-group
825
976
  type="button"
826
977
  aria-label="Clear input"
827
978
  >
828
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
979
+ <span class="pf-v6-c-button__icon">
980
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
981
+ </span>
829
982
  </button>
830
983
  </div>
831
984
  </div>
@@ -837,7 +990,9 @@ cssPrefix: pf-v6-c-text-input-group
837
990
  aria-expanded="false"
838
991
  aria-label="Advanced search"
839
992
  >
840
- <i class="fas fa-caret-down" aria-hidden="true"></i>
993
+ <span class="pf-v6-c-button__icon">
994
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
995
+ </span>
841
996
  </button>
842
997
  </div>
843
998
  <div class="pf-v6-c-input-group__item">
@@ -846,7 +1001,9 @@ cssPrefix: pf-v6-c-text-input-group
846
1001
  type="submit"
847
1002
  aria-label="Search"
848
1003
  >
849
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1004
+ <span class="pf-v6-c-button__icon">
1005
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
1006
+ </span>
850
1007
  </button>
851
1008
  </div>
852
1009
  </div>
@@ -878,19 +1035,23 @@ cssPrefix: pf-v6-c-text-input-group
878
1035
  type="button"
879
1036
  aria-label="Clear input"
880
1037
  >
881
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1038
+ <span class="pf-v6-c-button__icon">
1039
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1040
+ </span>
882
1041
  </button>
883
1042
  </div>
884
1043
  </div>
885
1044
  </div>
886
1045
  <div class="pf-v6-c-input-group__item">
887
1046
  <button
888
- class="pf-v6-c-button pf-m-control pf-m-expanded"
1047
+ class="pf-v6-c-button pf-m-expanded pf-m-control"
889
1048
  type="button"
890
1049
  aria-expanded="true"
891
1050
  aria-label="Advanced search"
892
1051
  >
893
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1052
+ <span class="pf-v6-c-button__icon">
1053
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1054
+ </span>
894
1055
  </button>
895
1056
  </div>
896
1057
  <div class="pf-v6-c-input-group__item">
@@ -899,7 +1060,9 @@ cssPrefix: pf-v6-c-text-input-group
899
1060
  type="submit"
900
1061
  aria-label="Search"
901
1062
  >
902
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1063
+ <span class="pf-v6-c-button__icon">
1064
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
1065
+ </span>
903
1066
  </button>
904
1067
  </div>
905
1068
  </div>
@@ -980,8 +1143,12 @@ cssPrefix: pf-v6-c-text-input-group
980
1143
  </div>
981
1144
  <div class="pf-v6-c-form__group pf-m-action">
982
1145
  <div class="pf-v6-c-form__actions">
983
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
984
- <button class="pf-v6-c-button pf-m-link" type="reset">Reset</button>
1146
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1147
+ <span class="pf-v6-c-button__text">Submit</span>
1148
+ </button>
1149
+ <button class="pf-v6-c-button pf-m-link" type="reset">
1150
+ <span class="pf-v6-c-button__text">Reset</span>
1151
+ </button>
985
1152
  </div>
986
1153
  </div>
987
1154
  </form>
@@ -1014,7 +1181,9 @@ cssPrefix: pf-v6-c-text-input-group
1014
1181
  type="button"
1015
1182
  aria-label="Clear input"
1016
1183
  >
1017
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1184
+ <span class="pf-v6-c-button__icon">
1185
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1186
+ </span>
1018
1187
  </button>
1019
1188
  </div>
1020
1189
  </div>
@@ -1080,7 +1249,9 @@ cssPrefix: pf-v6-c-text-input-group
1080
1249
  type="button"
1081
1250
  aria-label="Clear input"
1082
1251
  >
1083
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1252
+ <span class="pf-v6-c-button__icon">
1253
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1254
+ </span>
1084
1255
  </button>
1085
1256
  </div>
1086
1257
  </div>
@@ -1127,19 +1298,23 @@ cssPrefix: pf-v6-c-text-input-group
1127
1298
  type="button"
1128
1299
  aria-label="Clear input"
1129
1300
  >
1130
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1301
+ <span class="pf-v6-c-button__icon">
1302
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1303
+ </span>
1131
1304
  </button>
1132
1305
  </div>
1133
1306
  </div>
1134
1307
  </div>
1135
1308
  <div class="pf-v6-c-input-group__item">
1136
1309
  <button
1137
- class="pf-v6-c-button pf-m-control pf-m-expanded"
1310
+ class="pf-v6-c-button pf-m-expanded pf-m-control"
1138
1311
  type="button"
1139
1312
  aria-expanded="true"
1140
1313
  aria-label="Advanced search"
1141
1314
  >
1142
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1315
+ <span class="pf-v6-c-button__icon">
1316
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1317
+ </span>
1143
1318
  </button>
1144
1319
  </div>
1145
1320
  <div class="pf-v6-c-input-group__item">
@@ -1148,7 +1323,9 @@ cssPrefix: pf-v6-c-text-input-group
1148
1323
  type="submit"
1149
1324
  aria-label="Search"
1150
1325
  >
1151
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1326
+ <span class="pf-v6-c-button__icon">
1327
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
1328
+ </span>
1152
1329
  </button>
1153
1330
  </div>
1154
1331
  </div>
@@ -1229,8 +1406,12 @@ cssPrefix: pf-v6-c-text-input-group
1229
1406
  </div>
1230
1407
  <div class="pf-v6-c-form__group pf-m-action">
1231
1408
  <div class="pf-v6-c-form__actions">
1232
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1233
- <button class="pf-v6-c-button pf-m-link" type="reset">Reset</button>
1409
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1410
+ <span class="pf-v6-c-button__text">Submit</span>
1411
+ </button>
1412
+ <button class="pf-v6-c-button pf-m-link" type="reset">
1413
+ <span class="pf-v6-c-button__text">Reset</span>
1414
+ </button>
1234
1415
  </div>
1235
1416
  </div>
1236
1417
  </form>
@@ -1275,3 +1456,13 @@ cssPrefix: pf-v6-c-text-input-group
1275
1456
  </div>
1276
1457
 
1277
1458
  ```
1459
+
1460
+ ### Usage
1461
+
1462
+ | Class | Applied to | Outcome |
1463
+ | -- | -- | -- |
1464
+ | `.pf-m-success` | `.pf-v6-c-text-input-group` | Applies success validation styling. |
1465
+ | `.pf-m-warning` | `.pf-v6-c-text-input-group` | Applies warning validation styling. |
1466
+ | `.pf-m-error` | `.pf-v6-c-text-input-group` | Applies error validation styling. |
1467
+ | `.pf-m-icon` | `.pf-v6-c-text-input-group__main` | Applies styling when icons are included in the container. |
1468
+ | `.pf-m-status` | `.pf-v6-c-text-input-group__icon` | Applies status styling to the icon, matching the status modifier applied to `.pf-v6-c-text-input-group`. |