@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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 (376) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
@@ -1,4 +1,3 @@
1
- @charset "UTF-8";
2
1
  .pf-v6-c-about-modal-box {
3
2
  --pf-v6-c-about-modal-box--BackgroundImage: none;
4
3
  --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
@@ -18,31 +17,6 @@
18
17
  --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
19
18
  --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
20
19
  --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
21
- --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
22
- --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
23
- --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
24
- --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
25
- --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
26
- --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
27
- --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
28
- --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
29
- --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
30
- --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
31
- --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
32
- --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
33
- --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
34
- --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
35
- --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
36
- --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
37
- --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
38
- --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
39
- --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
40
- --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
41
- --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
42
- --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
43
- --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
44
- --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
45
- --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
46
20
  }
47
21
  @media screen and (min-width: 36rem) {
48
22
  .pf-v6-c-about-modal-box {
@@ -51,6 +25,14 @@
51
25
  --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
52
26
  }
53
27
  }
28
+ .pf-v6-c-about-modal-box {
29
+ --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
30
+ --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
31
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
32
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
33
+ --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
34
+ --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
35
+ }
54
36
  @media only screen and (min-width: 36rem) {
55
37
  .pf-v6-c-about-modal-box {
56
38
  --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
@@ -61,17 +43,42 @@
61
43
  --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
62
44
  }
63
45
  }
46
+ .pf-v6-c-about-modal-box {
47
+ --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
48
+ --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
49
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
50
+ --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
52
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
53
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
54
+ }
64
55
  @media only screen and (min-width: 36rem) {
65
56
  .pf-v6-c-about-modal-box {
66
57
  --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
67
58
  --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
68
59
  }
69
60
  }
61
+ .pf-v6-c-about-modal-box {
62
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
63
+ --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
64
+ --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
65
+ --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
66
+ }
70
67
  @media only screen and (min-width: 36rem) {
71
68
  .pf-v6-c-about-modal-box {
72
69
  --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
73
70
  }
74
71
  }
72
+ .pf-v6-c-about-modal-box {
73
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
74
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
75
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
76
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
77
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
78
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
79
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
80
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
81
+ }
75
82
  @media only screen and (min-width: 36rem) {
76
83
  .pf-v6-c-about-modal-box {
77
84
  --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
@@ -95,7 +102,6 @@
95
102
  background-repeat: no-repeat;
96
103
  background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
97
104
  background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
98
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
99
105
  }
100
106
  @media only screen and (min-width: 36rem) {
101
107
  .pf-v6-c-about-modal-box {
@@ -111,6 +117,9 @@
111
117
  grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
112
118
  }
113
119
  }
120
+ .pf-v6-c-about-modal-box {
121
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
122
+ }
114
123
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box {
115
124
  --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
116
125
  }
@@ -218,7 +227,7 @@
218
227
  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
219
228
  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
220
229
  --pf-v6-c-accordion__toggle-icon--Rotate: 0;
221
- --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
230
+ --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: -180deg;
222
231
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
223
232
  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
224
233
  --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -251,6 +260,18 @@
251
260
  --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
252
261
  --pf-v6-c-accordion__expandable-content--TranslateY: 0;
253
262
  --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
263
+ }
264
+ @media screen and (prefers-reduced-motion: no-preference) {
265
+ .pf-v6-c-accordion {
266
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
267
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
268
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
269
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
270
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
271
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
272
+ }
273
+ }
274
+ .pf-v6-c-accordion {
254
275
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
255
276
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
256
277
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -276,16 +297,6 @@
276
297
  --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
277
298
  --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
278
299
  }
279
- @media screen and (prefers-reduced-motion: no-preference) {
280
- .pf-v6-c-accordion {
281
- --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
282
- --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
283
- --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
284
- --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
285
- --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
286
- --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
287
- }
288
- }
289
300
 
290
301
  .pf-v6-c-accordion {
291
302
  display: flex;
@@ -396,13 +407,14 @@
396
407
  color: var(--pf-v6-c-accordion__toggle-text--Color);
397
408
  }
398
409
 
410
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
411
+ scale: -1 1;
412
+ }
413
+
399
414
  .pf-v6-c-accordion__toggle-icon {
400
415
  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
401
416
  transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
402
417
  }
403
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
404
- scale: -1 1;
405
- }
406
418
 
407
419
  .pf-v6-c-accordion__expandable-content:where([hidden]) {
408
420
  display: revert;
@@ -447,6 +459,7 @@
447
459
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
448
460
  --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
449
461
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
462
+ --pf-v6-c-action-list--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
450
463
  }
451
464
 
452
465
  .pf-v6-c-action-list,
@@ -461,6 +474,7 @@
461
474
  }
462
475
  .pf-v6-c-action-list.pf-m-icons {
463
476
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
477
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-v6-c-action-list--m-vertical--m-icons--RowGap);
464
478
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
465
479
  }
466
480
  .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
@@ -547,7 +561,7 @@
547
561
  ". . description description"
548
562
  ". . actiongroup actiongroup";
549
563
  --pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
550
- --pf-v6-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
564
+ --pf-v6-c-alert--m-expanded__toggle-icon--Rotate: -180deg;
551
565
  --pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
552
566
  }
553
567
 
@@ -620,20 +634,22 @@
620
634
  margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
621
635
  }
622
636
 
637
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
638
+ scale: -1 1;
639
+ }
640
+
623
641
  .pf-v6-c-alert__toggle-icon {
624
642
  display: inline-block;
625
643
  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
626
644
  transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
627
645
  }
628
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
629
- scale: -1 1;
630
- }
631
646
 
632
647
  .pf-v6-c-alert__icon {
633
648
  grid-area: icon;
634
649
  margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
635
650
  font-size: var(--pf-v6-c-alert__icon--FontSize);
636
651
  color: var(--pf-v6-c-alert__icon--Color);
652
+ scale: 1.14;
637
653
  }
638
654
 
639
655
  .pf-v6-c-alert__title {
@@ -644,9 +660,9 @@
644
660
  }
645
661
  .pf-v6-c-alert__title.pf-m-truncate {
646
662
  display: -webkit-box;
663
+ overflow: hidden;
647
664
  -webkit-box-orient: vertical;
648
665
  -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
649
- overflow: hidden;
650
666
  }
651
667
 
652
668
  .pf-v6-c-alert__description {
@@ -883,7 +899,6 @@
883
899
  }
884
900
  .pf-v6-c-avatar.pf-m-sm {
885
901
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width);
886
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
887
902
  }
888
903
  @media (min-width: 36rem) {
889
904
  .pf-v6-c-avatar.pf-m-sm {
@@ -910,6 +925,9 @@
910
925
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))));
911
926
  }
912
927
  }
928
+ .pf-v6-c-avatar.pf-m-sm {
929
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
930
+ }
913
931
  @media (min-width: 36rem) {
914
932
  .pf-v6-c-avatar.pf-m-sm {
915
933
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height));
@@ -937,7 +955,6 @@
937
955
  }
938
956
  .pf-v6-c-avatar.pf-m-md {
939
957
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width);
940
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
941
958
  }
942
959
  @media (min-width: 36rem) {
943
960
  .pf-v6-c-avatar.pf-m-md {
@@ -964,6 +981,9 @@
964
981
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))));
965
982
  }
966
983
  }
984
+ .pf-v6-c-avatar.pf-m-md {
985
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
986
+ }
967
987
  @media (min-width: 36rem) {
968
988
  .pf-v6-c-avatar.pf-m-md {
969
989
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height));
@@ -991,7 +1011,6 @@
991
1011
  }
992
1012
  .pf-v6-c-avatar.pf-m-lg {
993
1013
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width);
994
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
995
1014
  }
996
1015
  @media (min-width: 36rem) {
997
1016
  .pf-v6-c-avatar.pf-m-lg {
@@ -1018,6 +1037,9 @@
1018
1037
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))));
1019
1038
  }
1020
1039
  }
1040
+ .pf-v6-c-avatar.pf-m-lg {
1041
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
1042
+ }
1021
1043
  @media (min-width: 36rem) {
1022
1044
  .pf-v6-c-avatar.pf-m-lg {
1023
1045
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height));
@@ -1045,7 +1067,6 @@
1045
1067
  }
1046
1068
  .pf-v6-c-avatar.pf-m-xl {
1047
1069
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width);
1048
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
1049
1070
  }
1050
1071
  @media (min-width: 36rem) {
1051
1072
  .pf-v6-c-avatar.pf-m-xl {
@@ -1072,6 +1093,9 @@
1072
1093
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))));
1073
1094
  }
1074
1095
  }
1096
+ .pf-v6-c-avatar.pf-m-xl {
1097
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
1098
+ }
1075
1099
  @media (min-width: 36rem) {
1076
1100
  .pf-v6-c-avatar.pf-m-xl {
1077
1101
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height));
@@ -1129,6 +1153,12 @@
1129
1153
 
1130
1154
  .pf-v6-c-background-image {
1131
1155
  --pf-v6-c-background-image--BackgroundPosition: bottom right;
1156
+ }
1157
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
1158
+ --pf-v6-c-background-image--BackgroundPosition: bottom left;
1159
+ }
1160
+
1161
+ .pf-v6-c-background-image {
1132
1162
  position: fixed;
1133
1163
  inset-block-start: 0;
1134
1164
  inset-inline-start: 0;
@@ -1141,9 +1171,6 @@
1141
1171
  background-position: var(--pf-v6-c-background-image--BackgroundPosition);
1142
1172
  background-size: var(--pf-v6-c-background-image--BackgroundSize);
1143
1173
  }
1144
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
1145
- --pf-v6-c-background-image--BackgroundPosition: bottom left;
1146
- }
1147
1174
 
1148
1175
  .pf-v6-c-back-to-top {
1149
1176
  --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
@@ -1261,6 +1288,14 @@
1261
1288
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1262
1289
  --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
1263
1290
  --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1291
+ }
1292
+ @media (min-width: 48rem) {
1293
+ .pf-v6-c-banner {
1294
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
1295
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
1296
+ }
1297
+ }
1298
+ .pf-v6-c-banner {
1264
1299
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1265
1300
  --pf-v6-c-banner--link--TextDecoration: underline;
1266
1301
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -1294,12 +1329,6 @@
1294
1329
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1295
1330
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1296
1331
  }
1297
- @media (min-width: 48rem) {
1298
- .pf-v6-c-banner {
1299
- --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
1300
- --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
1301
- }
1302
- }
1303
1332
 
1304
1333
  .pf-v6-c-banner {
1305
1334
  flex-shrink: 0;
@@ -1402,7 +1431,6 @@
1402
1431
  width: var(--pf-v6-c-brand--Width--base);
1403
1432
  height: var(--pf-v6-c-brand--Height--base);
1404
1433
  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
1405
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
1406
1434
  }
1407
1435
  @media (min-width: 36rem) {
1408
1436
  .pf-v6-c-brand {
@@ -1429,6 +1457,9 @@
1429
1457
  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
1430
1458
  }
1431
1459
  }
1460
+ .pf-v6-c-brand {
1461
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
1462
+ }
1432
1463
  @media (min-width: 36rem) {
1433
1464
  .pf-v6-c-brand {
1434
1465
  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
@@ -1509,15 +1540,16 @@
1509
1540
  margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
1510
1541
  }
1511
1542
 
1543
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
1544
+ scale: -1 1;
1545
+ }
1546
+
1512
1547
  .pf-v6-c-breadcrumb__item-divider {
1513
1548
  margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
1514
1549
  font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
1515
1550
  line-height: 1;
1516
1551
  color: var(--pf-v6-c-breadcrumb__item-divider--Color);
1517
1552
  }
1518
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
1519
- scale: -1 1;
1520
- }
1521
1553
 
1522
1554
  .pf-v6-c-breadcrumb__link {
1523
1555
  padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
@@ -1602,11 +1634,16 @@ button.pf-v6-c-breadcrumb__link {
1602
1634
  --pf-v6-c-button--hover--TextDecorationLine: none;
1603
1635
  --pf-v6-c-button--hover--TextDecorationStyle: none;
1604
1636
  --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
1637
+ --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1605
1638
  --pf-v6-c-button--hover--ScaleX: 1;
1606
1639
  --pf-v6-c-button--hover--ScaleY: 1;
1607
1640
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1608
1641
  --pf-v6-c-button--m-clicked--BorderColor: transparent;
1609
1642
  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1643
+ --pf-v6-c-button--m-clicked--TextDecorationLine: none;
1644
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: none;
1645
+ --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor;
1646
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1610
1647
  --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1611
1648
  --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1612
1649
  --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
@@ -1645,7 +1682,7 @@ button.pf-v6-c-breadcrumb__link {
1645
1682
  --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1646
1683
  --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1647
1684
  --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1648
- --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
1685
+ --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1649
1686
  --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1650
1687
  --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1651
1688
  --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
@@ -1683,10 +1720,17 @@ button.pf-v6-c-breadcrumb__link {
1683
1720
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1684
1721
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1685
1722
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1723
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1686
1724
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1687
1725
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1726
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1727
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1688
1728
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1689
1729
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1730
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1731
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1732
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1733
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
1690
1734
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1691
1735
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
1692
1736
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -1696,11 +1740,9 @@ button.pf-v6-c-breadcrumb__link {
1696
1740
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1697
1741
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1698
1742
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1699
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
1700
1743
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1701
1744
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1702
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
1703
- --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1745
+ --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1704
1746
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1705
1747
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1706
1748
  --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -1734,12 +1776,12 @@ button.pf-v6-c-breadcrumb__link {
1734
1776
  --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
1735
1777
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
1736
1778
  --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
1737
- --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
1779
+ --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
1738
1780
  --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1739
1781
  --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1740
1782
  --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
1741
1783
  --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
1742
- --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
1784
+ --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
1743
1785
  --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
1744
1786
  --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
1745
1787
  --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
@@ -1806,7 +1848,37 @@ button.pf-v6-c-breadcrumb__link {
1806
1848
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
1807
1849
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
1808
1850
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
1809
- --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
1851
+ --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
1852
+ --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
1853
+ --pf-v6-c-button--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1854
+ --pf-v6-c-button--m-display-lg--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1855
+ --pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1856
+ --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor: var(--pf-t--global--border--color--control--default);
1857
+ --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1858
+ --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1859
+ --pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1860
+ --pf-v6-c-button--m-display-lg--m-primary--Color: var(--pf-t--global--text--color--on-brand--accent--default);
1861
+ --pf-v6-c-button--m-display-lg--m-primary--BackgroundColor: var(--pf-t--global--color--brand--accent--default);
1862
+ --pf-v6-c-button--m-display-lg--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--default);
1863
+ --pf-v6-c-button--m-display-lg--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--accent--hover);
1864
+ --pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--accent--hover);
1865
+ --pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--hover);
1866
+ --pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--accent--clicked);
1867
+ --pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--accent--clicked);
1868
+ --pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--clicked);
1869
+ --pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor: currentcolor;
1870
+ --pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor: currentcolor;
1871
+ --pf-v6-c-button--m-display-lg--m-secondary--Color: var(--pf-t--global--text--color--regular);
1872
+ --pf-v6-c-button--m-display-lg--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--accent--default);
1873
+ --pf-v6-c-button--m-display-lg--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--accent--default);
1874
+ --pf-v6-c-button--m-display-lg--m-secondary--hover--Color: var(--pf-t--global--text--color--regular);
1875
+ --pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--accent--hover);
1876
+ --pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--accent--hover);
1877
+ --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--regular);
1878
+ --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--accent--clicked);
1879
+ --pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--accent--clicked);
1880
+ --pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--default);
1881
+ --pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--default);
1810
1882
  --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1811
1883
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1812
1884
  --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -1885,6 +1957,14 @@ button.pf-v6-c-breadcrumb__link {
1885
1957
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1886
1958
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1887
1959
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
1960
+ --pf-v6-c-button--m-circle--ScaleX: 1.29;
1961
+ --pf-v6-c-button--m-circle--ScaleY: 1.29;
1962
+ --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
1963
+ --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
1964
+ --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
1965
+ --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
1966
+ --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
1967
+ --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
1888
1968
  }
1889
1969
 
