@patternfly/react-core 6.0.0-alpha.73 → 6.0.0-alpha.74

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 (269) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/AboutModal/package.json +1 -1
  5. package/dist/dynamic/components/Accordion/package.json +1 -1
  6. package/dist/dynamic/components/ActionList/package.json +1 -1
  7. package/dist/dynamic/components/Alert/package.json +1 -1
  8. package/dist/dynamic/components/Avatar/package.json +1 -1
  9. package/dist/dynamic/components/BackToTop/package.json +1 -1
  10. package/dist/dynamic/components/Backdrop/package.json +1 -1
  11. package/dist/dynamic/components/BackgroundImage/package.json +1 -1
  12. package/dist/dynamic/components/Badge/package.json +1 -1
  13. package/dist/dynamic/components/Banner/package.json +1 -1
  14. package/dist/dynamic/components/Brand/package.json +1 -1
  15. package/dist/dynamic/components/Breadcrumb/package.json +1 -1
  16. package/dist/dynamic/components/Button/package.json +1 -1
  17. package/dist/dynamic/components/CalendarMonth/package.json +1 -1
  18. package/dist/dynamic/components/Card/package.json +1 -1
  19. package/dist/dynamic/components/Checkbox/package.json +1 -1
  20. package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
  21. package/dist/dynamic/components/CodeBlock/package.json +1 -1
  22. package/dist/dynamic/components/Content/package.json +8 -0
  23. package/dist/dynamic/components/DataList/package.json +1 -1
  24. package/dist/dynamic/components/DatePicker/package.json +1 -1
  25. package/dist/dynamic/components/DescriptionList/package.json +1 -1
  26. package/dist/dynamic/components/Divider/package.json +1 -1
  27. package/dist/dynamic/components/Drawer/package.json +1 -1
  28. package/dist/dynamic/components/Dropdown/package.json +1 -1
  29. package/dist/dynamic/components/DualListSelector/package.json +1 -1
  30. package/dist/dynamic/components/EmptyState/package.json +1 -1
  31. package/dist/dynamic/components/ExpandableSection/package.json +1 -1
  32. package/dist/dynamic/components/FileUpload/package.json +1 -1
  33. package/dist/dynamic/components/Form/package.json +1 -1
  34. package/dist/dynamic/components/FormSelect/package.json +1 -1
  35. package/dist/dynamic/components/HelperText/package.json +1 -1
  36. package/dist/dynamic/components/Hint/package.json +1 -1
  37. package/dist/dynamic/components/Icon/package.json +1 -1
  38. package/dist/dynamic/components/InputGroup/package.json +1 -1
  39. package/dist/dynamic/components/JumpLinks/package.json +1 -1
  40. package/dist/dynamic/components/Label/package.json +1 -1
  41. package/dist/dynamic/components/List/package.json +1 -1
  42. package/dist/dynamic/components/LoginPage/package.json +1 -1
  43. package/dist/dynamic/components/Masthead/package.json +1 -1
  44. package/dist/dynamic/components/Menu/package.json +1 -1
  45. package/dist/dynamic/components/MenuToggle/package.json +1 -1
  46. package/dist/dynamic/components/Modal/package.json +1 -1
  47. package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
  48. package/dist/dynamic/components/Nav/package.json +1 -1
  49. package/dist/dynamic/components/NotificationBadge/package.json +1 -1
  50. package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
  51. package/dist/dynamic/components/NumberInput/package.json +1 -1
  52. package/dist/dynamic/components/OverflowMenu/package.json +1 -1
  53. package/dist/dynamic/components/Page/package.json +1 -1
  54. package/dist/dynamic/components/Pagination/package.json +1 -1
  55. package/dist/dynamic/components/Panel/package.json +1 -1
  56. package/dist/dynamic/components/Popover/package.json +1 -1
  57. package/dist/dynamic/components/Progress/package.json +1 -1
  58. package/dist/dynamic/components/ProgressStepper/package.json +1 -1
  59. package/dist/dynamic/components/Radio/package.json +1 -1
  60. package/dist/dynamic/components/SearchInput/package.json +1 -1
  61. package/dist/dynamic/components/Select/package.json +1 -1
  62. package/dist/dynamic/components/Sidebar/package.json +1 -1
  63. package/dist/dynamic/components/SimpleList/package.json +1 -1
  64. package/dist/dynamic/components/Skeleton/package.json +1 -1
  65. package/dist/dynamic/components/SkipToContent/package.json +1 -1
  66. package/dist/dynamic/components/Slider/package.json +1 -1
  67. package/dist/dynamic/components/Spinner/package.json +1 -1
  68. package/dist/dynamic/components/Switch/package.json +1 -1
  69. package/dist/dynamic/components/Tabs/package.json +1 -1
  70. package/dist/dynamic/components/TextArea/package.json +1 -1
  71. package/dist/dynamic/components/TextInput/package.json +1 -1
  72. package/dist/dynamic/components/TextInputGroup/package.json +1 -1
  73. package/dist/dynamic/components/Tile/package.json +1 -1
  74. package/dist/dynamic/components/TimePicker/package.json +1 -1
  75. package/dist/dynamic/components/Timestamp/package.json +1 -1
  76. package/dist/dynamic/components/Title/package.json +1 -1
  77. package/dist/dynamic/components/ToggleGroup/package.json +1 -1
  78. package/dist/dynamic/components/Toolbar/package.json +1 -1
  79. package/dist/dynamic/components/Tooltip/package.json +1 -1
  80. package/dist/dynamic/components/TreeView/package.json +1 -1
  81. package/dist/dynamic/components/Truncate/package.json +1 -1
  82. package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
  83. package/dist/dynamic/components/Wizard/package.json +1 -1
  84. package/dist/dynamic/deprecated/components/Chip/package.json +1 -1
  85. package/dist/dynamic/deprecated/components/DragDrop/package.json +1 -1
  86. package/dist/dynamic/deprecated/components/DualListSelector/package.json +1 -1
  87. package/dist/dynamic/deprecated/components/Modal/package.json +1 -1
  88. package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
  89. package/dist/dynamic/deprecated/components/package.json +1 -1
  90. package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
  91. package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
  92. package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
  93. package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
  94. package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
  95. package/dist/dynamic/helpers/constants/package.json +1 -1
  96. package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
  97. package/dist/dynamic/helpers/fileUtils/package.json +1 -1
  98. package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
  99. package/dist/dynamic/helpers/package.json +1 -1
  100. package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
  101. package/dist/dynamic/helpers/typeUtils/package.json +1 -1
  102. package/dist/dynamic/helpers/useInterval/package.json +1 -1
  103. package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
  104. package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
  105. package/dist/dynamic/helpers/util/package.json +1 -1
  106. package/dist/dynamic/layouts/Bullseye/package.json +1 -1
  107. package/dist/dynamic/layouts/Flex/package.json +1 -1
  108. package/dist/dynamic/layouts/Gallery/package.json +1 -1
  109. package/dist/dynamic/layouts/Grid/package.json +1 -1
  110. package/dist/dynamic/layouts/Level/package.json +1 -1
  111. package/dist/dynamic/layouts/Split/package.json +1 -1
  112. package/dist/dynamic/layouts/Stack/package.json +1 -1
  113. package/dist/dynamic/styles/package.json +1 -1
  114. package/dist/dynamic-modules.json +11 -11
  115. package/dist/esm/components/{Text/Text.d.ts → Content/Content.d.ts} +17 -8
  116. package/dist/esm/components/Content/Content.d.ts.map +1 -0
  117. package/dist/esm/components/{Text/Text.js → Content/Content.js} +22 -5
  118. package/dist/esm/components/Content/Content.js.map +1 -0
  119. package/dist/esm/components/Content/TextContent.d.ts.map +1 -0
  120. package/dist/esm/components/Content/TextContent.js.map +1 -0
  121. package/dist/esm/components/Content/TextList.d.ts.map +1 -0
  122. package/dist/esm/components/Content/TextList.js.map +1 -0
  123. package/dist/esm/components/Content/TextListItem.d.ts.map +1 -0
  124. package/dist/esm/components/Content/TextListItem.js.map +1 -0
  125. package/dist/esm/components/{Text → Content}/index.d.ts +1 -1
  126. package/dist/esm/components/Content/index.d.ts.map +1 -0
  127. package/dist/esm/components/{Text → Content}/index.js +1 -1
  128. package/dist/esm/components/Content/index.js.map +1 -0
  129. package/dist/esm/components/Wizard/WizardBody.d.ts +4 -2
  130. package/dist/esm/components/Wizard/WizardBody.d.ts.map +1 -1
  131. package/dist/esm/components/Wizard/WizardBody.js +4 -2
  132. package/dist/esm/components/Wizard/WizardBody.js.map +1 -1
  133. package/dist/esm/components/Wizard/WizardFooter.d.ts +6 -3
  134. package/dist/esm/components/Wizard/WizardFooter.d.ts.map +1 -1
  135. package/dist/esm/components/Wizard/WizardFooter.js +17 -11
  136. package/dist/esm/components/Wizard/WizardFooter.js.map +1 -1
  137. package/dist/esm/components/Wizard/WizardHeader.d.ts +3 -1
  138. package/dist/esm/components/Wizard/WizardHeader.d.ts.map +1 -1
  139. package/dist/esm/components/Wizard/WizardHeader.js +11 -7
  140. package/dist/esm/components/Wizard/WizardHeader.js.map +1 -1
  141. package/dist/esm/components/Wizard/WizardNav.d.ts +3 -1
  142. package/dist/esm/components/Wizard/WizardNav.d.ts.map +1 -1
  143. package/dist/esm/components/Wizard/WizardNav.js +5 -3
  144. package/dist/esm/components/Wizard/WizardNav.js.map +1 -1
  145. package/dist/esm/components/Wizard/WizardNavItem.d.ts +4 -2
  146. package/dist/esm/components/Wizard/WizardNavItem.d.ts.map +1 -1
  147. package/dist/esm/components/Wizard/WizardNavItem.js +7 -5
  148. package/dist/esm/components/Wizard/WizardNavItem.js.map +1 -1
  149. package/dist/esm/components/index.d.ts +1 -1
  150. package/dist/esm/components/index.d.ts.map +1 -1
  151. package/dist/esm/components/index.js +1 -1
  152. package/dist/esm/components/index.js.map +1 -1
  153. package/dist/js/components/{Text/Text.d.ts → Content/Content.d.ts} +17 -8
  154. package/dist/js/components/Content/Content.d.ts.map +1 -0
  155. package/dist/js/components/{Text/Text.js → Content/Content.js} +22 -5
  156. package/dist/js/components/Content/Content.js.map +1 -0
  157. package/dist/js/components/Content/TextContent.d.ts.map +1 -0
  158. package/dist/js/components/Content/TextContent.js.map +1 -0
  159. package/dist/js/components/Content/TextList.d.ts.map +1 -0
  160. package/dist/js/components/Content/TextList.js.map +1 -0
  161. package/dist/js/components/Content/TextListItem.d.ts.map +1 -0
  162. package/dist/js/components/Content/TextListItem.js.map +1 -0
  163. package/dist/js/components/{Text → Content}/index.d.ts +1 -1
  164. package/dist/js/components/Content/index.d.ts.map +1 -0
  165. package/dist/js/components/{Text → Content}/index.js +1 -1
  166. package/dist/js/components/Content/index.js.map +1 -0
  167. package/dist/js/components/Wizard/WizardBody.d.ts +4 -2
  168. package/dist/js/components/Wizard/WizardBody.d.ts.map +1 -1
  169. package/dist/js/components/Wizard/WizardBody.js +3 -2
  170. package/dist/js/components/Wizard/WizardBody.js.map +1 -1
  171. package/dist/js/components/Wizard/WizardFooter.d.ts +6 -3
  172. package/dist/js/components/Wizard/WizardFooter.d.ts.map +1 -1
  173. package/dist/js/components/Wizard/WizardFooter.js +17 -11
  174. package/dist/js/components/Wizard/WizardFooter.js.map +1 -1
  175. package/dist/js/components/Wizard/WizardHeader.d.ts +3 -1
  176. package/dist/js/components/Wizard/WizardHeader.d.ts.map +1 -1
  177. package/dist/js/components/Wizard/WizardHeader.js +10 -7
  178. package/dist/js/components/Wizard/WizardHeader.js.map +1 -1
  179. package/dist/js/components/Wizard/WizardNav.d.ts +3 -1
  180. package/dist/js/components/Wizard/WizardNav.d.ts.map +1 -1
  181. package/dist/js/components/Wizard/WizardNav.js +4 -3
  182. package/dist/js/components/Wizard/WizardNav.js.map +1 -1
  183. package/dist/js/components/Wizard/WizardNavItem.d.ts +4 -2
  184. package/dist/js/components/Wizard/WizardNavItem.d.ts.map +1 -1
  185. package/dist/js/components/Wizard/WizardNavItem.js +6 -5
  186. package/dist/js/components/Wizard/WizardNavItem.js.map +1 -1
  187. package/dist/js/components/index.d.ts +1 -1
  188. package/dist/js/components/index.d.ts.map +1 -1
  189. package/dist/js/components/index.js +1 -1
  190. package/dist/js/components/index.js.map +1 -1
  191. package/dist/umd/assets/{output-rAmU2c74.css → output-HdwVDZgF.css} +1909 -1909
  192. package/dist/umd/react-core.min.js +3 -3
  193. package/helpers/package.json +1 -1
  194. package/layouts/package.json +1 -1
  195. package/next/package.json +1 -1
  196. package/package.json +2 -2
  197. package/src/components/{Text/Text.tsx → Content/Content.tsx} +53 -13
  198. package/src/components/{Text/__tests__/Text.test.tsx → Content/__tests__/Content.test.tsx} +3 -3
  199. package/src/components/{Text/__tests__/__snapshots__/Text.test.tsx.snap → Content/__tests__/__snapshots__/Content.test.tsx.snap} +3 -3
  200. package/src/components/Content/examples/Content.md +64 -0
  201. package/src/components/{Text/examples/TextBody.tsx → Content/examples/ContentBody.tsx} +1 -1
  202. package/src/components/{Text/examples/TextDescriptionList.tsx → Content/examples/ContentDescriptionList.tsx} +1 -1
  203. package/src/components/{Text/examples/TextHeadings.tsx → Content/examples/ContentHeadings.tsx} +1 -1
  204. package/src/components/{Text/examples/TextOrderedList.tsx → Content/examples/ContentOrderedList.tsx} +1 -1
  205. package/src/components/{Text/examples/TextPlainList.tsx → Content/examples/ContentPlainList.tsx} +1 -1
  206. package/src/components/{Text/examples/TextUnorderedList.tsx → Content/examples/ContentUnorderedList.tsx} +1 -1
  207. package/src/components/{Text/examples/TextVisited.tsx → Content/examples/ContentVisited.tsx} +1 -1
  208. package/src/components/{Text/examples/TextContentWrapped.tsx → Content/examples/ContentWrapper.tsx} +1 -1
  209. package/src/components/{Text → Content}/index.ts +1 -1
  210. package/src/components/Text/examples/Text.md +1 -57
  211. package/src/components/Wizard/WizardBody.tsx +8 -3
  212. package/src/components/Wizard/WizardFooter.tsx +13 -6
  213. package/src/components/Wizard/WizardHeader.tsx +7 -3
  214. package/src/components/Wizard/WizardNav.tsx +9 -4
  215. package/src/components/Wizard/WizardNavItem.tsx +12 -4
  216. package/src/components/Wizard/__tests__/WizardBody.test.tsx +25 -8
  217. package/src/components/Wizard/__tests__/WizardFooter.test.tsx +9 -0
  218. package/src/components/Wizard/__tests__/WizardHeader.test.tsx +51 -0
  219. package/src/components/Wizard/__tests__/WizardNav.test.tsx +46 -0
  220. package/src/components/Wizard/__tests__/WizardNavItem.test.tsx +61 -0
  221. package/src/components/index.ts +1 -1
  222. package/dist/dynamic/components/Text/package.json +0 -8
  223. package/dist/esm/components/Text/Text.d.ts.map +0 -1
  224. package/dist/esm/components/Text/Text.js.map +0 -1
  225. package/dist/esm/components/Text/TextContent.d.ts.map +0 -1
  226. package/dist/esm/components/Text/TextContent.js.map +0 -1
  227. package/dist/esm/components/Text/TextList.d.ts.map +0 -1
  228. package/dist/esm/components/Text/TextList.js.map +0 -1
  229. package/dist/esm/components/Text/TextListItem.d.ts.map +0 -1
  230. package/dist/esm/components/Text/TextListItem.js.map +0 -1
  231. package/dist/esm/components/Text/index.d.ts.map +0 -1
  232. package/dist/esm/components/Text/index.js.map +0 -1
  233. package/dist/js/components/Text/Text.d.ts.map +0 -1
  234. package/dist/js/components/Text/Text.js.map +0 -1
  235. package/dist/js/components/Text/TextContent.d.ts.map +0 -1
  236. package/dist/js/components/Text/TextContent.js.map +0 -1
  237. package/dist/js/components/Text/TextList.d.ts.map +0 -1
  238. package/dist/js/components/Text/TextList.js.map +0 -1
  239. package/dist/js/components/Text/TextListItem.d.ts.map +0 -1
  240. package/dist/js/components/Text/TextListItem.js.map +0 -1
  241. package/dist/js/components/Text/index.d.ts.map +0 -1
  242. package/dist/js/components/Text/index.js.map +0 -1
  243. /package/dist/esm/components/{Text → Content}/TextContent.d.ts +0 -0
  244. /package/dist/esm/components/{Text → Content}/TextContent.js +0 -0
  245. /package/dist/esm/components/{Text → Content}/TextList.d.ts +0 -0
  246. /package/dist/esm/components/{Text → Content}/TextList.js +0 -0
  247. /package/dist/esm/components/{Text → Content}/TextListItem.d.ts +0 -0
  248. /package/dist/esm/components/{Text → Content}/TextListItem.js +0 -0
  249. /package/dist/js/components/{Text → Content}/TextContent.d.ts +0 -0
  250. /package/dist/js/components/{Text → Content}/TextContent.js +0 -0
  251. /package/dist/js/components/{Text → Content}/TextList.d.ts +0 -0
  252. /package/dist/js/components/{Text → Content}/TextList.js +0 -0
  253. /package/dist/js/components/{Text → Content}/TextListItem.d.ts +0 -0
  254. /package/dist/js/components/{Text → Content}/TextListItem.js +0 -0
  255. /package/src/components/{Text → Content}/TextContent.tsx +0 -0
  256. /package/src/components/{Text → Content}/TextList.tsx +0 -0
  257. /package/src/components/{Text → Content}/TextListItem.tsx +0 -0
  258. /package/src/components/{Text → Content}/__tests__/Generated/TextContent.test.tsx +0 -0
  259. /package/src/components/{Text → Content}/__tests__/Generated/TextList.test.tsx +0 -0
  260. /package/src/components/{Text → Content}/__tests__/Generated/TextListItem.test.tsx +0 -0
  261. /package/src/components/{Text → Content}/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap +0 -0
  262. /package/src/components/{Text → Content}/__tests__/Generated/__snapshots__/TextList.test.tsx.snap +0 -0
  263. /package/src/components/{Text → Content}/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap +0 -0
  264. /package/src/components/{Text → Content}/__tests__/TextContent.test.tsx +0 -0
  265. /package/src/components/{Text → Content}/__tests__/TextList.test.tsx +0 -0
  266. /package/src/components/{Text → Content}/__tests__/TextListItem.test.tsx +0 -0
  267. /package/src/components/{Text → Content}/__tests__/__snapshots__/TextContent.test.tsx.snap +0 -0
  268. /package/src/components/{Text → Content}/__tests__/__snapshots__/TextList.test.tsx.snap +0 -0
  269. /package/src/components/{Text → Content}/__tests__/__snapshots__/TextListItem.test.tsx.snap +0 -0
@@ -706,6 +706,26 @@
706
706
  box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow);
707
707
  }
708
708
 
709
+ :where(:root, .pf-v6-c-backdrop) {
710
+ --pf-v6-c-backdrop--Position: fixed;
711
+ --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
712
+ --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
713
+ }
714
+
715
+ .pf-v6-c-backdrop {
716
+ position: var(--pf-v6-c-backdrop--Position);
717
+ inset-block-start: 0;
718
+ inset-inline-start: 0;
719
+ z-index: var(--pf-v6-c-backdrop--ZIndex);
720
+ width: 100%;
721
+ height: 100%;
722
+ background-color: var(--pf-v6-c-backdrop--BackgroundColor);
723
+ }
724
+
725
+ .pf-v6-c-backdrop__open {
726
+ overflow: hidden;
727
+ }
728
+
709
729
  :where(:root, .pf-v6-c-background-image) {
710
730
  --pf-v6-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default);
711
731
  --pf-v6-c-background-image--BackgroundImage: none;
@@ -734,26 +754,6 @@
734
754
  --pf-v6-c-background-image--BackgroundPosition: bottom left;