1890
1970
  .pf-v6-c-button {
@@ -2006,6 +2086,12 @@ button.pf-v6-c-breadcrumb__link {
2006
2086
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
2007
2087
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
2008
2088
  }
2089
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2090
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
2091
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
2092
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2093
+ }
2094
+
2009
2095
  .pf-v6-c-button.pf-m-link.pf-m-inline {
2010
2096
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
2011
2097
  --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
@@ -2016,12 +2102,13 @@ button.pf-v6-c-breadcrumb__link {
2016
2102
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
2017
2103
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
2018
2104
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
2105
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
2106
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
2107
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
2019
2108
  --pf-v6-c-button--BackgroundColor: transparent;
2020
2109
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
2021
2110
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
2022
2111
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
2023
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2024
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2025
2112
  --pf-v6-c-button--hover--BackgroundColor: transparent;
2026
2113
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
2027
2114
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -2030,23 +2117,24 @@ button.pf-v6-c-breadcrumb__link {
2030
2117
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
2031
2118
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
2032
2119
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
2120
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2121
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2033
2122
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2123
+ --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2034
2124
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2035
2125
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
2036
2126
  --pf-v6-c-button--BorderWidth: 0;
2037
2127
  --pf-v6-c-button--hover--BorderWidth: 0;
2038
2128
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
2039
2129
  text-align: start;
2130
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2040
2131
  white-space: normal;
2041
2132
  background: transparent;
2042
2133
  outline-offset: 0.125rem;
2043
2134
  }
2044
- span.pf-v6-c-button.pf-m-link.pf-m-inline {
2045
- --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
2046
- --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
2047
- --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2135
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2136
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2048
2137
  }
2049
-
2050
2138
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2051
2139
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2052
2140
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -2197,6 +2285,38 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2197
2285
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
2198
2286
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
2199
2287
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
2288
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationColor);
2289
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationLine);
2290
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationStyle);
2291
+ --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset);
2292
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor);
2293
+ --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine);
2294
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle);
2295
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset);
2296
+ --pf-v6-c-button--m-primary--Color: var(--pf-v6-c-button--m-display-lg--m-primary--Color);
2297
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--BackgroundColor);
2298
+ --pf-v6-c-button--m-primary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary__icon--Color);
2299
+ --pf-v6-c-button--m-primary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover--Color);
2300
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor);
2301
+ --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color);
2302
+ --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color);
2303
+ --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor);
2304
+ --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color);
2305
+ --pf-v6-c-button--m-secondary--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--Color);
2306
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--BorderColor);
2307
+ --pf-v6-c-button--m-secondary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary__icon--Color);
2308
+ --pf-v6-c-button--m-secondary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--Color);
2309
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor);
2310
+ --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color);
2311
+ --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color);
2312
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor);
2313
+ --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color);
2314
+ --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor);
2315
+ --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor);
2316
+ }
2317
+ .pf-v6-c-button.pf-m-display-lg.pf-m-primary {
2318
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor);
2319
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor);
2200
2320
  }
2201
2321
  .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
2202
2322
  display: grid;
@@ -2252,6 +2372,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2252
2372
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2253
2373
  --pf-v6-c-button--hover__icon--ScaleX: 1;
2254
2374
  }
2375
+ .pf-v6-c-button.pf-m-circle {
2376
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
2377
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
2378
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
2379
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
2380
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
2381
+ }
2382
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
2383
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
2384
+ }
2255
2385
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2256
2386
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2257
2387
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -2270,6 +2400,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2270
2400
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2271
2401
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2272
2402
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2403
+ text-underline-offset: var(--pf-v6-c-button--hover--TextUnderlineOffset);
2273
2404
  outline-offset: var(--pf-t--global--focus-ring--position--offset);
2274
2405
  }
2275
2406
  .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
@@ -2278,6 +2409,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2278
2409
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2279
2410
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2280
2411
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2412
+ text-decoration-line: var(--pf-v6-c-button--m-clicked--TextDecorationLine);
2413
+ text-decoration-style: var(--pf-v6-c-button--m-clicked--TextDecorationStyle);
2414
+ text-decoration-color: var(--pf-v6-c-button--m-clicked--TextDecorationColor);
2415
+ text-underline-offset: var(--pf-v6-c-button--m-clicked--TextUnderlineOffset);
2281
2416
  }
2282
2417
  .pf-v6-c-button:active {
2283
2418
  background-size: 100% 100%;
@@ -2506,13 +2641,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2506
2641
  margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
2507
2642
  }
2508
2643
 
2644
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
2645
+ scale: -1 1;
2646
+ }
2647
+
2509
2648
  .pf-v6-c-calendar-month__header-nav-control {
2510
2649
  margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
2511
2650
  margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
2512
2651
  }
2513
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
2514
- scale: -1 1;
2515
- }
2516
2652
 
2517
2653
  .pf-v6-c-calendar-month__header-month {
2518
2654
  flex-grow: 1;
@@ -2687,7 +2823,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2687
2823
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2688
2824
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2689
2825
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2690
- --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2826
+ --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
2691
2827
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2692
2828
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
2693
2829
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
@@ -2789,6 +2925,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2789
2925
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
2790
2926
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
2791
2927
  }
2928
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
2929
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
2930
+ --pf-v6-c-card__actions--MarginBlockStart: 0;
2931
+ --pf-v6-c-card__actions--MarginBlockEnd: 0;
2932
+ }
2933
+
2792
2934
  .pf-v6-c-card.pf-m-compact {
2793
2935
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
2794
2936
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -2856,12 +2998,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2856
2998
  flex-wrap: wrap;
2857
2999
  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
2858
3000
  }
2859
- .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2860
- margin-inline-start: 0;
2861
- }
2862
3001
  .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
2863
3002
  margin-inline-end: auto;
2864
3003
  }
3004
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
3005
+ margin-inline-start: 0;
3006
+ }
2865
3007
 
2866
3008
  .pf-v6-c-card__header-main {
2867
3009
  flex-grow: 1;
@@ -2875,15 +3017,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2875
3017
  margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
2876
3018
  }
2877
3019
 
3020
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
3021
+ scale: -1 1;
3022
+ }
3023
+
2878
3024
  .pf-v6-c-card__header-toggle-icon {
2879
3025
  display: inline-block;
2880
3026
  transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2881
3027
  transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
2882
3028
  transition-property: transform;
2883
3029
  }
2884
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2885
- scale: -1 1;
2886
- }
2887
3030
 
2888
3031
  .pf-v6-c-card__title-text {
2889
3032
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
@@ -2894,6 +3037,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2894
3037
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2895
3038
  }
2896
3039
 
3040
+ .pf-v6-c-card__subtitle {
3041
+ padding-block-start: var(--pf-t--global--spacer--sm);
3042
+ font-size: var(--pf-t--global--font--size--body--sm);
3043
+ color: var(--pf-t--global--text--color--subtle);
3044
+ }
3045
+
2897
3046
  .pf-v6-c-card__actions {
2898
3047
  display: flex;
2899
3048
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -3095,7 +3244,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3095
3244
  --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
3096
3245
  --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3097
3246
  --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
3098
- --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
3247
+ --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: -180deg;
3099
3248
  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
3100
3249
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
3101
3250
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -3106,8 +3255,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3106
3255
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
3107
3256
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
3108
3257
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
3109
- --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
3110
- --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
3258
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
3259
+ --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
3111
3260
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
3112
3261
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
3113
3262
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
@@ -3143,13 +3292,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3143
3292
  gap: var(--pf-v6-c-clipboard-copy__group--Gap);
3144
3293
  }
3145
3294
 
3146
- .pf-v6-c-clipboard-copy__toggle-icon {
3147
- transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
3148
- }
3149
3295
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
3150
3296
  scale: -1 1;
3151
3297
  }
3152
3298
 
3299
+ .pf-v6-c-clipboard-copy__toggle-icon {
3300
+ transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
3301
+ }
3302
+
3153
3303
  .pf-v6-c-clipboard-copy__expandable-content {
3154
3304
  padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
3155
3305
  padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);
@@ -3320,8 +3470,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3320
3470
 
3321
3471
  .pf-v6-c-code-editor__container {
3322
3472
  display: flex;
3323
- flex-direction: column;
3324
3473
  flex-grow: 1;
3474
+ flex-direction: column;
3325
3475
  }
3326
3476
 
3327
3477
  .pf-v6-c-code-editor__header {
@@ -3463,59 +3613,379 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3463
3613
  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
3464
3614
  }
3465
3615
 
3466
- :root {
3467
- --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
3468
- --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
3469
- --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
3470
- --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
3471
- --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
3472
- --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
3473
- --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
3474
- --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
3475
- --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3476
- --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
3477
- --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
3478
- --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
3479
- --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
3480
- --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3481
- --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
3482
- --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
3483
- --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
3484
- --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
3485
- --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3486
- --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
3487
- --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
3488
- --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
3489
- --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
3490
- --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3491
- --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
3492
- --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
3493
- --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
3494
- --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
3495
- --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3496
- --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
3497
- --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
3498
- --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
3499
- --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
3500
- --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3501
- --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
3502
- --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
3503
- --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
3504
- --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
3505
- --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
3506
- --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
3507
- --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
3508
- --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
3509
- --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
3510
- --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
3511
- --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3512
- --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3513
- --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
3514
- --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3515
- --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3516
- --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
3517
- --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
3518
- --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3616
+ .pf-v6-c-compass {
3617
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
3618
+ --pf-v6-c-compass--BackgroundImage--light: none;
3619
+ --pf-v6-c-compass--BackgroundImage--dark: none;
3620
+ --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3621
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
3622
+ --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3623
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3624
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
3625
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3626
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3627
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3628
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
3629
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3630
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3631
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3632
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3633
+ --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3634
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3635
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3636
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
3637
+ --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3638
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3639
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3640
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3641
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3642
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
3643
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
3644
+ --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3645
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3646
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3647
+ --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
3648
+ --pf-v6-c-compass__message-bar--Width: 450px;
3649
+ --pf-v6-c-compass__message-bar--MinWidth: 300px;
3650
+ --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3651
+ --pf-v6-c-compass--section--slide--length--header: 100%;
3652
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
3653
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
3654
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
3655
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
3656
+ --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3657
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
3658
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3659
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3660
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
3661
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
3662
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
3663
+ }
3664
+ @media screen and (prefers-reduced-motion: no-preference) {
3665
+ .pf-v6-c-compass {
3666
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3667
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3668
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
3669
+ }
3670
+ .pf-v6-c-compass.pf-m-animate-smoothly {
3671
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3672
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
3673
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
3674
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
3675
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
3676
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3677
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3678
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
3679
+ }
3680
+ }
3681
+
3682
+ .pf-v6-c-compass {
3683
+ interpolate-size: allow-keywords;
3684
+ display: grid;
3685
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3686
+ grid-template-rows: auto 1fr;
3687
+ grid-template-columns: auto 1fr auto;
3688
+ grid-auto-rows: auto;
3689
+ align-items: center;
3690
+ justify-content: center;
3691
+ height: 100dvh;
3692
+ padding: var(--pf-v6-c-compass--Padding);
3693
+ overflow: hidden;
3694
+ background-image: var(--pf-v6-c-compass--BackgroundImage);
3695
+ background-size: cover;
3696
+ }
3697
+ .pf-v6-c-compass.pf-m-dock {
3698
+ grid-template-areas: "dock main";
3699
+ grid-template-rows: auto;
3700
+ grid-template-columns: auto 1fr;
3701
+ align-items: stretch;
3702
+ padding: 0;
3703
+ }
3704
+ .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
3705
+ padding: var(--pf-v6-c-compass--Padding);
3706
+ }
3707
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3708
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3709
+ }
3710
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
3711
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3712
+ }
3713
+
3714
+ .pf-v6-c-compass__header,
3715
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3716
+ .pf-v6-c-compass__main-footer,
3717
+ .pf-v6-c-compass__footer {
3718
+ margin: 0;
3719
+ visibility: hidden;
3720
+ opacity: 0;
3721
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
3722
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
3723
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
3724
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
3725
+ }
3726
+ .pf-v6-c-compass__header.pf-m-expanded,
3727
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
3728
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3729
+ .pf-v6-c-compass__footer.pf-m-expanded {
3730
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
3731
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
3732
+ visibility: visible;
3733
+ opacity: 1;
3734
+ translate: 0;
3735
+ }
3736
+
3737
+ .pf-v6-c-compass__header,
3738
+ .pf-v6-c-compass__main-footer,
3739
+ .pf-v6-c-compass__footer {
3740
+ height: 0;
3741
+ }
3742
+ .pf-v6-c-compass__header.pf-m-expanded,
3743
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3744
+ .pf-v6-c-compass__footer.pf-m-expanded {
3745
+ height: auto;
3746
+ }
3747
+
3748
+ .pf-v6-c-compass__header {
3749
+ display: grid;
3750
+ grid-area: header;
3751
+ grid-template-columns: 1fr auto 1fr;
3752
+ align-items: start;
3753
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
3754
+ }
3755
+ .pf-v6-c-compass__header.pf-m-expanded {
3756
+ margin-block-end: var(--pf-v6-c-compass--Gap);
3757
+ }
3758
+
3759
+ .pf-v6-c-compass__profile {
3760
+ justify-self: end;
3761
+ }
3762
+ .pf-v6-c-compass__profile .pf-v6-c-menu-toggle.pf-m-plain {
3763
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
3764
+ }
3765
+
3766
+ .pf-v6-c-compass__nav {
3767
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3768
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3769
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3770
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3771
+ display: flex;
3772
+ flex-direction: column;
3773
+ gap: var(--pf-v6-c-compass__nav--RowGap);
3774
+ align-items: center;
3775
+ justify-self: stretch;
3776
+ }
3777
+
3778
+ .pf-v6-c-compass__nav-content {
3779
+ display: flex;
3780
+ align-items: center;
3781
+ }
3782
+
3783
+ .pf-v6-c-compass__nav-main {
3784
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
3785
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3786
+ }
3787
+
3788
+ .pf-v6-c-compass__sidebar {
3789
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3790
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3791
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3792
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3793
+ display: flex;
3794
+ width: 0;
3795
+ }
3796
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
3797
+ width: auto;
3798
+ }
3799
+ .pf-v6-c-compass__sidebar.pf-m-start {
3800
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3801
+ }
3802
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
3803
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3804
+ }
3805
+
3806
+ .pf-v6-c-compass__sidebar.pf-m-start {
3807
+ grid-area: sidebar-start;
3808
+ }
3809
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
3810
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
3811
+ }
3812
+ .pf-v6-c-compass__sidebar.pf-m-end {
3813
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3814
+ }
3815
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
3816
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3817
+ }
3818
+
3819
+ .pf-v6-c-compass__sidebar.pf-m-end {
3820
+ grid-area: sidebar-end;
3821
+ }
3822
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
3823
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
3824
+ }
3825
+
3826
+ .pf-v6-c-compass__main {
3827
+ display: flex;
3828
+ flex-direction: column;
3829
+ grid-area: main;
3830
+ gap: var(--pf-v6-c-compass__main--RowGap);
3831
+ align-self: stretch;
3832
+ min-height: 0;
3833
+ }
3834
+
3835
+ .pf-v6-c-compass__main-header-content {
3836
+ display: flex;
3837
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
3838
+ }
3839
+
3840
+ .pf-v6-c-compass__main-header-title {
3841
+ flex-grow: 1;
3842
+ }
3843
+
3844
+ .pf-v6-c-compass__content {
3845
+ display: flex;
3846
+ flex: 1 0 0;
3847
+ flex-direction: column;
3848
+ min-height: 0;
3849
+ overflow: auto;
3850
+ }
3851
+ .pf-v6-c-compass__content > *:last-child {
3852
+ flex-grow: 1;
3853
+ max-height: 100%;
3854
+ }
3855
+
3856
+ .pf-v6-c-compass__main-footer {
3857
+ display: flex;
3858
+ justify-content: center;
3859
+ min-height: 0;
3860
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3861
+ }
3862
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
3863
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3864
+ }
3865
+
3866
+ .pf-v6-c-compass__footer {
3867
+ display: flex;
3868
+ grid-column: 1/-1;
3869
+ justify-content: center;
3870
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3871
+ }
3872
+ .pf-v6-c-compass__footer.pf-m-expanded {
3873
+ margin-block-start: var(--pf-v6-c-compass--Gap);
3874
+ }
3875
+
3876
+ .pf-v6-c-compass__message-bar {
3877
+ width: var(--pf-v6-c-compass__message-bar--Width);
3878
+ min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
3879
+ max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
3880
+ }
3881
+
3882
+ .pf-v6-c-compass__panel {
3883
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3884
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3885
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3886
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3887
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3888
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3889
+ border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3890
+ border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3891
+ box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3892
+ }
3893
+ .pf-v6-c-compass__panel.pf-m-no-border {
3894
+ border-width: 0;
3895
+ }
3896
+ .pf-v6-c-compass__panel.pf-m-no-padding {
3897
+ padding: 0;
3898
+ }
3899
+ .pf-v6-c-compass__panel.pf-m-full-height {
3900
+ height: 100%;
3901
+ }
3902
+ .pf-v6-c-compass__panel.pf-m-pill {
3903
+ border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
3904
+ }
3905
+ .pf-v6-c-compass__panel.pf-m-scrollable {
3906
+ overflow: auto;
3907
+ }
3908
+
3909
+ /* stylelint-disable */
3910
+ @media (max-width: 1200px) {
3911
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning) {
3912
+ position: relative;
3913
+ display: grid;
3914
+ grid-template-columns: auto;
3915
+ grid-template-rows: auto;
3916
+ place-content: center;
3917
+ gap: 0;
3918
+ }
3919
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning)::after {
3920
+ padding: 1em;
3921
+ border-radius: var(--pf-t--global--border--radius--large);
3922
+ background: var(--pf-t--global--background--color--primary--default);
3923
+ content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
3924
+ width: 80%;
3925
+ width: 300px;
3926
+ border: 1px solid var(--pf-t--global--border--color--default);
3927
+ box-shadow: var(--pf-t--global--box-shadow--md);
3928
+ white-space: pre-wrap;
3929
+ text-align: center;
3930
+ }
3931
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning) * {
3932
+ display: none;
3933
+ }
3934
+ }
3935
+ /* stylelint-enable */
3936
+ :root {
3937
+ --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
3938
+ --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
3939
+ --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
3940
+ --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
3941
+ --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
3942
+ --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
3943
+ --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
3944
+ --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
3945
+ --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3946
+ --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
3947
+ --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
3948
+ --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
3949
+ --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
3950
+ --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3951
+ --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
3952
+ --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
3953
+ --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
3954
+ --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
3955
+ --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3956
+ --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
3957
+ --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
3958
+ --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
3959
+ --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
3960
+ --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3961
+ --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
3962
+ --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
3963
+ --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
3964
+ --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
3965
+ --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3966
+ --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
3967
+ --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
3968
+ --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
3969
+ --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
3970
+ --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3971
+ --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
3972
+ --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
3973
+ --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
3974
+ --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
3975
+ --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
3976
+ --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
3977
+ --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
3978
+ --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
3979
+ --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
3980
+ --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
3981
+ --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3982
+ --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3983
+ --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
3984
+ --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3985
+ --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3986
+ --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
3987
+ --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
3988
+ --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3519
3989
  --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
3520
3990
  --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
3521
3991
  --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
@@ -4157,7 +4627,16 @@ ul) {
4157
4627
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
4158
4628
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
4159
4629
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
4160
- --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
4630
+ }
4631
+ @media screen and (min-width: 36rem) {
4632
+ .pf-v6-c-data-list {
4633
+ --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
4634
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
4635
+ }
4636
+ }
4637
+ .pf-v6-c-data-list {
4638
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4639
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
4161
4640
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
4162
4641
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
4163
4642
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -4165,6 +4644,14 @@ ul) {
4165
4644
  --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
4166
4645
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
4167
4646
  --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
4647
+ }
4648
+ @media screen and (min-width: 36rem) {
4649
+ .pf-v6-c-data-list {
4650
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
4651
+ --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
4652
+ }
4653
+ }
4654
+ .pf-v6-c-data-list {
4168
4655
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4169
4656
  --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-t--global--spacer--md);