735
755
  }
736
756
 
737
- :where(:root, .pf-v6-c-backdrop) {
738
- --pf-v6-c-backdrop--Position: fixed;
739
- --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
740
- --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
741
- }
742
-
743
- .pf-v6-c-backdrop {
744
- position: var(--pf-v6-c-backdrop--Position);
745
- inset-block-start: 0;
746
- inset-inline-start: 0;
747
- z-index: var(--pf-v6-c-backdrop--ZIndex);
748
- width: 100%;
749
- height: 100%;
750
- background-color: var(--pf-v6-c-backdrop--BackgroundColor);
751
- }
752
-
753
- .pf-v6-c-backdrop__open {
754
- overflow: hidden;
755
- }
756
-
757
757
  :where(:root, .pf-v6-c-badge) {
758
758
  --pf-v6-c-badge--BorderColor: transparent;
759
759
  --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -2598,179 +2598,300 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2598
2598
  font-family: var(--pf-v6-c-code-block__code--FontFamily, inherit);
2599
2599
  }
2600
2600
 
2601
- @media screen and (min-width: 768px) {
2602
- .pf-v6-c-data-list:not([class*=pf-m-grid]) {
2603
- --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
2604
- --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
2605
- --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
2606
- --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
2607
- --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
2608
- --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
2609
- --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
2610
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
2611
- }
2612
- }
2613
- @media screen and (min-width: 768px) and (min-width: 1200px) {
2614
- .pf-v6-c-data-list:not([class*=pf-m-grid]) {
2615
- --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
2616
- --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
2617
- --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
2618
- --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
2619
- }
2601
+ :where(:root, .pf-v6-c-content) {
2602
+ --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
2603
+ --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
2604
+ --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
2605
+ --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body);
2606
+ --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
2607
+ --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
2608
+ --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
2609
+ --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2610
+ --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
2611
+ --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
2612
+ --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
2613
+ --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
2614
+ --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2615
+ --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
2616
+ --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
2617
+ --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
2618
+ --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
2619
+ --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2620
+ --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
2621
+ --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
2622
+ --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
2623
+ --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
2624
+ --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2625
+ --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
2626
+ --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
2627
+ --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
2628
+ --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
2629
+ --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2630
+ --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
2631
+ --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
2632
+ --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
2633
+ --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
2634
+ --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2635
+ --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
2636
+ --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
2637
+ --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
2638
+ --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
2639
+ --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
2640
+ --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
2641
+ --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
2642
+ --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
2643
+ --pf-v6-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
2644
+ --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
2645
+ --pf-v6-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
2646
+ --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
2647
+ --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
2648
+ --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2649
+ --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
2650
+ --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
2651
+ --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
2652
+ --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2653
+ --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
2654
+ --pf-v6-c-content--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2655
+ --pf-v6-c-content--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
2656
+ --pf-v6-c-content--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
2657
+ --pf-v6-c-content--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
2658
+ --pf-v6-c-content--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2659
+ --pf-v6-c-content--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
2660
+ --pf-v6-c-content--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
2661
+ --pf-v6-c-content--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
2662
+ --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
2663
+ --pf-v6-c-content--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
2664
+ --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
2665
+ --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
2666
+ --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
2667
+ --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
2668
+ --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
2669
+ --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
2670
+ --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
2620
2671
  }
2621
- @media screen and (min-width: 768px) {
2622
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__item-content {
2623
- display: flex;
2624
- flex-grow: 1;
2625
- flex-wrap: wrap;
2626
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
2627
- }
2628
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
2629
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
2630
- }
2631
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
2632
- flex: 1;
2633
- order: initial;
2634
- }
2635
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-align-right {
2636
- margin-inline-start: auto;
2637
- }
2638
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-no-fill {
2639
- flex: none;
2640
- }
2641
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-2 {
2642
- flex-grow: 2;
2643
- }
2644
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-3 {
2645
- flex-grow: 3;
2646
- }
2647
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-4 {
2648
- flex-grow: 4;
2649
- }
2650
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-5 {
2651
- flex-grow: 5;
2652
- }
2653
- .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__expandable-content {
2654
- max-height: initial;
2655
- overflow-y: visible;
2656
- }
2672
+
2673
+ .pf-v6-c-content {
2674
+ font-size: var(--pf-v6-c-content--FontSize);
2675
+ line-height: var(--pf-v6-c-content--LineHeight);
2676
+ color: var(--pf-v6-c-content--Color);
2657
2677
  }
2658
- @media screen and (min-width: 0) {
2659
- .pf-v6-c-data-list.pf-m-grid-none {
2660
- --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
2661
- --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
2662
- --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
2663
- --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
2664
- --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
2665
- --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
2666
- --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
2667
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
2668
- }
2678
+
2679
+ :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
2680
+ color: var(--pf-v6-c-content--a--Color);
2681
+ text-decoration: var(--pf-v6-c-content--a--TextDecoration);
2669
2682
  }
2670
- @media screen and (min-width: 0) and (min-width: 1200px) {
2671
- .pf-v6-c-data-list.pf-m-grid-none {
2672
- --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
2673
- --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
2674
- --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
2675
- --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
2676
- }
2683
+
2684
+ :is(.pf-v6-c-content--a, .pf-v6-c-content a):hover {
2685
+ --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
2686
+ --pf-v6-c-content--a--TextDecoration: var(--pf-v6-c-content--a--hover--TextDecoration);
2677
2687
  }
2678
- @media screen and (min-width: 0) {
2679
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__item-content {
2680
- display: flex;
2681
- flex-grow: 1;
2682
- flex-wrap: wrap;
2683
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
2684
- }
2685
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
2686
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
2687
- }
2688
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
2689
- flex: 1;
2690
- order: initial;
2691
- }
2692
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-align-right {
2693
- margin-inline-start: auto;
2694
- }
2695
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-no-fill {
2696
- flex: none;
2697
- }
2698
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-2 {
2699
- flex-grow: 2;
2700
- }
2701
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-3 {
2702
- flex-grow: 3;
2703
- }
2704
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-4 {
2705
- flex-grow: 4;
2706
- }
2707
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-5 {
2708
- flex-grow: 5;
2709
- }
2710
- .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__expandable-content {
2711
- max-height: initial;
2712
- overflow-y: visible;
2713
- }
2688
+
2689
+ :is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
2690
+ color: var(--pf-v6-c-content--a--visited--Color);
2714
2691
  }
2715
- @media screen and (min-width: 576px) {
2716
- .pf-v6-c-data-list.pf-m-grid-sm {
2717
- --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
2718
- --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
2719
- --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
2720
- --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
2721
- --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
2722
- --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
2723
- --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
2724
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
2725
- }
2692
+
2693
+ :is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
2694
+ margin-block-start: var(--pf-v6-c-content--li--MarginBlockStart);
2726
2695
  }
2727
- @media screen and (min-width: 576px) and (min-width: 1200px) {
2728
- .pf-v6-c-data-list.pf-m-grid-sm {
2729
- --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
2730
- --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
2731
- --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
2732
- --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
2733
- }
2696
+
2697
+ :is(.pf-v6-c-content--p,
2698
+ .pf-v6-c-content--dl,
2699
+ .pf-v6-c-content--ol,
2700
+ .pf-v6-c-content--ul,
2701
+ .pf-v6-c-content--blockquote,
2702
+ .pf-v6-c-content--small,
2703
+ .pf-v6-c-content--pre,
2704
+ .pf-v6-c-content--table,
2705
+ .pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
2706
+ margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
2707
+ }
2708
+
2709
+ :is(.pf-v6-c-content--h1,
2710
+ .pf-v6-c-content--h2,
2711
+ .pf-v6-c-content--h3,
2712
+ .pf-v6-c-content--h4,
2713
+ .pf-v6-c-content--h5,
2714
+ .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) {
2715
+ margin: 0;
2716
+ font-family: var(--pf-v6-c-content--heading--FontFamily);
2717
+ }
2718
+
2719
+ :is(.pf-v6-c-content--h1,
2720
+ .pf-v6-c-content--h2,
2721
+ .pf-v6-c-content--h3,
2722
+ .pf-v6-c-content--h4,
2723
+ .pf-v6-c-content--h5,
2724
+ .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child {
2725
+ margin-block-start: 0;
2726
+ }
2727
+
2728
+ :is(.pf-v6-c-content--h1,
2729
+ .pf-v6-c-content--h2,
2730
+ .pf-v6-c-content--h3,
2731
+ .pf-v6-c-content--h4,
2732
+ .pf-v6-c-content--h5,
2733
+ .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
2734
+ margin-block-end: 0;
2735
+ }
2736
+
2737
+ :is(.pf-v6-c-content--ol,
2738
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
2739
+ margin: 0;
2740
+ }
2741
+
2742
+ :is(.pf-v6-c-content--ol,
2743
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
2744
+ padding-inline-start: 0;
2745
+ margin-inline-start: 0;
2746
+ list-style: none;
2747
+ }
2748
+
2749
+ :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
2750
+ margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
2751
+ margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
2752
+ font-size: var(--pf-v6-c-content--h1--FontSize);
2753
+ font-weight: var(--pf-v6-c-content--h1--FontWeight);
2754
+ line-height: var(--pf-v6-c-content--h1--LineHeight);
2755
+ }
2756
+
2757
+ :is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
2758
+ margin-block-start: var(--pf-v6-c-content--h2--MarginBlockStart);
2759
+ margin-block-end: var(--pf-v6-c-content--h2--MarginBlockEnd);
2760
+ font-size: var(--pf-v6-c-content--h2--FontSize);
2761
+ font-weight: var(--pf-v6-c-content--h2--FontWeight);
2762
+ line-height: var(--pf-v6-c-content--h2--LineHeight);
2763
+ }
2764
+
2765
+ :is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
2766
+ margin-block-start: var(--pf-v6-c-content--h3--MarginBlockStart);
2767
+ margin-block-end: var(--pf-v6-c-content--h3--MarginBlockEnd);
2768
+ font-size: var(--pf-v6-c-content--h3--FontSize);
2769
+ font-weight: var(--pf-v6-c-content--h3--FontWeight);
2770
+ line-height: var(--pf-v6-c-content--h3--LineHeight);
2771
+ }
2772
+
2773
+ :is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
2774
+ margin-block-start: var(--pf-v6-c-content--h4--MarginBlockStart);
2775
+ margin-block-end: var(--pf-v6-c-content--h4--MarginBlockEnd);
2776
+ font-size: var(--pf-v6-c-content--h4--FontSize);
2777
+ font-weight: var(--pf-v6-c-content--h4--FontWeight);
2778
+ line-height: var(--pf-v6-c-content--h4--LineHeight);
2779
+ }
2780
+
2781
+ :is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
2782
+ margin-block-start: var(--pf-v6-c-content--h5--MarginBlockStart);
2783
+ margin-block-end: var(--pf-v6-c-content--h5--MarginBlockEnd);
2784
+ font-size: var(--pf-v6-c-content--h5--FontSize);
2785
+ font-weight: var(--pf-v6-c-content--h5--FontWeight);
2786
+ line-height: var(--pf-v6-c-content--h5--LineHeight);
2787
+ }
2788
+
2789
+ :is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
2790
+ margin-block-start: var(--pf-v6-c-content--h6--MarginBlockStart);
2791
+ margin-block-end: var(--pf-v6-c-content--h6--MarginBlockEnd);
2792
+ font-size: var(--pf-v6-c-content--h6--FontSize);
2793
+ font-weight: var(--pf-v6-c-content--h6--FontWeight);
2794
+ line-height: var(--pf-v6-c-content--h6--LineHeight);
2795
+ }
2796
+
2797
+ :is(.pf-v6-c-content--small, .pf-v6-c-content small) {
2798
+ display: block;
2799
+ font-size: var(--pf-v6-c-content--small--FontSize);
2800
+ line-height: var(--pf-v6-c-content--small--LineHeight);
2801
+ color: var(--pf-v6-c-content--small--Color);
2802
+ }
2803
+
2804
+ :is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
2805
+ margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd);
2806
+ }
2807
+
2808
+ :is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
2809
+ padding-block-start: var(--pf-v6-c-content--blockquote--PaddingBlockStart);
2810
+ padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBlockEnd);
2811
+ padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingInlineStart);
2812
+ padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingInlineEnd);
2813
+ color: var(--pf-v6-c-content--blockquote--Color);
2814
+ border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor);
2815
+ }
2816
+
2817
+ :is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
2818
+ height: var(--pf-v6-c-content--hr--Height);
2819
+ background-color: var(--pf-v6-c-content--hr--BackgroundColor);
2820
+ border: none;
2821
+ }
2822
+
2823
+ :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
2824
+ padding-inline-start: var(--pf-v6-c-content--ol--PaddingInlineStart);
2825
+ margin-inline-start: var(--pf-v6-c-content--ol--MarginInlineStart);
2826
+ }
2827
+
2828
+ :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
2829
+ ul) {
2830
+ --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
2831
+ margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
2832
+ }
2833
+
2834
+ :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
2835
+ ol) {
2836
+ --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
2837
+ margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
2838
+ }
2839
+
2840
+ :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
2841
+ padding-inline-start: var(--pf-v6-c-content--ul--PaddingInlineStart);
2842
+ margin-inline-start: var(--pf-v6-c-content--ul--MarginInlineStart);
2843
+ list-style: var(--pf-v6-c-content--ul--ListStyle);
2844
+ }
2845
+
2846
+ :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
2847
+ ul) {
2848
+ --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
2849
+ margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
2850
+ }
2851
+
2852
+ :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
2853
+ ol) {
2854
+ --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
2855
+ margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
2734
2856
  }
2857
+
2858
+ :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
2859
+ display: grid;
2860
+ grid-template-columns: 1fr;
2861
+ }
2862
+
2735
2863
  @media screen and (min-width: 576px) {
2736
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__item-content {
2737
- display: flex;
2738
- flex-grow: 1;
2739
- flex-wrap: wrap;
2740
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
2741
- }
2742
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
2743
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
2744
- }
2745
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
2746
- flex: 1;
2747
- order: initial;
2748
- }
2749
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-align-right {
2750
- margin-inline-start: auto;
2751
- }
2752
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-no-fill {
2753
- flex: none;
2754
- }
2755
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-2 {
2756
- flex-grow: 2;
2757
- }
2758
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-3 {
2759
- flex-grow: 3;
2864
+ :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
2865
+ grid-template: auto/auto 1fr;
2866
+ grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
2867
+ grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
2760
2868
  }
2761
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-4 {
2762
- flex-grow: 4;
2869
+ }
2870
+ :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
2871
+ font-weight: var(--pf-v6-c-content--dt--FontWeight);
2872
+ }
2873
+
2874
+ :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
2875
+ margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart);
2876
+ }
2877
+
2878
+ @media screen and (min-width: 576px) {
2879
+ :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
2880
+ --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart);
2763
2881
  }
2764
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-5 {
2765
- flex-grow: 5;
2882
+ }
2883
+ @media screen and (min-width: 576px) {
2884
+ :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
2885
+ grid-column: 1;
2766
2886
  }
2767
- .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__expandable-content {
2768
- max-height: initial;
2769
- overflow-y: visible;
2887
+ }
2888
+ @media screen and (min-width: 576px) {
2889
+ :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
2890
+ grid-column: 2;
2770
2891
  }
2771
2892
  }
2772
2893
  @media screen and (min-width: 768px) {
2773
- .pf-v6-c-data-list.pf-m-grid-md {
2894
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) {
2774
2895
  --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
2775
2896
  --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
2776
2897
  --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
@@ -2782,7 +2903,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2782
2903
  }
2783
2904
  }
2784
2905
  @media screen and (min-width: 768px) and (min-width: 1200px) {
2785
- .pf-v6-c-data-list.pf-m-grid-md {
2906
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) {
2786
2907
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
2787
2908
  --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
2788
2909
  --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
@@ -2790,44 +2911,44 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2790
2911
  }
2791
2912
  }
2792
2913
  @media screen and (min-width: 768px) {
2793
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__item-content {
2914
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__item-content {
2794
2915
  display: flex;
2795
2916
  flex-grow: 1;
2796
2917
  flex-wrap: wrap;
2797
2918
  padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
2798
2919
  }
2799
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
2920
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
2800
2921
  margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
2801
2922
  }
2802
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
2923
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
2803
2924
  flex: 1;
2804
2925
  order: initial;
2805
2926
  }
2806
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-align-right {
2927
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-align-right {
2807
2928
  margin-inline-start: auto;
2808
2929
  }
2809
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-no-fill {
2930
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-no-fill {
2810
2931
  flex: none;
2811
2932
  }
2812
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-2 {
2933
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-2 {
2813
2934
  flex-grow: 2;
2814
2935
  }
2815
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-3 {
2936
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-3 {
2816
2937
  flex-grow: 3;
2817
2938
  }
2818
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-4 {
2939
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-4 {
2819
2940
  flex-grow: 4;
2820
2941
  }
2821
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-5 {
2942
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-5 {
2822
2943
  flex-grow: 5;
2823
2944
  }
2824
- .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__expandable-content {
2945
+ .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__expandable-content {
2825
2946
  max-height: initial;
2826
2947
  overflow-y: visible;
2827
2948
  }
2828
2949
  }
2829
- @media screen and (min-width: 992px) {
2830
- .pf-v6-c-data-list.pf-m-grid-lg {
2950
+ @media screen and (min-width: 0) {
2951
+ .pf-v6-c-data-list.pf-m-grid-none {
2831
2952
  --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
2832
2953
  --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
2833
2954
  --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
@@ -2838,17 +2959,188 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2838
2959
  --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
2839
2960
  }
2840
2961
  }
2841
- @media screen and (min-width: 992px) and (min-width: 1200px) {
2842
- .pf-v6-c-data-list.pf-m-grid-lg {
2962
+ @media screen and (min-width: 0) and (min-width: 1200px) {
2963
+ .pf-v6-c-data-list.pf-m-grid-none {
2843
2964
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
2844
2965
  --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
2845
2966
  --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
2846
2967
  --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
2847
2968
  }
2848
2969
  }
2849
- @media screen and (min-width: 992px) {
2850
- .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__item-content {
2851
- display: flex;
2970
+ @media screen and (min-width: 0) {
2971
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__item-content {
2972
+ display: flex;
2973
+ flex-grow: 1;
2974
+ flex-wrap: wrap;
2975
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
2976
+ }
2977
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
2978
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
2979
+ }
2980
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
2981
+ flex: 1;
2982
+ order: initial;
2983
+ }
2984
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-align-right {
2985
+ margin-inline-start: auto;
2986
+ }
2987
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-no-fill {
2988
+ flex: none;
2989
+ }
2990
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-2 {
2991
+ flex-grow: 2;
2992
+ }
2993
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-3 {
2994
+ flex-grow: 3;
2995
+ }
2996
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-4 {
2997
+ flex-grow: 4;
2998
+ }
2999
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-5 {
3000
+ flex-grow: 5;
3001
+ }
3002
+ .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__expandable-content {
3003
+ max-height: initial;
3004
+ overflow-y: visible;
3005
+ }
3006
+ }
3007
+ @media screen and (min-width: 576px) {
3008
+ .pf-v6-c-data-list.pf-m-grid-sm {
3009
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
3010
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
3011
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
3012
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
3013
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
3014
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
3015
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
3016
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
3017
+ }
3018
+ }
3019
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
3020
+ .pf-v6-c-data-list.pf-m-grid-sm {
3021
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
3022
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
3023
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
3024
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
3025
+ }
3026
+ }
3027
+ @media screen and (min-width: 576px) {
3028
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__item-content {
3029
+ display: flex;
3030
+ flex-grow: 1;
3031
+ flex-wrap: wrap;
3032
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
3033
+ }
3034
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
3035
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
3036
+ }
3037
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
3038
+ flex: 1;
3039
+ order: initial;
3040
+ }
3041
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-align-right {
3042
+ margin-inline-start: auto;
3043
+ }
3044
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-no-fill {
3045
+ flex: none;
3046
+ }
3047
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-2 {
3048
+ flex-grow: 2;
3049
+ }
3050
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-3 {
3051
+ flex-grow: 3;
3052
+ }
3053
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-4 {
3054
+ flex-grow: 4;
3055
+ }
3056
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-5 {
3057
+ flex-grow: 5;
3058
+ }
3059
+ .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__expandable-content {
3060
+ max-height: initial;
3061
+ overflow-y: visible;
3062
+ }
3063
+ }
3064
+ @media screen and (min-width: 768px) {
3065
+ .pf-v6-c-data-list.pf-m-grid-md {
3066
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
3067
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
3068
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
3069
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
3070
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
3071
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
3072
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
3073
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
3074
+ }
3075
+ }
3076
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
3077
+ .pf-v6-c-data-list.pf-m-grid-md {
3078
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
3079
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
3080
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
3081
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
3082
+ }
3083
+ }
3084
+ @media screen and (min-width: 768px) {
3085
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__item-content {
3086
+ display: flex;
3087
+ flex-grow: 1;
3088
+ flex-wrap: wrap;
3089
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
3090
+ }
3091
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
3092
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
3093
+ }
3094
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
3095
+ flex: 1;
3096
+ order: initial;
3097
+ }
3098
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-align-right {
3099
+ margin-inline-start: auto;
3100
+ }
3101
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-no-fill {
3102
+ flex: none;
3103
+ }
3104
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-2 {
3105
+ flex-grow: 2;
3106
+ }
3107
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-3 {
3108
+ flex-grow: 3;
3109
+ }
3110
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-4 {
3111
+ flex-grow: 4;
3112
+ }
3113
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-5 {
3114
+ flex-grow: 5;
3115
+ }
3116
+ .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__expandable-content {
3117
+ max-height: initial;
3118
+ overflow-y: visible;
3119
+ }
3120
+ }
3121
+ @media screen and (min-width: 992px) {
3122
+ .pf-v6-c-data-list.pf-m-grid-lg {
3123
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
3124
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
3125
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
3126
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
3127
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
3128
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
3129
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
3130
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
3131
+ }
3132
+ }
3133
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
3134
+ .pf-v6-c-data-list.pf-m-grid-lg {
3135
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
3136
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
3137
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
3138
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
3139
+ }
3140
+ }
3141
+ @media screen and (min-width: 992px) {
3142
+ .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__item-content {
3143
+ display: flex;
2852
3144
  flex-grow: 1;
2853
3145
  flex-wrap: wrap;
2854
3146
  padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
@@ -6994,84 +7286,6 @@ select ~ .pf-v6-c-form-control__utilities {
6994
7286
  transform: translateY(calc(-50% - 0.5 * var(--pf-v6-c-icon__content--svg--VerticalAlign)));
6995
7287
  }
6996
7288
 
6997
- :where(:root, .pf-v6-c-input-group) {
6998
- --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--xs);
6999
- --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
7000
- --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
7001
- --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
7002
- --pf-v6-c-input-group__item--BackgroundColor: transparent;
7003
- --pf-v6-c-input-group__item--AlignItems: start;
7004
- --pf-v6-c-input-group__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7005
- --pf-v6-c-input-group__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7006
- --pf-v6-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
7007
- --pf-v6-c-input-group__item--m-box--BorderWidth: var(--pf-v6-c-input-group__item--BorderWidth--base);
7008
- --pf-v6-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
7009
- --pf-v6-c-input-group__item--m-box--BorderBlockStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
7010
- --pf-v6-c-input-group__item--m-box--BorderInlineEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
7011
- --pf-v6-c-input-group__item--m-box--BorderBlockEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
7012
- --pf-v6-c-input-group__item--m-box--BorderInlineStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
7013
- --pf-v6-c-input-group__item--m-plain--BackgroundColor: transparent;
7014
- --pf-v6-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
7015
- --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
7016
- --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
7017
- --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7018
- }
7019
-
7020
- .pf-v6-c-input-group {
7021
- display: flex;
7022
- gap: var(--pf-v6-c-input-group--Gap);
7023
- width: 100%;
7024
- }
7025
-
7026
- .pf-v6-c-input-group__item {
7027
- position: relative;
7028
- display: flex;
7029
- align-items: var(--pf-v6-c-input-group__item--AlignItems);
7030
- min-width: var(--pf-v6-c-input-group__item--MinWidth, revert);
7031
- max-width: var(--pf-v6-c-input-group__item--MaxWidth, revert);
7032
- background-color: var(--pf-v6-c-input-group__item--BackgroundColor);
7033
- border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
7034
- border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
7035
- border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
7036
- border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
7037
- }
7038
-
7039
- .pf-v6-c-input-group__item.pf-m-box {
7040
- --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-box--BackgroundColor);
7041
- padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingInlineStart);
7042
- padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingInlineEnd);
7043
- border: var(--pf-v6-c-input-group__item--m-box--BorderWidth) solid;
7044
- border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
7045
- border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
7046
- border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
7047
- border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
7048
- border-radius: var(--pf-v6-c-input-group__item--m-box--BorderRadius);
7049
- }
7050
-
7051
- .pf-v6-c-input-group__item.pf-m-plain {
7052
- --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-plain--BackgroundColor);
7053
- border: none;
7054
- }
7055
-
7056
- .pf-v6-c-input-group__item.pf-m-disabled {
7057
- --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-disabled--BackgroundColor);
7058
- --pf-v6-c-input-group__text--Color: var(--pf-v6-c-input-group__item--m-disabled__text--Color);
7059
- }
7060
-
7061
- .pf-v6-c-input-group__item.pf-m-fill {
7062
- flex-grow: 1;
7063
- }
7064
-
7065
- .pf-v6-c-input-group__text {
7066
- align-self: center;
7067
- font-size: var(--pf-v6-c-input-group__text--FontSize);
7068
- color: var(--pf-v6-c-input-group__text--Color);
7069
- }
7070
-
7071
- label.pf-v6-c-input-group__text {
7072
- cursor: pointer;
7073
- }
7074
-
7075
7289
  :where(:root, .pf-v6-c-jump-links) {
7076
7290
  --pf-v6-c-jump-links__list--Display: flex;
7077
7291
  --pf-v6-c-jump-links__list--PaddingBlockStart: 0;
@@ -7705,10 +7919,88 @@ label.pf-v6-c-input-group__text {
7705
7919
  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
7706
7920
  }
7707
7921
  }
7708
- :where(:root, .pf-v6-c-label) {
7709
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7710
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7711
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
7922
+ :where(:root, .pf-v6-c-input-group) {
7923
+ --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--xs);
7924
+ --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
7925
+ --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
7926
+ --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
7927
+ --pf-v6-c-input-group__item--BackgroundColor: transparent;
7928
+ --pf-v6-c-input-group__item--AlignItems: start;
7929
+ --pf-v6-c-input-group__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7930
+ --pf-v6-c-input-group__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7931
+ --pf-v6-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
7932
+ --pf-v6-c-input-group__item--m-box--BorderWidth: var(--pf-v6-c-input-group__item--BorderWidth--base);
7933
+ --pf-v6-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
7934
+ --pf-v6-c-input-group__item--m-box--BorderBlockStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
7935
+ --pf-v6-c-input-group__item--m-box--BorderInlineEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
7936
+ --pf-v6-c-input-group__item--m-box--BorderBlockEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
7937
+ --pf-v6-c-input-group__item--m-box--BorderInlineStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
7938
+ --pf-v6-c-input-group__item--m-plain--BackgroundColor: transparent;
7939
+ --pf-v6-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
7940
+ --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
7941
+ --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
7942
+ --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7943
+ }
7944
+
7945
+ .pf-v6-c-input-group {
7946
+ display: flex;
7947
+ gap: var(--pf-v6-c-input-group--Gap);
7948
+ width: 100%;
7949
+ }
7950
+
7951
+ .pf-v6-c-input-group__item {
7952
+ position: relative;
7953
+ display: flex;
7954
+ align-items: var(--pf-v6-c-input-group__item--AlignItems);
7955
+ min-width: var(--pf-v6-c-input-group__item--MinWidth, revert);
7956
+ max-width: var(--pf-v6-c-input-group__item--MaxWidth, revert);
7957
+ background-color: var(--pf-v6-c-input-group__item--BackgroundColor);
7958
+ border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
7959
+ border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
7960
+ border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
7961
+ border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
7962
+ }
7963
+
7964
+ .pf-v6-c-input-group__item.pf-m-box {
7965
+ --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-box--BackgroundColor);
7966
+ padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingInlineStart);
7967
+ padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingInlineEnd);
7968
+ border: var(--pf-v6-c-input-group__item--m-box--BorderWidth) solid;
7969
+ border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
7970
+ border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
7971
+ border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
7972
+ border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
7973
+ border-radius: var(--pf-v6-c-input-group__item--m-box--BorderRadius);
7974
+ }
7975
+
7976
+ .pf-v6-c-input-group__item.pf-m-plain {
7977
+ --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-plain--BackgroundColor);
7978
+ border: none;
7979
+ }
7980
+
7981
+ .pf-v6-c-input-group__item.pf-m-disabled {
7982
+ --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-disabled--BackgroundColor);
7983
+ --pf-v6-c-input-group__text--Color: var(--pf-v6-c-input-group__item--m-disabled__text--Color);
7984
+ }
7985
+
7986
+ .pf-v6-c-input-group__item.pf-m-fill {
7987
+ flex-grow: 1;
7988
+ }
7989
+
7990
+ .pf-v6-c-input-group__text {
7991
+ align-self: center;
7992
+ font-size: var(--pf-v6-c-input-group__text--FontSize);
7993
+ color: var(--pf-v6-c-input-group__text--Color);
7994
+ }
7995
+
7996
+ label.pf-v6-c-input-group__text {
7997
+ cursor: pointer;
7998
+ }
7999
+
8000
+ :where(:root, .pf-v6-c-label) {
8001
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
8002
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
8003
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
7712
8004
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7713
8005
  --pf-v6-c-label--MaxWidth: 100%;
7714
8006
  --pf-v6-c-label--BorderWidth: 0;
@@ -9208,1096 +9500,1096 @@ ul.pf-v6-c-list {
9208
9500
  padding-inline-end: var(--pf-t--global--spacer--2xl);
9209
9501
  }
9210
9502
 
9211
- :where(:root, .pf-v6-c-menu-toggle) {
9212
- --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
9213
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9214
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9215
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9216
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9217
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
9218
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
9219
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
9220
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
9221
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
9222
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
9223
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
9224
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--button--default);
9225
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
9226
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9227
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
9228
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
9229
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
9230
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
9231
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--button--default);
9232
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
9233
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9234
- --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-t--global--background--color--control--default);
9235
- --pf-v6-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
9236
- --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--clicked);
9237
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
9238
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
9239
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
9240
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
9241
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9242
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
9243
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
9244
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9245
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9246
- --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
9247
- --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9248
- --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
9249
- --pf-v6-c-menu-toggle--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9250
- --pf-v6-c-menu-toggle--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9251
- --pf-v6-c-menu-toggle--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
9252
- --pf-v6-c-menu-toggle--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9253
- --pf-v6-c-menu-toggle--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9254
- --pf-v6-c-menu-toggle--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
9255
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
9256
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
9257
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
9258
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
9259
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
9260
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
9261
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
9262
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
9263
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
9264
- --pf-v6-c-menu-toggle--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--clicked);
9265
- --pf-v6-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
9266
- --pf-v6-c-menu-toggle--m-primary--active--BorderColor: transparent;
9267
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
9268
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
9269
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
9270
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
9271
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
9272
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
9273
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
9274
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
9275
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
9276
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
9277
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
9278
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
9279
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
9280
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
9281
- --pf-v6-c-menu-toggle--m-secondary--active--Color: var(--pf-t--global--text--color--brand--clicked);
9282
- --pf-v6-c-menu-toggle--m-secondary--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
9283
- --pf-v6-c-menu-toggle--m-secondary--active--BorderColor: var(--pf-t--global--border--color--brand--clicked);
9284
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
9285
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
9286
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
9287
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
9288
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
9289
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
9290
- --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
9291
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9292
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9293
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
9294
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
9295
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--button--default);
9296
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
9297
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
9298
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
9299
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
9300
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
9301
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
9302
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
9303
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
9304
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
9305
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
9306
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
9307
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9308
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9309
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
9310
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
9311
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9312
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
9313
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
9314
- --pf-v6-c-menu-toggle--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
9315
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
9316
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
9317
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
9318
- --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9319
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
9320
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
9321
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
9322
- --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
9323
- --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
9324
- --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
9325
- --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
9326
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
9327
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
9328
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
9329
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
9330
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
9331
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
9332
- }
9333
-
9334
- .pf-v6-c-menu-toggle {
9335
- position: relative;
9336
- display: inline-flex;
9337
- column-gap: var(--pf-v6-c-menu-toggle--ColumnGap);
9338
- align-items: center;
9339
- justify-content: center;
9340
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
9341
- max-width: 100%;
9342
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
9343
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
9344
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
9345
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
9346
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
9347
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
9348
- color: var(--pf-v6-c-menu-toggle--Color);
9349
- cursor: pointer;
9350
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
9351
- border: 0;
9352
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
9353
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
9354
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
9355
- }
9356
-
9357
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
9358
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
9359
- }
9360
-
9361
- .pf-v6-c-menu-toggle::before {
9362
- position: absolute;
9363
- inset-block-start: 0;
9364
- inset-block-end: 0;
9365
- inset-inline-start: 0;
9366
- inset-inline-end: 0;
9367
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
9368
- pointer-events: none;
9369
- content: "";
9370
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
9371
- transition: inherit;
9372
- }
9373
-
9374
- .pf-v6-c-menu-toggle.pf-m-primary {
9375
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
9376
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
9377
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
9378
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
9379
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
9380
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
9381
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
9382
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
9383
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
9384
- --pf-v6-c-menu-toggle--active--Color: var(--pf-v6-c-menu-toggle--m-primary--active--Color);
9385
- --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--active--BackgroundColor);
9386
- --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--active--BorderColor);
9387
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
9388
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
9389
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
9390
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
9391
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
9503
+ :where(:root, .pf-v6-c-menu) {
9504
+ --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
9505
+ --pf-v6-c-menu--Width: auto;
9506
+ --pf-v6-c-menu--MinWidth: auto;
9507
+ --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9508
+ --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9509
+ --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
9510
+ --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
9511
+ --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
9512
+ --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
9513
+ --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
9514
+ --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
9515
+ --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
9516
+ --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
9517
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9518
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9519
+ --pf-v6-c-menu--m-plain--BoxShadow: none;
9520
+ --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
9521
+ --pf-v6-c-menu__content--Height: auto;
9522
+ --pf-v6-c-menu__content--MaxHeight: none;
9523
+ --pf-v6-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
9524
+ --pf-v6-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9525
+ --pf-v6-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9526
+ --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
9527
+ --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9528
+ --pf-v6-c-menu__footer--BoxShadow: none;
9529
+ --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
9530
+ --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
9531
+ --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9532
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
9533
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9534
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
9535
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
9536
+ --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
9537
+ --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
9538
+ --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9539
+ --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
9540
+ --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
9541
+ --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9542
+ --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9543
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9544
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9545
+ --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
9546
+ --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
9547
+ --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body);
9548
+ --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular);
9549
+ --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9550
+ --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
9551
+ --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9552
+ --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9553
+ --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9554
+ --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9555
+ --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9556
+ --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9557
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9558
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9559
+ --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
9560
+ --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
9561
+ --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9562
+ --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9563
+ --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9564
+ --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9565
+ --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9566
+ --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9567
+ --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
9568
+ --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
9569
+ --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
9570
+ --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
9571
+ --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
9572
+ --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
9573
+ --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
9574
+ --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
9575
+ --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
9576
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
9577
+ --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default);
9578
+ --pf-v6-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default);
9579
+ --pf-v6-c-menu--m-flyout__menu--top-offset: 0px;
9580
+ --pf-v6-c-menu--m-flyout__menu--left-offset: 0px;
9581
+ --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px;
9582
+ --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
9583
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
9584
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto;
9585
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto;
9586
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
9587
+ --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
9588
+ --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
9589
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
9590
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9591
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
9592
+ --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
9593
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9594
+ --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
9595
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9596
+ --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
9597
+ --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
9392
9598
  }
9393
9599
 
9394
- .pf-v6-c-menu-toggle.pf-m-secondary {
9395
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
9396
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
9397
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
9398
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
9399
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
9400
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
9401
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
9402
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
9403
- --pf-v6-c-menu-toggle--active--Color: var(--pf-v6-c-menu-toggle--m-secondary--active--Color);
9404
- --pf-v6-c-menu-toggle--active--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--active--BorderWidth);
9405
- --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--active--BorderColor);
9406
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
9407
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
9408
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
9409
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
9600
+ .pf-v6-c-menu__content,
9601
+ .pf-v6-c-menu__list-item,
9602
+ .pf-v6-c-menu__item-main,
9603
+ .pf-v6-c-menu__breadcrumb,
9604
+ .pf-v6-c-menu__item-check,
9605
+ .pf-v6-c-menu__item-action,
9606
+ .pf-v6-c-menu__item-action-icon {
9607
+ display: flex;
9410
9608
  }
9411
9609
 
9412
- .pf-v6-c-menu-toggle.pf-m-full-height {
9413
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
9414
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
9415
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
9416
- align-items: center;
9417
- height: 100%;
9610
+ .pf-v6-c-menu__list,
9611
+ .pf-v6-c-menu__group {
9612
+ --pf-v6-hidden-visible--visible--Display: grid;
9613
+ --pf-v6-hidden-visible--hidden--Display: none;
9614
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9615
+ display: var(--pf-v6-hidden-visible--Display);
9418
9616
  }
9419
9617
 
9420
- .pf-v6-c-menu-toggle.pf-m-full-width {
9421
- width: 100%;
9618
+ .pf-v6-c-menu__list.pf-m-hidden,
9619
+ .pf-v6-c-menu__group.pf-m-hidden {
9620
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9422
9621
  }
9423
9622
 
9424
- .pf-v6-c-menu-toggle.pf-m-plain {
9425
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
9426
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
9427
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
9428
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
9429
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
9430
- --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--active--BackgroundColor);
9431
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
9432
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
9433
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
9623
+ @media screen and (min-width: 576px) {
9624
+ .pf-v6-c-menu__list.pf-m-hidden-on-sm,
9625
+ .pf-v6-c-menu__group.pf-m-hidden-on-sm {
9626
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9627
+ }
9628
+ .pf-v6-c-menu__list.pf-m-visible-on-sm,
9629
+ .pf-v6-c-menu__group.pf-m-visible-on-sm {
9630
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9631
+ }
9434
9632
  }
9435
-
9436
- .pf-v6-c-menu-toggle.pf-m-plain::before {
9437
- border: none;
9633
+ @media screen and (min-width: 768px) {
9634
+ .pf-v6-c-menu__list.pf-m-hidden-on-md,
9635
+ .pf-v6-c-menu__group.pf-m-hidden-on-md {
9636
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9637
+ }
9638
+ .pf-v6-c-menu__list.pf-m-visible-on-md,
9639
+ .pf-v6-c-menu__group.pf-m-visible-on-md {
9640
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9641
+ }
9438
9642
  }
9439
-
9440
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
9441
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
9442
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
9443
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
9444
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
9445
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
9643
+ @media screen and (min-width: 992px) {
9644
+ .pf-v6-c-menu__list.pf-m-hidden-on-lg,
9645
+ .pf-v6-c-menu__group.pf-m-hidden-on-lg {
9646
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9647
+ }
9648
+ .pf-v6-c-menu__list.pf-m-visible-on-lg,
9649
+ .pf-v6-c-menu__group.pf-m-visible-on-lg {
9650
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9651
+ }
9446
9652
  }
9447
-
9448
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
9449
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
9450
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
9451
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
9452
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
9453
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
9653
+ @media screen and (min-width: 1200px) {
9654
+ .pf-v6-c-menu__list.pf-m-hidden-on-xl,
9655
+ .pf-v6-c-menu__group.pf-m-hidden-on-xl {
9656
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9657
+ }
9658
+ .pf-v6-c-menu__list.pf-m-visible-on-xl,
9659
+ .pf-v6-c-menu__group.pf-m-visible-on-xl {
9660
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9661
+ }
9454
9662
  }
9455
-
9456
- .pf-v6-c-menu-toggle:is(:active, .pf-m-active) {
9457
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--active--Color);
9458
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--active--BackgroundColor);
9459
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--active--BorderWidth);
9460
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--active--BorderColor);
9461
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--active__toggle-icon--Color);
9663
+ @media screen and (min-width: 1450px) {
9664
+ .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
9665
+ .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
9666
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9667
+ }
9668
+ .pf-v6-c-menu__list.pf-m-visible-on-2xl,
9669
+ .pf-v6-c-menu__group.pf-m-visible-on-2xl {
9670
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9671
+ }
9462
9672
  }
9463
-
9464
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
9465
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
9466
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
9673
+ .pf-v6-c-menu__list,
9674
+ .pf-v6-c-menu__list-item,
9675
+ .pf-v6-c-menu__breadcrumb,
9676
+ .pf-v6-c-menu__footer {
9677
+ position: relative;
9467
9678
  }
9468
9679
 
9469
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
9470
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
9680
+ .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]),
9681
+ .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
9682
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
9683
+ --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9684
+ --pf-v6-c-menu__item-external-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9685
+ --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9686
+ --pf-v6-c-menu__list-item--BackgroundColor: transparent;
9471
9687
  pointer-events: none;
9472
9688
  }
9473
9689
 
9474
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
9475
- border: 0;
9476
- }
9477
-
9478
- .pf-v6-c-menu-toggle.pf-m-small {
9479
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
9480
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
9481
- --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
9482
- --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
9483
- --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
9484
- }
9485
-
9486
- .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
9487
- background-color: transparent;
9690
+ [class*=pf-v6-c-menu]:is([hidden]) {
9691
+ display: none;
9488
9692
  }