4170
4657
  --pf-v6-c-data-list__item-row--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -4192,7 +4679,7 @@ ul) {
4192
4679
  --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4193
4680
  --pf-v6-c-data-list__toggle-icon--Transition: transform var(--pf-v6-c-data-list__toggle-icon--TransitionDuration) var(--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction);
4194
4681
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
4195
- --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4682
+ --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: -180deg;
4196
4683
  --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;
4197
4684
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
4198
4685
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -4260,18 +4747,6 @@ ul) {
4260
4747
  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
4261
4748
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4262
4749
  }
4263
- @media screen and (min-width: 36rem) {
4264
- .pf-v6-c-data-list {
4265
- --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
4266
- --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
4267
- }
4268
- }
4269
- @media screen and (min-width: 36rem) {
4270
- .pf-v6-c-data-list {
4271
- --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
4272
- --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
4273
- }
4274
- }
4275
4750
 
4276
4751
  .pf-v6-c-data-list {
4277
4752
  font-size: var(--pf-v6-c-data-list--FontSize);
@@ -4312,6 +4787,9 @@ ul) {
4312
4787
  .pf-v6-c-data-list.pf-m-drag-over {
4313
4788
  overflow-anchor: none;
4314
4789
  }
4790
+ .pf-v6-c-data-list.pf-m-plain {
4791
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
4792
+ }
4315
4793
 
4316
4794
  .pf-v6-c-data-list.pf-m-truncate,
4317
4795
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -4431,12 +4909,6 @@ ul) {
4431
4909
  --pf-v6-hidden-visible--hidden--Display: none;
4432
4910
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4433
4911
  display: var(--pf-v6-hidden-visible--Display);
4434
- gap: var(--pf-v6-c-data-list__item-action--Gap);
4435
- align-content: flex-start;
4436
- align-items: flex-start;
4437
- padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
4438
- padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
4439
- margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
4440
4912
  }
4441
4913
  .pf-v6-c-data-list__item-action.pf-m-hidden {
4442
4914
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -4481,6 +4953,14 @@ ul) {
4481
4953
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4482
4954
  }
4483
4955
  }
4956
+ .pf-v6-c-data-list__item-action {
4957
+ gap: var(--pf-v6-c-data-list__item-action--Gap);
4958
+ align-content: flex-start;
4959
+ align-items: flex-start;
4960
+ padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
4961
+ padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
4962
+ margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
4963
+ }
4484
4964
 
4485
4965
  .pf-v6-c-data-list__toggle {
4486
4966
  margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
@@ -4488,15 +4968,16 @@ ul) {
4488
4968
  margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
4489
4969
  }
4490
4970
 
4971
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
4972
+ scale: -1 1;
4973
+ }
4974
+
4491
4975
  .pf-v6-c-data-list__toggle-icon {
4492
4976
  height: var(--pf-v6-c-data-list__toggle-icon--Height);
4493
4977
  pointer-events: none;
4494
4978
  transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
4495
4979
  transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
4496
4980
  }
4497
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
4498
- scale: -1 1;
4499
- }
4500
4981
 
4501
4982
  .pf-v6-c-data-list__item-content {
4502
4983
  display: grid;
@@ -4591,6 +5072,13 @@ ul) {
4591
5072
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
4592
5073
  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
4593
5074
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
5075
+ }
5076
+ @media screen and (min-width: 36rem) {
5077
+ .pf-v6-c-description-list {
5078
+ --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
5079
+ }
5080
+ }
5081
+ .pf-v6-c-description-list {
4594
5082
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
4595
5083
  --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
4596
5084
  --pf-v6-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -4619,11 +5107,6 @@ ul) {
4619
5107
  --pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit;
4620
5108
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
4621
5109
  }
4622
- @media screen and (min-width: 36rem) {
4623
- .pf-v6-c-description-list {
4624
- --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
4625
- }
4626
- }
4627
5110
  @media (min-width: 36rem) {
4628
5111
  .pf-v6-c-description-list {
4629
5112
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));
@@ -5005,6 +5488,15 @@ ul) {
5005
5488
  --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
5006
5489
  --pf-v6-c-dual-list-selector__list--TranslateY: 0;
5007
5490
  --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
5491
+ }
5492
+ @media screen and (prefers-reduced-motion: no-preference) {
5493
+ .pf-v6-c-dual-list-selector {
5494
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
5495
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
5496
+ --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
5497
+ }
5498
+ }
5499
+ .pf-v6-c-dual-list-selector {
5008
5500
  --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
5009
5501
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
5010
5502
  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -5040,19 +5532,12 @@ ul) {
5040
5532
  --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
5041
5533
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
5042
5534
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
5043
- --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
5535
+ --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
5044
5536
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
5045
5537
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
5046
5538
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
5047
5539
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
5048
5540
  }
5049
- @media screen and (prefers-reduced-motion: no-preference) {
5050
- .pf-v6-c-dual-list-selector {
5051
- --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
5052
- --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
5053
- --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
5054
- }
5055
- }
5056
5541
 
5057
5542
  .pf-v6-c-dual-list-selector {
5058
5543
  display: grid;
@@ -5123,8 +5608,6 @@ ul) {
5123
5608
 
5124
5609
  .pf-v6-c-dual-list-selector__list {
5125
5610
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
5126
- display: flex;
5127
- flex-direction: column;
5128
5611
  }
5129
5612
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
5130
5613
  --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
@@ -5132,16 +5615,22 @@ ul) {
5132
5615
  }
5133
5616
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
5134
5617
  transform: translateX(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX));
5135
- position: absolute;
5136
- inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
5137
5618
  }
5138
5619
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
5139
5620
  transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
5140
5621
  }
5141
5622
 
5623
+ .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
5624
+ position: absolute;
5625
+ inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
5626
+ }
5142
5627
  .pf-v6-c-dual-list-selector__list.pf-m-drag-over {
5143
5628
  overflow-anchor: none;
5144
5629
  }
5630
+ .pf-v6-c-dual-list-selector__list {
5631
+ display: flex;
5632
+ flex-direction: column;
5633
+ }
5145
5634
 
5146
5635
  .pf-v6-c-dual-list-selector__list-item:focus-visible {
5147
5636
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
@@ -5426,11 +5915,6 @@ ul) {
5426
5915
  --pf-v6-hidden-visible--hidden--Display: none;
5427
5916
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5428
5917
  display: var(--pf-v6-hidden-visible--Display);
5429
- flex-shrink: 0;
5430
- align-items: stretch;
5431
- align-self: stretch;
5432
- justify-content: center;
5433
- border: 0;
5434
5918
  }
5435
5919
  .pf-v6-c-divider.pf-m-hidden {
5436
5920
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -5475,6 +5959,13 @@ ul) {
5475
5959
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5476
5960
  }
5477
5961
  }
5962
+ .pf-v6-c-divider {
5963
+ flex-shrink: 0;
5964
+ align-items: stretch;
5965
+ align-self: stretch;
5966
+ justify-content: center;
5967
+ border: 0;
5968
+ }
5478
5969
  .pf-v6-c-divider::before {
5479
5970
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
5480
5971
  content: "";
@@ -5719,6 +6210,7 @@ ul) {
5719
6210
  }
5720
6211
 
5721
6212
  .pf-v6-c-drawer {
6213
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
5722
6214
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5723
6215
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5724
6216
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -5749,6 +6241,7 @@ ul) {
5749
6241
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5750
6242
  --pf-v6-c-drawer__panel--Opacity: 0;
5751
6243
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
6244
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
5752
6245
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5753
6246
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5754
6247
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -5764,6 +6257,29 @@ ul) {
5764
6257
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
5765
6258
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
5766
6259
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
6260
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
6261
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
6262
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
6263
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
6264
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6265
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6266
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6267
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
6268
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
6269
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
6270
+ }
6271
+ @media screen and (prefers-reduced-motion: no-preference) {
6272
+ .pf-v6-c-drawer {
6273
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
6274
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
6275
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
6276
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
6277
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
6278
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
6279
+ --pf-v6-c-drawer__panel--Opacity: 1;
6280
+ }
6281
+ }
6282
+ .pf-v6-c-drawer {
5767
6283
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
5768
6284
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5769
6285
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -5826,6 +6342,17 @@ ul) {
5826
6342
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
5827
6343
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
5828
6344
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
6345
+ }
6346
+ @media screen and (min-width: 75rem) {
6347
+ .pf-v6-c-drawer {
6348
+ --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
6349
+ }
6350
+ .pf-v6-c-drawer.pf-m-panel-bottom {
6351
+ --pf-v6-c-drawer__panel--MinWidth: auto;
6352
+ --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
6353
+ }
6354
+ }
6355
+ .pf-v6-c-drawer {
5829
6356
  --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
5830
6357
  --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
5831
6358
  --pf-v6-c-drawer__panel--BoxShadow: none;
@@ -5840,46 +6367,32 @@ ul) {
5840
6367
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: 0;
5841
6368
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0;
5842
6369
  }
5843
- @media screen and (prefers-reduced-motion: no-preference) {
5844
- .pf-v6-c-drawer {
5845
- --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
5846
- --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
5847
- --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5848
- --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5849
- --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
5850
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
5851
- --pf-v6-c-drawer__panel--Opacity: 1;
5852
- }
5853
- }
5854
- @media screen and (min-width: 75rem) {
5855
- .pf-v6-c-drawer {
5856
- --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
5857
- }
5858
- .pf-v6-c-drawer.pf-m-panel-bottom {
5859
- --pf-v6-c-drawer__panel--MinWidth: auto;
5860
- --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
5861
- }
5862
- }
5863
6370
 
5864
6371
  .pf-v6-c-drawer {
5865
6372
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
5866
- --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
5867
- display: flex;
5868
- flex-direction: column;
5869
- height: 100%;
5870
- overflow-x: hidden;
5871
6373
  }
5872
6374
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
5873
6375
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
5874
6376
  }
5875
6377
 
6378
+ .pf-v6-c-drawer {
6379
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
6380
+ }
5876
6381
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
5877
6382
  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
5878
6383
  }
5879
6384
 
6385
+ .pf-v6-c-drawer {
6386
+ display: flex;
6387
+ flex-direction: column;
6388
+ height: 100%;
6389
+ overflow-x: hidden;
6390
+ }
5880
6391
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
5881
6392
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
5882
6393
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
6394
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
6395
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
5883
6396
  }
5884
6397
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
5885
6398
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -5903,19 +6416,21 @@ ul) {
5903
6416
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
5904
6417
  }
5905
6418
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5906
- transform: translateX(-100%);
5907
- --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
5908
- visibility: visible;
6419
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
5909
6420
  }
5910
6421
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5911
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
6422
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
5912
6423
  }
5913
6424
 
6425
+ .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6426
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
6427
+ visibility: visible;
6428
+ }
5914
6429
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5915
6430
  transform: translateX(0);
5916
6431
  }
5917
6432
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5918
- transform: translate(0, -100%);
6433
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
5919
6434
  }
5920
6435
  .pf-v6-c-drawer.pf-m-resizing {
5921
6436
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -5924,6 +6439,26 @@ ul) {
5924
6439
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
5925
6440
  pointer-events: auto;
5926
6441
  }
6442
+ @media screen and (min-width: 48rem) {
6443
+ .pf-v6-c-drawer.pf-m-pill {
6444
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
6445
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
6446
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
6447
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6448
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6449
+ }
6450
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6451
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
6452
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
6453
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6454
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6455
+ }
6456
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
6457
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6458
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6459
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6460
+ }
6461
+ }
5927
6462
 
5928
6463
  .pf-v6-c-drawer__section {
5929
6464
  flex-grow: 0;
@@ -5939,6 +6474,7 @@ ul) {
5939
6474
  .pf-v6-c-drawer__main {
5940
6475
  display: flex;
5941
6476
  flex: 1;
6477
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
5942
6478
  overflow: hidden;
5943
6479
  }
5944
6480
 
@@ -5946,8 +6482,8 @@ ul) {
5946
6482
  .pf-v6-c-drawer__panel,
5947
6483
  .pf-v6-c-drawer__panel-main {
5948
6484
  display: flex;
5949
- flex-direction: column;
5950
6485
  flex-shrink: 0;
6486
+ flex-direction: column;
5951
6487
  overflow: auto;
5952
6488
  }
5953
6489
 
@@ -5977,6 +6513,8 @@ ul) {
5977
6513
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
5978
6514
  order: 1;
5979
6515
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
6516
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
6517
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
5980
6518
  overflow: auto;
5981
6519
  visibility: hidden;
5982
6520
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -5985,6 +6523,7 @@ ul) {
5985
6523
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
5986
6524
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
5987
6525
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
6526
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
5988
6527
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5989
6528
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
5990
6529
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -6172,7 +6711,7 @@ ul) {
6172
6711
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
6173
6712
  }