9489
9693
 
9490
- .pf-v6-c-menu-toggle.pf-m-success {
9491
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
9492
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
9694
+ .pf-v6-c-menu {
9695
+ display: grid;
9696
+ row-gap: var(--pf-v6-c-menu--RowGap);
9697
+ width: var(--pf-v6-c-menu--Width);
9698
+ min-width: var(--pf-v6-c-menu--MinWidth);
9699
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
9700
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
9701
+ overflow: hidden;
9702
+ color: var(--pf-v6-c-menu--Color);
9703
+ background-color: var(--pf-v6-c-menu--BackgroundColor);
9704
+ border-radius: var(--pf-v6-c-menu--BorderRadius);
9705
+ box-shadow: var(--pf-v6-c-menu--BoxShadow);
9706
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
9707
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
9493
9708
  }
9494
9709
 
9495
- .pf-v6-c-menu-toggle.pf-m-warning {
9496
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
9497
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
9710
+ .pf-v6-c-menu .pf-v6-c-menu {
9711
+ min-width: 100%;
9498
9712
  }
9499
9713
 
9500
- .pf-v6-c-menu-toggle.pf-m-danger {
9501
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
9502
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
9714
+ .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content {
9715
+ overflow: visible;
9503
9716
  }
9504
9717
 
9505
- .pf-v6-c-menu-toggle.pf-m-split-button {
9506
- --pf-v6-c-menu-toggle--ColumnGap: 0;
9507
- padding: 0;
9718
+ .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu {
9719
+ min-width: 100%;
9720
+ border-radius: 0;
9508
9721
  }
9509
9722
 
9510
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
9511
- position: relative;
9512
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
9513
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
9514
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
9515
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
9723
+ .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content {
9724
+ overflow: visible;
9516
9725
  }
9517
9726
 
9518
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
9519
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
9520
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
9727
+ .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu {
9728
+ position: absolute;
9729
+ inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockStart);
9730
+ inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd);
9731
+ inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineStart);
9732
+ inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd);
9733
+ z-index: var(--pf-v6-c-menu--m-flyout__Zindex);
9734
+ border-radius: var(--pf-v6-c-menu--BorderRadius);
9521
9735
  }
9522
9736
 
9523
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
9524
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
9525
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
9737
+ .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu .pf-v6-c-menu__content {
9738
+ overflow-y: visible;
9526
9739
  }
9527
9740
 
9528
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
9529
- --pf-v6-c-menu-toggle--PaddingInlineEnd: 0;
9530
- --pf-v6-c-check__label--Color: currentcolor;
9531
- --pf-v6-c-check__label--disabled--Color: currentcolor;
9532
- align-items: center;
9533
- align-self: stretch;
9741
+ .pf-v6-c-menu.pf-m-top {
9742
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: auto;
9743
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: var(--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd);
9534
9744
  }
9535
9745
 
9536
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
9537
- --pf-v6-c-check__input--TranslateY: 0;
9538
- align-self: center;
9746
+ .pf-v6-c-menu.pf-m-left {
9747
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: var(--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd);
9748
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: auto;
9539
9749
  }
9540
9750
 
9541
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-plain {
9542
- --pf-v6-c-menu-toggle--BorderColor: transparent;
9751
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content {
9752
+ overflow: hidden;
9753
+ transition: var(--pf-v6-c-menu--m-drilldown__content--Transition);
9543
9754
  }
9544
9755
 
9545
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action {
9546
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
9756
+ .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) {
9757
+ padding: 0;
9547
9758
  }
9548
9759
 
9549
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
9550
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor);
9760
+ .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
9761
+ .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
9762
+ transform: translateX(-100%);
9551
9763
  }
9552
9764
 
9553
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :has(.pf-v6-c-menu-toggle__controls) {
9554
- padding-inline-end: 0;
9765
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
9766
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
9555
9767
  }
9556
9768
 
9557
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary {
9558
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor);
9769
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu {
9770
+ position: absolute;
9771
+ inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart);
9772
+ inset-inline-start: 100%;
9773
+ width: 100%;
9774
+ box-shadow: none;
9775
+ transition: var(--pf-v6-c-menu--m-drilldown--c-menu--Transition);
9559
9776
  }
9560
9777
 
9561
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])) {
9562
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor);
9778
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
9779
+ transform: translateX(-100%);
9563
9780
  }
9564
9781
 
9565
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):is(:hover, :focus) {
9566
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor);
9782
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
9783
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
9567
9784
  }
9568
9785
 
9569
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):is(:active, .pf-m-active) {
9570
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor);
9786
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
9787
+ overflow: hidden;
9788
+ visibility: visible;
9789
+ transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
9571
9790
  }
9572
9791
 
9573
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded {
9574
- --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor);
9792
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list {
9793
+ --pf-v6-c-menu__list--PaddingBlockStart: 0;
9794
+ --pf-v6-c-menu__list--PaddingBlockEnd: 0;
9575
9795
  }
9576
9796
 
9577
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary {
9578
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor);
9797
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path .pf-v6-c-menu {
9798
+ z-index: var(--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
9579
9799
  }
9580
9800
 
9581
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action:is(.pf-m-disabled, :disabled) {
9582
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor);
9801
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path > .pf-v6-c-menu {
9802
+ overflow: visible;
9583
9803
  }
9584
9804
 
9585
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action:is(.pf-m-disabled, :disabled)::before {
9586
- content: none;
9805
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static > .pf-v6-c-menu {
9806
+ position: static;
9587
9807
  }
9588
9808
 
9589
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :is(.pf-m-disabled, :disabled) {
9590
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor);
9591
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
9592
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
9809
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static:hover {
9810
+ background-color: transparent;
9593
9811
  }
9594
9812
 
9595
- .pf-v6-c-menu-toggle.pf-m-typeahead {
9596
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
9597
- --pf-v6-c-menu-toggle--ColumnGap: 0;
9598
- align-items: stretch;
9599
- padding: 0;
9813
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item:not(.pf-m-current-path) .pf-v6-c-menu {
9814
+ display: none;
9600
9815
  }
9601
9816
 
9602
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
9603
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
9817
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__item {
9818
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
9604
9819
  }
9605
9820
 
9606
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
9607
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
9608
- display: flex;
9609
- align-items: stretch;
9821
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
9822
+ overflow: visible;
9823
+ visibility: hidden;
9610
9824
  }
9611
9825
 
9612
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
9613
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
9614
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
9615
- flex: 1;
9826
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
9827
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) {
9828
+ display: none;
9616
9829
  }
9617
9830
 
9618
- .pf-v6-c-menu-toggle__button {
9619
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
9620
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
9621
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
9622
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
9623
- color: inherit;
9624
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
9625
- border: 0;
9831
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item.pf-m-current-path {
9832
+ visibility: hidden;
9626
9833
  }
9627
9834
 
9628
- .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__controls) {
9629
- padding-inline-start: 0;
9835
+ .pf-v6-c-menu.pf-m-plain {
9836
+ --pf-v6-c-menu--BoxShadow: var(--pf-v6-c-menu--m-plain--BoxShadow);
9630
9837
  }
9631
9838
 
9632
- .pf-v6-c-menu-toggle__text {
9839
+ .pf-v6-c-menu.pf-m-scrollable {
9840
+ --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
9841
+ --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
9842
+ --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
9843
+ --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
9633
9844
  overflow: hidden;
9634
- text-overflow: ellipsis;
9635
- white-space: nowrap;
9636
- min-width: 0;
9637
9845
  }
9638
9846
 
9639
- .pf-v6-c-menu-toggle__count {
9640
- display: flex;
9641
- flex-wrap: nowrap;
9847
+ .pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) {
9848
+ --pf-v6-c-menu--PaddingBlockEnd: 0;
9642
9849
  }
9643
9850
 
9644
- .pf-v6-c-menu-toggle__icon,
9645
- .pf-v6-c-menu-toggle__controls,
9646
- .pf-v6-c-menu-toggle__toggle-icon {
9647
- display: flex;
9648
- align-items: center;
9649
- justify-content: center;
9851
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content,
9852
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
9853
+ overflow-y: auto;
9650
9854
  }
9651
9855
 
9652
- .pf-v6-c-menu-toggle__icon {
9653
- flex-shrink: 0;
9654
- min-height: var(--pf-v6-c-menu-toggle__icon--MinHeight);
9856
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content {
9857
+ position: relative;
9858
+ z-index: var(--pf-v6-c-menu--ZIndex);
9859
+ margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
9860
+ margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
9861
+ overflow: hidden;
9655
9862
  }
9656
9863
 
9657
- .pf-v6-c-menu-toggle__controls {
9658
- min-width: var(--pf-v6-c-menu-toggle__controls--MinWidth);
9659
- margin-inline-start: auto;
9864
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
9865
+ padding-block-start: var(--pf-v6-c-menu--RowGap);
9866
+ padding-block-end: var(--pf-v6-c-menu--RowGap);
9660
9867
  }
9661
9868
 
9662
- .pf-v6-c-menu-toggle__toggle-icon {
9663
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
9664
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
9869
+ .pf-v6-c-menu__header {
9870
+ padding-block-start: var(--pf-v6-c-menu__header--PaddingBlockStart);
9871
+ padding-block-end: var(--pf-v6-c-menu__header--PaddingBlockEnd);
9872
+ padding-inline-start: var(--pf-v6-c-menu__header--PaddingInlineStart);
9873
+ padding-inline-end: var(--pf-v6-c-menu__header--PaddingInlineEnd);
9665
9874
  }
9666
9875
 
9667
- .pf-v6-c-menu-toggle__status-icon {
9668
- margin-inline-end: var(--pf-v6-c-menu-toggle__status-icon--MarginInlineEnd);
9669
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
9876
+ .pf-v6-c-menu__search {
9877
+ padding-block-start: var(--pf-v6-c-menu__search--PaddingBlockStart);
9878
+ padding-block-end: var(--pf-v6-c-menu__search--PaddingBlockEnd);
9879
+ padding-inline-start: var(--pf-v6-c-menu__search--PaddingInlineStart);
9880
+ padding-inline-end: var(--pf-v6-c-menu__search--PaddingInlineEnd);
9670
9881
  }
9671
9882
 
9672
- :where(:root, .pf-v6-c-menu) {
9673
- --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
9674
- --pf-v6-c-menu--Width: auto;
9675
- --pf-v6-c-menu--MinWidth: auto;
9676
- --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9677
- --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9678
- --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
9679
- --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
9680
- --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
9681
- --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
9682
- --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
9683
- --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
9684
- --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
9685
- --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
9686
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9687
- --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9688
- --pf-v6-c-menu--m-plain--BoxShadow: none;
9689
- --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
9690
- --pf-v6-c-menu__content--Height: auto;
9691
- --pf-v6-c-menu__content--MaxHeight: none;
9692
- --pf-v6-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
9693
- --pf-v6-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9694
- --pf-v6-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9695
- --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
9696
- --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9697
- --pf-v6-c-menu__footer--BoxShadow: none;
9698
- --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
9699
- --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
9700
- --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9701
- --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
9702
- --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9703
- --pf-v6-c-menu__list-item--TransitionProperty: background-color;
9704
- --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
9705
- --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
9706
- --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
9707
- --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9708
- --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
9709
- --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
9710
- --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9711
- --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9712
- --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9713
- --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9714
- --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
9715
- --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
9716
- --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body);
9717
- --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular);
9718
- --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9719
- --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
9720
- --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9721
- --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9722
- --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9723
- --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9724
- --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9725
- --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9726
- --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9727
- --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9728
- --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
9729
- --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
9730
- --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9731
- --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9732
- --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9733
- --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9734
- --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9735
- --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9736
- --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
9737
- --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
9738
- --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
9739
- --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
9740
- --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
9741
- --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
9742
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
9743
- --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
9744
- --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
9745
- --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
9746
- --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default);
9747
- --pf-v6-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default);
9748
- --pf-v6-c-menu--m-flyout__menu--top-offset: 0px;
9749
- --pf-v6-c-menu--m-flyout__menu--left-offset: 0px;
9750
- --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px;
9751
- --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
9752
- --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
9753
- --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto;
9754
- --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto;
9755
- --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
9756
- --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
9757
- --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
9758
- --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
9759
- --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9760
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
9761
- --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
9762
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9763
- --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
9764
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9765
- --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
9766
- --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
9883
+ .pf-v6-c-menu__footer {
9884
+ padding-block-start: var(--pf-v6-c-menu__footer--PaddingBlockStart);
9885
+ padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
9886
+ padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
9887
+ padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
9888
+ box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
9767
9889
  }
9768
9890
 
9769
- .pf-v6-c-menu__content,
9770
- .pf-v6-c-menu__list-item,
9771
- .pf-v6-c-menu__item-main,
9772
- .pf-v6-c-menu__breadcrumb,
9773
- .pf-v6-c-menu__item-check,
9774
- .pf-v6-c-menu__item-action,
9775
- .pf-v6-c-menu__item-action-icon {
9776
- display: flex;
9891
+ .pf-v6-c-menu__content {
9892
+ flex-direction: column;
9893
+ row-gap: var(--pf-v6-c-menu__content--RowGap);
9894
+ height: var(--pf-v6-c-menu__content--Height);
9895
+ max-height: var(--pf-v6-c-menu__content--MaxHeight);
9777
9896
  }
9778
9897
 
9779
- .pf-v6-c-menu__list,
9780
- .pf-v6-c-menu__group {
9781
- --pf-v6-hidden-visible--visible--Display: grid;
9898
+ .pf-v6-c-menu__content .pf-v6-c-menu__content {
9899
+ --pf-v6-c-menu__content--Height: auto;
9900
+ }
9901
+
9902
+ .pf-v6-c-menu__list :where(.pf-v6-c-divider:is(li)) {
9903
+ margin-block-start: var(--pf-v6-c-menu__list--divider--MarginBlockStart);
9904
+ margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBlockEnd);
9905
+ }
9906
+
9907
+ .pf-v6-c-menu__list-item {
9908
+ align-items: baseline;
9909
+ min-width: 0;
9910
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
9911
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
9912
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
9913
+ }
9914
+
9915
+ .pf-v6-c-menu__list-item > * {
9916
+ position: relative;
9917
+ }
9918
+
9919
+ .pf-v6-c-menu__list-item::before {
9920
+ position: absolute;
9921
+ inset: 0;
9922
+ content: "";
9923
+ background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
9924
+ transition: inherit;
9925
+ }
9926
+
9927
+ .pf-v6-c-menu__list-item.pf-m-load {
9928
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
9929
+ }
9930
+
9931
+ .pf-v6-c-menu__list-item.pf-m-loading {
9932
+ justify-content: center;
9933
+ overflow: hidden;
9934
+ pointer-events: none;
9935
+ }
9936
+
9937
+ .pf-v6-c-menu__list-item.pf-m-loading .pf-v6-c-menu__item-text {
9938
+ text-align: center;
9939
+ }
9940
+
9941
+ .pf-v6-c-menu__list-item.pf-m-danger {
9942
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--Color);
9943
+ }
9944
+
9945
+ .pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) {
9946
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--hover--Color, var(--pf-v6-c-menu__list-item--m-danger--Color));
9947
+ }
9948
+
9949
+ .pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) {
9950
+ padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd);
9951
+ }
9952
+
9953
+ .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
9954
+ --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
9955
+ }
9956
+
9957
+ .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
9958
+ .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
9959
+ .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
9960
+ .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
9961
+ opacity: 1;
9962
+ }
9963
+
9964
+ .pf-v6-c-menu__item {
9965
+ flex-basis: 100%;
9966
+ flex-direction: column;
9967
+ min-width: 0;
9968
+ padding-block-start: var(--pf-v6-c-menu__item--PaddingBlockStart);
9969
+ padding-block-end: var(--pf-v6-c-menu__item--PaddingBlockEnd);
9970
+ padding-inline-start: var(--pf-v6-c-menu__item--PaddingInlineStart);
9971
+ padding-inline-end: var(--pf-v6-c-menu__item--PaddingInlineEnd);
9972
+ font-size: var(--pf-v6-c-menu__item--FontSize);
9973
+ font-weight: var(--pf-v6-c-menu__item--FontWeight);
9974
+ line-height: var(--pf-v6-c-menu__item--LineHeight);
9975
+ color: var(--pf-v6-c-menu__item--Color);
9976
+ text-align: start;
9977
+ text-decoration: none;
9978
+ background-color: var(--pf-v6-c-menu__item--BackgroundColor);
9979
+ border: 0;
9980
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
9981
+ --pf-v6-hidden-visible--visible--Display: flex;
9782
9982
  --pf-v6-hidden-visible--hidden--Display: none;
9783
9983
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9784
9984
  display: var(--pf-v6-hidden-visible--Display);
9785
9985
  }
9786
9986
 
9787
- .pf-v6-c-menu__list.pf-m-hidden,
9788
- .pf-v6-c-menu__group.pf-m-hidden {
9987
+ .pf-v6-c-menu__item.pf-m-hidden {
9789
9988
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9790
9989
  }
9791
9990
 
9792
9991
  @media screen and (min-width: 576px) {
9793
- .pf-v6-c-menu__list.pf-m-hidden-on-sm,
9794
- .pf-v6-c-menu__group.pf-m-hidden-on-sm {
9992
+ .pf-v6-c-menu__item.pf-m-hidden-on-sm {
9795
9993
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9796
9994
  }
9797
- .pf-v6-c-menu__list.pf-m-visible-on-sm,
9798
- .pf-v6-c-menu__group.pf-m-visible-on-sm {
9995
+ .pf-v6-c-menu__item.pf-m-visible-on-sm {
9799
9996
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9800
9997
  }
9801
9998
  }
9802
9999
  @media screen and (min-width: 768px) {
9803
- .pf-v6-c-menu__list.pf-m-hidden-on-md,
9804
- .pf-v6-c-menu__group.pf-m-hidden-on-md {
10000
+ .pf-v6-c-menu__item.pf-m-hidden-on-md {
9805
10001
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9806
10002
  }
9807
- .pf-v6-c-menu__list.pf-m-visible-on-md,
9808
- .pf-v6-c-menu__group.pf-m-visible-on-md {
10003
+ .pf-v6-c-menu__item.pf-m-visible-on-md {
9809
10004
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9810
10005
  }
9811
10006
  }
9812
10007
  @media screen and (min-width: 992px) {
9813
- .pf-v6-c-menu__list.pf-m-hidden-on-lg,
9814
- .pf-v6-c-menu__group.pf-m-hidden-on-lg {
10008
+ .pf-v6-c-menu__item.pf-m-hidden-on-lg {
9815
10009
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9816
10010
  }
9817
- .pf-v6-c-menu__list.pf-m-visible-on-lg,
9818
- .pf-v6-c-menu__group.pf-m-visible-on-lg {
10011
+ .pf-v6-c-menu__item.pf-m-visible-on-lg {
9819
10012
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9820
10013
  }
9821
10014
  }
9822
10015
  @media screen and (min-width: 1200px) {
9823
- .pf-v6-c-menu__list.pf-m-hidden-on-xl,
9824
- .pf-v6-c-menu__group.pf-m-hidden-on-xl {
10016
+ .pf-v6-c-menu__item.pf-m-hidden-on-xl {
9825
10017
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9826
10018
  }
9827
- .pf-v6-c-menu__list.pf-m-visible-on-xl,
9828
- .pf-v6-c-menu__group.pf-m-visible-on-xl {
10019
+ .pf-v6-c-menu__item.pf-m-visible-on-xl {
9829
10020
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9830
10021
  }
9831
10022
  }
9832
10023
  @media screen and (min-width: 1450px) {
9833
- .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
9834
- .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
10024
+ .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
9835
10025
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
9836
10026
  }
9837
- .pf-v6-c-menu__list.pf-m-visible-on-2xl,
9838
- .pf-v6-c-menu__group.pf-m-visible-on-2xl {
10027
+ .pf-v6-c-menu__item.pf-m-visible-on-2xl {
9839
10028
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
9840
10029
  }
9841
10030
  }
9842
- .pf-v6-c-menu__list,
9843
- .pf-v6-c-menu__list-item,
9844
- .pf-v6-c-menu__breadcrumb,
9845
- .pf-v6-c-menu__footer {
9846
- position: relative;
10031
+ :where(label).pf-v6-c-menu__item {
10032
+ cursor: pointer;
9847
10033
  }
9848
10034
 
9849
- .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]),
9850
- .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
9851
- --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
9852
- --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9853
- --pf-v6-c-menu__item-external-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9854
- --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9855
- --pf-v6-c-menu__list-item--BackgroundColor: transparent;
9856
- pointer-events: none;
10035
+ .pf-v6-c-menu__item.pf-m-selected {
10036
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
9857
10037
  }
9858
10038
 
9859
- [class*=pf-v6-c-menu]:is([hidden]) {
9860
- display: none;
10039
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
10040
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
10041
+ opacity: 1;
9861
10042
  }
9862
10043
 
9863
- .pf-v6-c-menu {
9864
- display: grid;
9865
- row-gap: var(--pf-v6-c-menu--RowGap);
9866
- width: var(--pf-v6-c-menu--Width);
9867
- min-width: var(--pf-v6-c-menu--MinWidth);
9868
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
9869
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
9870
- overflow: hidden;
9871
- color: var(--pf-v6-c-menu--Color);
9872
- background-color: var(--pf-v6-c-menu--BackgroundColor);
9873
- border-radius: var(--pf-v6-c-menu--BorderRadius);
9874
- box-shadow: var(--pf-v6-c-menu--BoxShadow);
9875
- transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
9876
- transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
10044
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
10045
+ color: var(--pf-v6-c-menu__item-external--Color);
9877
10046
  }
9878
10047
 
9879
- .pf-v6-c-menu .pf-v6-c-menu {
9880
- min-width: 100%;
10048
+ .pf-v6-c-menu__item-select-icon {
10049
+ color: var(--pf-v6-c-menu__item-select-icon--Color);
9881
10050
  }
9882
10051
 
9883
- .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content {
9884
- overflow: visible;
10052
+ .pf-v6-c-menu__item-main {
10053
+ column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
10054
+ align-items: center;
10055
+ width: 100%;
9885
10056
  }
9886
10057
 
9887
- .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu {
9888
- min-width: 100%;
9889
- border-radius: 0;
9890
- }
9891
-
9892
- .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content {
9893
- overflow: visible;
9894
- }
9895
-
9896
- .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu {
9897
- position: absolute;
9898
- inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockStart);
9899
- inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd);
9900
- inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineStart);
9901
- inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd);
9902
- z-index: var(--pf-v6-c-menu--m-flyout__Zindex);
9903
- border-radius: var(--pf-v6-c-menu--BorderRadius);
9904
- }
9905
-
9906
- .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu .pf-v6-c-menu__content {
9907
- overflow-y: visible;
10058
+ .pf-v6-c-menu__item-text {
10059
+ overflow: hidden;
10060
+ text-overflow: ellipsis;
10061
+ white-space: nowrap;
10062
+ flex-grow: 1;
9908
10063
  }
9909
10064
 
9910
- .pf-v6-c-menu.pf-m-top {
9911
- --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: auto;
9912
- --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: var(--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd);
10065
+ .pf-v6-c-menu__group-title {
10066
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
10067
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
10068
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
10069
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
10070
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
10071
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
10072
+ color: var(--pf-v6-c-menu__group-title--Color);
9913
10073
  }
9914
10074
 
9915
- .pf-v6-c-menu.pf-m-left {
9916
- --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: var(--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd);
9917
- --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: auto;
10075
+ .pf-v6-c-menu__item-description {
10076
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
10077
+ color: var(--pf-v6-c-menu__item-description--Color);
10078
+ word-break: break-word;
9918
10079
  }
9919
10080
 
9920
- .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content {
9921
- overflow: hidden;
9922
- transition: var(--pf-v6-c-menu--m-drilldown__content--Transition);
10081
+ .pf-v6-c-menu__item-check .pf-v6-c-check {
10082
+ --pf-v6-c-check__input--TranslateY: none;
9923
10083
  }
9924
10084
 
9925
- .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) {
9926
- padding: 0;
10085
+ .pf-v6-c-menu__item-toggle-icon {
10086
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
9927
10087
  }
9928
10088
 
9929
- .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
9930
- .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
9931
- transform: translateX(-100%);
10089
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
10090
+ scale: -1 1;
9932
10091
  }
9933
10092
 
9934
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
9935
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
10093
+ .pf-v6-c-menu__item-icon {
10094
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
9936
10095
  }
9937
10096
 
9938
- .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu {
9939
- position: absolute;
9940
- inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart);
9941
- inset-inline-start: 100%;
9942
- width: 100%;
9943
- box-shadow: none;
9944
- transition: var(--pf-v6-c-menu--m-drilldown--c-menu--Transition);
10097
+ .pf-v6-c-menu__item-select-icon,
10098
+ .pf-v6-c-menu__item-external-icon {
10099
+ opacity: 0;
9945
10100
  }
9946
10101
 
9947
- .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
9948
- transform: translateX(-100%);
10102
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
10103
+ .pf-v6-c-menu__item-action.pf-m-favorited,
10104
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
10105
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
10106
+ --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
10107
+ --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9949
10108
  }
9950
10109
 
9951
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
9952
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
10110
+ .pf-v6-c-menu__breadcrumb {
10111
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
10112
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
10113
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
10114
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
10115
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
9953
10116
  }
9954
10117
 
9955
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
9956
- overflow: hidden;
9957
- visibility: visible;
9958
- transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
10118
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
10119
+ min-width: auto;
10120
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
10121
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
9959
10122
  }
9960
10123
 
9961
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list {
9962
- --pf-v6-c-menu__list--PaddingBlockStart: 0;
9963
- --pf-v6-c-menu__list--PaddingBlockEnd: 0;
10124
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
10125
+ height: auto;
9964
10126
  }
9965
10127
 
9966
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path .pf-v6-c-menu {
9967
- z-index: var(--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
10128
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
10129
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
10130
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
10131
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
9968
10132
  }
9969
10133
 
9970
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path > .pf-v6-c-menu {
9971
- overflow: visible;
10134
+ :where(:root, .pf-v6-c-menu-toggle) {
10135
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
10136
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
10137
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10138
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
10139
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10140
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
10141
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
10142
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
10143
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
10144
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
10145
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
10146
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
10147
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--button--default);
10148
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
10149
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
10150
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
10151
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
10152
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
10153
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
10154
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--button--default);
10155
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
10156
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
10157
+ --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-t--global--background--color--control--default);
10158
+ --pf-v6-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
10159
+ --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--clicked);
10160
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
10161
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
10162
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
10163
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
10164
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
10165
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
10166
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
10167
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
10168
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
10169
+ --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
10170
+ --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10171
+ --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
10172
+ --pf-v6-c-menu-toggle--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10173
+ --pf-v6-c-menu-toggle--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10174
+ --pf-v6-c-menu-toggle--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
10175
+ --pf-v6-c-menu-toggle--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10176
+ --pf-v6-c-menu-toggle--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10177
+ --pf-v6-c-menu-toggle--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
10178
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
10179
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
10180
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
10181
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
10182
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
10183
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
10184
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
10185
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
10186
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
10187
+ --pf-v6-c-menu-toggle--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--clicked);
10188
+ --pf-v6-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
10189
+ --pf-v6-c-menu-toggle--m-primary--active--BorderColor: transparent;
10190
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
10191
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
10192
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
10193
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
10194
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
10195
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
10196
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
10197
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
10198
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
10199
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
10200
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
10201
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
10202
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
10203
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
10204
+ --pf-v6-c-menu-toggle--m-secondary--active--Color: var(--pf-t--global--text--color--brand--clicked);
10205
+ --pf-v6-c-menu-toggle--m-secondary--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
10206
+ --pf-v6-c-menu-toggle--m-secondary--active--BorderColor: var(--pf-t--global--border--color--brand--clicked);
10207
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
10208
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
10209
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
10210
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
10211
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10212
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10213
+ --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
10214
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10215
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10216
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
10217
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
10218
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--button--default);
10219
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
10220
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
10221
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
10222
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
10223
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
10224
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
10225
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
10226
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
10227
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
10228
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
10229
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
10230
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10231
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10232
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
10233
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
10234
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10235
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
10236
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
10237
+ --pf-v6-c-menu-toggle--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
10238
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
10239
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
10240
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
10241
+ --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10242
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
10243
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
10244
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10245
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
10246
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
10247
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
10248
+ --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
10249
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10250
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
10251
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
10252
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
10253
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
10254
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
9972
10255
  }
9973
10256
 
9974
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static > .pf-v6-c-menu {
9975
- position: static;
10257
+ .pf-v6-c-menu-toggle {
10258
+ position: relative;
10259
+ display: inline-flex;
10260
+ column-gap: var(--pf-v6-c-menu-toggle--ColumnGap);
10261
+ align-items: center;
10262
+ justify-content: center;
10263
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
10264
+ max-width: 100%;
10265
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
10266
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
10267
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
10268
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
10269
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
10270
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
10271
+ color: var(--pf-v6-c-menu-toggle--Color);
10272
+ cursor: pointer;
10273
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
10274
+ border: 0;
10275
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
10276
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
10277
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
9976
10278
  }
9977
10279
 
9978
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static:hover {
9979
- background-color: transparent;
10280
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
10281
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
9980
10282
  }
9981
10283
 
9982
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item:not(.pf-m-current-path) .pf-v6-c-menu {
9983
- display: none;
10284
+ .pf-v6-c-menu-toggle::before {
10285
+ position: absolute;
10286
+ inset-block-start: 0;
10287
+ inset-block-end: 0;
10288
+ inset-inline-start: 0;
10289
+ inset-inline-end: 0;
10290
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
10291
+ pointer-events: none;
10292
+ content: "";
10293
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
10294
+ transition: inherit;
9984
10295
  }
9985
10296
 
9986
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__item {
9987
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
10297
+ .pf-v6-c-menu-toggle.pf-m-primary {
10298
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
10299
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
10300
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
10301
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
10302
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
10303
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
10304
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
10305
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
10306
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
10307
+ --pf-v6-c-menu-toggle--active--Color: var(--pf-v6-c-menu-toggle--m-primary--active--Color);
10308
+ --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--active--BackgroundColor);
10309
+ --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--active--BorderColor);
10310
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
10311
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
10312
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
10313
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
10314
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
9988
10315
  }
9989
10316
 
9990
- .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
9991
- overflow: visible;
9992
- visibility: hidden;
10317
+ .pf-v6-c-menu-toggle.pf-m-secondary {
10318
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
10319
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
10320
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
10321
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
10322
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
10323
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
10324
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
10325
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
10326
+ --pf-v6-c-menu-toggle--active--Color: var(--pf-v6-c-menu-toggle--m-secondary--active--Color);
10327
+ --pf-v6-c-menu-toggle--active--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--active--BorderWidth);
10328
+ --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--active--BorderColor);
10329
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
10330
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
10331
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
10332
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
9993
10333
  }
9994
10334
 
9995
- .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
9996
- .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) {
9997
- display: none;
10335
+ .pf-v6-c-menu-toggle.pf-m-full-height {
10336
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
10337
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
10338
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
10339
+ align-items: center;
10340
+ height: 100%;
9998
10341
  }
9999
10342
 
10000
- .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item.pf-m-current-path {
10001
- visibility: hidden;
10343
+ .pf-v6-c-menu-toggle.pf-m-full-width {
10344
+ width: 100%;
10002
10345
  }
10003
10346
 
10004
- .pf-v6-c-menu.pf-m-plain {
10005
- --pf-v6-c-menu--BoxShadow: var(--pf-v6-c-menu--m-plain--BoxShadow);
10347
+ .pf-v6-c-menu-toggle.pf-m-plain {
10348
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
10349
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
10350
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
10351
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
10352
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
10353
+ --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--active--BackgroundColor);
10354
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
10355
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
10356
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
10006
10357
  }
10007
10358
 
10008
- .pf-v6-c-menu.pf-m-scrollable {
10009
- --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
10010
- --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
10011
- --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
10012
- --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
10013
- overflow: hidden;
10359
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
10360
+ border: none;
10014
10361
  }
10015
10362
 
10016
- .pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) {
10017
- --pf-v6-c-menu--PaddingBlockEnd: 0;
10363
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
10364
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
10365
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
10366
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
10367
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
10368
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
10018
10369
  }
10019
10370
 
10020
- .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content,
10021
- .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
10022
- overflow-y: auto;
10371
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
10372
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
10373
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
10374
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
10375
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
10376
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
10023
10377
  }
10024
10378
 
10025
- .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content {
10026
- position: relative;
10027
- z-index: var(--pf-v6-c-menu--ZIndex);
10028
- margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
10029
- margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
10030
- overflow: hidden;
10379
+ .pf-v6-c-menu-toggle:is(:active, .pf-m-active) {
10380
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--active--Color);
10381
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--active--BackgroundColor);
10382
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--active--BorderWidth);
10383
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--active--BorderColor);
10384
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--active__toggle-icon--Color);
10031
10385
  }
10032
10386
 
10033
- .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
10034
- padding-block-start: var(--pf-v6-c-menu--RowGap);
10035
- padding-block-end: var(--pf-v6-c-menu--RowGap);
10387
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
10388
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
10389
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
10036
10390
  }
10037
10391
 
10038
- .pf-v6-c-menu__header {
10039
- padding-block-start: var(--pf-v6-c-menu__header--PaddingBlockStart);
10040
- padding-block-end: var(--pf-v6-c-menu__header--PaddingBlockEnd);
10041
- padding-inline-start: var(--pf-v6-c-menu__header--PaddingInlineStart);
10042
- padding-inline-end: var(--pf-v6-c-menu__header--PaddingInlineEnd);
10392
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
10393
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
10394
+ pointer-events: none;
10043
10395
  }
10044
10396
 
10045
- .pf-v6-c-menu__search {
10046
- padding-block-start: var(--pf-v6-c-menu__search--PaddingBlockStart);
10047
- padding-block-end: var(--pf-v6-c-menu__search--PaddingBlockEnd);
10048
- padding-inline-start: var(--pf-v6-c-menu__search--PaddingInlineStart);
10049
- padding-inline-end: var(--pf-v6-c-menu__search--PaddingInlineEnd);
10397
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
10398
+ border: 0;
10050
10399
  }
10051
10400
 
10052
- .pf-v6-c-menu__footer {
10053
- padding-block-start: var(--pf-v6-c-menu__footer--PaddingBlockStart);
10054
- padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
10055
- padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
10056
- padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
10057
- box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
10401
+ .pf-v6-c-menu-toggle.pf-m-small {
10402
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
10403
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
10404
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
10405
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
10406
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
10058
10407
  }
10059
10408
 
10060
- .pf-v6-c-menu__content {
10061
- flex-direction: column;
10062
- row-gap: var(--pf-v6-c-menu__content--RowGap);
10063
- height: var(--pf-v6-c-menu__content--Height);
10064
- max-height: var(--pf-v6-c-menu__content--MaxHeight);
10409
+ .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
10410
+ background-color: transparent;
10065
10411
  }
10066
10412
 
10067
- .pf-v6-c-menu__content .pf-v6-c-menu__content {
10068
- --pf-v6-c-menu__content--Height: auto;
10413
+ .pf-v6-c-menu-toggle.pf-m-success {
10414
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
10415
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
10069
10416
  }
10070
10417
 
10071
- .pf-v6-c-menu__list :where(.pf-v6-c-divider:is(li)) {
10072
- margin-block-start: var(--pf-v6-c-menu__list--divider--MarginBlockStart);
10073
- margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBlockEnd);
10418
+ .pf-v6-c-menu-toggle.pf-m-warning {
10419
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
10420
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
10074
10421
  }
10075
10422
 
10076
- .pf-v6-c-menu__list-item {
10077
- align-items: baseline;
10078
- min-width: 0;
10079
- transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
10080
- transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
10081
- transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
10423
+ .pf-v6-c-menu-toggle.pf-m-danger {
10424
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
10425
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
10082
10426
  }
10083
10427
 
10084
- .pf-v6-c-menu__list-item > * {
10428
+ .pf-v6-c-menu-toggle.pf-m-split-button {
10429
+ --pf-v6-c-menu-toggle--ColumnGap: 0;
10430
+ padding: 0;
10431
+ }
10432
+
10433
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
10085
10434
  position: relative;
10435
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
10436
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
10437
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
10438
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
10086
10439
  }
10087
10440
 
10088
- .pf-v6-c-menu__list-item::before {
10089
- position: absolute;
10090
- inset: 0;
10091
- content: "";
10092
- background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
10093
- transition: inherit;
10441
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
10442
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
10443
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
10094
10444
  }
10095
10445
 
10096
- .pf-v6-c-menu__list-item.pf-m-load {
10097
- --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
10446
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
10447
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
10448
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
10098
10449
  }
10099
10450
 
10100
- .pf-v6-c-menu__list-item.pf-m-loading {
10101
- justify-content: center;
10102
- overflow: hidden;
10103
- pointer-events: none;
10451
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
10452
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: 0;
10453
+ --pf-v6-c-check__label--Color: currentcolor;
10454
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
10455
+ align-items: center;
10456
+ align-self: stretch;
10104
10457
  }
10105
10458
 
10106
- .pf-v6-c-menu__list-item.pf-m-loading .pf-v6-c-menu__item-text {
10107
- text-align: center;
10459
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
10460
+ --pf-v6-c-check__input--TranslateY: 0;
10461
+ align-self: center;
10108
10462
  }
10109
10463
 
10110
- .pf-v6-c-menu__list-item.pf-m-danger {
10111
- --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--Color);
10464
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-plain {
10465
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
10112
10466
  }
10113
10467
 
10114
- .pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) {
10115
- --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--hover--Color, var(--pf-v6-c-menu__list-item--m-danger--Color));
10468
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action {
10469
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
10116
10470
  }
10117
10471
 
10118
- .pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) {
10119
- padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd);
10472
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
10473
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor);
10120
10474
  }
10121
10475
 
10122
- .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
10123
- --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
10476
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :has(.pf-v6-c-menu-toggle__controls) {
10477
+ padding-inline-end: 0;
10124
10478
  }
10125
10479
 
10126
- .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
10127
- .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
10128
- .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
10129
- .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
10130
- opacity: 1;
10480
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary {
10481
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor);
10131
10482
  }
10132
10483
 
10133
- .pf-v6-c-menu__item {
10134
- flex-basis: 100%;
10135
- flex-direction: column;
10136
- min-width: 0;
10137
- padding-block-start: var(--pf-v6-c-menu__item--PaddingBlockStart);
10138
- padding-block-end: var(--pf-v6-c-menu__item--PaddingBlockEnd);
10139
- padding-inline-start: var(--pf-v6-c-menu__item--PaddingInlineStart);
10140
- padding-inline-end: var(--pf-v6-c-menu__item--PaddingInlineEnd);
10141
- font-size: var(--pf-v6-c-menu__item--FontSize);
10142
- font-weight: var(--pf-v6-c-menu__item--FontWeight);
10143
- line-height: var(--pf-v6-c-menu__item--LineHeight);
10144
- color: var(--pf-v6-c-menu__item--Color);
10145
- text-align: start;
10146
- text-decoration: none;
10147
- background-color: var(--pf-v6-c-menu__item--BackgroundColor);
10148
- border: 0;
10149
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
10150
- --pf-v6-hidden-visible--visible--Display: flex;
10151
- --pf-v6-hidden-visible--hidden--Display: none;
10152
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
10153
- display: var(--pf-v6-hidden-visible--Display);
10484
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])) {
10485
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor);
10154
10486
  }
10155
10487
 
10156
- .pf-v6-c-menu__item.pf-m-hidden {
10157
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
10488
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):is(:hover, :focus) {
10489
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor);
10158
10490
  }
10159
10491
 
10160
- @media screen and (min-width: 576px) {
10161
- .pf-v6-c-menu__item.pf-m-hidden-on-sm {
10162
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
10163
- }
10164
- .pf-v6-c-menu__item.pf-m-visible-on-sm {
10165
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
10166
- }
10167
- }
10168
- @media screen and (min-width: 768px) {
10169
- .pf-v6-c-menu__item.pf-m-hidden-on-md {
10170
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
10171
- }
10172
- .pf-v6-c-menu__item.pf-m-visible-on-md {
10173
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
10174
- }
10175
- }
10176
- @media screen and (min-width: 992px) {
10177
- .pf-v6-c-menu__item.pf-m-hidden-on-lg {
10178
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
10179
- }
10180
- .pf-v6-c-menu__item.pf-m-visible-on-lg {
10181
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
10182
- }
10183
- }
10184
- @media screen and (min-width: 1200px) {
10185
- .pf-v6-c-menu__item.pf-m-hidden-on-xl {
10186
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
10187
- }
10188
- .pf-v6-c-menu__item.pf-m-visible-on-xl {
10189
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
10190
- }
10191
- }
10192
- @media screen and (min-width: 1450px) {
10193
- .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
10194
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
10195
- }
10196
- .pf-v6-c-menu__item.pf-m-visible-on-2xl {
10197
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
10198
- }
10199
- }
10200
- :where(label).pf-v6-c-menu__item {
10201
- cursor: pointer;
10492
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):is(:active, .pf-m-active) {
10493
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor);
10202
10494
  }
10203
10495
 
10204
- .pf-v6-c-menu__item.pf-m-selected {
10205
- --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
10496
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded {
10497
+ --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor);
10206
10498
  }
10207
10499
 
10208
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
10209
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
10210
- opacity: 1;
10500
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary {
10501
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor);
10211
10502
  }
10212
10503
 
10213
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
10214
- color: var(--pf-v6-c-menu__item-external--Color);
10504
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action:is(.pf-m-disabled, :disabled) {
10505
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor);
10215
10506
  }