6174
6713
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6175
- transform: translateX(0);
6714
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
6176
6715
  }
6177
6716
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
6178
6717
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -6184,6 +6723,8 @@ ul) {
6184
6723
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
6185
6724
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
6186
6725
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
6726
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
6727
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
6187
6728
  min-width: auto;
6188
6729
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
6189
6730
  }
@@ -6231,82 +6772,86 @@ ul) {
6231
6772
  }
6232
6773
  @media (min-width: 48rem) {
6233
6774
  .pf-v6-c-drawer__panel.pf-m-width-25 {
6234
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6775
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6235
6776
  }
6236
6777
  .pf-v6-c-drawer__panel.pf-m-width-33 {
6237
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6778
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6238
6779
  }
6239
6780
  .pf-v6-c-drawer__panel.pf-m-width-50 {
6240
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6781
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6241
6782
  }
6242
6783
  .pf-v6-c-drawer__panel.pf-m-width-66 {
6243
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6784
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6244
6785
  }
6245
6786
  .pf-v6-c-drawer__panel.pf-m-width-75 {
6246
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6787
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6247
6788
  }
6248
6789
  .pf-v6-c-drawer__panel.pf-m-width-100 {
6249
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6790
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6791
+ --pf-v6-c-drawer__main--Gap: 0;
6250
6792
  }
6251
6793
  }
6252
6794
  @media (min-width: 62rem) {
6253
6795
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
6254
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6796
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6255
6797
  }
6256
6798
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
6257
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6799
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6258
6800
  }
6259
6801
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
6260
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6802
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6261
6803
  }
6262
6804
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
6263
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6805
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6264
6806
  }
6265
6807
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
6266
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6808
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6267
6809
  }
6268
6810
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
6269
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6811
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6812
+ --pf-v6-c-drawer__main--Gap: 0;
6270
6813
  }
6271
6814
  }
6272
6815
  @media (min-width: 75rem) {
6273
6816
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
6274
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6817
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6275
6818
  }
6276
6819
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
6277
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6820
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6278
6821
  }
6279
6822
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
6280
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6823
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6281
6824
  }
6282
6825
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
6283
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6826
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6284
6827
  }
6285
6828
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
6286
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6829
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6287
6830
  }
6288
6831
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
6289
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6832
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6833
+ --pf-v6-c-drawer__main--Gap: 0;
6290
6834
  }
6291
6835
  }
6292
6836
  @media (min-width: 90.625rem) {
6293
6837
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
6294
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6838
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6295
6839
  }
6296
6840
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
6297
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6841
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6298
6842
  }
6299
6843
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
6300
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6844
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6301
6845
  }
6302
6846
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
6303
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6847
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6304
6848
  }
6305
6849
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
6306
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6850
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6307
6851
  }
6308
6852
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
6309
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6853
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6854
+ --pf-v6-c-drawer__main--Gap: 0;
6310
6855
  }
6311
6856
  }
6312
6857
  @media (min-width: 48rem) {
@@ -6725,8 +7270,8 @@ ul) {
6725
7270
  --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
6726
7271
  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
6727
7272
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6728
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
6729
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
7273
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: -180deg;
7274
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
6730
7275
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
6731
7276
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
6732
7277
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
@@ -6738,10 +7283,24 @@ ul) {
6738
7283
  --pf-v6-c-expandable-section__content--Opacity: 0;
6739
7284
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6740
7285
  --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
7286
+ --pf-v6-c-expandable-section__content--MaxHeight: 0px;
7287
+ --pf-v6-c-expandable-section__content--Visibility: hidden;
7288
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6741
7289
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
6742
7290
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
6743
7291
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6744
7292
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
7293
+ }
7294
+ @media screen and (prefers-reduced-motion: no-preference) {
7295
+ .pf-v6-c-expandable-section {
7296
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7297
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7298
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
7299
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
7300
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
7301
+ }
7302
+ }
7303
+ .pf-v6-c-expandable-section {
6745
7304
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6746
7305
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
6747
7306
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -6758,15 +7317,6 @@ ul) {
6758
7317
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6759
7318
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
6760
7319
  }
6761
- @media screen and (prefers-reduced-motion: no-preference) {
6762
- .pf-v6-c-expandable-section {
6763
- --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
6764
- --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
6765
- --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6766
- --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
6767
- --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
6768
- }
6769
- }
6770
7320
 
6771
7321
  .pf-v6-c-expandable-section {
6772
7322
  display: flex;
@@ -6825,9 +7375,13 @@ ul) {
6825
7375
  }
6826
7376
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
6827
7377
  display: -webkit-box;
7378
+ overflow: hidden;
6828
7379
  -webkit-box-orient: vertical;
6829
7380
  -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
6830
- overflow: hidden;
7381
+ }
7382
+
7383
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
7384
+ scale: -1 1;
6831
7385
  }
6832
7386
 
6833
7387
  .pf-v6-c-expandable-section__toggle-icon {
@@ -6837,10 +7391,6 @@ ul) {
6837
7391
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
6838
7392
  transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
6839
7393
  }
6840
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
6841
- scale: -1 1;
6842
- }
6843
-
6844
7394
  .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
6845
7395
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
6846
7396
  }
@@ -6984,7 +7534,7 @@ ul) {
6984
7534
  --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6985
7535
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
6986
7536
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
6987
- --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
7537
+ --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: -180deg;
6988
7538
  --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
6989
7539
  --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6990
7540
  --pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
@@ -7423,8 +7973,8 @@ ul) {
7423
7973
 
7424
7974
  .pf-v6-c-form__field-group-header-main {
7425
7975
  display: flex;
7426
- flex-direction: column;
7427
7976
  flex-grow: 1;
7977
+ flex-direction: column;
7428
7978
  }
7429
7979
 
7430
7980
  .pf-v6-c-form__field-group-header-title {
@@ -7481,10 +8031,10 @@ ul) {
7481
8031
  --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
7482
8032
  --pf-v6-c-form-control--Resize: none;
7483
8033
  --pf-v6-c-form-control--OutlineOffset: -6px;
7484
- --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
8034
+ --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
7485
8035
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
7486
8036
  --pf-v6-c-form-control--before--BorderStyle: solid;
7487
- --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
8037
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--control--default);
7488
8038
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
7489
8039
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
7490
8040
  --pf-v6-c-form-control--after--BorderStyle: solid;
@@ -7665,8 +8215,8 @@ ul) {
7665
8215
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
7666
8216
  }
7667
8217
  .pf-v6-c-form-control.pf-m-textarea > textarea {
7668
- outline-offset: 0;
7669
8218
  scrollbar-gutter: stable;
8219
+ outline-offset: 0;
7670
8220
  }
7671
8221
  .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
7672
8222
  padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
@@ -7834,91 +8384,16 @@ ul) {
7834
8384
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
7835
8385
  pointer-events: none;
7836
8386
  }