10216
10507
 
10217
- .pf-v6-c-menu__item-select-icon {
10218
- color: var(--pf-v6-c-menu__item-select-icon--Color);
10508
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action:is(.pf-m-disabled, :disabled)::before {
10509
+ content: none;
10219
10510
  }
10220
10511
 
10221
- .pf-v6-c-menu__item-main {
10222
- column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
10223
- align-items: center;
10224
- width: 100%;
10512
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :is(.pf-m-disabled, :disabled) {
10513
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor);
10514
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
10515
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
10225
10516
  }
10226
10517
 
10227
- .pf-v6-c-menu__item-text {
10228
- overflow: hidden;
10229
- text-overflow: ellipsis;
10230
- white-space: nowrap;
10231
- flex-grow: 1;
10518
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
10519
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
10520
+ --pf-v6-c-menu-toggle--ColumnGap: 0;
10521
+ align-items: stretch;
10522
+ padding: 0;
10232
10523
  }
10233
10524
 
10234
- .pf-v6-c-menu__group-title {
10235
- padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
10236
- padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
10237
- padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
10238
- padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
10239
- font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
10240
- font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
10241
- color: var(--pf-v6-c-menu__group-title--Color);
10525
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
10526
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
10242
10527
  }
10243
10528
 
10244
- .pf-v6-c-menu__item-description {
10245
- font-size: var(--pf-v6-c-menu__item-description--FontSize);
10246
- color: var(--pf-v6-c-menu__item-description--Color);
10247
- word-break: break-word;
10529
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
10530
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
10531
+ display: flex;
10532
+ align-items: stretch;
10248
10533
  }
10249
10534
 
10250
- .pf-v6-c-menu__item-check .pf-v6-c-check {
10251
- --pf-v6-c-check__input--TranslateY: none;
10535
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
10536
+ --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
10537
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
10538
+ flex: 1;
10252
10539
  }
10253
10540
 
10254
- .pf-v6-c-menu__item-toggle-icon {
10255
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
10541
+ .pf-v6-c-menu-toggle__button {
10542
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
10543
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
10544
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
10545
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
10546
+ color: inherit;
10547
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
10548
+ border: 0;
10256
10549
  }
10257
10550
 
10258
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
10259
- scale: -1 1;
10551
+ .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__controls) {
10552
+ padding-inline-start: 0;
10260
10553
  }
10261
10554
 
10262
- .pf-v6-c-menu__item-icon {
10263
- color: var(--pf-v6-c-menu__item--icon--Color, inherit);
10555
+ .pf-v6-c-menu-toggle__text {
10556
+ overflow: hidden;
10557
+ text-overflow: ellipsis;
10558
+ white-space: nowrap;
10559
+ min-width: 0;
10264
10560
  }
10265
10561
 
10266
- .pf-v6-c-menu__item-select-icon,
10267
- .pf-v6-c-menu__item-external-icon {
10268
- opacity: 0;
10562
+ .pf-v6-c-menu-toggle__count {
10563
+ display: flex;
10564
+ flex-wrap: nowrap;
10269
10565
  }
10270
10566
 
10271
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
10272
- .pf-v6-c-menu__item-action.pf-m-favorited,
10273
- .pf-v6-c-menu__item-action.pf-m-favorited:hover,
10274
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
10275
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
10276
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
10567
+ .pf-v6-c-menu-toggle__icon,
10568
+ .pf-v6-c-menu-toggle__controls,
10569
+ .pf-v6-c-menu-toggle__toggle-icon {
10570
+ display: flex;
10571
+ align-items: center;
10572
+ justify-content: center;
10277
10573
  }
10278
10574
 
10279
- .pf-v6-c-menu__breadcrumb {
10280
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
10281
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
10282
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
10283
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
10284
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
10575
+ .pf-v6-c-menu-toggle__icon {
10576
+ flex-shrink: 0;
10577
+ min-height: var(--pf-v6-c-menu-toggle__icon--MinHeight);
10285
10578
  }
10286
10579
 
10287
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
10288
- min-width: auto;
10289
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
10290
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
10580
+ .pf-v6-c-menu-toggle__controls {
10581
+ min-width: var(--pf-v6-c-menu-toggle__controls--MinWidth);
10582
+ margin-inline-start: auto;
10291
10583
  }
10292
10584
 
10293
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
10294
- height: auto;
10585
+ .pf-v6-c-menu-toggle__toggle-icon {
10586
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
10587
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
10295
10588
  }
10296
10589
 
10297
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
10298
- --pf-v6-c-menu-toggle--BorderWidth: 0;
10299
- --pf-v6-c-menu-toggle--BorderColor: transparent;
10300
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
10590
+ .pf-v6-c-menu-toggle__status-icon {
10591
+ margin-inline-end: var(--pf-v6-c-menu-toggle__status-icon--MarginInlineEnd);
10592
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
10301
10593
  }
10302
10594
 
10303
10595
  :where(:root, .pf-v6-c-modal-box) {
@@ -12903,84 +13195,170 @@ ul.pf-v6-c-list {
12903
13195
  margin-block-start: var(--pf-v6-c-progress__helper-text--MarginBlockStart);
12904
13196
  }
12905
13197
 
12906
- :where(:root, .pf-v6-c-progress-stepper) {
12907
- --pf-v6-c-progress-stepper--m-vertical--GridAutoFlow: row;
12908
- --pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
12909
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart: 0;
12910
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart: calc(var(--pf-v6-c-progress-stepper__step-icon--Width) / 2);
12911
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
12912
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
12913
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth: var(--pf-t--global--border--width--box--default);
12914
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
12915
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth: 0;
12916
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor: transparent;
12917
- --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
12918
- --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart: 0px;
12919
- --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd: 0;
12920
- --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd: var(--pf-t--global--spacer--xl);
12921
- --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart: var(--pf-t--global--spacer--sm);
12922
- --pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
12923
- --pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12924
- --pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
12925
- --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginBlockStart: 0;
12926
- --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineEnd: 0;
12927
- --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineStart: 0;
12928
- --pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineEnd: 0;
12929
- --pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineStart: 0;
12930
- --pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow: column;
12931
- --pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;
12932
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart: calc(var(--pf-v6-c-progress-stepper__step-icon--Height) / 2);
12933
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart: 0;
12934
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;
12935
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
12936
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth: 0;
12937
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor: unset;
12938
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12939
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
12940
- --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
12941
- --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart: var(--pf-t--global--spacer--sm);
12942
- --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd: var(--pf-t--global--spacer--sm);
12943
- --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd: 0;
12944
- --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart: 0;
12945
- --pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
12946
- --pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd: 0;
12947
- --pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
12948
- --pf-v6-c-progress-stepper--m-compact--GridAutoFlow: row;
12949
- --pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockStart: 0;
12950
- --pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockEnd: var(--pf-t--global--spacer--sm);
12951
- --pf-v6-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
12952
- --pf-v6-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
12953
- --pf-v6-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
12954
- --pf-v6-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
12955
- --pf-v6-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
12956
- --pf-v6-c-progress-stepper--m-compact__pficon--MarginBlockStart: 2px;
12957
- --pf-v6-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginBlockStart: -3px;
12958
- --pf-v6-c-progress-stepper--m-center__step-connector--before--InsetInlineStart: 50%;
12959
- --pf-v6-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
12960
- --pf-v6-c-progress-stepper--m-center__step-connector--JustifyContent: center;
12961
- --pf-v6-c-progress-stepper--m-center__step-main--MarginInlineEnd: var(--pf-t--global--spacer--xs);
12962
- --pf-v6-c-progress-stepper--m-center__step-main--MarginInlineStart: var(--pf-t--global--spacer--xs);
12963
- --pf-v6-c-progress-stepper--m-center__step-main--TextAlign: center;
12964
- --pf-v6-c-progress-stepper--m-center__step-description--MarginInlineEnd: 0;
12965
- --pf-v6-c-progress-stepper--m-center__step-description--MarginInlineStart: 0;
12966
- --pf-v6-c-progress-stepper--GridTemplateRows: auto 1fr;
12967
- --pf-v6-c-progress-stepper__step-connector--JustifyContent: flex-start;
12968
- --pf-v6-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--z-index--xs);
12969
- --pf-v6-c-progress-stepper__step-icon--Width: 1.5rem;
12970
- --pf-v6-c-progress-stepper__step-icon--Height: var(--pf-v6-c-progress-stepper__step-icon--Width);
12971
- --pf-v6-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
12972
- --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-t--global--icon--color--regular);
12973
- --pf-v6-c-progress-stepper__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12974
- --pf-v6-c-progress-stepper__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
12975
- --pf-v6-c-progress-stepper__step-icon--BorderColor: var(--pf-t--global--border--color--default);
12976
- --pf-v6-c-progress-stepper__step--m-current__step-icon--Color: var(--pf-t--global--icon--color--brand--default);
12977
- --pf-v6-c-progress-stepper__step--m-info__step-icon--Color: var(--pf-t--global--icon--color--status--info--default);
12978
- --pf-v6-c-progress-stepper__step--m-success__step-icon--Color: var(--pf-t--global--icon--color--status--success--default);
12979
- --pf-v6-c-progress-stepper__step--m-warning__step-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
12980
- --pf-v6-c-progress-stepper__step--m-danger__step-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
12981
- --pf-v6-c-progress-stepper__step--m-custom__step-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
12982
- --pf-v6-c-progress-stepper__pficon--MarginBlockStart: 3px;
12983
- --pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart: -2px;
13198
+ :where(:root, .pf-v6-c-radio) {
13199
+ --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
13200
+ --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
13201
+ --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
13202
+ --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
13203
+ --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
13204
+ --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body);
13205
+ --pf-v6-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default);
13206
+ --pf-v6-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body);
13207
+ --pf-v6-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm);
13208
+ --pf-v6-c-radio__description--Color: var(--pf-t--global--text--color--subtle);
13209
+ --pf-v6-c-radio__input--first-child--MarginInlineStart: 0.0625rem;
13210
+ --pf-v6-c-radio__input--last-child--MarginInlineEnd: 0.0625rem;
13211
+ --pf-v6-c-radio__body--MarginBlockStart: var(--pf-t--global--spacer--sm);
13212
+ --pf-v6-c-radio__input--TranslateY: calc((var(--pf-v6-c-radio__label--LineHeight) * var(--pf-v6-c-radio__label--FontSize) / 2 ) - 50%);
13213
+ }
13214
+
13215
+ .pf-v6-c-radio {
13216
+ display: grid;
13217
+ grid-template-columns: auto 1fr;
13218
+ grid-gap: var(--pf-v6-c-radio--GridGap);
13219
+ align-items: baseline;
13220
+ accent-color: var(--pf-v6-c-radio--AccentColor);
13221
+ }
13222
+
13223
+ .pf-v6-c-radio.pf-m-standalone {
13224
+ display: inline-grid;
13225
+ grid-template-columns: auto;
13226
+ height: var(--pf-v6-c-check--Height);
13227
+ }
13228
+
13229
+ .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
13230
+ align-self: center;
13231
+ transform: none;
13232
+ }
13233
+
13234
+ .pf-v6-c-radio__input {
13235
+ align-self: start;
13236
+ font-size: var(--pf-v6-c-radio__label--FontSize);
13237
+ line-height: var(--pf-v6-c-radio__label--LineHeight);
13238
+ transform: translateY(var(--pf-v6-c-radio__input--TranslateY));
13239
+ }
13240
+
13241
+ .pf-v6-c-radio__input:first-child {
13242
+ margin-inline-start: var(--pf-v6-c-radio__input--first-child--MarginInlineStart);
13243
+ }
13244
+
13245
+ .pf-v6-c-radio__input:last-child {
13246
+ margin-inline-end: var(--pf-v6-c-radio__input--last-child--MarginInlineEnd);
13247
+ }
13248
+
13249
+ .pf-v6-c-radio__label {
13250
+ font-size: var(--pf-v6-c-radio__label--FontSize);
13251
+ font-weight: var(--pf-v6-c-radio__label--FontWeight);
13252
+ line-height: var(--pf-v6-c-radio__label--LineHeight);
13253
+ color: var(--pf-v6-c-radio__label--Color);
13254
+ }
13255
+
13256
+ .pf-v6-c-radio__description {
13257
+ grid-column: 2;
13258
+ font-size: var(--pf-v6-c-radio__description--FontSize);
13259
+ color: var(--pf-v6-c-radio__description--Color);
13260
+ }
13261
+
13262
+ .pf-v6-c-radio__body {
13263
+ grid-column: 2;
13264
+ margin-block-start: var(--pf-v6-c-radio__body--MarginBlockStart);
13265
+ }
13266
+
13267
+ .pf-v6-c-radio__label,
13268
+ .pf-v6-c-radio__input {
13269
+ justify-self: start;
13270
+ }
13271
+
13272
+ label.pf-v6-c-radio, .pf-v6-c-radio__label,
13273
+ .pf-v6-c-radio__input {
13274
+ cursor: pointer;
13275
+ }
13276
+
13277
+ .pf-v6-c-radio__label:disabled, .pf-v6-c-radio__label.pf-m-disabled,
13278
+ .pf-v6-c-radio__input:disabled,
13279
+ .pf-v6-c-radio__input.pf-m-disabled {
13280
+ --pf-v6-c-radio__label--Color: var(--pf-v6-c-radio__label--disabled--Color);
13281
+ cursor: not-allowed;
13282
+ }
13283
+
13284
+ :where(:root, .pf-v6-c-progress-stepper) {
13285
+ --pf-v6-c-progress-stepper--m-vertical--GridAutoFlow: row;
13286
+ --pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
13287
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart: 0;
13288
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart: calc(var(--pf-v6-c-progress-stepper__step-icon--Width) / 2);
13289
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
13290
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
13291
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth: var(--pf-t--global--border--width--box--default);
13292
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
13293
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth: 0;
13294
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor: transparent;
13295
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
13296
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart: 0px;
13297
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd: 0;
13298
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd: var(--pf-t--global--spacer--xl);
13299
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart: var(--pf-t--global--spacer--sm);
13300
+ --pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
13301
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13302
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
13303
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginBlockStart: 0;
13304
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineEnd: 0;
13305
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineStart: 0;
13306
+ --pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineEnd: 0;
13307
+ --pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineStart: 0;
13308
+ --pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow: column;
13309
+ --pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;
13310
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart: calc(var(--pf-v6-c-progress-stepper__step-icon--Height) / 2);
13311
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart: 0;
13312
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;
13313
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
13314
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth: 0;
13315
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor: unset;
13316
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
13317
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
13318
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
13319
+ --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart: var(--pf-t--global--spacer--sm);
13320
+ --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd: var(--pf-t--global--spacer--sm);
13321
+ --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd: 0;
13322
+ --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart: 0;
13323
+ --pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
13324
+ --pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd: 0;
13325
+ --pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
13326
+ --pf-v6-c-progress-stepper--m-compact--GridAutoFlow: row;
13327
+ --pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockStart: 0;
13328
+ --pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockEnd: var(--pf-t--global--spacer--sm);
13329
+ --pf-v6-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
13330
+ --pf-v6-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
13331
+ --pf-v6-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
13332
+ --pf-v6-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
13333
+ --pf-v6-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
13334
+ --pf-v6-c-progress-stepper--m-compact__pficon--MarginBlockStart: 2px;
13335
+ --pf-v6-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginBlockStart: -3px;
13336
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--InsetInlineStart: 50%;
13337
+ --pf-v6-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
13338
+ --pf-v6-c-progress-stepper--m-center__step-connector--JustifyContent: center;
13339
+ --pf-v6-c-progress-stepper--m-center__step-main--MarginInlineEnd: var(--pf-t--global--spacer--xs);
13340
+ --pf-v6-c-progress-stepper--m-center__step-main--MarginInlineStart: var(--pf-t--global--spacer--xs);
13341
+ --pf-v6-c-progress-stepper--m-center__step-main--TextAlign: center;
13342
+ --pf-v6-c-progress-stepper--m-center__step-description--MarginInlineEnd: 0;
13343
+ --pf-v6-c-progress-stepper--m-center__step-description--MarginInlineStart: 0;
13344
+ --pf-v6-c-progress-stepper--GridTemplateRows: auto 1fr;
13345
+ --pf-v6-c-progress-stepper__step-connector--JustifyContent: flex-start;
13346
+ --pf-v6-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--z-index--xs);
13347
+ --pf-v6-c-progress-stepper__step-icon--Width: 1.5rem;
13348
+ --pf-v6-c-progress-stepper__step-icon--Height: var(--pf-v6-c-progress-stepper__step-icon--Width);
13349
+ --pf-v6-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
13350
+ --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-t--global--icon--color--regular);
13351
+ --pf-v6-c-progress-stepper__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13352
+ --pf-v6-c-progress-stepper__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
13353
+ --pf-v6-c-progress-stepper__step-icon--BorderColor: var(--pf-t--global--border--color--default);
13354
+ --pf-v6-c-progress-stepper__step--m-current__step-icon--Color: var(--pf-t--global--icon--color--brand--default);
13355
+ --pf-v6-c-progress-stepper__step--m-info__step-icon--Color: var(--pf-t--global--icon--color--status--info--default);
13356
+ --pf-v6-c-progress-stepper__step--m-success__step-icon--Color: var(--pf-t--global--icon--color--status--success--default);
13357
+ --pf-v6-c-progress-stepper__step--m-warning__step-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
13358
+ --pf-v6-c-progress-stepper__step--m-danger__step-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
13359
+ --pf-v6-c-progress-stepper__step--m-custom__step-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
13360
+ --pf-v6-c-progress-stepper__pficon--MarginBlockStart: 3px;
13361
+ --pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart: -2px;
12984
13362
  --pf-v6-c-progress-stepper__step-title--Color: var(--pf-t--global--text--color--regular);
12985
13363
  --pf-v6-c-progress-stepper__step-title--TextAlign: start;
12986
13364
  --pf-v6-c-progress-stepper__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
@@ -13538,92 +13916,6 @@ ul.pf-v6-c-list {
13538
13916
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
13539
13917
  }
13540
13918
  }