7837
-
7838
- .pf-v6-c-form-control__utilities {
7839
- display: flex;
7840
- flex-wrap: nowrap;
7841
- grid-row: 1/2;
7842
- grid-column: 2;
7843
- gap: var(--pf-v6-c-form-control__utilities--Gap);
7844
- padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
7845
- padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
7846
- pointer-events: none;
7847
- }
7848
-
7849
- .pf-v6-c-hint {
7850
- --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
7851
- --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
7852
- --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
7853
- --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
7854
- --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
7855
- --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7856
- --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
7857
- --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
7858
- --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
7859
- --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
7860
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
7861
- --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
7862
- --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
7863
- --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
7864
- --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
7865
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7866
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7867
- }
7868
-
7869
- .pf-v6-c-hint {
7870
- display: grid;
7871
- grid-template-columns: 1fr auto;
7872
- grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
7873
- padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
7874
- padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
7875
- padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
7876
- padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
7877
- color: var(--pf-v6-c-hint--Color);
7878
- background-color: var(--pf-v6-c-hint--BackgroundColor);
7879
- border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
7880
- border-radius: var(--pf-v6-c-hint--BorderRadius);
7881
- }
7882
- .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
7883
- text-align: start;
7884
- white-space: normal;
7885
- }
7886
-
7887
- .pf-v6-c-hint__actions {
7888
- display: inline-grid;
7889
- grid-row: 1;
7890
- grid-column: 2;
7891
- grid-auto-flow: column;
7892
- align-self: start;
7893
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
7894
- margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
7895
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
7896
- text-align: end;
7897
- }
7898
- .pf-v6-c-hint__actions.pf-m-no-offset {
7899
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
7900
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
7901
- }
7902
- .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
7903
- grid-column: 1;
7904
- }
7905
-
7906
- .pf-v6-c-hint__title {
7907
- align-self: center;
7908
- font-weight: var(--pf-v6-c-hint__title--FontWeight);
7909
- }
7910
-
7911
- .pf-v6-c-hint__body {
7912
- grid-column: 1/-1;
7913
- font-size: var(--pf-v6-c-hint__body--FontSize);
7914
- }
7915
-
7916
- .pf-v6-c-hint__footer {
7917
- grid-column: 1/-1;
7918
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
7919
- }
7920
- .pf-v6-c-hint__footer > :not(:last-child) {
7921
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8387
+
8388
+ .pf-v6-c-form-control__utilities {
8389
+ display: flex;
8390
+ flex-wrap: nowrap;
8391
+ grid-row: 1/2;
8392
+ grid-column: 2;
8393
+ gap: var(--pf-v6-c-form-control__utilities--Gap);
8394
+ padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
8395
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
8396
+ pointer-events: none;
7922
8397
  }
7923
8398
 
7924
8399
  .pf-v6-c-helper-text {
@@ -8006,6 +8481,156 @@ ul) {
8006
8481
  color: var(--pf-v6-c-helper-text__item-text--Color);
8007
8482
  }
8008
8483
 
8484
+ .pf-v6-c-hero {
8485
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
8486
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
8487
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
8488
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8489
+ --pf-v6-c-hero--gradient--angle: 109deg;
8490
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
8491
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
8492
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
8493
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
8494
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
8495
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
8496
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
8497
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
8498
+ --pf-v6-c-hero--BackgroundImage--light: none;
8499
+ --pf-v6-c-hero--BackgroundImage--dark: none;
8500
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
8501
+ --pf-v6-c-hero--BackgroundPosition: right center;
8502
+ --pf-v6-c-hero--BackgroundSize: contain;
8503
+ --pf-v6-c-hero--BorderStyle: solid;
8504
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
8505
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
8506
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
8507
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
8508
+ --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
8509
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
8510
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
8511
+ --pf-v6-c-hero--BorderStartStartRadius: 24px;
8512
+ --pf-v6-c-hero--BorderStartEndRadius: 72px;
8513
+ --pf-v6-c-hero--BorderEndEndRadius: 24px;
8514
+ --pf-v6-c-hero--BorderEndStartRadius: 72px;
8515
+ --pf-v6-c-hero__body--Width: 800px;
8516
+ --pf-v6-c-hero__body--MaxWidth: 80%;
8517
+ }
8518
+
8519
+ .pf-v6-c-hero {
8520
+ display: flex;
8521
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
8522
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
8523
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
8524
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
8525
+ background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
8526
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
8527
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
8528
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
8529
+ border-color: var(--pf-v6-c-hero--BorderColor);
8530
+ border-style: var(--pf-v6-c-hero--BorderStyle);
8531
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
8532
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
8533
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
8534
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
8535
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
8536
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
8537
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
8538
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
8539
+ }
8540
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
8541
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
8542
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
8543
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
8544
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
8545
+ }
8546
+ :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
8547
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
8548
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
8549
+ }
8550
+ .pf-v6-c-hero:not(.pf-m-no-glass) {
8551
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
8552
+ backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
8553
+ }
8554
+
8555
+ .pf-v6-c-hero__body {
8556
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
8557
+ }
8558
+
8559
+ .pf-v6-c-hint {
8560
+ --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8561
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8562
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8563
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8564
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8565
+ --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8566
+ --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8567
+ --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8568
+ --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8569
+ --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8570
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8571
+ --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8572
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8573
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8574
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8575
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8576
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8577
+ }
8578
+
8579
+ .pf-v6-c-hint {
8580
+ display: grid;
8581
+ grid-template-columns: 1fr auto;
8582
+ grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8583
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8584
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8585
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8586
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8587
+ color: var(--pf-v6-c-hint--Color);
8588
+ background-color: var(--pf-v6-c-hint--BackgroundColor);
8589
+ border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8590
+ border-radius: var(--pf-v6-c-hint--BorderRadius);
8591
+ }
8592
+ .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8593
+ text-align: start;
8594
+ white-space: normal;
8595
+ }
8596
+
8597
+ .pf-v6-c-hint__actions {
8598
+ display: inline-grid;
8599
+ grid-row: 1;
8600
+ grid-column: 2;
8601
+ grid-auto-flow: column;
8602
+ align-self: start;
8603
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8604
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8605
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8606
+ text-align: end;
8607
+ }
8608
+ .pf-v6-c-hint__actions.pf-m-no-offset {
8609
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8610
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8611
+ }
8612
+ .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8613
+ grid-column: 1;
8614
+ }
8615
+
8616
+ .pf-v6-c-hint__title {
8617
+ align-self: center;
8618
+ font-weight: var(--pf-v6-c-hint__title--FontWeight);
8619
+ }
8620
+
8621
+ .pf-v6-c-hint__body {
8622
+ grid-column: 1/-1;
8623
+ font-size: var(--pf-v6-c-hint__body--FontSize);
8624
+ }
8625
+
8626
+ .pf-v6-c-hint__footer {
8627
+ grid-column: 1/-1;
8628
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8629
+ }
8630
+ .pf-v6-c-hint__footer > :not(:last-child) {
8631
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8632
+ }
8633
+
8009
8634
  .pf-v6-c-icon {
8010
8635
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
8011
8636
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
@@ -8548,7 +9173,7 @@ label.pf-v6-c-input-group__text {
8548
9173
  --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
8549
9174
  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
8550
9175
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
8551
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9176
+ --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: -180deg;
8552
9177
  }
8553
9178
 
8554
9179
  .pf-v6-c-jump-links {
@@ -8734,6 +9359,10 @@ label.pf-v6-c-input-group__text {
8734
9359
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
8735
9360
  }
8736
9361
 
9362
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
9363
+ scale: -1 1;
9364
+ }
9365
+
8737
9366
  .pf-v6-c-jump-links__toggle-icon {
8738
9367
  display: inline-block;
8739
9368
  color: var(--pf-v6-c-jump-links__toggle-icon--Color);
@@ -8742,9 +9371,6 @@ label.pf-v6-c-input-group__text {
8742
9371
  transition-property: transform;
8743
9372
  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
8744
9373
  }
8745
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
8746
- scale: -1 1;
8747
- }
8748
9374
 
8749
9375
  .pf-v6-c-label {
8750
9376
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -9241,6 +9867,10 @@ input.pf-v6-c-label__content {
9241
9867
  .pf-v6-c-label__actions {
9242
9868
  margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
9243
9869
  }
9870
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
9871
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
9872
+ }
9873
+
9244
9874
  .pf-v6-c-label__actions .pf-v6-c-button {
9245
9875
  --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
9246
9876
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
@@ -9251,9 +9881,6 @@ input.pf-v6-c-label__content {
9251
9881
  margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
9252
9882
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
9253
9883
  }
9254
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
9255
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
9256
- }
9257
9884
 
9258
9885
  .pf-v6-c-label-group {
9259
9886
  --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
@@ -9394,9 +10021,9 @@ input.pf-v6-c-label__content {
9394
10021
  padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
9395
10022
  white-space: nowrap;
9396
10023
  resize: none;
9397
- border: 0;
9398
- -ms-overflow-style: none;
9399
10024
  scrollbar-width: none;
10025
+ -ms-overflow-style: none;
10026
+ border: 0;
9400
10027
  }
9401
10028
  .pf-v6-c-label-group__textarea::-webkit-scrollbar {
9402
10029
  display: none;
@@ -9482,18 +10109,48 @@ ul.pf-v6-c-list {
9482
10109
  --pf-v6-c-login__container--PaddingInlineStart: 6.125rem;
9483
10110
  --pf-v6-c-login__container--PaddingInlineEnd: 6.125rem;
9484
10111
  --pf-v6-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
10112
+ }
10113
+ @media (min-width: 75rem) {
10114
+ .pf-v6-c-login {
10115
+ --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
10116
+ }
10117
+ }
10118
+ .pf-v6-c-login {
9485
10119
  --pf-v6-c-login__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
9486
10120
  --pf-v6-c-login__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
9487
10121
  --pf-v6-c-login__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10122
+ }
10123
+ @media (min-width: 36rem) {
10124
+ .pf-v6-c-login {
10125
+ --pf-v6-c-login__header--PaddingInlineEnd: 0;
10126
+ --pf-v6-c-login__header--PaddingInlineStart: 0;
10127
+ }
10128
+ }
10129
+ .pf-v6-c-login {
9488
10130
  --pf-v6-c-login__header--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
9489
10131
  --pf-v6-c-login__header--xl--MarginBlockStart: var(--pf-t--global--spacer--3xl);
9490
10132
  --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-t--global--spacer--lg);
9491
10133
  --pf-v6-c-login__header--c-brand--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
10134
+ }
10135
+ @media (min-width: 75rem) {
10136
+ .pf-v6-c-login {
10137
+ --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
10138
+ --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
10139
+ }
10140
+ }
10141
+ .pf-v6-c-login {
9492
10142
  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9493
10143
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
9494
10144
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
9495
10145
  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9496
10146
  --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
10147
+ }
10148
+ @media (min-width: 75rem) {
10149
+ .pf-v6-c-login {
10150
+ --pf-v6-c-login__main--MarginBlockEnd: 0;
10151
+ }
10152
+ }
10153
+ .pf-v6-c-login {
9497
10154
  --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
9498
10155
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
9499
10156
  --pf-v6-c-login__main-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -9505,11 +10162,28 @@ ul.pf-v6-c-list {
9505
10162
  --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-t--global--spacer--sm);
9506
10163
  --pf-v6-c-login__main-header-desc--md--MarginBlockEnd: 0;
9507
10164
  --pf-v6-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
10165
+ }
10166
+ @media (min-width: 48rem) {
10167
+ .pf-v6-c-login {
10168
+ --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
10169
+ --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
10170
+ --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
10171
+ }
10172
+ }
10173
+ .pf-v6-c-login {
9508
10174
  --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
9509
10175
  --pf-v6-c-login__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
9510
10176
  --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-t--global--spacer--xl);
9511
10177
  --pf-v6-c-login__main-body--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
9512
10178
  --pf-v6-c-login__main-body--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
10179
+ }
10180
+ @media (min-width: 48rem) {
10181
+ .pf-v6-c-login {
10182
+ --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
10183
+ --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
10184
+ }
10185
+ }
10186
+ .pf-v6-c-login {
9513
10187
  --pf-v6-c-login__main-footer--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
9514
10188
  --pf-v6-c-login__main-footer--c-title--MarginBlockEnd: var(--pf-t--global--spacer--md);
9515
10189
  --pf-v6-c-login__main-footer-links--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -9527,43 +10201,6 @@ ul.pf-v6-c-list {
9527
10201
  --pf-v6-c-login__main-footer-band-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
9528
10202
  --pf-v6-c-login__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
9529
10203
  --pf-v6-c-login__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9530
- --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
9531
- --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
9532
- }
9533
- @media (min-width: 75rem) {
9534
- .pf-v6-c-login {
9535
- --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
9536
- }
9537
- }
9538
- @media (min-width: 36rem) {
9539
- .pf-v6-c-login {
9540
- --pf-v6-c-login__header--PaddingInlineEnd: 0;
9541
- --pf-v6-c-login__header--PaddingInlineStart: 0;
9542
- }
9543
- }
9544
- @media (min-width: 75rem) {
9545
- .pf-v6-c-login {
9546
- --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
9547
- --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
9548
- }
9549
- }
9550
- @media (min-width: 75rem) {
9551
- .pf-v6-c-login {
9552
- --pf-v6-c-login__main--MarginBlockEnd: 0;
9553
- }
9554
- }
9555
- @media (min-width: 48rem) {
9556
- .pf-v6-c-login {
9557
- --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
9558
- --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
9559
- --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
9560
- }
9561
- }
9562
- @media (min-width: 48rem) {
9563
- .pf-v6-c-login {
9564
- --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
9565
- --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
9566
- }
9567
10204
  }
9568
10205
  @media (min-width: 36rem) {
9569
10206
  .pf-v6-c-login {
@@ -9571,6 +10208,10 @@ ul.pf-v6-c-list {
9571
10208
  --pf-v6-c-login__footer--PaddingInlineStart: 0;
9572
10209
  }
9573
10210
  }
10211
+ .pf-v6-c-login {
10212
+ --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
10213
+ --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
10214
+ }
9574
10215
  @media (min-width: 75rem) {
9575
10216
  .pf-v6-c-login {
9576
10217
  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
@@ -9766,12 +10407,26 @@ ul.pf-v6-c-list {
9766
10407
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
9767
10408
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
9768
10409
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
10410
+ --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
10411
+ --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
10412
+ --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10413
+ --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10414
+ --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10415
+ --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10416
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
10417
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
10418
+ --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
9769
10419
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
9770
10420
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
9771
10421
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
9772
10422
  --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
9773
10423
  }
9774
10424
 
10425
+ .pf-v6-c-masthead .pf-v6-c-toolbar {
10426
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
10427
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
10428
+ --pf-v6-c-toolbar__content--MinWidth: 0;
10429
+ }
9775
10430
  .pf-v6-c-masthead {
9776
10431
  --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
9777
10432
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
@@ -9785,22 +10440,6 @@ ul.pf-v6-c-list {
9785
10440
  --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9786
10441
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9787
10442
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9788
- display: grid;
9789
- grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
9790
- row-gap: var(--pf-v6-c-masthead--RowGap);
9791
- column-gap: var(--pf-v6-c-masthead--ColumnGap);
9792
- align-items: start;
9793
- min-width: 0;
9794
- padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
9795
- padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
9796
- padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
9797
- padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
9798
- background-color: var(--pf-v6-c-masthead--BackgroundColor);
9799
- }
9800
- .pf-v6-c-masthead .pf-v6-c-toolbar {
9801
- --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
9802
- --pf-v6-c-toolbar--PaddingBlockEnd: 0;
9803
- --pf-v6-c-toolbar__content--MinWidth: 0;
9804
10443
  }
9805
10444
  @media screen and (min-width: 48rem) {
9806
10445
  :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
@@ -9818,6 +10457,62 @@ ul.pf-v6-c-list {
9818
10457
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9819
10458
  }
9820
10459
  }
10460
+ .pf-v6-c-masthead {
10461
+ display: grid;
10462
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
10463
+ grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
10464
+ row-gap: var(--pf-v6-c-masthead--RowGap);
10465
+ column-gap: var(--pf-v6-c-masthead--ColumnGap);
10466
+ align-items: start;
10467
+ min-width: 0;
10468
+ padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
10469
+ padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
10470
+ padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
10471
+ padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
10472
+ background-color: var(--pf-v6-c-masthead--BackgroundColor);
10473
+ }
10474
+ .pf-v6-c-masthead.pf-m-docked {
10475
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
10476
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
10477
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
10478
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
10479
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
10480
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
10481
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
10482
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
10483
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
10484
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
10485
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
10486
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10487
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
10488
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
10489
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
10490
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
10491
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
10492
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
10493
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
10494
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
10495
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
10496
+ --pf-v6-c-masthead__main--GridColumn: auto;
10497
+ --pf-v6-c-masthead__content--GridColumn: auto;
10498
+ --pf-v6-c-masthead__logo--Width: auto;
10499
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
10500
+ display: flex;
10501
+ flex-direction: column;
10502
+ align-items: center;
10503
+ width: fit-content;
10504
+ height: 100%;
10505
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
10506
+ }
10507
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
10508
+ flex-grow: 1;
10509
+ flex-direction: column;
10510
+ align-self: revert;
10511
+ }
10512
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
10513
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
10514
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
10515
+ }
9821
10516
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
9822
10517
  flex-wrap: nowrap;
9823
10518
  min-width: 0;
@@ -10281,6 +10976,13 @@ ul.pf-v6-c-list {
10281
10976
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
10282
10977
  --pf-v6-c-menu--TransitionDuration: 0s;
10283
10978
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
10979
+ }
10980
+ @media (prefers-reduced-motion: no-preference) {
10981
+ .pf-v6-c-menu {
10982
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10983
+ }
10984
+ }
10985
+ .pf-v6-c-menu {
10284
10986
  --pf-v6-c-menu--m-plain--BoxShadow: none;
10285
10987
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
10286
10988
  --pf-v6-c-menu__content--Height: auto;
@@ -10360,33 +11062,34 @@ ul.pf-v6-c-list {
10360
11062
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
10361
11063
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10362
11064
  --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
10363
- --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
10364
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
10365
- --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
10366
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
10367
- --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
10368
- --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
10369
- }
10370
- @media (prefers-reduced-motion: no-preference) {
10371
- .pf-v6-c-menu {
10372
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10373
- }
10374
11065
  }
10375
11066
  @media (prefers-reduced-motion: no-preference) {
10376
11067
  .pf-v6-c-menu {
10377
11068
  --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);
10378
11069
  }
10379
11070
  }
11071
+ .pf-v6-c-menu {
11072
+ --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
11073
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
11074
+ --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
11075
+ }
10380
11076
  @media (prefers-reduced-motion: no-preference) {
10381
11077
  .pf-v6-c-menu {
10382
11078
  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10383
11079
  }
10384
11080
  }
11081
+ .pf-v6-c-menu {
11082
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
11083
+ --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
11084
+ }
10385
11085
  @media (prefers-reduced-motion: no-preference) {
10386
11086
  .pf-v6-c-menu {
10387
11087
  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10388
11088
  }
10389
11089
  }
11090
+ .pf-v6-c-menu {
11091
+ --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
11092
+ }
10390
11093
 
10391
11094
  .pf-v6-c-menu__content,
10392
11095
  .pf-v6-c-menu__list-item,
@@ -10844,13 +11547,14 @@ ul.pf-v6-c-list {
10844
11547
  --pf-v6-c-check__input--TranslateY: none;
10845
11548
  }
10846
11549
 
10847
- .pf-v6-c-menu__item-toggle-icon {
10848
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
10849
- }
10850
11550
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
10851
11551
  scale: -1 1;
10852
11552
  }
10853
11553
 
11554
+ .pf-v6-c-menu__item-toggle-icon {
11555
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
11556
+ }
11557
+
10854
11558
  .pf-v6-c-menu__item-icon {
10855
11559
  color: var(--pf-v6-c-menu__item--icon--Color, inherit);
10856
11560
  }
@@ -10906,7 +11610,7 @@ ul.pf-v6-c-list {
10906
11610
  --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
10907
11611
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
10908
11612
  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
10909
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
11613
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
10910
11614
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
10911
11615
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
10912
11616
  --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -11019,6 +11723,7 @@ ul.pf-v6-c-list {
11019
11723
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
11020
11724
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
11021
11725
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
11726
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
11022
11727
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
11023
11728
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
11024
11729
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -11147,6 +11852,9 @@ ul.pf-v6-c-list {
11147
11852
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
11148
11853
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
11149
11854
  }
11855
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
11856
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
11857
+ }
11150
11858
  .pf-v6-c-menu-toggle.pf-m-plain::before {
11151
11859
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
11152
11860
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -11437,6 +12145,13 @@ ul.pf-v6-c-list {
11437
12145
  --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
11438
12146
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
11439
12147
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
12148
+ }
12149
+ @media (min-width: 75rem) {
12150
+ .pf-v6-c-modal-box {
12151
+ --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
12152
+ }
12153
+ }
12154
+ .pf-v6-c-modal-box {
11440
12155
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11441
12156
  --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11442
12157
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -11468,11 +12183,6 @@ ul.pf-v6-c-list {
11468
12183
  --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
11469
12184
  --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
11470
12185
  }
11471
- @media (min-width: 75rem) {
11472
- .pf-v6-c-modal-box {
11473
- --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
11474
- }
11475
- }
11476
12186
 
11477
12187
  .pf-v6-c-modal-box {
11478
12188
  position: relative;
@@ -11534,8 +12244,8 @@ ul.pf-v6-c-list {
11534
12244
 
11535
12245
  .pf-v6-c-modal-box__header {
11536
12246
  display: flex;
11537
- flex-direction: column;
11538
12247
  flex-shrink: 0;
12248
+ flex-direction: column;
11539
12249
  gap: var(--pf-v6-c-modal-box__header--Gap);
11540
12250
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
11541
12251
  padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
@@ -11552,8 +12262,8 @@ ul.pf-v6-c-list {
11552
12262
 
11553
12263
  .pf-v6-c-modal-box__header-main {
11554
12264
  display: flex;
11555
- flex-direction: column;
11556
12265
  flex-grow: 1;
12266
+ flex-direction: column;
11557
12267
  gap: var(--pf-v6-c-modal-box__header-main--Gap);
11558
12268
  min-width: 0;
11559
12269
  padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);
@@ -11862,13 +12572,22 @@ ul.pf-v6-c-list {
11862
12572
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
11863
12573
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
11864
12574
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
12575
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
12576
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--color--brand--accent--default);
12577
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
12578
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
12579
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
12580
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
12581
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
12582
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12583
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
11865
12584
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
11866
- --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
12585
+ --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: -180deg;
11867
12586
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
11868
12587
  --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
11869
12588
  --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
11870
12589
  --pf-v6-c-nav__link--AlignItems: baseline;
11871
- --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
12590
+ --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
11872
12591
  --pf-v6-c-nav__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
11873
12592
  --pf-v6-c-nav__link--WhiteSpace: normal;
11874
12593
  --pf-v6-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
@@ -11886,6 +12605,7 @@ ul.pf-v6-c-list {
11886
12605
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
11887
12606
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
11888
12607
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
12608
+ --pf-v6-c-nav__link-text--FontSize: initial;
11889
12609
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
11890
12610
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11891
12611
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -11897,6 +12617,15 @@ ul.pf-v6-c-list {
11897
12617
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
11898
12618
  --pf-v6-c-nav__subnav--TranslateY: 0;
11899
12619
  --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
12620
+ }
12621
+ @media screen and (prefers-reduced-motion: no-preference) {
12622
+ .pf-v6-c-nav {
12623
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
12624
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
12625
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
12626
+ }
12627
+ }
12628
+ .pf-v6-c-nav {
11900
12629
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
11901
12630
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
11902
12631
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11926,13 +12655,11 @@ ul.pf-v6-c-list {
11926
12655
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11927
12656
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11928
12657
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11929
- }
11930
- @media screen and (prefers-reduced-motion: no-preference) {
11931
- .pf-v6-c-nav {
11932
- --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
11933
- --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
11934
- --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
11935
- }
12658
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12659
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12660
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12661
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
12662
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11936
12663
  }
11937
12664
 
11938
12665
  .pf-v6-c-nav,
@@ -11967,6 +12694,25 @@ ul.pf-v6-c-list {
11967
12694
  .pf-v6-c-nav.pf-m-fill {
11968
12695
  flex-grow: 1;
11969
12696
  }
12697
+ .pf-v6-c-nav.pf-m-docked {
12698
+ --pf-v6-c-nav--PaddingBlockStart: 0;
12699
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
12700
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
12701
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
12702
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
12703
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
12704
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
12705
+ width: fit-content;
12706
+ }
12707
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
12708
+ position: relative;
12709
+ align-self: center;
12710
+ min-width: 1lh;
12711
+ text-align: center;
12712
+ }
12713
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
12714
+ display: none;
12715
+ }
11970
12716
  .pf-v6-c-nav .pf-v6-c-menu {
11971
12717
  --pf-v6-c-menu--MinWidth: 100%;
11972
12718
  }
@@ -12030,14 +12776,34 @@ ul.pf-v6-c-list {
12030
12776
  }
12031
12777
 
12032
12778
  .pf-v6-c-nav__item {
12779
+ position: relative;
12033
12780
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
12034
12781
  }
12782
+ .pf-v6-c-nav__item::before {
12783
+ position: absolute;
12784
+ inset-block-start: 0;
12785
+ inset-block-end: 0;
12786
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
12787
+ width: var(--pf-v6-c-nav__item--accent--size);
12788
+ pointer-events: none;
12789
+ content: var(--pf-v6-c-nav__item--accent--content, "");
12790
+ background-color: var(--pf-v6-c-nav__item--accent--color);
12791
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
12792
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
12793
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
12794
+ transition-property: scale;
12795
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
12796
+ }
12035
12797
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
12036
12798
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
12037
12799
  }
12038
12800
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
12039
12801
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
12040
12802
  }
12803
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
12804
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
12805
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
12806
+ }
12041
12807
 
12042
12808
  .pf-v6-c-nav__section {
12043
12809
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -12099,6 +12865,10 @@ ul.pf-v6-c-list {
12099
12865
  color: var(--pf-v6-c-nav__link-icon--Color);
12100
12866
  }
12101
12867
 
12868
+ .pf-v6-c-nav__link-text {
12869
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
12870
+ }
12871
+
12102
12872
  .pf-v6-c-nav__toggle {
12103
12873
  flex: none;
12104
12874
  align-self: start;
@@ -12154,6 +12924,7 @@ ul.pf-v6-c-list {
12154
12924
  }
12155
12925
 
12156
12926
  .pf-v6-c-nav:where(.pf-m-horizontal) {
12927
+ --pf-v6-c-nav__item--accent--content: none;
12157
12928
  padding: 0;
12158
12929
  overflow: hidden;
12159
12930
  }
@@ -12174,12 +12945,14 @@ ul.pf-v6-c-list {
12174
12945
  scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
12175
12946
  scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
12176
12947
  -webkit-overflow-scrolling: touch;
12177
- scrollbar-width: none;
12178
- -ms-overflow-style: -ms-autohiding-scrollbar;
12179
12948
  }
12180
12949
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
12181
12950
  display: none;
12182
12951
  }
12952
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
12953
+ scrollbar-width: none;
12954
+ -ms-overflow-style: -ms-autohiding-scrollbar;
12955
+ }
12183
12956
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
12184
12957
  outline-offset: var(--pf-v6-c-nav--OutlineOffset);
12185
12958
  }
@@ -12217,6 +12990,7 @@ ul.pf-v6-c-list {
12217
12990
  --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
12218
12991
  --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
12219
12992
  --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
12993
+ --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12220
12994
  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
12221
12995
  --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
12222
12996
  --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12230,6 +13004,7 @@ ul.pf-v6-c-list {
12230
13004
  --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12231
13005
  --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
12232
13006
  --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
13007
+ --pf-v6-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
12233
13008
  --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
12234
13009
  --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
12235
13010
  --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -12272,7 +13047,7 @@ ul.pf-v6-c-list {
12272
13047
  --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12273
13048
  --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
12274
13049
  --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
12275
- --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
13050
+ --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: -180deg;
12276
13051
  }
12277
13052
 
12278
13053
  .pf-v6-c-notification-drawer {
@@ -12311,6 +13086,7 @@ ul.pf-v6-c-list {
12311
13086
 
12312
13087
  .pf-v6-c-notification-drawer__header-action {
12313
13088
  display: flex;
13089
+ gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
12314
13090
  align-items: center;
12315
13091
  margin-inline-start: auto;
12316
13092
  }
@@ -12339,8 +13115,16 @@ ul.pf-v6-c-list {
12339
13115
  padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
12340
13116
  padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
12341
13117
  background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
12342
- border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
12343
13118
  border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
13119
+ outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
13120
+ }
13121
+ .pf-v6-c-notification-drawer__list-item::before {
13122
+ position: absolute;
13123
+ inset: 0;
13124
+ pointer-events: none;
13125
+ content: "";
13126
+ border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
13127
+ border-radius: inherit;
12344
13128
  }
12345
13129
  .pf-v6-c-notification-drawer__list-item.pf-m-info {
12346
13130
  --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
@@ -12366,7 +13150,6 @@ ul.pf-v6-c-list {
12366
13150
  --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
12367
13151
  --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
12368
13152
  --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
12369
- position: relative;
12370
13153
  }
12371
13154
  .pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
12372
13155
  cursor: pointer;
@@ -12394,9 +13177,9 @@ ul.pf-v6-c-list {
12394
13177
  }
12395
13178
  .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
12396
13179
  display: -webkit-box;
13180
+ overflow: hidden;
12397
13181
  -webkit-box-orient: vertical;
12398
13182
  -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
12399
- overflow: hidden;
12400
13183
  }
12401
13184
 
12402
13185
  .pf-v6-c-notification-drawer__list-item-action {
@@ -12450,9 +13233,9 @@ ul.pf-v6-c-list {
12450
13233
 
12451
13234
  .pf-v6-c-notification-drawer__group-toggle-title {
12452
13235
  display: -webkit-box;
13236
+ overflow: hidden;
12453
13237
  -webkit-box-orient: vertical;
12454
13238
  -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
12455
- overflow: hidden;
12456
13239
  flex: 1;
12457
13240
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
12458
13241
  font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
@@ -12465,15 +13248,15 @@ ul.pf-v6-c-list {
12465
13248
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
12466
13249
  }
12467
13250
 
13251
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
13252
+ scale: -1 1;
13253
+ }
13254
+
12468
13255
  .pf-v6-c-notification-drawer__group-toggle-icon {
12469
13256
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
12470
13257
  color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
12471
13258
  transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
12472
13259
  }
12473
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
12474
- scale: -1 1;
12475
- }
12476
-
12477
13260
  .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
12478
13261
  transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
12479
13262
  }
@@ -12519,6 +13302,7 @@ ul.pf-v6-c-list {
12519
13302
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12520
13303
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
12521
13304
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13305
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
12522
13306
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
12523
13307
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
12524
13308
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -12541,6 +13325,15 @@ ul.pf-v6-c-list {
12541
13325
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
12542
13326
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12543
13327
  --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
13328
+ }
13329
+ @media screen and (prefers-reduced-motion: no-preference) {
13330
+ .pf-v6-c-page {
13331
+ --pf-v6-c-page__sidebar--Opacity: 1;
13332
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
13333
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
13334
+ }
13335
+ }
13336
+ .pf-v6-c-page {
12544
13337
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12545
13338
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
12546
13339
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -12556,6 +13349,15 @@ ul.pf-v6-c-list {
12556
13349
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
12557
13350
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12558
13351
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
13352
+ }
13353
+ @media screen and (min-width: 75rem) {
13354
+ .pf-v6-c-page {
13355
+ --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
13356
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
13357
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
13358
+ }
13359
+ }
13360
+ .pf-v6-c-page {
12559
13361
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
12560
13362
  --pf-v6-c-page__main-container--GridArea: main;
12561
13363
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
@@ -12578,6 +13380,17 @@ ul.pf-v6-c-list {
12578
13380
  --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
12579
13381
  --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
12580
13382
  --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
13383
+ }
13384
+ @media screen and (max-width: calc(48rem - 1px)) {
13385
+ .pf-v6-c-page {
13386
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
13387
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
13388
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
13389
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
13390
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
13391
+ }
13392
+ }
13393
+ .pf-v6-c-page {
12581
13394
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
12582
13395
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12583
13396
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12626,29 +13439,9 @@ ul.pf-v6-c-list {
12626
13439
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12627
13440
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12628
13441
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
12629
- }
12630
- @media screen and (prefers-reduced-motion: no-preference) {
12631
- .pf-v6-c-page {
12632
- --pf-v6-c-page__sidebar--Opacity: 1;
12633
- --pf-v6-c-page__sidebar--TransitionProperty: transform;
12634
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
12635
- }
12636
- }
12637
- @media screen and (min-width: 75rem) {
12638
- .pf-v6-c-page {
12639
- --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
12640
- --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
12641
- --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
12642
- }
12643
- }
12644
- @media screen and (max-width: calc(48rem - 1px)) {
12645
- .pf-v6-c-page {
12646
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
12647
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12648
- --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
12649
- --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
12650
- --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
12651
- }
13442
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13443
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13444
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
12652
13445
  }
12653
13446
 
12654
13447
  .pf-v6-c-page {
@@ -12668,6 +13461,16 @@ ul.pf-v6-c-list {
12668
13461
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
12669
13462
  }
12670
13463
  }
13464
+ .pf-v6-c-page.pf-m-dock {
13465
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
13466
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
13467
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
13468
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
13469
+ grid-template-areas: "dock main";
13470
+ grid-template-rows: auto;
13471
+ grid-template-columns: auto 1fr;
13472
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
13473
+ }
12671
13474
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12672
13475
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12673
13476
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -12714,15 +13517,20 @@ ul.pf-v6-c-list {
12714
13517
  }
12715
13518
  }
12716
13519
 
12717
- .pf-v6-c-page > .pf-v6-c-masthead {
12718
- z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
12719
- grid-area: header;
12720
- }
12721
13520
  @media (min-width: 75rem) {
12722
13521
  .pf-v6-c-page > .pf-v6-c-masthead {
12723
13522
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
12724
13523
  }
12725
13524
  }
13525
+ .pf-v6-c-page > .pf-v6-c-masthead {
13526
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
13527
+ grid-area: header;
13528
+ }
13529
+
13530
+ .pf-v6-c-page__dock {
13531
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
13532
+ grid-area: dock;
13533
+ }
12726
13534
 
12727
13535
  .pf-v6-c-page__sidebar {
12728
13536
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
@@ -12834,8 +13642,8 @@ ul.pf-v6-c-list {
12834
13642
  .pf-v6-c-page__main-group,
12835
13643
  .pf-v6-c-page__main-subnav {
12836
13644
  display: flex;
12837
- flex-direction: column;
12838
13645
  flex-shrink: 0;
13646
+ flex-direction: column;
12839
13647
  }
12840
13648
  .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
12841
13649
  .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
@@ -13027,6 +13835,7 @@ ul.pf-v6-c-list {
13027
13835
  flex-direction: column;
13028
13836
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
13029
13837
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
13838
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
13030
13839
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
13031
13840
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
13032
13841
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -13078,8 +13887,8 @@ ul.pf-v6-c-list {
13078
13887
  .pf-v6-c-page__main-drawer,
13079
13888
  .pf-v6-c-page__main-group {
13080
13889
  display: flex;
13081
- flex-direction: column;
13082
13890
  flex-grow: 1;
13891
+ flex-direction: column;
13083
13892
  }
13084
13893
 
13085
13894
  .pf-v6-c-page__main {
@@ -14993,8 +15802,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14993
15802
  position: var(--pf-v6-c-sidebar__panel--Position);
14994
15803
  inset-block-start: var(--pf-v6-c-sidebar__panel--InsetBlockStart);
14995
15804
  z-index: var(--pf-v6-c-sidebar__panel--ZIndex);
14996
- flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
14997
15805
  flex-shrink: 0;
15806
+ flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
14998
15807
  order: var(--pf-v6-c-sidebar__panel--Order);
14999
15808
  padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingBlockStart);
15000
15809
  padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBlockEnd);
@@ -15291,7 +16100,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15291
16100
  --pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
15292
16101
  --pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
15293
16102
  --pf-v6-c-skeleton--before--Height: auto;
15294
- --pf-v6-c-skeleton--before--Content: " ";
16103
+ --pf-v6-c-skeleton--before--Content: "\00a0";
15295
16104
  --pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
15296
16105
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
15297
16106
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
@@ -15302,6 +16111,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15302
16111
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
15303
16112
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
15304
16113
  --pf-v6-c-skeleton--after--AnimationDelay: .5s;
16114
+ }
16115
+ @media screen and (prefers-reduced-motion: no-preference) {
16116
+ .pf-v6-c-skeleton {
16117
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
16118
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
16119
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
16120
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
16121
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
16122
+ }
16123
+ }
16124
+ .pf-v6-c-skeleton {
15305
16125
  --pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
15306
16126
  --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
15307
16127
  --pf-v6-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
@@ -15329,15 +16149,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15329
16149
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
15330
16150
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
15331
16151
  }
15332
- @media screen and (prefers-reduced-motion: no-preference) {
15333
- .pf-v6-c-skeleton {
15334
- --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
15335
- --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
15336
- --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
15337
- --pf-v6-c-skeleton--after--TranslateX: -100%;
15338
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
15339
- }
15340
- }
15341
16152
 
15342
16153
  .pf-v6-c-skeleton {
15343
16154
  position: relative;
@@ -15354,6 +16165,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15354
16165
  padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
15355
16166
  content: var(--pf-v6-c-skeleton--before--Content);
15356
16167
  }
16168
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
16169
+ scale: -1 1;
16170
+ }
16171
+
15357
16172
  .pf-v6-c-skeleton::after {
15358
16173
  position: absolute;
15359
16174
  inset: 0;
@@ -15363,10 +16178,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15363
16178
  transform: translate3d(var(--pf-v6-c-skeleton--after--TranslateX), 0, 0);
15364
16179
  animation: var(--pf-v6-c-skeleton--after--AnimationName) var(--pf-v6-c-skeleton--after--AnimationDuration) var(--pf-v6-c-skeleton--after--AnimationTimingFunction) var(--pf-v6-c-skeleton--after--AnimationDelay) var(--pf-v6-c-skeleton--after--AnimationIterationCount);
15365
16180
  }
15366
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
15367
- scale: -1 1;
15368
- }
15369
-
15370
16181
  .pf-v6-c-skeleton.pf-m-circle {
15371
16182
  --pf-v6-c-skeleton--BorderRadius: var(--pf-v6-c-skeleton--m-circle--BorderRadius);
15372
16183
  }
@@ -15554,12 +16365,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15554
16365
 
15555
16366
  .pf-v6-c-slider {
15556
16367
  --pf-v6-c-slider__rail-track--before--fill--direction: right;
15557
- display: flex;
15558
16368
  }
15559
16369
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
15560
16370
  --pf-v6-c-slider__rail-track--before--fill--direction: left;
15561
16371
  }
15562
16372
 
16373
+ .pf-v6-c-slider {
16374
+ display: flex;
16375
+ }
15563
16376
  .pf-v6-c-slider.pf-m-disabled {
15564
16377
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
15565
16378
  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -15622,6 +16435,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15622
16435
 
15623
16436
  .pf-v6-c-slider__step-tick {
15624
16437
  transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
16438
+ }
16439
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
16440
+ transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
16441
+ }
16442
+
16443
+ .pf-v6-c-slider__step-tick {
15625
16444
  position: absolute;
15626
16445
  inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
15627
16446
  inset-inline-start: 0;
@@ -15631,22 +16450,28 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15631
16450
  border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
15632
16451
  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
15633
16452
  }
15634
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
15635
- transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
15636
- }
15637
16453
 
15638
16454
  .pf-v6-c-slider__step-label {
15639
16455
  transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
15640
- position: absolute;
15641
- inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
15642
- word-break: normal;
15643
16456
  }
15644
16457
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
15645
16458
  transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
15646
16459
  }
15647
16460
 
16461
+ .pf-v6-c-slider__step-label {
16462
+ position: absolute;
16463
+ inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
16464
+ word-break: normal;
16465
+ }
16466
+
15648
16467
  .pf-v6-c-slider__thumb {
15649
16468
  transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
16469
+ }
16470
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
16471
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
16472
+ }
16473
+
16474
+ .pf-v6-c-slider__thumb {
15650
16475
  position: absolute;
15651
16476
  inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
15652
16477
  inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
@@ -15658,12 +16483,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15658
16483
  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
15659
16484
  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
15660
16485
  }
15661
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
15662
- transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
16486
+ .pf-v6-c-slider__thumb::before {
16487
+ transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
16488
+ }
16489
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
16490
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
15663
16491
  }
15664
16492
 
15665
16493
  .pf-v6-c-slider__thumb::before {
15666
- transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
15667
16494
  position: absolute;
15668
16495
  inset-block-start: 50%;
15669
16496
  inset-inline-start: 50%;
@@ -15672,10 +16499,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15672
16499
  content: "";
15673
16500
  border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
15674
16501
  }
15675
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
15676
- transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
15677
- }
15678
-
15679
16502
  .pf-v6-c-slider__thumb:hover {
15680
16503
  --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
15681
16504
  }
@@ -15687,21 +16510,23 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15687
16510
  --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--active--BoxShadow);
15688
16511
  }
15689
16512
 
15690
- .pf-v6-c-slider__value {
15691
- margin-inline-start: var(--pf-v6-c-slider__value--MarginInlineStart);
15692
- }
16513
+ .pf-v6-c-slider__value {
16514
+ margin-inline-start: var(--pf-v6-c-slider__value--MarginInlineStart);
16515
+ }
16516
+ .pf-v6-c-slider__value.pf-m-floating {
16517
+ transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
16518
+ }
16519
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
16520
+ transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
16521
+ }
16522
+
15693
16523
  .pf-v6-c-slider__value.pf-m-floating {
15694
- transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
15695
16524
  --pf-v6-c-slider__value--MarginInlineStart: 0;
15696
16525
  position: absolute;
15697
16526
  inset-block-start: 0;
15698
16527
  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
15699
16528
  z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
15700
16529
  }
15701
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
15702
- transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
15703
- }
15704
-
15705
16530
  .pf-v6-c-slider__value .pf-v6-c-form-control {
15706
16531
  width: var(--pf-v6-c-slider__value--c-form-control--Width);
15707
16532
  }
@@ -15826,7 +16651,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15826
16651
  --pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
15827
16652
  --pf-v6-c-switch__toggle--Height: calc(var(--pf-v6-c-switch--FontSize) * var(--pf-v6-c-switch--LineHeight));
15828
16653
  --pf-v6-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
15829
- --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
16654
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--control--default);
15830
16655
  --pf-v6-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
15831
16656
  --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
15832
16657
  --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
@@ -15879,12 +16704,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15879
16704
  }
15880
16705
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
15881
16706
  transform: translate(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX), -50%);
15882
- background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
15883
16707
  }
15884
16708
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
15885
16709
  transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
15886
16710
  }