13541
- :where(:root, .pf-v6-c-radio) {
13542
- --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
13543
- --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
13544
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
13545
- --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
13546
- --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
13547
- --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body);
13548
- --pf-v6-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default);
13549
- --pf-v6-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body);
13550
- --pf-v6-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm);
13551
- --pf-v6-c-radio__description--Color: var(--pf-t--global--text--color--subtle);
13552
- --pf-v6-c-radio__input--first-child--MarginInlineStart: 0.0625rem;
13553
- --pf-v6-c-radio__input--last-child--MarginInlineEnd: 0.0625rem;
13554
- --pf-v6-c-radio__body--MarginBlockStart: var(--pf-t--global--spacer--sm);
13555
- --pf-v6-c-radio__input--TranslateY: calc((var(--pf-v6-c-radio__label--LineHeight) * var(--pf-v6-c-radio__label--FontSize) / 2 ) - 50%);
13556
- }
13557
-
13558
- .pf-v6-c-radio {
13559
- display: grid;
13560
- grid-template-columns: auto 1fr;
13561
- grid-gap: var(--pf-v6-c-radio--GridGap);
13562
- align-items: baseline;
13563
- accent-color: var(--pf-v6-c-radio--AccentColor);
13564
- }
13565
-
13566
- .pf-v6-c-radio.pf-m-standalone {
13567
- display: inline-grid;
13568
- grid-template-columns: auto;
13569
- height: var(--pf-v6-c-check--Height);
13570
- }
13571
-
13572
- .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
13573
- align-self: center;
13574
- transform: none;
13575
- }
13576
-
13577
- .pf-v6-c-radio__input {
13578
- align-self: start;
13579
- font-size: var(--pf-v6-c-radio__label--FontSize);
13580
- line-height: var(--pf-v6-c-radio__label--LineHeight);
13581
- transform: translateY(var(--pf-v6-c-radio__input--TranslateY));
13582
- }
13583
-
13584
- .pf-v6-c-radio__input:first-child {
13585
- margin-inline-start: var(--pf-v6-c-radio__input--first-child--MarginInlineStart);
13586
- }
13587
-
13588
- .pf-v6-c-radio__input:last-child {
13589
- margin-inline-end: var(--pf-v6-c-radio__input--last-child--MarginInlineEnd);
13590
- }
13591
-
13592
- .pf-v6-c-radio__label {
13593
- font-size: var(--pf-v6-c-radio__label--FontSize);
13594
- font-weight: var(--pf-v6-c-radio__label--FontWeight);
13595
- line-height: var(--pf-v6-c-radio__label--LineHeight);
13596
- color: var(--pf-v6-c-radio__label--Color);
13597
- }
13598
-
13599
- .pf-v6-c-radio__description {
13600
- grid-column: 2;
13601
- font-size: var(--pf-v6-c-radio__description--FontSize);
13602
- color: var(--pf-v6-c-radio__description--Color);
13603
- }
13604
-
13605
- .pf-v6-c-radio__body {
13606
- grid-column: 2;
13607
- margin-block-start: var(--pf-v6-c-radio__body--MarginBlockStart);
13608
- }
13609
-
13610
- .pf-v6-c-radio__label,
13611
- .pf-v6-c-radio__input {
13612
- justify-self: start;
13613
- }
13614
-
13615
- label.pf-v6-c-radio, .pf-v6-c-radio__label,
13616
- .pf-v6-c-radio__input {
13617
- cursor: pointer;
13618
- }
13619
-
13620
- .pf-v6-c-radio__label:disabled, .pf-v6-c-radio__label.pf-m-disabled,
13621
- .pf-v6-c-radio__input:disabled,
13622
- .pf-v6-c-radio__input.pf-m-disabled {
13623
- --pf-v6-c-radio__label--Color: var(--pf-v6-c-radio__label--disabled--Color);
13624
- cursor: not-allowed;
13625
- }
13626
-
13627
13919
  :where(:root, .pf-v6-c-text-input-group) {
13628
13920
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
13629
13921
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -15067,724 +15359,432 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15067
15359
 
15068
15360
  .pf-v6-c-tabs__item.pf-m-action .pf-v6-c-tabs__link::before,
15069
15361
  .pf-v6-c-tabs__item.pf-m-action .pf-v6-c-tabs__link::after {
15070
- content: revert;
15071
- }
15072
-
15073
- .pf-v6-c-tabs::before,
15074
- .pf-v6-c-tabs__list::before,
15075
- .pf-v6-c-tabs__link::before,
15076
- .pf-v6-c-tabs__link::after,
15077
- .pf-v6-c-tabs__item.pf-m-action::before,
15078
- .pf-v6-c-tabs__item.pf-m-action::after,
15079
- .pf-v6-c-tabs__scroll-button::before,
15080
- .pf-v6-c-tabs__add::before {
15081
- position: absolute;
15082
- inset-block-end: 0;
15083
- inset-inline-start: 0;
15084
- inset-inline-end: 0;
15085
- content: "";
15086
- border-style: solid;
15087
- }
15088
-
15089
- .pf-v6-c-tabs__list::before,
15090
- .pf-v6-c-tabs__link::before,
15091
- .pf-v6-c-tabs__link::after,
15092
- .pf-v6-c-tabs__item.pf-m-action::before,
15093
- .pf-v6-c-tabs__item.pf-m-action::after,
15094
- .pf-v6-c-tabs__scroll-button::before,
15095
- .pf-v6-c-tabs__add::before {
15096
- inset-block-start: 0;
15097
- }
15098
-
15099
- .pf-v6-c-tabs__link,
15100
- .pf-v6-c-tabs__scroll-button,
15101
- .pf-v6-c-tabs__list::before,
15102
- .pf-v6-c-tabs__add::before {
15103
- border: 0;
15104
- }
15105
-
15106
- .pf-v6-c-tabs__link {
15107
- display: flex;
15108
- flex: 1;
15109
- column-gap: var(--pf-v6-c-tabs__link--ColumnGap);
15110
- align-items: center;
15111
- padding-block-start: var(--pf-v6-c-tabs__link--PaddingBlockStart);
15112
- padding-block-end: var(--pf-v6-c-tabs__link--PaddingBlockEnd);
15113
- padding-inline-start: var(--pf-v6-c-tabs__link--PaddingInlineStart);
15114
- padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
15115
- font-size: var(--pf-v6-c-tabs__link--FontSize);
15116
- color: var(--pf-v6-c-tabs__link--Color);
15117
- text-decoration: none;
15118
- background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
15119
- border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
15120
- }
15121
-
15122
- .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
15123
- --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
15124
- }
15125
-
15126
- .pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
15127
- pointer-events: none;
15128
- border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
15129
- border-block-start-width: var(--pf-v6-c-tabs__link--before--BorderBlockStartWidth);
15130
- border-block-end-color: var(--pf-v6-c-tabs__link--before--BorderBlockEndColor);
15131
- border-block-end-width: var(--pf-v6-c-tabs__link--before--BorderBlockEndWidth);
15132
- border-inline-start-color: var(--pf-v6-c-tabs__link--before--BorderInlineStartColor);
15133
- border-inline-start-width: var(--pf-v6-c-tabs__link--before--BorderInlineStartWidth);
15134
- border-inline-end-color: var(--pf-v6-c-tabs__link--before--BorderInlineEndColor);
15135
- border-inline-end-width: var(--pf-v6-c-tabs__link--before--BorderInlineEndWidth);
15136
- }
15137
-
15138
- .pf-v6-c-tabs__item.pf-m-action::after, .pf-v6-c-tabs__link::after {
15139
- inset-block-start: var(--pf-v6-c-tabs__link--after--InsetBlockStart);
15140
- inset-block-end: var(--pf-v6-c-tabs__link--after--InsetBlockEnd);
15141
- inset-inline-start: var(--pf-v6-c-tabs__link--before--InsetInlineStart);
15142
- inset-inline-end: var(--pf-v6-c-tabs__link--after--InsetInlineEnd);
15143
- border-color: var(--pf-v6-c-tabs__link--after--BorderColor);
15144
- border-block-start-width: var(--pf-v6-c-tabs__link--after--BorderBlockStartWidth);
15145
- border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
15146
- border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
15147
- border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
15148
- }
15149
-
15150
- .pf-v6-c-tabs__link:where(:hover, :focus) {
15151
- --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--hover--BackgroundColor);
15152
- }
15153
-
15154
- .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled {
15155
- pointer-events: none;
15156
- }
15157
-
15158
- .pf-v6-c-tabs__item.pf-m-action.pf-m-disabled, .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled, .pf-v6-c-tabs__link.pf-m-aria-disabled {
15159
- --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__link--disabled--Color);
15160
- --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth);
15161
- --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth);
15162
- --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth);
15163
- --pf-v6-c-tabs__link--after--BorderWidth: 0;
15164
- }
15165
-
15166
- .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled, .pf-v6-c-tabs__link.pf-m-aria-disabled {
15167
- --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--disabled--BackgroundColor);
15168
- }
15169
-
15170
- .pf-v6-c-tabs__item.pf-m-action.pf-m-disabled {
15171
- --pf-v6-c-tabs__link--BackgroundColor: transparent;
15172
- }
15173
-
15174
- .pf-v6-c-tabs__link.pf-m-aria-disabled {
15175
- cursor: default;
15176
- }
15177
-
15178
- .pf-v6-c-tabs__link.pf-m-expanded {
15179
- --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
15180
- }
15181
-
15182
- .pf-v6-c-tabs__link-toggle-icon {
15183
- align-self: end;
15184
- font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
15185
- color: var(--pf-v6-c-tabs__link-toggle-icon--Color);
15186
- transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
15187
- transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
15188
- }
15189
-
15190
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
15191
- scale: -1 1;
15192
- }
15193
-
15194
- .pf-v6-c-tabs__item-action {
15195
- display: flex;
15196
- }
15197
-
15198
- .pf-v6-c-tabs__item-action .pf-v6-c-button {
15199
- --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs__item-action--c-button--FontSize);
15200
- }
15201
-
15202
- .pf-v6-c-tabs__item-action-icon {
15203
- display: inline-block;
15204
- margin-block-start: var(--pf-v6-c-tabs__item-action-icon--MarginBlockStart);
15205
- }
15206
-
15207
- .pf-v6-c-tabs__scroll-button {
15208
- padding-block-start: var(--pf-v6-c-tabs__scroll-button--PaddingBlockStart);
15209
- padding-block-end: var(--pf-v6-c-tabs__scroll-button--PaddingBlockEnd);
15210
- padding-inline-start: var(--pf-v6-c-tabs__scroll-button--PaddingInlineStart);
15211
- padding-inline-end: var(--pf-v6-c-tabs__scroll-button--PaddingInlineEnd);
15212
- opacity: 0;
15213
- transition: margin var(--pf-v6-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v6-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v6-c-tabs__scroll-button--TransitionDuration--opacity);
15214
- }
15215
-
15216
- .pf-v6-c-tabs__scroll-button::before {
15217
- border-color: var(--pf-v6-c-tabs__scroll-button--before--BorderColor);
15218
- border-block-start-width: 0;
15219
- border-block-end-width: var(--pf-v6-c-tabs__scroll-button--before--BorderBlockEndWidth);
15220
- border-inline-start-width: var(--pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth);
15221
- border-inline-end-width: var(--pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth);
15222
- }
15223
-
15224
- .pf-v6-c-tabs__scroll-button:nth-of-type(1) {
15225
- --pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
15226
- margin-inline-end: calc(var(--pf-v6-c-tabs__scroll-button--Width) * -1);
15227
- transform: translateX(-100%);
15228
- }
15229
-
15230
- .pf-v6-c-tabs__scroll-button:nth-of-type(2) {
15231
- --pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
15232
- margin-inline-start: calc(var(--pf-v6-c-tabs__scroll-button--Width) * -1);
15233
- transform: translateX(100%);
15234
- }
15235
-
15236
- .pf-v6-c-tabs__add {
15237
- position: relative;
15238
- display: flex;
15239
- padding-block-start: var(--pf-v6-c-tabs__add--PaddingBlockStart);
15240
- padding-block-end: var(--pf-v6-c-tabs__add--PaddingBlockEnd);
15241
- padding-inline-start: var(--pf-v6-c-tabs__add--PaddingInlineStart);
15242
- padding-inline-end: var(--pf-v6-c-tabs__add--PaddingInlineEnd);
15243
- }
15244
-
15245
- .pf-v6-c-tabs__add::before {
15246
- border-inline-start: var(--pf-v6-c-tabs__add--before--BorderInlineStartWidth) solid var(--pf-v6-c-tabs__add--before--BorderColor);
15247
- }
15248
-
15249
- .pf-v6-c-tabs__add .pf-v6-c-button {
15250
- --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs__add--c-button--FontSize);
15251
- }
15252
-
15253
- .pf-v6-c-tabs.pf-m-inset-none {
15254
- --pf-v6-c-tabs--inset: 0;
15255
- --pf-v6-c-tabs--m-vertical--inset: 0;
15256
- --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15257
- }
15258
-
15259
- .pf-v6-c-tabs.pf-m-inset-sm {
15260
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15261
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15262
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15263
- }
15264
-
15265
- .pf-v6-c-tabs.pf-m-inset-md {
15266
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15267
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15268
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15269
- }
15270
-
15271
- .pf-v6-c-tabs.pf-m-inset-lg {
15272
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15273
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15274
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15275
- }
15276
-
15277
- .pf-v6-c-tabs.pf-m-inset-xl {
15278
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15279
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15280
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15281
- }
15282
-
15283
- .pf-v6-c-tabs.pf-m-inset-2xl {
15284
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15285
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15286
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15287
- }
15288
-
15289
- @media (min-width: 576px) {
15290
- .pf-v6-c-tabs.pf-m-inset-none-on-sm {
15291
- --pf-v6-c-tabs--inset: 0;
15292
- --pf-v6-c-tabs--m-vertical--inset: 0;
15293
- --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15294
- }
15295
- .pf-v6-c-tabs.pf-m-inset-sm-on-sm {
15296
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15297
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15298
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15299
- }
15300
- .pf-v6-c-tabs.pf-m-inset-md-on-sm {
15301
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15302
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15303
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15304
- }
15305
- .pf-v6-c-tabs.pf-m-inset-lg-on-sm {
15306
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15307
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15308
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15309
- }
15310
- .pf-v6-c-tabs.pf-m-inset-xl-on-sm {
15311
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15312
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15313
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15314
- }
15315
- .pf-v6-c-tabs.pf-m-inset-2xl-on-sm {
15316
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15317
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15318
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15319
- }
15320
- }
15321
- @media (min-width: 768px) {
15322
- .pf-v6-c-tabs.pf-m-inset-none-on-md {
15323
- --pf-v6-c-tabs--inset: 0;
15324
- --pf-v6-c-tabs--m-vertical--inset: 0;
15325
- --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15326
- }
15327
- .pf-v6-c-tabs.pf-m-inset-sm-on-md {
15328
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15329
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15330
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15331
- }
15332
- .pf-v6-c-tabs.pf-m-inset-md-on-md {
15333
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15334
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15335
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15336
- }
15337
- .pf-v6-c-tabs.pf-m-inset-lg-on-md {
15338
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15339
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15340
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15341
- }
15342
- .pf-v6-c-tabs.pf-m-inset-xl-on-md {
15343
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15344
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15345
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15346
- }
15347
- .pf-v6-c-tabs.pf-m-inset-2xl-on-md {
15348
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15349
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15350
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15351
- }
15352
- }
15353
- @media (min-width: 992px) {
15354
- .pf-v6-c-tabs.pf-m-inset-none-on-lg {
15355
- --pf-v6-c-tabs--inset: 0;
15356
- --pf-v6-c-tabs--m-vertical--inset: 0;
15357
- --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15358
- }
15359
- .pf-v6-c-tabs.pf-m-inset-sm-on-lg {
15360
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15361
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15362
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15363
- }
15364
- .pf-v6-c-tabs.pf-m-inset-md-on-lg {
15365
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15366
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15367
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15368
- }
15369
- .pf-v6-c-tabs.pf-m-inset-lg-on-lg {
15370
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15371
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15372
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15373
- }
15374
- .pf-v6-c-tabs.pf-m-inset-xl-on-lg {
15375
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15376
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15377
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15378
- }
15379
- .pf-v6-c-tabs.pf-m-inset-2xl-on-lg {
15380
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15381
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15382
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15383
- }
15384
- }
15385
- @media (min-width: 1200px) {
15386
- .pf-v6-c-tabs.pf-m-inset-none-on-xl {
15387
- --pf-v6-c-tabs--inset: 0;
15388
- --pf-v6-c-tabs--m-vertical--inset: 0;
15389
- --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15390
- }
15391
- .pf-v6-c-tabs.pf-m-inset-sm-on-xl {
15392
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15393
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15394
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15395
- }
15396
- .pf-v6-c-tabs.pf-m-inset-md-on-xl {
15397
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15398
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15399
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15400
- }
15401
- .pf-v6-c-tabs.pf-m-inset-lg-on-xl {
15402
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15403
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15404
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15405
- }
15406
- .pf-v6-c-tabs.pf-m-inset-xl-on-xl {
15407
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15408
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15409
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15410
- }
15411
- .pf-v6-c-tabs.pf-m-inset-2xl-on-xl {
15412
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15413
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15414
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15415
- }
15416
- }
15417
- @media (min-width: 1450px) {
15418
- .pf-v6-c-tabs.pf-m-inset-none-on-2xl {
15419
- --pf-v6-c-tabs--inset: 0;
15420
- --pf-v6-c-tabs--m-vertical--inset: 0;
15421
- --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15422
- }
15423
- .pf-v6-c-tabs.pf-m-inset-sm-on-2xl {
15424
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15425
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15426
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15427
- }
15428
- .pf-v6-c-tabs.pf-m-inset-md-on-2xl {
15429
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15430
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15431
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15432
- }
15433
- .pf-v6-c-tabs.pf-m-inset-lg-on-2xl {
15434
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15435
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15436
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15437
- }
15438
- .pf-v6-c-tabs.pf-m-inset-xl-on-2xl {
15439
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15440
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15441
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15442
- }
15443
- .pf-v6-c-tabs.pf-m-inset-2xl-on-2xl {
15444
- --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15445
- --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15446
- --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15447
- }
15448
- }
15449
- :where(:root, .pf-v6-c-tab-content) {
15450
- --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
15451
- --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
15452
- --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;
15453
- --pf-v6-c-tab-content__body--PaddingInlineStart: 0;
15454
- --pf-v6-c-tab-content--BackgroundColor: transparent;
15455
- --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
15456
- --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15457
- --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15458
- --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
15459
- --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
15460
- --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
15461
- --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
15462
- --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15463
- --pf-v6-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15464
- }
15465
-
15466
- .pf-v6-c-tab-content {
15467
- background-color: var(--pf-v6-c-tab-content--BackgroundColor);
15468
- }
15469
-
15470
- @media screen and (min-width: 1200px) {
15471
- .pf-v6-c-tab-content {
15472
- --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart);
15473
- --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd);
15474
- --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd);
15475
- --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart);
15476
- }
15477
- }
15478
- .pf-v6-c-tab-content.pf-m-secondary {
15479
- --pf-v6-c-tab-content--BackgroundColor: var(--pf-v6-c-tab-content--m-secondary--BackgroundColor);
15480
- }
15481
-
15482
- .pf-v6-c-tab-content__body {
15483
- padding-block-start: var(--pf-v6-c-tab-content__body--PaddingBlockStart);
15484
- padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBlockEnd);
15485
- padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingInlineStart);
15486
- padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingInlineEnd);
15487
- }
15488
-
15489
- .pf-v6-c-tab-content__body.pf-m-padding {
15490
- --pf-v6-c-tab-content__body--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart);
15491
- --pf-v6-c-tab-content__body--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd);
15492
- --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd);
15493
- --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
15494
- }
15495
-
15496
- :where(:root, .pf-v6-c-content) {
15497
- --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
15498
- --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
15499
- --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
15500
- --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body);
15501
- --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
15502
- --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
15503
- --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
15504
- --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
15505
- --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
15506
- --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
15507
- --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
15508
- --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
15509
- --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
15510
- --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
15511
- --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
15512
- --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
15513
- --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
15514
- --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
15515
- --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
15516
- --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
15517
- --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
15518
- --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
15519
- --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
15520
- --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
15521
- --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
15522
- --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
15523
- --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
15524
- --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
15525
- --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
15526
- --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
15527
- --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
15528
- --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
15529
- --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
15530
- --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
15531
- --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
15532
- --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
15533
- --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
15534
- --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
15535
- --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
15536
- --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
15537
- --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
15538
- --pf-v6-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
15539
- --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
15540
- --pf-v6-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
15541
- --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
15542
- --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
15543
- --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15544
- --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15545
- --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
15546
- --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
15547
- --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
15548
- --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
15549
- --pf-v6-c-content--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15550
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
15551
- --pf-v6-c-content--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
15552
- --pf-v6-c-content--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
15553
- --pf-v6-c-content--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15554
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
15555
- --pf-v6-c-content--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
15556
- --pf-v6-c-content--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
15557
- --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
15558
- --pf-v6-c-content--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
15559
- --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
15560
- --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
15561
- --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
15562
- --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
15563
- --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
15564
- --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
15565
- --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
15362
+ content: revert;
15566
15363
  }
15567
15364
 