15887
16711
 
16712
+ .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
16713
+ background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
16714
+ }
15888
16715
  .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
15889
16716
  color: var(--pf-v6-c-switch__input--not-checked__label--Color);
15890
16717
  }
@@ -16369,7 +17196,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16369
17196
  --pf-v6-c-table--cell--Width: auto;
16370
17197
  }
16371
17198
 
16372
- @media screen and (max-width: calc(48rem - 1px)) {
17199
+ @container pf-v6-contain-table (max-width: 48rem) {
16373
17200
  .pf-m-grid-md.pf-v6-c-table {
16374
17201
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
16375
17202
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -16647,15 +17474,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16647
17474
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
16648
17475
  text-align: end;
16649
17476
  }
16650
- }
16651
- @media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
16652
- .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
16653
- grid-row-start: 1;
16654
- grid-column-start: 2;
16655
- margin-inline-start: 0;
17477
+ @media screen and (max-width: 36rem) {
17478
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
17479
+ grid-row-start: 1;
17480
+ grid-column-start: 2;
17481
+ margin-inline-start: 0;
17482
+ }
16656
17483
  }
16657
- }
16658
- @media screen and (max-width: calc(48rem - 1px)) {
16659
17484
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
16660
17485
  grid-column: 2;
16661
17486
  grid-row: 2;
@@ -16681,7 +17506,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16681
17506
  }
16682
17507
  }
16683
17508
 
16684
- @media screen and (max-width: calc(62rem - 1px)) {
17509
+ @container pf-v6-contain-table (max-width: 62rem) {
16685
17510
  .pf-m-grid-lg.pf-v6-c-table {
16686
17511
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
16687
17512
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -16959,15 +17784,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16959
17784
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
16960
17785
  text-align: end;
16961
17786
  }
16962
- }
16963
- @media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
16964
- .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
16965
- grid-row-start: 1;
16966
- grid-column-start: 2;
16967
- margin-inline-start: 0;
17787
+ @media screen and (max-width: 36rem) {
17788
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
17789
+ grid-row-start: 1;
17790
+ grid-column-start: 2;
17791
+ margin-inline-start: 0;
17792
+ }
16968
17793
  }
16969
- }
16970
- @media screen and (max-width: calc(62rem - 1px)) {
16971
17794
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
16972
17795
  grid-column: 2;
16973
17796
  grid-row: 2;
@@ -16993,7 +17816,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16993
17816
  }
16994
17817
  }
16995
17818
 
16996
- @media screen and (max-width: calc(75rem - 1px)) {
17819
+ @container pf-v6-contain-table (max-width: 75rem) {
16997
17820
  .pf-m-grid-xl.pf-v6-c-table {
16998
17821
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
16999
17822
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17271,15 +18094,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17271
18094
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
17272
18095
  text-align: end;
17273
18096
  }
17274
- }
17275
- @media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
17276
- .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
17277
- grid-row-start: 1;
17278
- grid-column-start: 2;
17279
- margin-inline-start: 0;
18097
+ @media screen and (max-width: 36rem) {
18098
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
18099
+ grid-row-start: 1;
18100
+ grid-column-start: 2;
18101
+ margin-inline-start: 0;
18102
+ }
17280
18103
  }
17281
- }
17282
- @media screen and (max-width: calc(75rem - 1px)) {
17283
18104
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
17284
18105
  grid-column: 2;
17285
18106
  grid-row: 2;
@@ -17305,7 +18126,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17305
18126
  }
17306
18127
  }
17307
18128
 
17308
- @media screen and (max-width: calc(90.625rem - 1px)) {
18129
+ @container pf-v6-contain-table (max-width: 90.625rem) {
17309
18130
  .pf-m-grid-2xl.pf-v6-c-table {
17310
18131
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
17311
18132
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17583,15 +18404,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17583
18404
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
17584
18405
  text-align: end;
17585
18406
  }
17586
- }
17587
- @media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
17588
- .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
17589
- grid-row-start: 1;
17590
- grid-column-start: 2;
17591
- margin-inline-start: 0;
18407
+ @media screen and (max-width: 36rem) {
18408
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
18409
+ grid-row-start: 1;
18410
+ grid-column-start: 2;
18411
+ margin-inline-start: 0;
18412
+ }
17592
18413
  }
17593
- }
17594
- @media screen and (max-width: calc(90.625rem - 1px)) {
17595
18414
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
17596
18415
  grid-column: 2;
17597
18416
  grid-row: 2;
@@ -17669,10 +18488,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17669
18488
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17670
18489
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17671
18490
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
17672
- --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
18491
+ --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 0;
17673
18492
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
17674
18493
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17675
- --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
18494
+ --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
17676
18495
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17677
18496
  --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17678
18497
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -17706,6 +18525,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17706
18525
  --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
17707
18526
  --pf-v6-c-table__expandable-row--TranslateY: 0;
17708
18527
  --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
18528
+ }
18529
+ @media screen and (prefers-reduced-motion: no-preference) {
18530
+ .pf-v6-c-table {
18531
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
18532
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
18533
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
18534
+ }
18535
+ }
18536
+ .pf-v6-c-table {
17709
18537
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
17710
18538
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
17711
18539
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -17774,13 +18602,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17774
18602
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
17775
18603
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
17776
18604
  }
17777
- @media screen and (prefers-reduced-motion: no-preference) {
17778
- .pf-v6-c-table {
17779
- --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
17780
- --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
17781
- --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
17782
- }
17783
- }
17784
18605
 
17785
18606
  .pf-v6-c-table {
17786
18607
  width: 100%;
@@ -17845,22 +18666,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17845
18666
  --pf-v6-hidden-visible--hidden--Display: none;
17846
18667
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
17847
18668
  display: var(--pf-v6-hidden-visible--Display);
17848
- position: relative;
17849
- width: var(--pf-v6-c-table--cell--Width);
17850
- min-width: var(--pf-v6-c-table--cell--MinWidth);
17851
- max-width: var(--pf-v6-c-table--cell--MaxWidth);
17852
- padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
17853
- padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
17854
- padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
17855
- padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
17856
- overflow: var(--pf-v6-c-table--cell--Overflow);
17857
- font-size: var(--pf-v6-c-table--cell--FontSize);
17858
- font-weight: var(--pf-v6-c-table--cell--FontWeight);
17859
- line-height: var(--pf-v6-c-table--cell--LineHeight);
17860
- color: var(--pf-v6-c-table--cell--Color);
17861
- text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
17862
- word-break: var(--pf-v6-c-table--cell--WordBreak);
17863
- white-space: var(--pf-v6-c-table--cell--WhiteSpace);
17864
18669
  }
17865
18670
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden {
17866
18671
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -17905,6 +18710,24 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17905
18710
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
17906
18711
  }
17907
18712
  }
18713
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
18714
+ position: relative;
18715
+ width: var(--pf-v6-c-table--cell--Width);
18716
+ min-width: var(--pf-v6-c-table--cell--MinWidth);
18717
+ max-width: var(--pf-v6-c-table--cell--MaxWidth);
18718
+ padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
18719
+ padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
18720
+ padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
18721
+ padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
18722
+ overflow: var(--pf-v6-c-table--cell--Overflow);
18723
+ font-size: var(--pf-v6-c-table--cell--FontSize);
18724
+ font-weight: var(--pf-v6-c-table--cell--FontWeight);
18725
+ line-height: var(--pf-v6-c-table--cell--LineHeight);
18726
+ color: var(--pf-v6-c-table--cell--Color);
18727
+ text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
18728
+ word-break: var(--pf-v6-c-table--cell--WordBreak);
18729
+ white-space: var(--pf-v6-c-table--cell--WhiteSpace);
18730
+ }
17908
18731
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
17909
18732
  padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
17910
18733
  }
@@ -18261,16 +19084,16 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18261
19084
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
18262
19085
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
18263
19086
  }
19087
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
19088
+ scale: -1 1;
19089
+ }
19090
+
18264
19091
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
18265
19092
  transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
18266
19093
  transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
18267
19094
  transition-property: transform;
18268
19095
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
18269
19096
  }
18270
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
18271
- scale: -1 1;
18272
- }
18273
-
18274
19097
  .pf-v6-c-table__toggle svg {
18275
19098
  pointer-events: none;
18276
19099
  }
@@ -18747,13 +19570,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18747
19570
  }
18748
19571
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
18749
19572
  transform: translateX(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX));
18750
- position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
18751
- inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
18752
19573
  }
18753
19574
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
18754
19575
  transform: translateX(calc(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
18755
19576
  }
18756
19577
 
19578
+ .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
19579
+ position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
19580
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
19581
+ }
18757
19582
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
18758
19583
  min-width: var(--pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
18759
19584
  }
@@ -19649,7 +20474,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19649
20474
  --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
19650
20475
  --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
19651
20476
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
19652
- --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
20477
+ --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: -180deg;
19653
20478
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
19654
20479
  --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19655
20480
  --pf-v6-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -19666,13 +20491,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19666
20491
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
19667
20492
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19668
20493
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
20494
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
20495
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
20496
+ --pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
19669
20497
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
19670
20498
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19671
20499
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
19672
20500
  --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
19673
20501
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
19674
20502
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
19675
- --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
20503
+ --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: -180deg;
19676
20504
  }
19677
20505
 
19678
20506
  .pf-v6-c-tabs {
@@ -19800,8 +20628,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19800
20628
  }
19801
20629
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list {
19802
20630
  position: relative;
19803
- flex-direction: column;
19804
20631
  flex-grow: 1;
20632
+ flex-direction: column;
19805
20633
  max-width: var(--pf-v6-c-tabs--m-vertical--MaxWidth);
19806
20634
  }
19807
20635
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list::before {
@@ -19943,6 +20771,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19943
20771
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
19944
20772
  overflow: visible;
19945
20773
  }
20774
+ .pf-v6-c-tabs.pf-m-nav {
20775
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20776
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
20777
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
20778
+ }
20779
+ .pf-v6-c-tabs.pf-m-nav::before,
20780
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
20781
+ border: 0;
20782
+ }
20783
+ .pf-v6-c-tabs.pf-m-nav.pf-m-subtab .pf-v6-c-tabs__scroll-button .pf-v6-c-button {
20784
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize);
20785
+ }
19946
20786
 
19947
20787
  .pf-v6-c-tabs__toggle {
19948
20788
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -19954,15 +20794,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19954
20794
  white-space: normal;
19955
20795
  }
19956
20796
 
20797
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
20798
+ scale: -1 1;
20799
+ }
20800
+
19957
20801
  .pf-v6-c-tabs__toggle-icon {
19958
20802
  display: inline-block;
19959
20803
  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
19960
20804
  transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
19961
20805
  }
19962
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
19963
- scale: -1 1;
19964
- }
19965
20806
 
20807
+ .pf-v6-c-tabs__list::-webkit-scrollbar {
20808
+ display: none;
20809
+ }
19966
20810
  .pf-v6-c-tabs__list {
19967
20811
  scrollbar-width: none;
19968
20812
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -19974,25 +20818,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19974
20818
  scroll-snap-type: var(--pf-v6-c-tabs__list--ScrollSnapType);
19975
20819
  -webkit-overflow-scrolling: touch;
19976
20820
  }
19977
- .pf-v6-c-tabs__list::-webkit-scrollbar {
19978
- display: none;
19979
- }
19980
20821
 
19981
20822
  .pf-v6-c-tabs__item {
19982
20823
  position: relative;
19983
20824
  display: flex;
19984
20825
  flex: none;
19985
20826
  column-gap: var(--pf-v6-c-tabs__item--ColumnGap);
19986
- scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
19987
20827
  padding-block-start: var(--pf-v6-c-tabs__item--PaddingBlockStart);
19988
20828
  padding-block-end: var(--pf-v6-c-tabs__item--PaddingBlockEnd);
19989
20829
  padding-inline-start: var(--pf-v6-c-tabs__item--PaddingInlineStart);
19990
20830
  padding-inline-end: var(--pf-v6-c-tabs__item--PaddingInlineEnd);
20831
+ scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
19991
20832
  background-color: var(--pf-v6-c-tabs__item--BackgroundColor);
19992
20833
  }
19993
20834
  .pf-v6-c-tabs__item.pf-m-current {
19994
20835
  --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
19995
- --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
20836
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
19996
20837
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
19997
20838
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
19998
20839
  }
@@ -20040,6 +20881,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20040
20881
  border: 0;
20041
20882
  }
20042
20883
 
20884
+ .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
20885
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
20886
+ }
20887
+
20043
20888
  .pf-v6-c-tabs__link {
20044
20889
  display: flex;
20045
20890
  flex: 1;
@@ -20057,10 +20902,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20057
20902
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
20058
20903
  transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
20059
20904
  }
20060
- .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
20061
- --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
20062
- }
20063
-
20064
20905
  .pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
20065
20906
  pointer-events: none;
20066
20907
  border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
@@ -20115,6 +20956,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20115
20956
  --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
20116
20957
  }
20117
20958
 
20959
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
20960
+ scale: -1 1;
20961
+ }
20962
+
20118
20963
  .pf-v6-c-tabs__link-toggle-icon {
20119
20964
  align-self: end;
20120
20965
  font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
@@ -20122,9 +20967,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20122
20967
  transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
20123
20968
  transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
20124
20969
  }
20125
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
20126
- scale: -1 1;
20127
- }
20128
20970
 
20129
20971
  .pf-v6-c-tabs__item-action {
20130
20972
  display: flex;
@@ -20401,7 +21243,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20401
21243
  }
20402
21244
  .pf-v6-c-text-input-group {
20403
21245
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
20404
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
21246
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
20405
21247
  --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
20406
21248
  --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
20407
21249
  --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
@@ -20418,7 +21260,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20418
21260
  --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
20419
21261
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
20420
21262
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
20421
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
21263
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
20422
21264
  --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
20423
21265
  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
20424
21266
  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
@@ -20879,30 +21721,37 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20879
21721
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
20880
21722
  --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
20881
21723
  --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
20882
- --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
21724
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
20883
21725
  --pf-v6-c-toggle-group__button--ZIndex: auto;
20884
- --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
21726
+ --pf-v6-c-toggle-group__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
21727
+ --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
20885
21728
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
20886
- --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
21729
+ --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
20887
21730
  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
20888
21731
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
20889
- --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
21732
+ --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
20890
21733
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
20891
- --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
20892
- --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
20893
- --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
20894
- --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
21734
+ --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
21735
+ --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
21736
+ --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
21737
+ --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
20895
21738
  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
20896
- --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
20897
- --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
20898
- --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
20899
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
21739
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-t--global--icon--color--regular);
21740
+ --pf-v6-c-toggle-group__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
21741
+ --pf-v6-c-toggle-group__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
21742
+ --pf-v6-c-toggle-group__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
21743
+ --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
21744
+ --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
21745
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
21746
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
21747
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
21748
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
21749
+ --pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
20900
21750
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
20901
- --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
20902
21751
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
20903
21752
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20904
- --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
20905
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
21753
+ --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
21754
+ --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
20906
21755
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
20907
21756
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
20908
21757
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -20970,9 +21819,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20970
21819
  }