15568
- .pf-v6-c-content {
15569
- font-size: var(--pf-v6-c-content--FontSize);
15570
- line-height: var(--pf-v6-c-content--LineHeight);
15571
- color: var(--pf-v6-c-content--Color);
15365
+ .pf-v6-c-tabs::before,
15366
+ .pf-v6-c-tabs__list::before,
15367
+ .pf-v6-c-tabs__link::before,
15368
+ .pf-v6-c-tabs__link::after,
15369
+ .pf-v6-c-tabs__item.pf-m-action::before,
15370
+ .pf-v6-c-tabs__item.pf-m-action::after,
15371
+ .pf-v6-c-tabs__scroll-button::before,
15372
+ .pf-v6-c-tabs__add::before {
15373
+ position: absolute;
15374
+ inset-block-end: 0;
15375
+ inset-inline-start: 0;
15376
+ inset-inline-end: 0;
15377
+ content: "";
15378
+ border-style: solid;
15572
15379
  }
15573
15380
 
15574
- :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
15575
- color: var(--pf-v6-c-content--a--Color);
15576
- text-decoration: var(--pf-v6-c-content--a--TextDecoration);
15381
+ .pf-v6-c-tabs__list::before,
15382
+ .pf-v6-c-tabs__link::before,
15383
+ .pf-v6-c-tabs__link::after,
15384
+ .pf-v6-c-tabs__item.pf-m-action::before,
15385
+ .pf-v6-c-tabs__item.pf-m-action::after,
15386
+ .pf-v6-c-tabs__scroll-button::before,
15387
+ .pf-v6-c-tabs__add::before {
15388
+ inset-block-start: 0;
15577
15389
  }
15578
15390
 
15579
- :is(.pf-v6-c-content--a, .pf-v6-c-content a):hover {
15580
- --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
15581
- --pf-v6-c-content--a--TextDecoration: var(--pf-v6-c-content--a--hover--TextDecoration);
15391
+ .pf-v6-c-tabs__link,
15392
+ .pf-v6-c-tabs__scroll-button,
15393
+ .pf-v6-c-tabs__list::before,
15394
+ .pf-v6-c-tabs__add::before {
15395
+ border: 0;
15582
15396
  }
15583
15397
 
15584
- :is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
15585
- color: var(--pf-v6-c-content--a--visited--Color);
15398
+ .pf-v6-c-tabs__link {
15399
+ display: flex;
15400
+ flex: 1;
15401
+ column-gap: var(--pf-v6-c-tabs__link--ColumnGap);
15402
+ align-items: center;
15403
+ padding-block-start: var(--pf-v6-c-tabs__link--PaddingBlockStart);
15404
+ padding-block-end: var(--pf-v6-c-tabs__link--PaddingBlockEnd);
15405
+ padding-inline-start: var(--pf-v6-c-tabs__link--PaddingInlineStart);
15406
+ padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
15407
+ font-size: var(--pf-v6-c-tabs__link--FontSize);
15408
+ color: var(--pf-v6-c-tabs__link--Color);
15409
+ text-decoration: none;
15410
+ background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
15411
+ border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
15586
15412
  }
15587
15413
 
15588
- :is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
15589
- margin-block-start: var(--pf-v6-c-content--li--MarginBlockStart);
15414
+ .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
15415
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
15590
15416
  }
15591
15417
 
15592
- :is(.pf-v6-c-content--p,
15593
- .pf-v6-c-content--dl,
15594
- .pf-v6-c-content--ol,
15595
- .pf-v6-c-content--ul,
15596
- .pf-v6-c-content--blockquote,
15597
- .pf-v6-c-content--small,
15598
- .pf-v6-c-content--pre,
15599
- .pf-v6-c-content--table,
15600
- .pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
15601
- margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
15418
+ .pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
15419
+ pointer-events: none;
15420
+ border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
15421
+ border-block-start-width: var(--pf-v6-c-tabs__link--before--BorderBlockStartWidth);
15422
+ border-block-end-color: var(--pf-v6-c-tabs__link--before--BorderBlockEndColor);
15423
+ border-block-end-width: var(--pf-v6-c-tabs__link--before--BorderBlockEndWidth);
15424
+ border-inline-start-color: var(--pf-v6-c-tabs__link--before--BorderInlineStartColor);
15425
+ border-inline-start-width: var(--pf-v6-c-tabs__link--before--BorderInlineStartWidth);
15426
+ border-inline-end-color: var(--pf-v6-c-tabs__link--before--BorderInlineEndColor);
15427
+ border-inline-end-width: var(--pf-v6-c-tabs__link--before--BorderInlineEndWidth);
15602
15428
  }
15603
15429
 
15604
- :is(.pf-v6-c-content--h1,
15605
- .pf-v6-c-content--h2,
15606
- .pf-v6-c-content--h3,
15607
- .pf-v6-c-content--h4,
15608
- .pf-v6-c-content--h5,
15609
- .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) {
15610
- margin: 0;
15611
- font-family: var(--pf-v6-c-content--heading--FontFamily);
15430
+ .pf-v6-c-tabs__item.pf-m-action::after, .pf-v6-c-tabs__link::after {
15431
+ inset-block-start: var(--pf-v6-c-tabs__link--after--InsetBlockStart);
15432
+ inset-block-end: var(--pf-v6-c-tabs__link--after--InsetBlockEnd);
15433
+ inset-inline-start: var(--pf-v6-c-tabs__link--before--InsetInlineStart);
15434
+ inset-inline-end: var(--pf-v6-c-tabs__link--after--InsetInlineEnd);
15435
+ border-color: var(--pf-v6-c-tabs__link--after--BorderColor);
15436
+ border-block-start-width: var(--pf-v6-c-tabs__link--after--BorderBlockStartWidth);
15437
+ border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
15438
+ border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
15439
+ border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
15612
15440
  }
15613
15441
 
15614
- :is(.pf-v6-c-content--h1,
15615
- .pf-v6-c-content--h2,
15616
- .pf-v6-c-content--h3,
15617
- .pf-v6-c-content--h4,
15618
- .pf-v6-c-content--h5,
15619
- .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child {
15620
- margin-block-start: 0;
15442
+ .pf-v6-c-tabs__link:where(:hover, :focus) {
15443
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--hover--BackgroundColor);
15621
15444
  }
15622
15445
 
15623
- :is(.pf-v6-c-content--h1,
15624
- .pf-v6-c-content--h2,
15625
- .pf-v6-c-content--h3,
15626
- .pf-v6-c-content--h4,
15627
- .pf-v6-c-content--h5,
15628
- .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
15629
- margin-block-end: 0;
15446
+ .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled {
15447
+ pointer-events: none;
15630
15448
  }
15631
15449
 
15632
- :is(.pf-v6-c-content--ol,
15633
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
15634
- margin: 0;
15450
+ .pf-v6-c-tabs__item.pf-m-action.pf-m-disabled, .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled, .pf-v6-c-tabs__link.pf-m-aria-disabled {
15451
+ --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__link--disabled--Color);
15452
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth);
15453
+ --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth);
15454
+ --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth);
15455
+ --pf-v6-c-tabs__link--after--BorderWidth: 0;
15635
15456
  }
15636
15457
 
15637
- :is(.pf-v6-c-content--ol,
15638
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
15639
- padding-inline-start: 0;
15640
- margin-inline-start: 0;
15641
- list-style: none;
15458
+ .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled, .pf-v6-c-tabs__link.pf-m-aria-disabled {
15459
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--disabled--BackgroundColor);
15642
15460
  }
15643
15461
 
15644
- :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
15645
- margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
15646
- margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
15647
- font-size: var(--pf-v6-c-content--h1--FontSize);
15648
- font-weight: var(--pf-v6-c-content--h1--FontWeight);
15649
- line-height: var(--pf-v6-c-content--h1--LineHeight);
15462
+ .pf-v6-c-tabs__item.pf-m-action.pf-m-disabled {
15463
+ --pf-v6-c-tabs__link--BackgroundColor: transparent;
15650
15464
  }
15651
15465
 
15652
- :is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
15653
- margin-block-start: var(--pf-v6-c-content--h2--MarginBlockStart);
15654
- margin-block-end: var(--pf-v6-c-content--h2--MarginBlockEnd);
15655
- font-size: var(--pf-v6-c-content--h2--FontSize);
15656
- font-weight: var(--pf-v6-c-content--h2--FontWeight);
15657
- line-height: var(--pf-v6-c-content--h2--LineHeight);
15466
+ .pf-v6-c-tabs__link.pf-m-aria-disabled {
15467
+ cursor: default;
15658
15468
  }
15659
15469
 
15660
- :is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
15661
- margin-block-start: var(--pf-v6-c-content--h3--MarginBlockStart);
15662
- margin-block-end: var(--pf-v6-c-content--h3--MarginBlockEnd);
15663
- font-size: var(--pf-v6-c-content--h3--FontSize);
15664
- font-weight: var(--pf-v6-c-content--h3--FontWeight);
15665
- line-height: var(--pf-v6-c-content--h3--LineHeight);
15470
+ .pf-v6-c-tabs__link.pf-m-expanded {
15471
+ --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
15666
15472
  }
15667
15473
 
15668
- :is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
15669
- margin-block-start: var(--pf-v6-c-content--h4--MarginBlockStart);
15670
- margin-block-end: var(--pf-v6-c-content--h4--MarginBlockEnd);
15671
- font-size: var(--pf-v6-c-content--h4--FontSize);
15672
- font-weight: var(--pf-v6-c-content--h4--FontWeight);
15673
- line-height: var(--pf-v6-c-content--h4--LineHeight);
15474
+ .pf-v6-c-tabs__link-toggle-icon {
15475
+ align-self: end;
15476
+ font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
15477
+ color: var(--pf-v6-c-tabs__link-toggle-icon--Color);
15478
+ transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
15479
+ transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
15674
15480
  }
15675
15481
 
15676
- :is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
15677
- margin-block-start: var(--pf-v6-c-content--h5--MarginBlockStart);
15678
- margin-block-end: var(--pf-v6-c-content--h5--MarginBlockEnd);
15679
- font-size: var(--pf-v6-c-content--h5--FontSize);
15680
- font-weight: var(--pf-v6-c-content--h5--FontWeight);
15681
- line-height: var(--pf-v6-c-content--h5--LineHeight);
15482
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
15483
+ scale: -1 1;
15682
15484
  }
15683
15485
 
15684
- :is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
15685
- margin-block-start: var(--pf-v6-c-content--h6--MarginBlockStart);
15686
- margin-block-end: var(--pf-v6-c-content--h6--MarginBlockEnd);
15687
- font-size: var(--pf-v6-c-content--h6--FontSize);
15688
- font-weight: var(--pf-v6-c-content--h6--FontWeight);
15689
- line-height: var(--pf-v6-c-content--h6--LineHeight);
15486
+ .pf-v6-c-tabs__item-action {
15487
+ display: flex;
15690
15488
  }
15691
15489
 
15692
- :is(.pf-v6-c-content--small, .pf-v6-c-content small) {
15693
- display: block;
15694
- font-size: var(--pf-v6-c-content--small--FontSize);
15695
- line-height: var(--pf-v6-c-content--small--LineHeight);
15696
- color: var(--pf-v6-c-content--small--Color);
15490
+ .pf-v6-c-tabs__item-action .pf-v6-c-button {
15491
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs__item-action--c-button--FontSize);
15697
15492
  }
15698
15493
 
15699
- :is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
15700
- margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd);
15494
+ .pf-v6-c-tabs__item-action-icon {
15495
+ display: inline-block;
15496
+ margin-block-start: var(--pf-v6-c-tabs__item-action-icon--MarginBlockStart);
15701
15497
  }
15702
15498
 
15703
- :is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
15704
- padding-block-start: var(--pf-v6-c-content--blockquote--PaddingBlockStart);
15705
- padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBlockEnd);
15706
- padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingInlineStart);
15707
- padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingInlineEnd);
15708
- color: var(--pf-v6-c-content--blockquote--Color);
15709
- border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor);
15499
+ .pf-v6-c-tabs__scroll-button {
15500
+ padding-block-start: var(--pf-v6-c-tabs__scroll-button--PaddingBlockStart);
15501
+ padding-block-end: var(--pf-v6-c-tabs__scroll-button--PaddingBlockEnd);
15502
+ padding-inline-start: var(--pf-v6-c-tabs__scroll-button--PaddingInlineStart);
15503
+ padding-inline-end: var(--pf-v6-c-tabs__scroll-button--PaddingInlineEnd);
15504
+ opacity: 0;
15505
+ transition: margin var(--pf-v6-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v6-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v6-c-tabs__scroll-button--TransitionDuration--opacity);
15710
15506
  }
15711
15507
 
15712
- :is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
15713
- height: var(--pf-v6-c-content--hr--Height);
15714
- background-color: var(--pf-v6-c-content--hr--BackgroundColor);
15715
- border: none;
15508
+ .pf-v6-c-tabs__scroll-button::before {
15509
+ border-color: var(--pf-v6-c-tabs__scroll-button--before--BorderColor);
15510
+ border-block-start-width: 0;
15511
+ border-block-end-width: var(--pf-v6-c-tabs__scroll-button--before--BorderBlockEndWidth);
15512
+ border-inline-start-width: var(--pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth);
15513
+ border-inline-end-width: var(--pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth);
15716
15514
  }
15717
15515
 
15718
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
15719
- padding-inline-start: var(--pf-v6-c-content--ol--PaddingInlineStart);
15720
- margin-inline-start: var(--pf-v6-c-content--ol--MarginInlineStart);
15516
+ .pf-v6-c-tabs__scroll-button:nth-of-type(1) {
15517
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
15518
+ margin-inline-end: calc(var(--pf-v6-c-tabs__scroll-button--Width) * -1);
15519
+ transform: translateX(-100%);
15721
15520
  }
15722
15521
 
15723
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
15724
- ul) {
15725
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
15726
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
15522
+ .pf-v6-c-tabs__scroll-button:nth-of-type(2) {
15523
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
15524
+ margin-inline-start: calc(var(--pf-v6-c-tabs__scroll-button--Width) * -1);
15525
+ transform: translateX(100%);
15526
+ }
15527
+
15528
+ .pf-v6-c-tabs__add {
15529
+ position: relative;
15530
+ display: flex;
15531
+ padding-block-start: var(--pf-v6-c-tabs__add--PaddingBlockStart);
15532
+ padding-block-end: var(--pf-v6-c-tabs__add--PaddingBlockEnd);
15533
+ padding-inline-start: var(--pf-v6-c-tabs__add--PaddingInlineStart);
15534
+ padding-inline-end: var(--pf-v6-c-tabs__add--PaddingInlineEnd);
15535
+ }
15536
+
15537
+ .pf-v6-c-tabs__add::before {
15538
+ border-inline-start: var(--pf-v6-c-tabs__add--before--BorderInlineStartWidth) solid var(--pf-v6-c-tabs__add--before--BorderColor);
15539
+ }
15540
+
15541
+ .pf-v6-c-tabs__add .pf-v6-c-button {
15542
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs__add--c-button--FontSize);
15543
+ }
15544
+
15545
+ .pf-v6-c-tabs.pf-m-inset-none {
15546
+ --pf-v6-c-tabs--inset: 0;
15547
+ --pf-v6-c-tabs--m-vertical--inset: 0;
15548
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15727
15549
  }
15728
15550
 
15729
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
15730
- ol) {
15731
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
15732
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
15551
+ .pf-v6-c-tabs.pf-m-inset-sm {
15552
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15553
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15554
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15733
15555
  }
15734
15556
 
15735
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
15736
- padding-inline-start: var(--pf-v6-c-content--ul--PaddingInlineStart);
15737
- margin-inline-start: var(--pf-v6-c-content--ul--MarginInlineStart);
15738
- list-style: var(--pf-v6-c-content--ul--ListStyle);
15557
+ .pf-v6-c-tabs.pf-m-inset-md {
15558
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15559
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15560
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15739
15561
  }
15740
15562
 
15741
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
15742
- ul) {
15743
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
15744
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
15563
+ .pf-v6-c-tabs.pf-m-inset-lg {
15564
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15565
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15566
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15745
15567
  }
15746
15568
 
15747
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
15748
- ol) {
15749
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
15750
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
15569
+ .pf-v6-c-tabs.pf-m-inset-xl {
15570
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15571
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15572
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15751
15573
  }
15752
15574
 
15753
- :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
15754
- display: grid;
15755
- grid-template-columns: 1fr;
15575
+ .pf-v6-c-tabs.pf-m-inset-2xl {
15576
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15577
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15578
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15756
15579
  }
15757
15580
 
15758
- @media screen and (min-width: 576px) {
15759
- :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
15760
- grid-template: auto/auto 1fr;
15761
- grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
15762
- grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
15581
+ @media (min-width: 576px) {
15582
+ .pf-v6-c-tabs.pf-m-inset-none-on-sm {
15583
+ --pf-v6-c-tabs--inset: 0;
15584
+ --pf-v6-c-tabs--m-vertical--inset: 0;
15585
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15586
+ }
15587
+ .pf-v6-c-tabs.pf-m-inset-sm-on-sm {
15588
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15589
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15590
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15591
+ }
15592
+ .pf-v6-c-tabs.pf-m-inset-md-on-sm {
15593
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15594
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15595
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15596
+ }
15597
+ .pf-v6-c-tabs.pf-m-inset-lg-on-sm {
15598
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15599
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15600
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15601
+ }
15602
+ .pf-v6-c-tabs.pf-m-inset-xl-on-sm {
15603
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15604
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15605
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15606
+ }
15607
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-sm {
15608
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15609
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15610
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15763
15611
  }
15764
15612
  }
15765
- :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
15766
- font-weight: var(--pf-v6-c-content--dt--FontWeight);
15613
+ @media (min-width: 768px) {
15614
+ .pf-v6-c-tabs.pf-m-inset-none-on-md {
15615
+ --pf-v6-c-tabs--inset: 0;
15616
+ --pf-v6-c-tabs--m-vertical--inset: 0;
15617
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15618
+ }
15619
+ .pf-v6-c-tabs.pf-m-inset-sm-on-md {
15620
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15621
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15622
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15623
+ }
15624
+ .pf-v6-c-tabs.pf-m-inset-md-on-md {
15625
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15626
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15627
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15628
+ }
15629
+ .pf-v6-c-tabs.pf-m-inset-lg-on-md {
15630
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15631
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15632
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15633
+ }
15634
+ .pf-v6-c-tabs.pf-m-inset-xl-on-md {
15635
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15636
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15637
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15638
+ }
15639
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-md {
15640
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15641
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15642
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15643
+ }
15767
15644
  }
15768
-
15769
- :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
15770
- margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart);
15645
+ @media (min-width: 992px) {
15646
+ .pf-v6-c-tabs.pf-m-inset-none-on-lg {
15647
+ --pf-v6-c-tabs--inset: 0;
15648
+ --pf-v6-c-tabs--m-vertical--inset: 0;
15649
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15650
+ }
15651
+ .pf-v6-c-tabs.pf-m-inset-sm-on-lg {
15652
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15653
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15654
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15655
+ }
15656
+ .pf-v6-c-tabs.pf-m-inset-md-on-lg {
15657
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15658
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15659
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15660
+ }
15661
+ .pf-v6-c-tabs.pf-m-inset-lg-on-lg {
15662
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15663
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15664
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15665
+ }
15666
+ .pf-v6-c-tabs.pf-m-inset-xl-on-lg {
15667
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15668
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15669
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15670
+ }
15671
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-lg {
15672
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15673
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15674
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15675
+ }
15771
15676
  }
15772
-
15773
- @media screen and (min-width: 576px) {
15774
- :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
15775
- --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart);
15677
+ @media (min-width: 1200px) {
15678
+ .pf-v6-c-tabs.pf-m-inset-none-on-xl {
15679
+ --pf-v6-c-tabs--inset: 0;
15680
+ --pf-v6-c-tabs--m-vertical--inset: 0;
15681
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15682
+ }
15683
+ .pf-v6-c-tabs.pf-m-inset-sm-on-xl {
15684
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15685
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15686
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15687
+ }
15688
+ .pf-v6-c-tabs.pf-m-inset-md-on-xl {
15689
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15690
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15691
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15692
+ }
15693
+ .pf-v6-c-tabs.pf-m-inset-lg-on-xl {
15694
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15695
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15696
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15697
+ }
15698
+ .pf-v6-c-tabs.pf-m-inset-xl-on-xl {
15699
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15700
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15701
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15702
+ }
15703
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-xl {
15704
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15705
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15706
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15776
15707
  }
15777
15708
  }
15778
- @media screen and (min-width: 576px) {
15779
- :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
15780
- grid-column: 1;
15709
+ @media (min-width: 1450px) {
15710
+ .pf-v6-c-tabs.pf-m-inset-none-on-2xl {
15711
+ --pf-v6-c-tabs--inset: 0;
15712
+ --pf-v6-c-tabs--m-vertical--inset: 0;
15713
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
15714
+ }
15715
+ .pf-v6-c-tabs.pf-m-inset-sm-on-2xl {
15716
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
15717
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
15718
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
15719
+ }
15720
+ .pf-v6-c-tabs.pf-m-inset-md-on-2xl {
15721
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
15722
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
15723
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
15724
+ }
15725
+ .pf-v6-c-tabs.pf-m-inset-lg-on-2xl {
15726
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
15727
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
15728
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
15729
+ }
15730
+ .pf-v6-c-tabs.pf-m-inset-xl-on-2xl {
15731
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
15732
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
15733
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
15734
+ }
15735
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-2xl {
15736
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
15737
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
15738
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
15781
15739
  }
15782
15740
  }
15783
- @media screen and (min-width: 576px) {
15784
- :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
15785
- grid-column: 2;
15741
+ :where(:root, .pf-v6-c-tab-content) {
15742
+ --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
15743
+ --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
15744
+ --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;
15745
+ --pf-v6-c-tab-content__body--PaddingInlineStart: 0;
15746
+ --pf-v6-c-tab-content--BackgroundColor: transparent;
15747
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
15748
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15749
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15750
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
15751
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
15752
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
15753
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
15754
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15755
+ --pf-v6-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15756
+ }
15757
+
15758
+ .pf-v6-c-tab-content {
15759
+ background-color: var(--pf-v6-c-tab-content--BackgroundColor);
15760
+ }
15761
+
15762
+ @media screen and (min-width: 1200px) {
15763
+ .pf-v6-c-tab-content {
15764
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart);
15765
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd);
15766
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd);
15767
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart);
15786
15768
  }
15787
15769
  }
15770
+ .pf-v6-c-tab-content.pf-m-secondary {
15771
+ --pf-v6-c-tab-content--BackgroundColor: var(--pf-v6-c-tab-content--m-secondary--BackgroundColor);
15772
+ }
15773
+
15774
+ .pf-v6-c-tab-content__body {
15775
+ padding-block-start: var(--pf-v6-c-tab-content__body--PaddingBlockStart);
15776
+ padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBlockEnd);
15777
+ padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingInlineStart);
15778
+ padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingInlineEnd);
15779
+ }
15780
+
15781
+ .pf-v6-c-tab-content__body.pf-m-padding {
15782
+ --pf-v6-c-tab-content__body--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart);
15783
+ --pf-v6-c-tab-content__body--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd);
15784
+ --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd);
15785
+ --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
15786
+ }
15787
+
15788
15788
  :where(:root, .pf-v6-c-tile) {
15789
15789
  --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
15790
15790
  --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);