20971
21820
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
20972
21821
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
21822
+ --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--hover--Color);
20973
21823
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
20974
21824
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
20975
21825
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
21826
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--hover--Color);
20976
21827
  text-decoration-line: none;
20977
21828
  }
20978
21829
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -20980,22 +21831,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20980
21831
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
20981
21832
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
20982
21833
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
21834
+ --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth);
21835
+ --pf-v6-c-toggle-group__button--after--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderColor);
20983
21836
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
21837
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--m-selected--Color);
20984
21838
  }
20985
21839
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
20986
21840
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
20987
21841
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
20988
21842
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
20989
21843
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
21844
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--disabled--Color);
20990
21845
  pointer-events: none;
20991
21846
  }
20992
21847
 
20993
21848
  .pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
20994
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
21849
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor);
20995
21850
  }
20996
21851
 
20997
21852
  .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
20998
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
21853
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor);
21854
+ }
21855
+
21856
+ .pf-v6-c-toggle-group__icon {
21857
+ color: var(--pf-v6-c-toggle-group__icon--Color);
20999
21858
  }
21000
21859
 
21001
21860
  .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
@@ -21045,10 +21904,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21045
21904
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21046
21905
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21047
21906
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
21907
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
21048
21908
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
21049
21909
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
21050
21910
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
21051
- --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
21911
+ --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
21052
21912
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
21053
21913
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
21054
21914
  --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -21141,9 +22001,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21141
22001
  --pf-v6-hidden-visible--hidden--Display: none;
21142
22002
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
21143
22003
  display: var(--pf-v6-hidden-visible--Display);
21144
- row-gap: var(--pf-v6-c-toolbar__content--RowGap);
21145
- padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
21146
- padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
21147
22004
  }
21148
22005
  .pf-v6-c-toolbar__content.pf-m-hidden {
21149
22006
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -21188,6 +22045,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21188
22045
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
21189
22046
  }
21190
22047
  }
22048
+ .pf-v6-c-toolbar__content {
22049
+ row-gap: var(--pf-v6-c-toolbar__content--RowGap);
22050
+ padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
22051
+ padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
22052
+ }
21191
22053
 
21192
22054
  .pf-v6-c-toolbar__content-section {
21193
22055
  flex-wrap: wrap;
@@ -21248,14 +22110,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21248
22110
  .pf-v6-c-toolbar.pf-m-no-background {
21249
22111
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
21250
22112
  }
22113
+ .pf-v6-c-toolbar.pf-m-vertical {
22114
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
22115
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
22116
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
22117
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
22118
+ }
22119
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
22120
+ flex-direction: column;
22121
+ align-items: center;
22122
+ }
21251
22123
 
21252
22124
  .pf-v6-c-toolbar__item {
21253
22125
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
21254
- --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
21255
- row-gap: var(--pf-v6-c-toolbar__item--RowGap);
21256
- column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
21257
- width: var(--pf-v6-c-toolbar__item--Width--base);
21258
- min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
21259
22126
  }
21260
22127
  @media (min-width: 36rem) {
21261
22128
  .pf-v6-c-toolbar__item {
@@ -21282,6 +22149,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21282
22149
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-2xl, var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))))));
21283
22150
  }
21284
22151
  }
22152
+ .pf-v6-c-toolbar__item {
22153
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
22154
+ }
21285
22155
  @media (min-width: 36rem) {
21286
22156
  .pf-v6-c-toolbar__item {
21287
22157
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
@@ -21307,6 +22177,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21307
22177
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-2xl, var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))))));
21308
22178
  }
21309
22179
  }
22180
+ .pf-v6-c-toolbar__item {
22181
+ row-gap: var(--pf-v6-c-toolbar__item--RowGap);
22182
+ column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
22183
+ width: var(--pf-v6-c-toolbar__item--Width--base);
22184
+ min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
22185
+ }
21310
22186
  .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
21311
22187
  --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
21312
22188
  }
@@ -21327,6 +22203,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21327
22203
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
21328
22204
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
21329
22205
  }
22206
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
22207
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
22208
+ }
21330
22209
  .pf-v6-c-toolbar__group.pf-m-filter-group {
21331
22210
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
21332
22211
  }
@@ -21338,9 +22217,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21338
22217
  .pf-v6-c-toolbar__group.pf-m-action-group {
21339
22218
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
21340
22219
  }
22220
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
22221
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
22222
+ }
21341
22223
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
21342
22224
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
21343
22225
  }
22226
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
22227
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
22228
+ }
21344
22229
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
21345
22230
  flex-wrap: wrap;
21346
22231
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -21417,7 +22302,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21417
22302
  }
21418
22303
  .pf-v6-c-toolbar__group.pf-m-align-end,
21419
22304
  .pf-v6-c-toolbar__item.pf-m-align-end {
21420
- margin-inline-start: auto;
22305
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22306
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21421
22307
  }
21422
22308
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
21423
22309
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -21672,7 +22558,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21672
22558
  }
21673
22559
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
21674
22560
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
21675
- margin-inline-start: auto;
22561
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22562
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21676
22563
  }
21677
22564
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
21678
22565
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -21924,7 +22811,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21924
22811
  }
21925
22812
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
21926
22813
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
21927
- margin-inline-start: auto;
22814
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22815
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21928
22816
  }
21929
22817
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
21930
22818
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -22176,7 +23064,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22176
23064
  }
22177
23065
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
22178
23066
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
22179
- margin-inline-start: auto;
23067
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23068
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22180
23069
  }
22181
23070
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
22182
23071
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -22428,7 +23317,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22428
23317
  }
22429
23318
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
22430
23319
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
22431
- margin-inline-start: auto;
23320
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23321
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22432
23322
  }
22433
23323
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
22434
23324
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -22680,7 +23570,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22680
23570
  }
22681
23571
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
22682
23572
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
22683
- margin-inline-start: auto;
23573
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23574
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22684
23575
  }
22685
23576
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
22686
23577
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {
@@ -23165,6 +24056,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23165
24056
  --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
23166
24057
  --pf-v6-c-tree-view__list--TranslateY: 0;
23167
24058
  --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
24059
+ }
24060
+ @media screen and (prefers-reduced-motion: no-preference) {
24061
+ .pf-v6-c-tree-view {
24062
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
24063
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
24064
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
24065
+ }
24066
+ }
24067
+ .pf-v6-c-tree-view {
23168
24068
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
23169
24069
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
23170
24070
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -23192,7 +24092,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23192
24092
  --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
23193
24093
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
23194
24094
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
23195
- --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
24095
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
24096
+ --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
24097
+ --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
24098
+ --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
23196
24099
  --pf-v6-c-tree-view__node-text--max-lines: 1;
23197
24100
  --pf-v6-c-tree-view__node-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
23198
24101
  --pf-v6-c-tree-view__action--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -23248,6 +24151,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23248
24151
  --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart: var(--pf-t--global--spacer--lg);
23249
24152
  --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
23250
24153
  --pf-v6-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd: 0;
24154
+ --pf-v6-c-tree-view--m-compact__node-container--nested--Color: initial;
24155
+ --pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color: var(--pf-t--global--text--color--on-disabled);
24156
+ --pf-v6-c-tree-view--m-compact__node-icon--nested--Color: initial;
24157
+ --pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
24158
+ --pf-v6-c-tree-view--m-compact__node-toggle--nested--Color: initial;
24159
+ --pf-v6-c-tree-view--m-compact__node-toggle--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
23251
24160
  --pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
23252
24161
  --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset: var(--pf-t--global--spacer--sm);
23253
24162
  --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
@@ -23257,13 +24166,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23257
24166
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
23258
24167
  --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
23259
24168
  }
23260
- @media screen and (prefers-reduced-motion: no-preference) {
23261
- .pf-v6-c-tree-view {
23262
- --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
23263
- --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
23264
- --pf-v6-c-tree-view__list--TranslateY: -.5rem;
23265
- }
23266
- }
23267
24169
 
23268
24170
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
23269
24171
  position: relative;
@@ -23344,11 +24246,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23344
24246
  padding-block-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd);
23345
24247
  padding-inline-start: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart);
23346
24248
  padding-inline-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd);
24249
+ color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--Color, inherit);
23347
24250
  background-color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor);
23348
24251
  }
23349
24252
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node-toggle {
23350
24253
  margin-inline-start: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart);
23351
24254
  margin-inline-end: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd);
24255
+ color: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--Color, inherit);
24256
+ }
24257
+ .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node-icon {
24258
+ color: var(--pf-v6-c-tree-view--m-compact__node-icon--nested--Color, inherit);
23352
24259
  }
23353
24260
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__node-container {
23354
24261
  padding-block-start: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart);
@@ -23373,6 +24280,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23373
24280
  }
23374
24281
  .pf-v6-c-tree-view.pf-m-no-background {
23375
24282
  --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor);
24283
+ --pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color: initial;
24284
+ --pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color: initial;
24285
+ --pf-v6-c-tree-view--m-compact__node-toggle--m-disabled--nested--Color: initial;
24286
+ }
24287
+
24288
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
24289
+ scale: -1 1;
23376
24290
  }
23377
24291
 
23378
24292
  .pf-v6-c-tree-view__node-toggle-icon {
@@ -23382,9 +24296,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23382
24296
  transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
23383
24297
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
23384
24298
  }
23385
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
23386
- scale: -1 1;
23387
- }
23388
24299
 
23389
24300
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
23390
24301
  max-height: 0;
@@ -23448,6 +24359,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23448
24359
  .pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
23449
24360
  margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
23450
24361
  }
24362
+ .pf-v6-c-tree-view__node.pf-m-disabled {
24363
+ --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-disabled--Color);
24364
+ --pf-v6-c-tree-view__node-icon--Color: var(--pf-v6-c-tree-view__node-icon--m-disabled--Color);
24365
+ --pf-v6-c-tree-view--m-compact__node-container--nested--Color: var(--pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color);
24366
+ --pf-v6-c-tree-view--m-compact__node-icon--nested--Color: var(--pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color);
24367
+ }
23451
24368
 
23452
24369
  .pf-v6-c-tree-view__node-container {
23453
24370
  display: var(--pf-v6-c-tree-view__node-container--Display);
@@ -23490,6 +24407,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23490
24407
  transform: translateX(calc(var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
23491
24408
  }
23492
24409
 
24410
+ .pf-v6-c-tree-view__node-toggle.pf-m-disabled {
24411
+ --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--m-disabled--Color);
24412
+ }
24413
+
23493
24414
  .pf-v6-c-tree-view__node-title.pf-m-truncate,
23494
24415
  .pf-v6-c-tree-view__node-text.pf-m-truncate {
23495
24416
  --pf-v6-c-tree-view__node-content--Overflow: hidden;
@@ -23505,6 +24426,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23505
24426
  white-space: nowrap;
23506
24427
  }
23507
24428
 
24429
+ label.pf-v6-c-tree-view__node-text {
24430
+ cursor: pointer;
24431
+ }
24432
+
23508
24433
  .pf-v6-c-tree-view__node-text {
23509
24434
  font-weight: inherit;
23510
24435
  color: inherit;
@@ -23512,9 +24437,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23512
24437
  background-color: transparent;
23513
24438
  border: 0;
23514
24439
  }
23515
- label.pf-v6-c-tree-view__node-text {
23516
- cursor: pointer;
23517
- }
23518
24440
 
23519
24441
  .pf-v6-c-tree-view__node-title {
23520
24442
  font-weight: var(--pf-v6-c-tree-view__node-title--FontWeight);
@@ -23688,7 +24610,7 @@ label.pf-v6-c-tree-view__node-text {
23688
24610
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
23689
24611
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23690
24612
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
23691
- --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
24613
+ --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: -180deg;
23692
24614
  --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
23693
24615
  --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
23694
24616
  --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
@@ -23743,6 +24665,15 @@ label.pf-v6-c-tree-view__node-text {
23743
24665
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
23744
24666
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
23745
24667
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
24668
+ }
24669
+ @media screen and (min-width: 62rem) {
24670
+ .pf-v6-c-wizard {
24671
+ --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
24672
+ --pf-v6-c-wizard__nav--BoxShadow: none;
24673
+ --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
24674
+ }
24675
+ }
24676
+ .pf-v6-c-wizard {
23746
24677
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
23747
24678
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23748
24679
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -23767,13 +24698,6 @@ label.pf-v6-c-tree-view__node-text {
23767
24698
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
23768
24699
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
23769
24700
  }
23770
- @media screen and (min-width: 62rem) {
23771
- .pf-v6-c-wizard {
23772
- --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
23773
- --pf-v6-c-wizard__nav--BoxShadow: none;
23774
- --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
23775
- }
23776
- }
23777
24701
 
23778
24702
  .pf-v6-c-wizard {
23779
24703
  position: relative;
@@ -23909,13 +24833,14 @@ label.pf-v6-c-tree-view__node-text {
23909
24833
  color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
23910
24834
  }
23911
24835
 
23912
- .pf-v6-c-wizard__toggle-separator {
23913
- color: var(--pf-v6-c-wizard__toggle-separator--Color);
23914
- }
23915
24836
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
23916
24837
  scale: -1 1;
23917
24838
  }
23918
24839
 
24840
+ .pf-v6-c-wizard__toggle-separator {
24841
+ color: var(--pf-v6-c-wizard__toggle-separator--Color);
24842
+ }
24843
+
23919
24844
  .pf-v6-c-wizard__toggle-icon {
23920
24845
  line-height: var(--pf-v6-c-wizard__toggle-icon--LineHeight);
23921
24846
  }
@@ -23923,8 +24848,8 @@ label.pf-v6-c-tree-view__node-text {
23923
24848
  .pf-v6-c-wizard__outer-wrap {
23924
24849
  position: relative;
23925
24850
  display: flex;
23926
- flex-direction: column;
23927
24851
  flex-grow: 1;
24852
+ flex-direction: column;
23928
24853
  min-height: var(--pf-v6-c-wizard__outer-wrap--MinHeight);
23929
24854
  background-color: var(--pf-v6-c-wizard__outer-wrap--BackgroundColor);
23930
24855
  }
@@ -23937,8 +24862,8 @@ label.pf-v6-c-tree-view__node-text {
23937
24862
  .pf-v6-c-wizard__inner-wrap {
23938
24863
  position: relative;
23939
24864
  display: flex;
23940
- flex-direction: column;
23941
24865
  flex-grow: 1;
24866
+ flex-direction: column;
23942
24867
  min-height: 0;
23943
24868
  }
23944
24869
  @media screen and (min-width: 62rem) {
@@ -24116,6 +25041,10 @@ label.pf-v6-c-tree-view__node-text {
24116
25041
  color: var(--pf-v6-c-wizard__nav-link-toggle--Color);
24117
25042
  }
24118
25043
 
25044
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
25045
+ scale: -1 1;
25046
+ }
25047
+
24119
25048
  .pf-v6-c-wizard__nav-link-toggle-icon {
24120
25049
  display: inline-block;
24121
25050
  transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
@@ -24123,15 +25052,12 @@ label.pf-v6-c-tree-view__node-text {
24123
25052
  transition-property: transform;
24124
25053
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
24125
25054
  }
24126
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
24127
- scale: -1 1;
24128
- }
24129
25055
 
24130
25056
  .pf-v6-c-wizard__main {
24131
25057
  z-index: var(--pf-v6-c-wizard__main--ZIndex);
24132
25058
  display: flex;
24133
- flex-direction: column;
24134
25059
  flex-grow: 1;
25060
+ flex-direction: column;
24135
25061
  overflow-x: hidden;
24136
25062
  overflow-y: auto;
24137
25063
  word-break: break-word;