@patternfly/patternfly 6.5.0-prerelease.4 → 6.5.0-prerelease.41

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 (338) 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 +16 -13
  32. package/components/Accordion/accordion.scss +0 -1
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +5 -4
  36. package/components/Avatar/avatar.css +12 -4
  37. package/components/BackgroundImage/background-image.css +6 -3
  38. package/components/Banner/banner.css +8 -6
  39. package/components/Brand/brand.css +3 -1
  40. package/components/Breadcrumb/breadcrumb.css +4 -3
  41. package/components/Button/button.css +39 -9
  42. package/components/Button/button.scss +40 -4
  43. package/components/CalendarMonth/calendar-month.css +4 -3
  44. package/components/Card/card.css +19 -6
  45. package/components/Card/card.scss +15 -1
  46. package/components/ClipboardCopy/clipboard-copy.css +4 -3
  47. package/components/CodeEditor/code-editor.css +1 -1
  48. package/components/CodeEditor/code-editor.scss +1 -1
  49. package/components/Compass/compass.css +320 -0
  50. package/components/Compass/compass.scss +349 -0
  51. package/components/DataList/data-list.css +33 -22
  52. package/components/DataList/data-list.scss +6 -1
  53. package/components/DescriptionList/description-list-order.scss +5 -1
  54. package/components/DescriptionList/description-list.css +7 -5
  55. package/components/DescriptionList/description-list.scss +5 -1
  56. package/components/Divider/divider.css +7 -5
  57. package/components/Drawer/drawer.css +110 -56
  58. package/components/Drawer/drawer.scss +69 -9
  59. package/components/DualListSelector/dual-list-selector.css +17 -11
  60. package/components/ExpandableSection/expandable-section.css +19 -14
  61. package/components/ExpandableSection/expandable-section.scss +4 -1
  62. package/components/Form/form.css +1 -1
  63. package/components/Form/form.scss +1 -1
  64. package/components/FormControl/form-control.css +1 -1
  65. package/components/FormControl/form-control.scss +1 -1
  66. package/components/Hero/hero.css +74 -0
  67. package/components/Hero/hero.scss +86 -0
  68. package/components/JumpLinks/jump-links.css +4 -3
  69. package/components/JumpLinks/jump-links.scss +5 -1
  70. package/components/Label/label-group.css +2 -2
  71. package/components/Label/label-group.scss +2 -2
  72. package/components/Label/label.css +4 -3
  73. package/components/Login/login.css +51 -37
  74. package/components/Masthead/masthead.css +70 -16
  75. package/components/Masthead/masthead.scss +54 -1
  76. package/components/Menu/menu.css +23 -14
  77. package/components/MenuToggle/menu-toggle.css +4 -0
  78. package/components/MenuToggle/menu-toggle.scss +5 -0
  79. package/components/ModalBox/modal-box.css +9 -7
  80. package/components/ModalBox/modal-box.scss +2 -2
  81. package/components/Nav/nav.css +72 -9
  82. package/components/Nav/nav.scss +75 -3
  83. package/components/NotificationDrawer/notification-drawer.css +8 -6
  84. package/components/NotificationDrawer/notification-drawer.scss +2 -0
  85. package/components/Page/page.css +55 -29
  86. package/components/Page/page.scss +44 -5
  87. package/components/Pagination/pagination.scss +5 -1
  88. package/components/ProgressStepper/progress-stepper.scss +5 -1
  89. package/components/Sidebar/sidebar.css +1 -1
  90. package/components/Sidebar/sidebar.scss +7 -3
  91. package/components/Skeleton/skeleton.css +16 -15
  92. package/components/Slider/slider.css +32 -18
  93. package/components/Switch/switch.css +3 -1
  94. package/components/Table/table-grid.css +28 -36
  95. package/components/Table/table-grid.scss +4 -4
  96. package/components/Table/table-tree-view.css +4 -2
  97. package/components/Table/table.css +31 -27
  98. package/components/Tabs/tabs.css +33 -16
  99. package/components/Tabs/tabs.scss +33 -5
  100. package/components/Toolbar/toolbar.css +46 -14
  101. package/components/Toolbar/toolbar.scss +33 -5
  102. package/components/TreeView/tree-view.css +44 -13
  103. package/components/TreeView/tree-view.scss +31 -0
  104. package/components/Wizard/wizard.css +20 -16
  105. package/components/Wizard/wizard.scss +3 -3
  106. package/components/_index.css +1460 -633
  107. package/components/_index.scss +3 -1
  108. package/docs/components/Avatar/examples/Avatar.md +4 -4
  109. package/docs/components/Brand/examples/Brand.md +2 -2
  110. package/docs/components/Button/examples/Button.md +116 -0
  111. package/docs/components/Card/examples/Card.md +154 -0
  112. package/docs/components/Compass/examples/Compass.css +17 -0
  113. package/docs/components/Compass/examples/Compass.md +118 -0
  114. package/docs/components/DataList/examples/DataList.md +184 -188
  115. package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
  116. package/docs/components/Divider/examples/Divider.md +2 -2
  117. package/docs/components/Drawer/examples/Drawer.md +83 -17
  118. package/docs/components/Hero/examples/Hero.md +25 -0
  119. package/docs/components/Icon/examples/Icon.md +1 -1
  120. package/docs/components/InputGroup/examples/InputGroup.md +1 -1
  121. package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
  122. package/docs/components/Masthead/examples/masthead.md +68 -1
  123. package/docs/components/Menu/examples/Menu.md +2 -2
  124. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  125. package/docs/components/ModalBox/examples/ModalBox.md +1 -1
  126. package/docs/components/Nav/examples/Navigation.md +44 -0
  127. package/docs/components/Page/examples/Page.md +39 -2
  128. package/docs/components/Pagination/examples/Pagination.md +3 -3
  129. package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
  130. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  131. package/docs/components/Table/examples/Table.md +4 -3
  132. package/docs/components/Tabs/examples/Tabs.md +998 -83
  133. package/docs/components/Toolbar/examples/Toolbar.md +35 -7
  134. package/docs/components/TreeView/examples/TreeView.md +38 -26
  135. package/docs/components/Wizard/examples/Wizard.md +15 -15
  136. package/docs/demos/AboutModal/examples/AboutModal.md +5 -5
  137. package/docs/demos/Alert/examples/Alert.md +15 -15
  138. package/docs/demos/BackToTop/examples/BackToTop.md +5 -5
  139. package/docs/demos/Banner/examples/Banner.md +10 -10
  140. package/docs/demos/Card/examples/Card.md +14 -2
  141. package/docs/demos/CardView/examples/CardView.md +5 -5
  142. package/docs/demos/Compass/examples/Compass.md +6470 -0
  143. package/docs/demos/Dashboard/examples/Dashboard.md +6 -9
  144. package/docs/demos/DataList/examples/DataList.md +20 -23
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +57 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +67 -60
  147. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -30
  148. package/docs/demos/Masthead/examples/Masthead.md +55 -58
  149. package/docs/demos/Modal/examples/Modal.md +30 -33
  150. package/docs/demos/Nav/examples/Nav.md +299 -62
  151. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +25 -25
  152. package/docs/demos/Page/examples/Page.md +70 -79
  153. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +178 -200
  154. package/docs/demos/Skeleton/examples/Skeleton.md +5 -5
  155. package/docs/demos/Table/examples/Table.md +1922 -78
  156. package/docs/demos/Tabs/examples/Tabs.md +102 -39
  157. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  158. package/docs/demos/Wizard/examples/Wizard.md +76 -82
  159. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  160. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  161. package/docs/layouts/Flex/examples/Flex.css +3 -3
  162. package/docs/layouts/Flex/examples/Flex.md +3 -2
  163. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  164. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  165. package/docs/layouts/Grid/examples/Grid.css +1 -1
  166. package/docs/layouts/Grid/examples/Grid.md +6 -5
  167. package/docs/layouts/Level/examples/Level.css +3 -3
  168. package/docs/layouts/Level/examples/Level.md +2 -1
  169. package/docs/layouts/Split/examples/Split.css +1 -1
  170. package/docs/layouts/Split/examples/Split.md +2 -1
  171. package/docs/layouts/Stack/examples/Stack.css +3 -3
  172. package/docs/layouts/Stack/examples/Stack.md +2 -1
  173. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  174. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  175. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  176. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  177. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  178. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  179. package/docs/utilities/Display/examples/Display.css +1 -1
  180. package/docs/utilities/Display/examples/Display.md +3 -2
  181. package/docs/utilities/Flex/examples/Flex.css +7 -7
  182. package/docs/utilities/Flex/examples/Flex.md +3 -2
  183. package/docs/utilities/Float/examples/Float.css +2 -2
  184. package/docs/utilities/Float/examples/Float.md +3 -2
  185. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  186. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  187. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  188. package/docs/utilities/Text/examples/Text.md +5 -4
  189. package/icons/PfIcons/add-circle-o.svg +4 -0
  190. package/icons/PfIcons/ansible-tower.svg +4 -0
  191. package/icons/PfIcons/applications.svg +4 -0
  192. package/icons/PfIcons/arrow.svg +4 -0
  193. package/icons/PfIcons/asleep.svg +4 -0
  194. package/icons/PfIcons/attention-bell.svg +4 -0
  195. package/icons/PfIcons/automation.svg +4 -0
  196. package/icons/PfIcons/bell.svg +4 -0
  197. package/icons/PfIcons/blueprint.svg +4 -0
  198. package/icons/PfIcons/build.svg +4 -0
  199. package/icons/PfIcons/builder-image.svg +4 -0
  200. package/icons/PfIcons/bundle.svg +4 -0
  201. package/icons/PfIcons/catalog.svg +4 -0
  202. package/icons/PfIcons/chat.svg +4 -0
  203. package/icons/PfIcons/close.svg +4 -0
  204. package/icons/PfIcons/cloud-security.svg +4 -0
  205. package/icons/PfIcons/cloud-tenant.svg +4 -0
  206. package/icons/PfIcons/cluster.svg +4 -0
  207. package/icons/PfIcons/connected.svg +4 -0
  208. package/icons/PfIcons/container-node.svg +4 -0
  209. package/icons/PfIcons/cpu.svg +4 -0
  210. package/icons/PfIcons/critical-risk.svg +4 -0
  211. package/icons/PfIcons/data-processor.svg +4 -0
  212. package/icons/PfIcons/data-sink.svg +4 -0
  213. package/icons/PfIcons/data-source.svg +4 -0
  214. package/icons/PfIcons/degraded.svg +4 -0
  215. package/icons/PfIcons/disconnected.svg +4 -0
  216. package/icons/PfIcons/domain.svg +4 -0
  217. package/icons/PfIcons/edit.svg +4 -0
  218. package/icons/PfIcons/enhancement.svg +4 -0
  219. package/icons/PfIcons/enterprise.svg +4 -0
  220. package/icons/PfIcons/equalizer.svg +4 -0
  221. package/icons/PfIcons/error-circle-o.svg +4 -0
  222. package/icons/PfIcons/export.svg +4 -0
  223. package/icons/PfIcons/filter.svg +4 -0
  224. package/icons/PfIcons/flavor.svg +4 -0
  225. package/icons/PfIcons/folder-close.svg +4 -0
  226. package/icons/PfIcons/folder-open.svg +4 -0
  227. package/icons/PfIcons/globe-route.svg +4 -0
  228. package/icons/PfIcons/help.svg +4 -0
  229. package/icons/PfIcons/history.svg +4 -0
  230. package/icons/PfIcons/home.svg +4 -0
  231. package/icons/PfIcons/import.svg +4 -0
  232. package/icons/PfIcons/in-progress.svg +4 -0
  233. package/icons/PfIcons/info.svg +4 -0
  234. package/icons/PfIcons/infrastructure.svg +4 -0
  235. package/icons/PfIcons/integration.svg +4 -0
  236. package/icons/PfIcons/key.svg +4 -0
  237. package/icons/PfIcons/locked.svg +4 -0
  238. package/icons/PfIcons/maintenance.svg +4 -0
  239. package/icons/PfIcons/memory.svg +4 -0
  240. package/icons/PfIcons/messages.svg +4 -0
  241. package/icons/PfIcons/middleware.svg +4 -0
  242. package/icons/PfIcons/migration.svg +4 -0
  243. package/icons/PfIcons/module.svg +4 -0
  244. package/icons/PfIcons/monitoring.svg +4 -0
  245. package/icons/PfIcons/multicluster.svg +4 -0
  246. package/icons/PfIcons/namespaces.svg +4 -0
  247. package/icons/PfIcons/network.svg +4 -0
  248. package/icons/PfIcons/new-process.svg +4 -0
  249. package/icons/PfIcons/not-started.svg +4 -0
  250. package/icons/PfIcons/off.svg +4 -0
  251. package/icons/PfIcons/ok.svg +4 -0
  252. package/icons/PfIcons/on-running.svg +4 -0
  253. package/icons/PfIcons/on.svg +4 -0
  254. package/icons/PfIcons/open-drawer-right.svg +4 -0
  255. package/icons/PfIcons/openshift.svg +4 -0
  256. package/icons/PfIcons/openstack.svg +4 -0
  257. package/icons/PfIcons/optimize.svg +4 -0
  258. package/icons/PfIcons/orders.svg +4 -0
  259. package/icons/PfIcons/os-image.svg +4 -0
  260. package/icons/PfIcons/package.svg +4 -0
  261. package/icons/PfIcons/panel-close.svg +4 -0
  262. package/icons/PfIcons/panel-open.svg +4 -0
  263. package/icons/PfIcons/paused.svg +4 -0
  264. package/icons/PfIcons/pending.svg +4 -0
  265. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  266. package/icons/PfIcons/pficon-history.svg +4 -0
  267. package/icons/PfIcons/pficon-network-range.svg +4 -0
  268. package/icons/PfIcons/pficon-satellite.svg +4 -0
  269. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  270. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  271. package/icons/PfIcons/pficon-template.svg +4 -0
  272. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  273. package/icons/PfIcons/plugged.svg +4 -0
  274. package/icons/PfIcons/port.svg +4 -0
  275. package/icons/PfIcons/print.svg +4 -0
  276. package/icons/PfIcons/private.svg +4 -0
  277. package/icons/PfIcons/process-automation.svg +4 -0
  278. package/icons/PfIcons/project.svg +4 -0
  279. package/icons/PfIcons/rebalance.svg +4 -0
  280. package/icons/PfIcons/rebooting.svg +4 -0
  281. package/icons/PfIcons/regions.svg +4 -0
  282. package/icons/PfIcons/registry.svg +4 -0
  283. package/icons/PfIcons/remove2.svg +4 -0
  284. package/icons/PfIcons/replicator.svg +4 -0
  285. package/icons/PfIcons/repository.svg +4 -0
  286. package/icons/PfIcons/resource-pool.svg +4 -0
  287. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  288. package/icons/PfIcons/resources-almost-full.svg +4 -0
  289. package/icons/PfIcons/resources-empty.svg +4 -0
  290. package/icons/PfIcons/resources-full.svg +4 -0
  291. package/icons/PfIcons/running.svg +4 -0
  292. package/icons/PfIcons/save.svg +4 -0
  293. package/icons/PfIcons/screen.svg +4 -0
  294. package/icons/PfIcons/security.svg +4 -0
  295. package/icons/PfIcons/server-group.svg +4 -0
  296. package/icons/PfIcons/server.svg +4 -0
  297. package/icons/PfIcons/service-catalog.svg +4 -0
  298. package/icons/PfIcons/service.svg +4 -0
  299. package/icons/PfIcons/services.svg +4 -0
  300. package/icons/PfIcons/severity-critical.svg +4 -0
  301. package/icons/PfIcons/severity-important.svg +4 -0
  302. package/icons/PfIcons/severity-minor.svg +4 -0
  303. package/icons/PfIcons/severity-moderate.svg +4 -0
  304. package/icons/PfIcons/severity-none.svg +4 -0
  305. package/icons/PfIcons/severity-undefined.svg +4 -0
  306. package/icons/PfIcons/spinner.svg +4 -0
  307. package/icons/PfIcons/spinner2.svg +4 -0
  308. package/icons/PfIcons/storage-domain.svg +4 -0
  309. package/icons/PfIcons/task.svg +4 -0
  310. package/icons/PfIcons/tenant.svg +4 -0
  311. package/icons/PfIcons/thumb-tack.svg +4 -0
  312. package/icons/PfIcons/topology.svg +4 -0
  313. package/icons/PfIcons/treeview.svg +4 -0
  314. package/icons/PfIcons/trend-down.svg +4 -0
  315. package/icons/PfIcons/trend-up.svg +4 -0
  316. package/icons/PfIcons/unknown.svg +4 -0
  317. package/icons/PfIcons/unlocked.svg +4 -0
  318. package/icons/PfIcons/unplugged.svg +4 -0
  319. package/icons/PfIcons/user.svg +4 -0
  320. package/icons/PfIcons/users.svg +4 -0
  321. package/icons/PfIcons/virtual-machine.svg +4 -0
  322. package/icons/PfIcons/volume.svg +4 -0
  323. package/icons/PfIcons/warning-triangle.svg +4 -0
  324. package/icons/PfIcons/zone.svg +4 -0
  325. package/layouts/Flex/flex.scss +83 -19
  326. package/layouts/Gallery/gallery.css +6 -2
  327. package/layouts/_index.css +6 -2
  328. package/package.json +34 -16
  329. package/patternfly-base-no-globals.css +406 -14
  330. package/patternfly-base.css +413 -14
  331. package/patternfly-charts.css +3 -3
  332. package/patternfly-no-globals.css +1796 -573
  333. package/patternfly.css +1803 -573
  334. package/patternfly.min.css +1 -1
  335. package/patternfly.min.css.map +1 -1
  336. package/sass-utilities/functions.scss +32 -25
  337. package/sass-utilities/mixins.scss +36 -20
  338. 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
  }
@@ -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 {
@@ -620,14 +634,15 @@
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;
@@ -644,9 +659,9 @@
644
659
  }
645
660
  .pf-v6-c-alert__title.pf-m-truncate {
646
661
  display: -webkit-box;
662
+ overflow: hidden;
647
663
  -webkit-box-orient: vertical;
648
664
  -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
649
- overflow: hidden;
650
665
  }
651
666
 
652
667
  .pf-v6-c-alert__description {
@@ -883,7 +898,6 @@
883
898
  }
884
899
  .pf-v6-c-avatar.pf-m-sm {
885
900
  --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
901
  }
888
902
  @media (min-width: 36rem) {
889
903
  .pf-v6-c-avatar.pf-m-sm {
@@ -910,6 +924,9 @@
910
924
  --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
925
  }
912
926
  }
927
+ .pf-v6-c-avatar.pf-m-sm {
928
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
929
+ }
913
930
  @media (min-width: 36rem) {
914
931
  .pf-v6-c-avatar.pf-m-sm {
915
932
  --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 +954,6 @@
937
954
  }
938
955
  .pf-v6-c-avatar.pf-m-md {
939
956
  --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
957
  }
942
958
  @media (min-width: 36rem) {
943
959
  .pf-v6-c-avatar.pf-m-md {
@@ -964,6 +980,9 @@
964
980
  --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
981
  }
966
982
  }
983
+ .pf-v6-c-avatar.pf-m-md {
984
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
985
+ }
967
986
  @media (min-width: 36rem) {
968
987
  .pf-v6-c-avatar.pf-m-md {
969
988
  --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 +1010,6 @@
991
1010
  }
992
1011
  .pf-v6-c-avatar.pf-m-lg {
993
1012
  --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
1013
  }
996
1014
  @media (min-width: 36rem) {
997
1015
  .pf-v6-c-avatar.pf-m-lg {
@@ -1018,6 +1036,9 @@
1018
1036
  --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
1037
  }
1020
1038
  }
1039
+ .pf-v6-c-avatar.pf-m-lg {
1040
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
1041
+ }
1021
1042
  @media (min-width: 36rem) {
1022
1043
  .pf-v6-c-avatar.pf-m-lg {
1023
1044
  --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 +1066,6 @@
1045
1066
  }
1046
1067
  .pf-v6-c-avatar.pf-m-xl {
1047
1068
  --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
1069
  }
1050
1070
  @media (min-width: 36rem) {
1051
1071
  .pf-v6-c-avatar.pf-m-xl {
@@ -1072,6 +1092,9 @@
1072
1092
  --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
1093
  }
1074
1094
  }
1095
+ .pf-v6-c-avatar.pf-m-xl {
1096
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
1097
+ }
1075
1098
  @media (min-width: 36rem) {
1076
1099
  .pf-v6-c-avatar.pf-m-xl {
1077
1100
  --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 +1152,12 @@
1129
1152
 
1130
1153
  .pf-v6-c-background-image {
1131
1154
  --pf-v6-c-background-image--BackgroundPosition: bottom right;
1155
+ }
1156
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
1157
+ --pf-v6-c-background-image--BackgroundPosition: bottom left;
1158
+ }
1159
+
1160
+ .pf-v6-c-background-image {
1132
1161
  position: fixed;
1133
1162
  inset-block-start: 0;
1134
1163
  inset-inline-start: 0;
@@ -1141,9 +1170,6 @@
1141
1170
  background-position: var(--pf-v6-c-background-image--BackgroundPosition);
1142
1171
  background-size: var(--pf-v6-c-background-image--BackgroundSize);
1143
1172
  }
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
1173
 
1148
1174
  .pf-v6-c-back-to-top {
1149
1175
  --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
@@ -1261,6 +1287,14 @@
1261
1287
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1262
1288
  --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
1263
1289
  --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1290
+ }
1291
+ @media (min-width: 48rem) {
1292
+ .pf-v6-c-banner {
1293
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
1294
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
1295
+ }
1296
+ }
1297
+ .pf-v6-c-banner {
1264
1298
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1265
1299
  --pf-v6-c-banner--link--TextDecoration: underline;
1266
1300
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -1294,12 +1328,6 @@
1294
1328
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1295
1329
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1296
1330
  }
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
1331
 
1304
1332
  .pf-v6-c-banner {
1305
1333
  flex-shrink: 0;
@@ -1402,7 +1430,6 @@
1402
1430
  width: var(--pf-v6-c-brand--Width--base);
1403
1431
  height: var(--pf-v6-c-brand--Height--base);
1404
1432
  --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
1433
  }
1407
1434
  @media (min-width: 36rem) {
1408
1435
  .pf-v6-c-brand {
@@ -1429,6 +1456,9 @@
1429
1456
  --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
1457
  }
1431
1458
  }
1459
+ .pf-v6-c-brand {
1460
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
1461
+ }
1432
1462
  @media (min-width: 36rem) {
1433
1463
  .pf-v6-c-brand {
1434
1464
  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
@@ -1509,15 +1539,16 @@
1509
1539
  margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
1510
1540
  }
1511
1541
 
1542
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
1543
+ scale: -1 1;
1544
+ }
1545
+
1512
1546
  .pf-v6-c-breadcrumb__item-divider {
1513
1547
  margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
1514
1548
  font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
1515
1549
  line-height: 1;
1516
1550
  color: var(--pf-v6-c-breadcrumb__item-divider--Color);
1517
1551
  }
1518
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
1519
- scale: -1 1;
1520
- }
1521
1552
 
1522
1553
  .pf-v6-c-breadcrumb__link {
1523
1554
  padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
@@ -1683,10 +1714,17 @@ button.pf-v6-c-breadcrumb__link {
1683
1714
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1684
1715
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1685
1716
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1717
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1686
1718
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1687
1719
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1720
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1721
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1688
1722
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1689
1723
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1724
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1725
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1726
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1727
+ --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
1728
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1691
1729
  --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
1730
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -1696,10 +1734,8 @@ button.pf-v6-c-breadcrumb__link {
1696
1734
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1697
1735
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1698
1736
  --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
1737
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1701
1738
  --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
1739
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1704
1740
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1705
1741
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -1885,6 +1921,14 @@ button.pf-v6-c-breadcrumb__link {
1885
1921
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1886
1922
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1887
1923
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
1924
+ --pf-v6-c-button--m-circle--ScaleX: 1.29;
1925
+ --pf-v6-c-button--m-circle--ScaleY: 1.29;
1926
+ --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
1927
+ --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
1928
+ --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
1929
+ --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
1930
+ --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
1931
+ --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
1888
1932
  }
1889
1933
 
1890
1934
  .pf-v6-c-button {
@@ -2006,6 +2050,12 @@ button.pf-v6-c-breadcrumb__link {
2006
2050
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
2007
2051
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
2008
2052
  }
2053
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2054
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
2055
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
2056
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2057
+ }
2058
+
2009
2059
  .pf-v6-c-button.pf-m-link.pf-m-inline {
2010
2060
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
2011
2061
  --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
@@ -2016,12 +2066,13 @@ button.pf-v6-c-breadcrumb__link {
2016
2066
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
2017
2067
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
2018
2068
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
2069
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
2070
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
2071
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
2019
2072
  --pf-v6-c-button--BackgroundColor: transparent;
2020
2073
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
2021
2074
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
2022
2075
  --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
2076
  --pf-v6-c-button--hover--BackgroundColor: transparent;
2026
2077
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
2027
2078
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -2030,6 +2081,8 @@ button.pf-v6-c-breadcrumb__link {
2030
2081
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
2031
2082
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
2032
2083
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
2084
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2085
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2033
2086
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2034
2087
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2035
2088
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -2037,16 +2090,14 @@ button.pf-v6-c-breadcrumb__link {
2037
2090
  --pf-v6-c-button--hover--BorderWidth: 0;
2038
2091
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
2039
2092
  text-align: start;
2093
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2040
2094
  white-space: normal;
2041
2095
  background: transparent;
2042
2096
  outline-offset: 0.125rem;
2043
2097
  }
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);
2098
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2099
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2048
2100
  }
2049
-
2050
2101
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2051
2102
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2052
2103
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -2252,6 +2303,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2252
2303
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2253
2304
  --pf-v6-c-button--hover__icon--ScaleX: 1;
2254
2305
  }
2306
+ .pf-v6-c-button.pf-m-circle {
2307
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
2308
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
2309
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
2310
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
2311
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
2312
+ }
2313
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
2314
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
2315
+ }
2255
2316
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2256
2317
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2257
2318
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -2506,13 +2567,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2506
2567
  margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
2507
2568
  }
2508
2569
 
2570
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
2571
+ scale: -1 1;
2572
+ }
2573
+
2509
2574
  .pf-v6-c-calendar-month__header-nav-control {
2510
2575
  margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
2511
2576
  margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
2512
2577
  }
2513
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
2514
- scale: -1 1;
2515
- }
2516
2578
 
2517
2579
  .pf-v6-c-calendar-month__header-month {
2518
2580
  flex-grow: 1;
@@ -2789,6 +2851,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2789
2851
  .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
2852
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
2791
2853
  }
2854
+ .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) {
2855
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
2856
+ --pf-v6-c-card__actions--MarginBlockStart: 0;
2857
+ --pf-v6-c-card__actions--MarginBlockEnd: 0;
2858
+ }
2859
+
2792
2860
  .pf-v6-c-card.pf-m-compact {
2793
2861
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
2794
2862
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -2856,12 +2924,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2856
2924
  flex-wrap: wrap;
2857
2925
  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
2858
2926
  }
2859
- .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2860
- margin-inline-start: 0;
2861
- }
2862
2927
  .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
2863
2928
  margin-inline-end: auto;
2864
2929
  }
2930
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2931
+ margin-inline-start: 0;
2932
+ }
2865
2933
 
2866
2934
  .pf-v6-c-card__header-main {
2867
2935
  flex-grow: 1;
@@ -2875,15 +2943,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2875
2943
  margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
2876
2944
  }
2877
2945
 
2946
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2947
+ scale: -1 1;
2948
+ }
2949
+
2878
2950
  .pf-v6-c-card__header-toggle-icon {
2879
2951
  display: inline-block;
2880
2952
  transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2881
2953
  transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
2882
2954
  transition-property: transform;
2883
2955
  }
2884
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2885
- scale: -1 1;
2886
- }
2887
2956
 
2888
2957
  .pf-v6-c-card__title-text {
2889
2958
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
@@ -2894,6 +2963,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2894
2963
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2895
2964
  }
2896
2965
 
2966
+ .pf-v6-c-card__subtitle {
2967
+ padding-block-start: var(--pf-t--global--spacer--sm);
2968
+ font-size: var(--pf-t--global--font--size--body--sm);
2969
+ color: var(--pf-t--global--text--color--subtle);
2970
+ }
2971
+
2897
2972
  .pf-v6-c-card__actions {
2898
2973
  display: flex;
2899
2974
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -3143,13 +3218,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3143
3218
  gap: var(--pf-v6-c-clipboard-copy__group--Gap);
3144
3219
  }
3145
3220
 
3146
- .pf-v6-c-clipboard-copy__toggle-icon {
3147
- transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
3148
- }
3149
3221
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
3150
3222
  scale: -1 1;
3151
3223
  }
3152
3224
 
3225
+ .pf-v6-c-clipboard-copy__toggle-icon {
3226
+ transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
3227
+ }
3228
+
3153
3229
  .pf-v6-c-clipboard-copy__expandable-content {
3154
3230
  padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
3155
3231
  padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);
@@ -3320,8 +3396,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3320
3396
 
3321
3397
  .pf-v6-c-code-editor__container {
3322
3398
  display: flex;
3323
- flex-direction: column;
3324
3399
  flex-grow: 1;
3400
+ flex-direction: column;
3325
3401
  }
3326
3402
 
3327
3403
  .pf-v6-c-code-editor__header {
@@ -3463,59 +3539,379 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3463
3539
  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
3464
3540
  }
3465
3541
 
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);
3542
+ .pf-v6-c-compass {
3543
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
3544
+ --pf-v6-c-compass--BackgroundImage--light: none;
3545
+ --pf-v6-c-compass--BackgroundImage--dark: none;
3546
+ --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3547
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
3548
+ --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3549
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3550
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
3551
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3552
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3553
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3554
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
3555
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3556
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3557
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3558
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3559
+ --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3560
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3561
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3562
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
3563
+ --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3564
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3565
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3566
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3567
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3568
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
3569
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
3570
+ --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3571
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3572
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3573
+ --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
3574
+ --pf-v6-c-compass__message-bar--Width: 450px;
3575
+ --pf-v6-c-compass__message-bar--MinWidth: 300px;
3576
+ --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3577
+ --pf-v6-c-compass--section--slide--length--header: 100%;
3578
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
3579
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
3580
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
3581
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
3582
+ --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3583
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
3584
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3585
+ --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);
3586
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
3587
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
3588
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
3589
+ }
3590
+ @media screen and (prefers-reduced-motion: no-preference) {
3591
+ .pf-v6-c-compass {
3592
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3593
+ --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);
3594
+ --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;
3595
+ }
3596
+ .pf-v6-c-compass.pf-m-animate-smoothly {
3597
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3598
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
3599
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
3600
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
3601
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
3602
+ --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);
3603
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3604
+ --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);
3605
+ }
3606
+ }
3607
+
3608
+ .pf-v6-c-compass {
3609
+ interpolate-size: allow-keywords;
3610
+ display: grid;
3611
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3612
+ grid-template-rows: auto 1fr;
3613
+ grid-template-columns: auto 1fr auto;
3614
+ grid-auto-rows: auto;
3615
+ align-items: center;
3616
+ justify-content: center;
3617
+ height: 100dvh;
3618
+ padding: var(--pf-v6-c-compass--Padding);
3619
+ overflow: hidden;
3620
+ background-image: var(--pf-v6-c-compass--BackgroundImage);
3621
+ background-size: cover;
3622
+ }
3623
+ .pf-v6-c-compass.pf-m-dock {
3624
+ grid-template-areas: "dock main";
3625
+ grid-template-rows: auto;
3626
+ grid-template-columns: auto 1fr;
3627
+ align-items: stretch;
3628
+ padding: 0;
3629
+ }
3630
+ .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
3631
+ padding: var(--pf-v6-c-compass--Padding);
3632
+ }
3633
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3634
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3635
+ }
3636
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
3637
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3638
+ }
3639
+
3640
+ .pf-v6-c-compass__header,
3641
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3642
+ .pf-v6-c-compass__main-footer,
3643
+ .pf-v6-c-compass__footer {
3644
+ margin: 0;
3645
+ visibility: hidden;
3646
+ opacity: 0;
3647
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
3648
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
3649
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
3650
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
3651
+ }
3652
+ .pf-v6-c-compass__header.pf-m-expanded,
3653
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
3654
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3655
+ .pf-v6-c-compass__footer.pf-m-expanded {
3656
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
3657
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
3658
+ visibility: visible;
3659
+ opacity: 1;
3660
+ translate: 0;
3661
+ }
3662
+
3663
+ .pf-v6-c-compass__header,
3664
+ .pf-v6-c-compass__main-footer,
3665
+ .pf-v6-c-compass__footer {
3666
+ height: 0;
3667
+ }
3668
+ .pf-v6-c-compass__header.pf-m-expanded,
3669
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3670
+ .pf-v6-c-compass__footer.pf-m-expanded {
3671
+ height: auto;
3672
+ }
3673
+
3674
+ .pf-v6-c-compass__header {
3675
+ display: grid;
3676
+ grid-area: header;
3677
+ grid-template-columns: 1fr auto 1fr;
3678
+ align-items: start;
3679
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
3680
+ }
3681
+ .pf-v6-c-compass__header.pf-m-expanded {
3682
+ margin-block-end: var(--pf-v6-c-compass--Gap);
3683
+ }
3684
+
3685
+ .pf-v6-c-compass__profile {
3686
+ justify-self: end;
3687
+ }
3688
+ .pf-v6-c-compass__profile .pf-v6-c-menu-toggle.pf-m-plain {
3689
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
3690
+ }
3691
+
3692
+ .pf-v6-c-compass__nav {
3693
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3694
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3695
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3696
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3697
+ display: flex;
3698
+ flex-direction: column;
3699
+ gap: var(--pf-v6-c-compass__nav--RowGap);
3700
+ align-items: center;
3701
+ justify-self: stretch;
3702
+ }
3703
+
3704
+ .pf-v6-c-compass__nav-content {
3705
+ display: flex;
3706
+ align-items: center;
3707
+ }
3708
+
3709
+ .pf-v6-c-compass__nav-main {
3710
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
3711
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3712
+ }
3713
+
3714
+ .pf-v6-c-compass__sidebar {
3715
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3716
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3717
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3718
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3719
+ display: flex;
3720
+ width: 0;
3721
+ }
3722
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
3723
+ width: auto;
3724
+ }
3725
+ .pf-v6-c-compass__sidebar.pf-m-start {
3726
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3727
+ }
3728
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
3729
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3730
+ }
3731
+
3732
+ .pf-v6-c-compass__sidebar.pf-m-start {
3733
+ grid-area: sidebar-start;
3734
+ }
3735
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
3736
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
3737
+ }
3738
+ .pf-v6-c-compass__sidebar.pf-m-end {
3739
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3740
+ }
3741
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
3742
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3743
+ }
3744
+
3745
+ .pf-v6-c-compass__sidebar.pf-m-end {
3746
+ grid-area: sidebar-end;
3747
+ }
3748
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
3749
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
3750
+ }
3751
+
3752
+ .pf-v6-c-compass__main {
3753
+ display: flex;
3754
+ flex-direction: column;
3755
+ grid-area: main;
3756
+ gap: var(--pf-v6-c-compass__main--RowGap);
3757
+ align-self: stretch;
3758
+ min-height: 0;
3759
+ }
3760
+
3761
+ .pf-v6-c-compass__main-header-content {
3762
+ display: flex;
3763
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
3764
+ }
3765
+
3766
+ .pf-v6-c-compass__main-header-title {
3767
+ flex-grow: 1;
3768
+ }
3769
+
3770
+ .pf-v6-c-compass__content {
3771
+ display: flex;
3772
+ flex: 1 0 0;
3773
+ flex-direction: column;
3774
+ min-height: 0;
3775
+ overflow: auto;
3776
+ }
3777
+ .pf-v6-c-compass__content > *:last-child {
3778
+ flex-grow: 1;
3779
+ max-height: 100%;
3780
+ }
3781
+
3782
+ .pf-v6-c-compass__main-footer {
3783
+ display: flex;
3784
+ justify-content: center;
3785
+ min-height: 0;
3786
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3787
+ }
3788
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
3789
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3790
+ }
3791
+
3792
+ .pf-v6-c-compass__footer {
3793
+ display: flex;
3794
+ grid-column: 1/-1;
3795
+ justify-content: center;
3796
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3797
+ }
3798
+ .pf-v6-c-compass__footer.pf-m-expanded {
3799
+ margin-block-start: var(--pf-v6-c-compass--Gap);
3800
+ }
3801
+
3802
+ .pf-v6-c-compass__message-bar {
3803
+ width: var(--pf-v6-c-compass__message-bar--Width);
3804
+ min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
3805
+ max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
3806
+ }
3807
+
3808
+ .pf-v6-c-compass__panel {
3809
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3810
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3811
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3812
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3813
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3814
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3815
+ border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3816
+ border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3817
+ box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3818
+ }
3819
+ .pf-v6-c-compass__panel.pf-m-no-border {
3820
+ border-width: 0;
3821
+ }
3822
+ .pf-v6-c-compass__panel.pf-m-no-padding {
3823
+ padding: 0;
3824
+ }
3825
+ .pf-v6-c-compass__panel.pf-m-full-height {
3826
+ height: 100%;
3827
+ }
3828
+ .pf-v6-c-compass__panel.pf-m-pill {
3829
+ border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
3830
+ }
3831
+ .pf-v6-c-compass__panel.pf-m-scrollable {
3832
+ overflow: auto;
3833
+ }
3834
+
3835
+ /* stylelint-disable */
3836
+ @media (max-width: 1200px) {
3837
+ .pf-v6-c-compass * {
3838
+ display: none;
3839
+ }
3840
+ .pf-v6-c-compass {
3841
+ position: relative;
3842
+ display: grid;
3843
+ grid-template-columns: auto;
3844
+ grid-template-rows: auto;
3845
+ place-content: center;
3846
+ gap: 0;
3847
+ }
3848
+ .pf-v6-c-compass::after {
3849
+ padding: 1em;
3850
+ border-radius: var(--pf-t--global--border--radius--large);
3851
+ background: var(--pf-t--global--background--color--primary--default);
3852
+ content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
3853
+ width: 80%;
3854
+ width: 300px;
3855
+ border: 1px solid var(--pf-t--global--border--color--default);
3856
+ box-shadow: var(--pf-t--global--box-shadow--md);
3857
+ white-space: pre-wrap;
3858
+ text-align: center;
3859
+ }
3860
+ }
3861
+ /* stylelint-enable */
3862
+ :root {
3863
+ --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
3864
+ --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
3865
+ --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
3866
+ --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
3867
+ --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
3868
+ --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
3869
+ --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
3870
+ --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
3871
+ --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3872
+ --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
3873
+ --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
3874
+ --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
3875
+ --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
3876
+ --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3877
+ --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
3878
+ --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
3879
+ --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
3880
+ --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
3881
+ --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3882
+ --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
3883
+ --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
3884
+ --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
3885
+ --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
3886
+ --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3887
+ --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
3888
+ --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
3889
+ --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
3890
+ --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
3891
+ --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3892
+ --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
3893
+ --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
3894
+ --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
3895
+ --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
3896
+ --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3897
+ --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
3898
+ --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
3899
+ --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
3900
+ --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
3901
+ --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
3902
+ --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
3903
+ --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
3904
+ --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
3905
+ --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
3906
+ --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
3907
+ --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3908
+ --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3909
+ --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
3910
+ --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3911
+ --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3912
+ --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
3913
+ --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
3914
+ --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3519
3915
  --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
3520
3916
  --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
3521
3917
  --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
@@ -4157,7 +4553,16 @@ ul) {
4157
4553
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
4158
4554
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
4159
4555
  --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);
4556
+ }
4557
+ @media screen and (min-width: 36rem) {
4558
+ .pf-v6-c-data-list {
4559
+ --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
4560
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
4561
+ }
4562
+ }
4563
+ .pf-v6-c-data-list {
4564
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4565
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
4161
4566
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
4162
4567
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
4163
4568
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -4165,6 +4570,14 @@ ul) {
4165
4570
  --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
4166
4571
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
4167
4572
  --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
4573
+ }
4574
+ @media screen and (min-width: 36rem) {
4575
+ .pf-v6-c-data-list {
4576
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
4577
+ --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
4578
+ }
4579
+ }
4580
+ .pf-v6-c-data-list {
4168
4581
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4169
4582
  --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-t--global--spacer--md);
4170
4583
  --pf-v6-c-data-list__item-row--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -4260,18 +4673,6 @@ ul) {
4260
4673
  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
4261
4674
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4262
4675
  }
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
4676
 
4276
4677
  .pf-v6-c-data-list {
4277
4678
  font-size: var(--pf-v6-c-data-list--FontSize);
@@ -4312,6 +4713,9 @@ ul) {
4312
4713
  .pf-v6-c-data-list.pf-m-drag-over {
4313
4714
  overflow-anchor: none;
4314
4715
  }
4716
+ .pf-v6-c-data-list.pf-m-plain {
4717
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
4718
+ }
4315
4719
 
4316
4720
  .pf-v6-c-data-list.pf-m-truncate,
4317
4721
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -4431,12 +4835,6 @@ ul) {
4431
4835
  --pf-v6-hidden-visible--hidden--Display: none;
4432
4836
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4433
4837
  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
4838
  }
4441
4839
  .pf-v6-c-data-list__item-action.pf-m-hidden {
4442
4840
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -4481,6 +4879,14 @@ ul) {
4481
4879
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4482
4880
  }
4483
4881
  }
4882
+ .pf-v6-c-data-list__item-action {
4883
+ gap: var(--pf-v6-c-data-list__item-action--Gap);
4884
+ align-content: flex-start;
4885
+ align-items: flex-start;
4886
+ padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
4887
+ padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
4888
+ margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
4889
+ }
4484
4890
 
4485
4891
  .pf-v6-c-data-list__toggle {
4486
4892
  margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
@@ -4488,15 +4894,16 @@ ul) {
4488
4894
  margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
4489
4895
  }
4490
4896
 
4897
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
4898
+ scale: -1 1;
4899
+ }
4900
+
4491
4901
  .pf-v6-c-data-list__toggle-icon {
4492
4902
  height: var(--pf-v6-c-data-list__toggle-icon--Height);
4493
4903
  pointer-events: none;
4494
4904
  transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
4495
4905
  transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
4496
4906
  }
4497
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
4498
- scale: -1 1;
4499
- }
4500
4907
 
4501
4908
  .pf-v6-c-data-list__item-content {
4502
4909
  display: grid;
@@ -4591,6 +4998,13 @@ ul) {
4591
4998
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
4592
4999
  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
4593
5000
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
5001
+ }
5002
+ @media screen and (min-width: 36rem) {
5003
+ .pf-v6-c-description-list {
5004
+ --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
5005
+ }
5006
+ }
5007
+ .pf-v6-c-description-list {
4594
5008
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
4595
5009
  --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
4596
5010
  --pf-v6-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -4619,11 +5033,6 @@ ul) {
4619
5033
  --pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit;
4620
5034
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
4621
5035
  }
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
5036
  @media (min-width: 36rem) {
4628
5037
  .pf-v6-c-description-list {
4629
5038
  --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 +5414,15 @@ ul) {
5005
5414
  --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
5006
5415
  --pf-v6-c-dual-list-selector__list--TranslateY: 0;
5007
5416
  --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
5417
+ }
5418
+ @media screen and (prefers-reduced-motion: no-preference) {
5419
+ .pf-v6-c-dual-list-selector {
5420
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
5421
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
5422
+ --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
5423
+ }
5424
+ }
5425
+ .pf-v6-c-dual-list-selector {
5008
5426
  --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
5009
5427
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
5010
5428
  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -5046,13 +5464,6 @@ ul) {
5046
5464
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
5047
5465
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
5048
5466
  }
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
5467
 
5057
5468
  .pf-v6-c-dual-list-selector {
5058
5469
  display: grid;
@@ -5123,8 +5534,6 @@ ul) {
5123
5534
 
5124
5535
  .pf-v6-c-dual-list-selector__list {
5125
5536
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
5126
- display: flex;
5127
- flex-direction: column;
5128
5537
  }
5129
5538
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
5130
5539
  --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
@@ -5132,16 +5541,22 @@ ul) {
5132
5541
  }
5133
5542
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
5134
5543
  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
5544
  }
5138
5545
  :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
5546
  transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
5140
5547
  }
5141
5548
 
5549
+ .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
5550
+ position: absolute;
5551
+ inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
5552
+ }
5142
5553
  .pf-v6-c-dual-list-selector__list.pf-m-drag-over {
5143
5554
  overflow-anchor: none;
5144
5555
  }
5556
+ .pf-v6-c-dual-list-selector__list {
5557
+ display: flex;
5558
+ flex-direction: column;
5559
+ }
5145
5560
 
5146
5561
  .pf-v6-c-dual-list-selector__list-item:focus-visible {
5147
5562
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
@@ -5426,11 +5841,6 @@ ul) {
5426
5841
  --pf-v6-hidden-visible--hidden--Display: none;
5427
5842
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5428
5843
  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
5844
  }
5435
5845
  .pf-v6-c-divider.pf-m-hidden {
5436
5846
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -5475,6 +5885,13 @@ ul) {
5475
5885
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5476
5886
  }
5477
5887
  }
5888
+ .pf-v6-c-divider {
5889
+ flex-shrink: 0;
5890
+ align-items: stretch;
5891
+ align-self: stretch;
5892
+ justify-content: center;
5893
+ border: 0;
5894
+ }
5478
5895
  .pf-v6-c-divider::before {
5479
5896
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
5480
5897
  content: "";
@@ -5719,6 +6136,7 @@ ul) {
5719
6136
  }
5720
6137
 
5721
6138
  .pf-v6-c-drawer {
6139
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
5722
6140
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5723
6141
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5724
6142
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -5749,6 +6167,7 @@ ul) {
5749
6167
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5750
6168
  --pf-v6-c-drawer__panel--Opacity: 0;
5751
6169
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
6170
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
5752
6171
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5753
6172
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5754
6173
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -5764,6 +6183,29 @@ ul) {
5764
6183
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
5765
6184
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
5766
6185
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
6186
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
6187
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
6188
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
6189
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
6190
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6191
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6192
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6193
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
6194
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
6195
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
6196
+ }
6197
+ @media screen and (prefers-reduced-motion: no-preference) {
6198
+ .pf-v6-c-drawer {
6199
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
6200
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
6201
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
6202
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
6203
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
6204
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
6205
+ --pf-v6-c-drawer__panel--Opacity: 1;
6206
+ }
6207
+ }
6208
+ .pf-v6-c-drawer {
5767
6209
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
5768
6210
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5769
6211
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -5826,6 +6268,17 @@ ul) {
5826
6268
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
5827
6269
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
5828
6270
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
6271
+ }
6272
+ @media screen and (min-width: 75rem) {
6273
+ .pf-v6-c-drawer {
6274
+ --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
6275
+ }
6276
+ .pf-v6-c-drawer.pf-m-panel-bottom {
6277
+ --pf-v6-c-drawer__panel--MinWidth: auto;
6278
+ --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
6279
+ }
6280
+ }
6281
+ .pf-v6-c-drawer {
5829
6282
  --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
5830
6283
  --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
5831
6284
  --pf-v6-c-drawer__panel--BoxShadow: none;
@@ -5840,46 +6293,32 @@ ul) {
5840
6293
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: 0;
5841
6294
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0;
5842
6295
  }
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
6296
 
5864
6297
  .pf-v6-c-drawer {
5865
6298
  --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
6299
  }
5872
6300
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
5873
6301
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
5874
6302
  }
5875
6303
 
6304
+ .pf-v6-c-drawer {
6305
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
6306
+ }
5876
6307
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
5877
6308
  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
5878
6309
  }
5879
6310
 
6311
+ .pf-v6-c-drawer {
6312
+ display: flex;
6313
+ flex-direction: column;
6314
+ height: 100%;
6315
+ overflow-x: hidden;
6316
+ }
5880
6317
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
5881
6318
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
5882
6319
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
6320
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
6321
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
5883
6322
  }
5884
6323
  .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
6324
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -5903,19 +6342,21 @@ ul) {
5903
6342
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
5904
6343
  }
5905
6344
  .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;
6345
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
5909
6346
  }
5910
6347
  :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)));
6348
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
5912
6349
  }
5913
6350
 
6351
+ .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6352
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
6353
+ visibility: visible;
6354
+ }
5914
6355
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5915
6356
  transform: translateX(0);
5916
6357
  }
5917
6358
  .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%);
6359
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
5919
6360
  }
5920
6361
  .pf-v6-c-drawer.pf-m-resizing {
5921
6362
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -5924,6 +6365,26 @@ ul) {
5924
6365
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
5925
6366
  pointer-events: auto;
5926
6367
  }
6368
+ @media screen and (min-width: 48rem) {
6369
+ .pf-v6-c-drawer.pf-m-pill {
6370
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
6371
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
6372
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
6373
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6374
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6375
+ }
6376
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6377
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
6378
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
6379
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6380
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6381
+ }
6382
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
6383
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6384
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6385
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6386
+ }
6387
+ }
5927
6388
 
5928
6389
  .pf-v6-c-drawer__section {
5929
6390
  flex-grow: 0;
@@ -5939,6 +6400,7 @@ ul) {
5939
6400
  .pf-v6-c-drawer__main {
5940
6401
  display: flex;
5941
6402
  flex: 1;
6403
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
5942
6404
  overflow: hidden;
5943
6405
  }
5944
6406
 
@@ -5946,8 +6408,8 @@ ul) {
5946
6408
  .pf-v6-c-drawer__panel,
5947
6409
  .pf-v6-c-drawer__panel-main {
5948
6410
  display: flex;
5949
- flex-direction: column;
5950
6411
  flex-shrink: 0;
6412
+ flex-direction: column;
5951
6413
  overflow: auto;
5952
6414
  }
5953
6415
 
@@ -5977,6 +6439,8 @@ ul) {
5977
6439
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
5978
6440
  order: 1;
5979
6441
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
6442
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
6443
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
5980
6444
  overflow: auto;
5981
6445
  visibility: hidden;
5982
6446
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -5985,6 +6449,7 @@ ul) {
5985
6449
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
5986
6450
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
5987
6451
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
6452
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
5988
6453
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5989
6454
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
5990
6455
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -6172,7 +6637,7 @@ ul) {
6172
6637
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
6173
6638
  }
6174
6639
  .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);
6640
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
6176
6641
  }
6177
6642
  .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
6643
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -6184,6 +6649,8 @@ ul) {
6184
6649
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
6185
6650
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
6186
6651
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
6652
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
6653
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
6187
6654
  min-width: auto;
6188
6655
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
6189
6656
  }
@@ -6231,82 +6698,86 @@ ul) {
6231
6698
  }
6232
6699
  @media (min-width: 48rem) {
6233
6700
  .pf-v6-c-drawer__panel.pf-m-width-25 {
6234
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6701
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6235
6702
  }
6236
6703
  .pf-v6-c-drawer__panel.pf-m-width-33 {
6237
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6704
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6238
6705
  }
6239
6706
  .pf-v6-c-drawer__panel.pf-m-width-50 {
6240
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6707
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6241
6708
  }
6242
6709
  .pf-v6-c-drawer__panel.pf-m-width-66 {
6243
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6710
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6244
6711
  }
6245
6712
  .pf-v6-c-drawer__panel.pf-m-width-75 {
6246
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6713
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6247
6714
  }
6248
6715
  .pf-v6-c-drawer__panel.pf-m-width-100 {
6249
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6716
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6717
+ --pf-v6-c-drawer__main--Gap: 0;
6250
6718
  }
6251
6719
  }
6252
6720
  @media (min-width: 62rem) {
6253
6721
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
6254
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6722
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6255
6723
  }
6256
6724
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
6257
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6725
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6258
6726
  }
6259
6727
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
6260
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6728
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6261
6729
  }
6262
6730
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
6263
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6731
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6264
6732
  }
6265
6733
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
6266
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6734
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6267
6735
  }
6268
6736
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
6269
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6737
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6738
+ --pf-v6-c-drawer__main--Gap: 0;
6270
6739
  }
6271
6740
  }
6272
6741
  @media (min-width: 75rem) {
6273
6742
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
6274
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6743
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6275
6744
  }
6276
6745
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
6277
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6746
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6278
6747
  }
6279
6748
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
6280
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6749
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6281
6750
  }
6282
6751
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
6283
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6752
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6284
6753
  }
6285
6754
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
6286
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6755
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6287
6756
  }
6288
6757
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
6289
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6758
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6759
+ --pf-v6-c-drawer__main--Gap: 0;
6290
6760
  }
6291
6761
  }
6292
6762
  @media (min-width: 90.625rem) {
6293
6763
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
6294
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6764
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6295
6765
  }
6296
6766
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
6297
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6767
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6298
6768
  }
6299
6769
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
6300
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6770
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6301
6771
  }
6302
6772
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
6303
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6773
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6304
6774
  }
6305
6775
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
6306
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6776
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6307
6777
  }
6308
6778
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
6309
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6779
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6780
+ --pf-v6-c-drawer__main--Gap: 0;
6310
6781
  }
6311
6782
  }
6312
6783
  @media (min-width: 48rem) {
@@ -6738,10 +7209,24 @@ ul) {
6738
7209
  --pf-v6-c-expandable-section__content--Opacity: 0;
6739
7210
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6740
7211
  --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
7212
+ --pf-v6-c-expandable-section__content--MaxHeight: 0px;
7213
+ --pf-v6-c-expandable-section__content--Visibility: hidden;
7214
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6741
7215
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
6742
7216
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
6743
7217
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6744
7218
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
7219
+ }
7220
+ @media screen and (prefers-reduced-motion: no-preference) {
7221
+ .pf-v6-c-expandable-section {
7222
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7223
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7224
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
7225
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
7226
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
7227
+ }
7228
+ }
7229
+ .pf-v6-c-expandable-section {
6745
7230
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6746
7231
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
6747
7232
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -6758,15 +7243,6 @@ ul) {
6758
7243
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6759
7244
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
6760
7245
  }
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
7246
 
6771
7247
  .pf-v6-c-expandable-section {
6772
7248
  display: flex;
@@ -6825,9 +7301,13 @@ ul) {
6825
7301
  }
6826
7302
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
6827
7303
  display: -webkit-box;
7304
+ overflow: hidden;
6828
7305
  -webkit-box-orient: vertical;
6829
7306
  -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
6830
- overflow: hidden;
7307
+ }
7308
+
7309
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
7310
+ scale: -1 1;
6831
7311
  }
6832
7312
 
6833
7313
  .pf-v6-c-expandable-section__toggle-icon {
@@ -6837,10 +7317,6 @@ ul) {
6837
7317
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
6838
7318
  transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
6839
7319
  }
6840
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
6841
- scale: -1 1;
6842
- }
6843
-
6844
7320
  .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
6845
7321
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
6846
7322
  }
@@ -7423,8 +7899,8 @@ ul) {
7423
7899
 
7424
7900
  .pf-v6-c-form__field-group-header-main {
7425
7901
  display: flex;
7426
- flex-direction: column;
7427
7902
  flex-grow: 1;
7903
+ flex-direction: column;
7428
7904
  }
7429
7905
 
7430
7906
  .pf-v6-c-form__field-group-header-title {
@@ -7665,8 +8141,8 @@ ul) {
7665
8141
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
7666
8142
  }
7667
8143
  .pf-v6-c-form-control.pf-m-textarea > textarea {
7668
- outline-offset: 0;
7669
8144
  scrollbar-gutter: stable;
8145
+ outline-offset: 0;
7670
8146
  }
7671
8147
  .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
7672
8148
  padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
@@ -7821,104 +8297,29 @@ ul) {
7821
8297
  font-size: var(--pf-v6-c-form-control__icon--FontSize);
7822
8298
  color: var(--pf-v6-c-form-control__icon--Color);
7823
8299
  }
7824
- .pf-v6-c-form-control__icon.pf-m-status {
7825
- --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color);
7826
- }
7827
-
7828
- .pf-v6-c-form-control__toggle-icon {
7829
- grid-row: 1/2;
7830
- grid-column: 3;
7831
- padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
7832
- padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
7833
- font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
7834
- color: var(--pf-v6-c-form-control__toggle-icon--Color);
7835
- pointer-events: none;
7836
- }
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);
8300
+ .pf-v6-c-form-control__icon.pf-m-status {
8301
+ --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color);
7914
8302
  }
7915
8303
 
7916
- .pf-v6-c-hint__footer {
7917
- grid-column: 1/-1;
7918
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8304
+ .pf-v6-c-form-control__toggle-icon {
8305
+ grid-row: 1/2;
8306
+ grid-column: 3;
8307
+ padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
8308
+ padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
8309
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
8310
+ color: var(--pf-v6-c-form-control__toggle-icon--Color);
8311
+ pointer-events: none;
7919
8312
  }
7920
- .pf-v6-c-hint__footer > :not(:last-child) {
7921
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8313
+
8314
+ .pf-v6-c-form-control__utilities {
8315
+ display: flex;
8316
+ flex-wrap: nowrap;
8317
+ grid-row: 1/2;
8318
+ grid-column: 2;
8319
+ gap: var(--pf-v6-c-form-control__utilities--Gap);
8320
+ padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
8321
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
8322
+ pointer-events: none;
7922
8323
  }
7923
8324
 
7924
8325
  .pf-v6-c-helper-text {
@@ -8006,6 +8407,156 @@ ul) {
8006
8407
  color: var(--pf-v6-c-helper-text__item-text--Color);
8007
8408
  }
8008
8409
 
8410
+ .pf-v6-c-hero {
8411
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
8412
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
8413
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
8414
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8415
+ --pf-v6-c-hero--gradient--angle: 109deg;
8416
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
8417
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
8418
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
8419
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
8420
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
8421
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
8422
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
8423
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
8424
+ --pf-v6-c-hero--BackgroundImage--light: none;
8425
+ --pf-v6-c-hero--BackgroundImage--dark: none;
8426
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
8427
+ --pf-v6-c-hero--BackgroundPosition: right center;
8428
+ --pf-v6-c-hero--BackgroundSize: contain;
8429
+ --pf-v6-c-hero--BorderStyle: solid;
8430
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
8431
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
8432
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
8433
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
8434
+ --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
8435
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
8436
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
8437
+ --pf-v6-c-hero--BorderStartStartRadius: 24px;
8438
+ --pf-v6-c-hero--BorderStartEndRadius: 72px;
8439
+ --pf-v6-c-hero--BorderEndEndRadius: 24px;
8440
+ --pf-v6-c-hero--BorderEndStartRadius: 72px;
8441
+ --pf-v6-c-hero__body--Width: 800px;
8442
+ --pf-v6-c-hero__body--MaxWidth: 80%;
8443
+ }
8444
+
8445
+ .pf-v6-c-hero {
8446
+ display: flex;
8447
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
8448
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
8449
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
8450
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
8451
+ 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%);
8452
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
8453
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
8454
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
8455
+ border-color: var(--pf-v6-c-hero--BorderColor);
8456
+ border-style: var(--pf-v6-c-hero--BorderStyle);
8457
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
8458
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
8459
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
8460
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
8461
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
8462
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
8463
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
8464
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
8465
+ }
8466
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
8467
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
8468
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
8469
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
8470
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
8471
+ }
8472
+ :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
8473
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
8474
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
8475
+ }
8476
+ .pf-v6-c-hero:not(.pf-m-no-glass) {
8477
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
8478
+ backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
8479
+ }
8480
+
8481
+ .pf-v6-c-hero__body {
8482
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
8483
+ }
8484
+
8485
+ .pf-v6-c-hint {
8486
+ --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8487
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8488
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8489
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8490
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8491
+ --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8492
+ --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8493
+ --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8494
+ --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8495
+ --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8496
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8497
+ --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8498
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8499
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8500
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8501
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8502
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8503
+ }
8504
+
8505
+ .pf-v6-c-hint {
8506
+ display: grid;
8507
+ grid-template-columns: 1fr auto;
8508
+ grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8509
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8510
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8511
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8512
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8513
+ color: var(--pf-v6-c-hint--Color);
8514
+ background-color: var(--pf-v6-c-hint--BackgroundColor);
8515
+ border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8516
+ border-radius: var(--pf-v6-c-hint--BorderRadius);
8517
+ }
8518
+ .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8519
+ text-align: start;
8520
+ white-space: normal;
8521
+ }
8522
+
8523
+ .pf-v6-c-hint__actions {
8524
+ display: inline-grid;
8525
+ grid-row: 1;
8526
+ grid-column: 2;
8527
+ grid-auto-flow: column;
8528
+ align-self: start;
8529
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8530
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8531
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8532
+ text-align: end;
8533
+ }
8534
+ .pf-v6-c-hint__actions.pf-m-no-offset {
8535
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8536
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8537
+ }
8538
+ .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8539
+ grid-column: 1;
8540
+ }
8541
+
8542
+ .pf-v6-c-hint__title {
8543
+ align-self: center;
8544
+ font-weight: var(--pf-v6-c-hint__title--FontWeight);
8545
+ }
8546
+
8547
+ .pf-v6-c-hint__body {
8548
+ grid-column: 1/-1;
8549
+ font-size: var(--pf-v6-c-hint__body--FontSize);
8550
+ }
8551
+
8552
+ .pf-v6-c-hint__footer {
8553
+ grid-column: 1/-1;
8554
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8555
+ }
8556
+ .pf-v6-c-hint__footer > :not(:last-child) {
8557
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8558
+ }
8559
+
8009
8560
  .pf-v6-c-icon {
8010
8561
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
8011
8562
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
@@ -8734,6 +9285,10 @@ label.pf-v6-c-input-group__text {
8734
9285
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
8735
9286
  }
8736
9287
 
9288
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
9289
+ scale: -1 1;
9290
+ }
9291
+
8737
9292
  .pf-v6-c-jump-links__toggle-icon {
8738
9293
  display: inline-block;
8739
9294
  color: var(--pf-v6-c-jump-links__toggle-icon--Color);
@@ -8742,9 +9297,6 @@ label.pf-v6-c-input-group__text {
8742
9297
  transition-property: transform;
8743
9298
  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
8744
9299
  }
8745
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
8746
- scale: -1 1;
8747
- }
8748
9300
 
8749
9301
  .pf-v6-c-label {
8750
9302
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -9241,6 +9793,10 @@ input.pf-v6-c-label__content {
9241
9793
  .pf-v6-c-label__actions {
9242
9794
  margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
9243
9795
  }
9796
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
9797
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
9798
+ }
9799
+
9244
9800
  .pf-v6-c-label__actions .pf-v6-c-button {
9245
9801
  --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
9246
9802
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
@@ -9251,9 +9807,6 @@ input.pf-v6-c-label__content {
9251
9807
  margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
9252
9808
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
9253
9809
  }
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
9810
 
9258
9811
  .pf-v6-c-label-group {
9259
9812
  --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
@@ -9394,9 +9947,9 @@ input.pf-v6-c-label__content {
9394
9947
  padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
9395
9948
  white-space: nowrap;
9396
9949
  resize: none;
9397
- border: 0;
9398
- -ms-overflow-style: none;
9399
9950
  scrollbar-width: none;
9951
+ -ms-overflow-style: none;
9952
+ border: 0;
9400
9953
  }
9401
9954
  .pf-v6-c-label-group__textarea::-webkit-scrollbar {
9402
9955
  display: none;
@@ -9482,18 +10035,48 @@ ul.pf-v6-c-list {
9482
10035
  --pf-v6-c-login__container--PaddingInlineStart: 6.125rem;
9483
10036
  --pf-v6-c-login__container--PaddingInlineEnd: 6.125rem;
9484
10037
  --pf-v6-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
10038
+ }
10039
+ @media (min-width: 75rem) {
10040
+ .pf-v6-c-login {
10041
+ --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
10042
+ }
10043
+ }
10044
+ .pf-v6-c-login {
9485
10045
  --pf-v6-c-login__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
9486
10046
  --pf-v6-c-login__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
9487
10047
  --pf-v6-c-login__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10048
+ }
10049
+ @media (min-width: 36rem) {
10050
+ .pf-v6-c-login {
10051
+ --pf-v6-c-login__header--PaddingInlineEnd: 0;
10052
+ --pf-v6-c-login__header--PaddingInlineStart: 0;
10053
+ }
10054
+ }
10055
+ .pf-v6-c-login {
9488
10056
  --pf-v6-c-login__header--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
9489
10057
  --pf-v6-c-login__header--xl--MarginBlockStart: var(--pf-t--global--spacer--3xl);
9490
10058
  --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-t--global--spacer--lg);
9491
10059
  --pf-v6-c-login__header--c-brand--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
10060
+ }
10061
+ @media (min-width: 75rem) {
10062
+ .pf-v6-c-login {
10063
+ --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
10064
+ --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
10065
+ }
10066
+ }
10067
+ .pf-v6-c-login {
9492
10068
  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9493
10069
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
9494
10070
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
9495
10071
  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9496
10072
  --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
10073
+ }
10074
+ @media (min-width: 75rem) {
10075
+ .pf-v6-c-login {
10076
+ --pf-v6-c-login__main--MarginBlockEnd: 0;
10077
+ }
10078
+ }
10079
+ .pf-v6-c-login {
9497
10080
  --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
9498
10081
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
9499
10082
  --pf-v6-c-login__main-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -9505,11 +10088,28 @@ ul.pf-v6-c-list {
9505
10088
  --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-t--global--spacer--sm);
9506
10089
  --pf-v6-c-login__main-header-desc--md--MarginBlockEnd: 0;
9507
10090
  --pf-v6-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
10091
+ }
10092
+ @media (min-width: 48rem) {
10093
+ .pf-v6-c-login {
10094
+ --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
10095
+ --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
10096
+ --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
10097
+ }
10098
+ }
10099
+ .pf-v6-c-login {
9508
10100
  --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
9509
10101
  --pf-v6-c-login__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
9510
10102
  --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-t--global--spacer--xl);
9511
10103
  --pf-v6-c-login__main-body--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
9512
10104
  --pf-v6-c-login__main-body--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
10105
+ }
10106
+ @media (min-width: 48rem) {
10107
+ .pf-v6-c-login {
10108
+ --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
10109
+ --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
10110
+ }
10111
+ }
10112
+ .pf-v6-c-login {
9513
10113
  --pf-v6-c-login__main-footer--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
9514
10114
  --pf-v6-c-login__main-footer--c-title--MarginBlockEnd: var(--pf-t--global--spacer--md);
9515
10115
  --pf-v6-c-login__main-footer-links--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -9527,43 +10127,6 @@ ul.pf-v6-c-list {
9527
10127
  --pf-v6-c-login__main-footer-band-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
9528
10128
  --pf-v6-c-login__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
9529
10129
  --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
10130
  }
9568
10131
  @media (min-width: 36rem) {
9569
10132
  .pf-v6-c-login {
@@ -9571,6 +10134,10 @@ ul.pf-v6-c-list {
9571
10134
  --pf-v6-c-login__footer--PaddingInlineStart: 0;
9572
10135
  }
9573
10136
  }
10137
+ .pf-v6-c-login {
10138
+ --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
10139
+ --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
10140
+ }
9574
10141
  @media (min-width: 75rem) {
9575
10142
  .pf-v6-c-login {
9576
10143
  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
@@ -9766,12 +10333,26 @@ ul.pf-v6-c-list {
9766
10333
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
9767
10334
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
9768
10335
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
10336
+ --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
10337
+ --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
10338
+ --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10339
+ --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10340
+ --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10341
+ --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10342
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
10343
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
10344
+ --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
9769
10345
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
9770
10346
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
9771
10347
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
9772
10348
  --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
9773
10349
  }
9774
10350
 
10351
+ .pf-v6-c-masthead .pf-v6-c-toolbar {
10352
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
10353
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
10354
+ --pf-v6-c-toolbar__content--MinWidth: 0;
10355
+ }
9775
10356
  .pf-v6-c-masthead {
9776
10357
  --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
9777
10358
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
@@ -9785,7 +10366,26 @@ ul.pf-v6-c-list {
9785
10366
  --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
9786
10367
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9787
10368
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
10369
+ }
10370
+ @media screen and (min-width: 48rem) {
10371
+ :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
10372
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
10373
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
10374
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
10375
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
10376
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
10377
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
10378
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
10379
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
10380
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
10381
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
10382
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
10383
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10384
+ }
10385
+ }
10386
+ .pf-v6-c-masthead {
9788
10387
  display: grid;
10388
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
9789
10389
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
9790
10390
  row-gap: var(--pf-v6-c-masthead--RowGap);
9791
10391
  column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -9797,26 +10397,47 @@ ul.pf-v6-c-list {
9797
10397
  padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
9798
10398
  background-color: var(--pf-v6-c-masthead--BackgroundColor);
9799
10399
  }
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;
10400
+ .pf-v6-c-masthead.pf-m-docked {
10401
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
10402
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
10403
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
10404
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
10405
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
10406
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
10407
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
10408
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
10409
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
10410
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
10411
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
10412
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10413
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
10414
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
10415
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
10416
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
10417
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
10418
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
10419
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
10420
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
10421
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
10422
+ --pf-v6-c-masthead__main--GridColumn: auto;
10423
+ --pf-v6-c-masthead__content--GridColumn: auto;
10424
+ --pf-v6-c-masthead__logo--Width: auto;
10425
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
10426
+ display: flex;
10427
+ flex-direction: column;
10428
+ align-items: center;
10429
+ width: fit-content;
10430
+ height: 100%;
10431
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
10432
+ }
10433
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
10434
+ flex-grow: 1;
10435
+ flex-direction: column;
10436
+ align-self: revert;
9804
10437
  }
9805
- @media screen and (min-width: 48rem) {
9806
- :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
9807
- --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
9808
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
9809
- --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
9810
- --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
9811
- --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
9812
- --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
9813
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
9814
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
9815
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
9816
- --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
9817
- --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
9818
- --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9819
- }
10438
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
10439
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
10440
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
9820
10441
  }
9821
10442
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
9822
10443
  flex-wrap: nowrap;
@@ -10281,6 +10902,13 @@ ul.pf-v6-c-list {
10281
10902
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
10282
10903
  --pf-v6-c-menu--TransitionDuration: 0s;
10283
10904
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
10905
+ }
10906
+ @media (prefers-reduced-motion: no-preference) {
10907
+ .pf-v6-c-menu {
10908
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10909
+ }
10910
+ }
10911
+ .pf-v6-c-menu {
10284
10912
  --pf-v6-c-menu--m-plain--BoxShadow: none;
10285
10913
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
10286
10914
  --pf-v6-c-menu__content--Height: auto;
@@ -10360,33 +10988,34 @@ ul.pf-v6-c-list {
10360
10988
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
10361
10989
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10362
10990
  --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
10991
  }
10375
10992
  @media (prefers-reduced-motion: no-preference) {
10376
10993
  .pf-v6-c-menu {
10377
10994
  --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
10995
  }
10379
10996
  }
10997
+ .pf-v6-c-menu {
10998
+ --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
10999
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
11000
+ --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
11001
+ }
10380
11002
  @media (prefers-reduced-motion: no-preference) {
10381
11003
  .pf-v6-c-menu {
10382
11004
  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10383
11005
  }
10384
11006
  }
11007
+ .pf-v6-c-menu {
11008
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
11009
+ --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
11010
+ }
10385
11011
  @media (prefers-reduced-motion: no-preference) {
10386
11012
  .pf-v6-c-menu {
10387
11013
  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10388
11014
  }
10389
11015
  }
11016
+ .pf-v6-c-menu {
11017
+ --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
11018
+ }
10390
11019
 
10391
11020
  .pf-v6-c-menu__content,
10392
11021
  .pf-v6-c-menu__list-item,
@@ -10844,13 +11473,14 @@ ul.pf-v6-c-list {
10844
11473
  --pf-v6-c-check__input--TranslateY: none;
10845
11474
  }
10846
11475
 
10847
- .pf-v6-c-menu__item-toggle-icon {
10848
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
10849
- }
10850
11476
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
10851
11477
  scale: -1 1;
10852
11478
  }
10853
11479
 
11480
+ .pf-v6-c-menu__item-toggle-icon {
11481
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
11482
+ }
11483
+
10854
11484
  .pf-v6-c-menu__item-icon {
10855
11485
  color: var(--pf-v6-c-menu__item--icon--Color, inherit);
10856
11486
  }
@@ -11019,6 +11649,7 @@ ul.pf-v6-c-list {
11019
11649
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
11020
11650
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
11021
11651
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
11652
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
11022
11653
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
11023
11654
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
11024
11655
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -11147,6 +11778,9 @@ ul.pf-v6-c-list {
11147
11778
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
11148
11779
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
11149
11780
  }
11781
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
11782
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
11783
+ }
11150
11784
  .pf-v6-c-menu-toggle.pf-m-plain::before {
11151
11785
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
11152
11786
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -11437,6 +12071,13 @@ ul.pf-v6-c-list {
11437
12071
  --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
11438
12072
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
11439
12073
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
12074
+ }
12075
+ @media (min-width: 75rem) {
12076
+ .pf-v6-c-modal-box {
12077
+ --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
12078
+ }
12079
+ }
12080
+ .pf-v6-c-modal-box {
11440
12081
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11441
12082
  --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11442
12083
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -11468,11 +12109,6 @@ ul.pf-v6-c-list {
11468
12109
  --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
11469
12110
  --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
11470
12111
  }
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
12112
 
11477
12113
  .pf-v6-c-modal-box {
11478
12114
  position: relative;
@@ -11534,8 +12170,8 @@ ul.pf-v6-c-list {
11534
12170
 
11535
12171
  .pf-v6-c-modal-box__header {
11536
12172
  display: flex;
11537
- flex-direction: column;
11538
12173
  flex-shrink: 0;
12174
+ flex-direction: column;
11539
12175
  gap: var(--pf-v6-c-modal-box__header--Gap);
11540
12176
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
11541
12177
  padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
@@ -11552,8 +12188,8 @@ ul.pf-v6-c-list {
11552
12188
 
11553
12189
  .pf-v6-c-modal-box__header-main {
11554
12190
  display: flex;
11555
- flex-direction: column;
11556
12191
  flex-grow: 1;
12192
+ flex-direction: column;
11557
12193
  gap: var(--pf-v6-c-modal-box__header-main--Gap);
11558
12194
  min-width: 0;
11559
12195
  padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);
@@ -11862,6 +12498,15 @@ ul.pf-v6-c-list {
11862
12498
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
11863
12499
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
11864
12500
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
12501
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
12502
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
12503
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
12504
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
12505
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
12506
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
12507
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
12508
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12509
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
11865
12510
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
11866
12511
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
11867
12512
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -11886,6 +12531,7 @@ ul.pf-v6-c-list {
11886
12531
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
11887
12532
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
11888
12533
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
12534
+ --pf-v6-c-nav__link-text--FontSize: initial;
11889
12535
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
11890
12536
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11891
12537
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -11897,6 +12543,15 @@ ul.pf-v6-c-list {
11897
12543
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
11898
12544
  --pf-v6-c-nav__subnav--TranslateY: 0;
11899
12545
  --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
12546
+ }
12547
+ @media screen and (prefers-reduced-motion: no-preference) {
12548
+ .pf-v6-c-nav {
12549
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
12550
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
12551
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
12552
+ }
12553
+ }
12554
+ .pf-v6-c-nav {
11900
12555
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
11901
12556
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
11902
12557
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11926,13 +12581,11 @@ ul.pf-v6-c-list {
11926
12581
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11927
12582
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11928
12583
  --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
- }
12584
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12585
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12586
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12587
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
12588
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11936
12589
  }
11937
12590
 
11938
12591
  .pf-v6-c-nav,
@@ -11967,6 +12620,25 @@ ul.pf-v6-c-list {
11967
12620
  .pf-v6-c-nav.pf-m-fill {
11968
12621
  flex-grow: 1;
11969
12622
  }
12623
+ .pf-v6-c-nav.pf-m-docked {
12624
+ --pf-v6-c-nav--PaddingBlockStart: 0;
12625
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
12626
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
12627
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
12628
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
12629
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
12630
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
12631
+ width: fit-content;
12632
+ }
12633
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
12634
+ position: relative;
12635
+ align-self: center;
12636
+ min-width: 1lh;
12637
+ text-align: center;
12638
+ }
12639
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
12640
+ display: none;
12641
+ }
11970
12642
  .pf-v6-c-nav .pf-v6-c-menu {
11971
12643
  --pf-v6-c-menu--MinWidth: 100%;
11972
12644
  }
@@ -12030,14 +12702,34 @@ ul.pf-v6-c-list {
12030
12702
  }
12031
12703
 
12032
12704
  .pf-v6-c-nav__item {
12705
+ position: relative;
12033
12706
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
12034
12707
  }
12708
+ .pf-v6-c-nav__item::before {
12709
+ position: absolute;
12710
+ inset-block-start: 0;
12711
+ inset-block-end: 0;
12712
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
12713
+ width: var(--pf-v6-c-nav__item--accent--size);
12714
+ pointer-events: none;
12715
+ content: var(--pf-v6-c-nav__item--accent--content, "");
12716
+ background-color: var(--pf-v6-c-nav__item--accent--color);
12717
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
12718
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
12719
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
12720
+ transition-property: scale;
12721
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
12722
+ }
12035
12723
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
12036
12724
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
12037
12725
  }
12038
12726
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
12039
12727
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
12040
12728
  }
12729
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
12730
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
12731
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
12732
+ }
12041
12733
 
12042
12734
  .pf-v6-c-nav__section {
12043
12735
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -12099,6 +12791,10 @@ ul.pf-v6-c-list {
12099
12791
  color: var(--pf-v6-c-nav__link-icon--Color);
12100
12792
  }
12101
12793
 
12794
+ .pf-v6-c-nav__link-text {
12795
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
12796
+ }
12797
+
12102
12798
  .pf-v6-c-nav__toggle {
12103
12799
  flex: none;
12104
12800
  align-self: start;
@@ -12154,6 +12850,7 @@ ul.pf-v6-c-list {
12154
12850
  }
12155
12851
 
12156
12852
  .pf-v6-c-nav:where(.pf-m-horizontal) {
12853
+ --pf-v6-c-nav__item--accent--content: none;
12157
12854
  padding: 0;
12158
12855
  overflow: hidden;
12159
12856
  }
@@ -12174,12 +12871,14 @@ ul.pf-v6-c-list {
12174
12871
  scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
12175
12872
  scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
12176
12873
  -webkit-overflow-scrolling: touch;
12177
- scrollbar-width: none;
12178
- -ms-overflow-style: -ms-autohiding-scrollbar;
12179
12874
  }
12180
12875
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
12181
12876
  display: none;
12182
12877
  }
12878
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
12879
+ scrollbar-width: none;
12880
+ -ms-overflow-style: -ms-autohiding-scrollbar;
12881
+ }
12183
12882
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
12184
12883
  outline-offset: var(--pf-v6-c-nav--OutlineOffset);
12185
12884
  }
@@ -12217,6 +12916,7 @@ ul.pf-v6-c-list {
12217
12916
  --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
12218
12917
  --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
12219
12918
  --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
12919
+ --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12220
12920
  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
12221
12921
  --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
12222
12922
  --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12311,6 +13011,7 @@ ul.pf-v6-c-list {
12311
13011
 
12312
13012
  .pf-v6-c-notification-drawer__header-action {
12313
13013
  display: flex;
13014
+ gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
12314
13015
  align-items: center;
12315
13016
  margin-inline-start: auto;
12316
13017
  }
@@ -12394,9 +13095,9 @@ ul.pf-v6-c-list {
12394
13095
  }
12395
13096
  .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
12396
13097
  display: -webkit-box;
13098
+ overflow: hidden;
12397
13099
  -webkit-box-orient: vertical;
12398
13100
  -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
12399
- overflow: hidden;
12400
13101
  }
12401
13102
 
12402
13103
  .pf-v6-c-notification-drawer__list-item-action {
@@ -12450,9 +13151,9 @@ ul.pf-v6-c-list {
12450
13151
 
12451
13152
  .pf-v6-c-notification-drawer__group-toggle-title {
12452
13153
  display: -webkit-box;
13154
+ overflow: hidden;
12453
13155
  -webkit-box-orient: vertical;
12454
13156
  -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
12455
- overflow: hidden;
12456
13157
  flex: 1;
12457
13158
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
12458
13159
  font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
@@ -12465,15 +13166,15 @@ ul.pf-v6-c-list {
12465
13166
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
12466
13167
  }
12467
13168
 
13169
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
13170
+ scale: -1 1;
13171
+ }
13172
+
12468
13173
  .pf-v6-c-notification-drawer__group-toggle-icon {
12469
13174
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
12470
13175
  color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
12471
13176
  transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
12472
13177
  }
12473
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
12474
- scale: -1 1;
12475
- }
12476
-
12477
13178
  .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
12478
13179
  transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
12479
13180
  }
@@ -12519,6 +13220,7 @@ ul.pf-v6-c-list {
12519
13220
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12520
13221
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
12521
13222
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13223
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
12522
13224
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
12523
13225
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
12524
13226
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -12541,6 +13243,15 @@ ul.pf-v6-c-list {
12541
13243
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
12542
13244
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12543
13245
  --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
13246
+ }
13247
+ @media screen and (prefers-reduced-motion: no-preference) {
13248
+ .pf-v6-c-page {
13249
+ --pf-v6-c-page__sidebar--Opacity: 1;
13250
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
13251
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
13252
+ }
13253
+ }
13254
+ .pf-v6-c-page {
12544
13255
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12545
13256
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
12546
13257
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -12556,6 +13267,15 @@ ul.pf-v6-c-list {
12556
13267
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
12557
13268
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12558
13269
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
13270
+ }
13271
+ @media screen and (min-width: 75rem) {
13272
+ .pf-v6-c-page {
13273
+ --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
13274
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
13275
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
13276
+ }
13277
+ }
13278
+ .pf-v6-c-page {
12559
13279
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
12560
13280
  --pf-v6-c-page__main-container--GridArea: main;
12561
13281
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
@@ -12578,6 +13298,17 @@ ul.pf-v6-c-list {
12578
13298
  --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
12579
13299
  --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
12580
13300
  --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
13301
+ }
13302
+ @media screen and (max-width: calc(48rem - 1px)) {
13303
+ .pf-v6-c-page {
13304
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
13305
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
13306
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
13307
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
13308
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
13309
+ }
13310
+ }
13311
+ .pf-v6-c-page {
12581
13312
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
12582
13313
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12583
13314
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12626,29 +13357,9 @@ ul.pf-v6-c-list {
12626
13357
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12627
13358
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12628
13359
  --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
- }
13360
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13361
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13362
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
12652
13363
  }
12653
13364
 
12654
13365
  .pf-v6-c-page {
@@ -12668,6 +13379,16 @@ ul.pf-v6-c-list {
12668
13379
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
12669
13380
  }
12670
13381
  }
13382
+ .pf-v6-c-page.pf-m-dock {
13383
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
13384
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
13385
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
13386
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
13387
+ grid-template-areas: "dock main";
13388
+ grid-template-rows: auto;
13389
+ grid-template-columns: auto 1fr;
13390
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
13391
+ }
12671
13392
  .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
13393
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12673
13394
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -12714,15 +13435,20 @@ ul.pf-v6-c-list {
12714
13435
  }
12715
13436
  }
12716
13437
 
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
13438
  @media (min-width: 75rem) {
12722
13439
  .pf-v6-c-page > .pf-v6-c-masthead {
12723
13440
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
12724
13441
  }
12725
13442
  }
13443
+ .pf-v6-c-page > .pf-v6-c-masthead {
13444
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
13445
+ grid-area: header;
13446
+ }
13447
+
13448
+ .pf-v6-c-page__dock {
13449
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
13450
+ grid-area: dock;
13451
+ }
12726
13452
 
12727
13453
  .pf-v6-c-page__sidebar {
12728
13454
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
@@ -12834,8 +13560,8 @@ ul.pf-v6-c-list {
12834
13560
  .pf-v6-c-page__main-group,
12835
13561
  .pf-v6-c-page__main-subnav {
12836
13562
  display: flex;
12837
- flex-direction: column;
12838
13563
  flex-shrink: 0;
13564
+ flex-direction: column;
12839
13565
  }
12840
13566
  .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
12841
13567
  .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
@@ -13027,6 +13753,7 @@ ul.pf-v6-c-list {
13027
13753
  flex-direction: column;
13028
13754
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
13029
13755
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
13756
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
13030
13757
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
13031
13758
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
13032
13759
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -13078,8 +13805,8 @@ ul.pf-v6-c-list {
13078
13805
  .pf-v6-c-page__main-drawer,
13079
13806
  .pf-v6-c-page__main-group {
13080
13807
  display: flex;
13081
- flex-direction: column;
13082
13808
  flex-grow: 1;
13809
+ flex-direction: column;
13083
13810
  }
13084
13811
 
13085
13812
  .pf-v6-c-page__main {
@@ -14993,8 +15720,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14993
15720
  position: var(--pf-v6-c-sidebar__panel--Position);
14994
15721
  inset-block-start: var(--pf-v6-c-sidebar__panel--InsetBlockStart);
14995
15722
  z-index: var(--pf-v6-c-sidebar__panel--ZIndex);
14996
- flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
14997
15723
  flex-shrink: 0;
15724
+ flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
14998
15725
  order: var(--pf-v6-c-sidebar__panel--Order);
14999
15726
  padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingBlockStart);
15000
15727
  padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBlockEnd);
@@ -15291,7 +16018,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15291
16018
  --pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
15292
16019
  --pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
15293
16020
  --pf-v6-c-skeleton--before--Height: auto;
15294
- --pf-v6-c-skeleton--before--Content: " ";
16021
+ --pf-v6-c-skeleton--before--Content: "\00a0";
15295
16022
  --pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
15296
16023
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
15297
16024
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
@@ -15302,6 +16029,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15302
16029
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
15303
16030
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
15304
16031
  --pf-v6-c-skeleton--after--AnimationDelay: .5s;
16032
+ }
16033
+ @media screen and (prefers-reduced-motion: no-preference) {
16034
+ .pf-v6-c-skeleton {
16035
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
16036
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
16037
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
16038
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
16039
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
16040
+ }
16041
+ }
16042
+ .pf-v6-c-skeleton {
15305
16043
  --pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
15306
16044
  --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
15307
16045
  --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 +16067,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15329
16067
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
15330
16068
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
15331
16069
  }
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
16070
 
15342
16071
  .pf-v6-c-skeleton {
15343
16072
  position: relative;
@@ -15354,6 +16083,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15354
16083
  padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
15355
16084
  content: var(--pf-v6-c-skeleton--before--Content);
15356
16085
  }
16086
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
16087
+ scale: -1 1;
16088
+ }
16089
+
15357
16090
  .pf-v6-c-skeleton::after {
15358
16091
  position: absolute;
15359
16092
  inset: 0;
@@ -15363,10 +16096,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15363
16096
  transform: translate3d(var(--pf-v6-c-skeleton--after--TranslateX), 0, 0);
15364
16097
  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
16098
  }
15366
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
15367
- scale: -1 1;
15368
- }
15369
-
15370
16099
  .pf-v6-c-skeleton.pf-m-circle {
15371
16100
  --pf-v6-c-skeleton--BorderRadius: var(--pf-v6-c-skeleton--m-circle--BorderRadius);
15372
16101
  }
@@ -15554,12 +16283,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15554
16283
 
15555
16284
  .pf-v6-c-slider {
15556
16285
  --pf-v6-c-slider__rail-track--before--fill--direction: right;
15557
- display: flex;
15558
16286
  }
15559
16287
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
15560
16288
  --pf-v6-c-slider__rail-track--before--fill--direction: left;
15561
16289
  }
15562
16290
 
16291
+ .pf-v6-c-slider {
16292
+ display: flex;
16293
+ }
15563
16294
  .pf-v6-c-slider.pf-m-disabled {
15564
16295
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
15565
16296
  --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 +16353,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15622
16353
 
15623
16354
  .pf-v6-c-slider__step-tick {
15624
16355
  transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
16356
+ }
16357
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
16358
+ transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
16359
+ }
16360
+
16361
+ .pf-v6-c-slider__step-tick {
15625
16362
  position: absolute;
15626
16363
  inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
15627
16364
  inset-inline-start: 0;
@@ -15631,22 +16368,28 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15631
16368
  border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
15632
16369
  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
15633
16370
  }
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
16371
 
15638
16372
  .pf-v6-c-slider__step-label {
15639
16373
  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
16374
  }
15644
16375
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
15645
16376
  transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
15646
16377
  }
15647
16378
 
16379
+ .pf-v6-c-slider__step-label {
16380
+ position: absolute;
16381
+ inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
16382
+ word-break: normal;
16383
+ }
16384
+
15648
16385
  .pf-v6-c-slider__thumb {
15649
16386
  transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
16387
+ }
16388
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
16389
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
16390
+ }
16391
+
16392
+ .pf-v6-c-slider__thumb {
15650
16393
  position: absolute;
15651
16394
  inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
15652
16395
  inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
@@ -15658,12 +16401,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15658
16401
  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
15659
16402
  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
15660
16403
  }
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));
16404
+ .pf-v6-c-slider__thumb::before {
16405
+ transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
16406
+ }
16407
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
16408
+ 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
16409
  }
15664
16410
 
15665
16411
  .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
16412
  position: absolute;
15668
16413
  inset-block-start: 50%;
15669
16414
  inset-inline-start: 50%;
@@ -15672,10 +16417,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15672
16417
  content: "";
15673
16418
  border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
15674
16419
  }
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
16420
  .pf-v6-c-slider__thumb:hover {
15680
16421
  --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
15681
16422
  }
@@ -15692,16 +16433,18 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15692
16433
  }
15693
16434
  .pf-v6-c-slider__value.pf-m-floating {
15694
16435
  transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
16436
+ }
16437
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
16438
+ 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));
16439
+ }
16440
+
16441
+ .pf-v6-c-slider__value.pf-m-floating {
15695
16442
  --pf-v6-c-slider__value--MarginInlineStart: 0;
15696
16443
  position: absolute;
15697
16444
  inset-block-start: 0;
15698
16445
  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
15699
16446
  z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
15700
16447
  }
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
16448
  .pf-v6-c-slider__value .pf-v6-c-form-control {
15706
16449
  width: var(--pf-v6-c-slider__value--c-form-control--Width);
15707
16450
  }
@@ -15879,12 +16622,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15879
16622
  }
15880
16623
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
15881
16624
  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
16625
  }
15884
16626
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
15885
16627
  transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
15886
16628
  }
15887
16629
 
16630
+ .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
16631
+ background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
16632
+ }
15888
16633
  .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
15889
16634
  color: var(--pf-v6-c-switch__input--not-checked__label--Color);
15890
16635
  }
@@ -16369,7 +17114,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16369
17114
  --pf-v6-c-table--cell--Width: auto;
16370
17115
  }
16371
17116
 
16372
- @media screen and (max-width: calc(48rem - 1px)) {
17117
+ @container pf-v6-contain-table (max-width: 48rem) {
16373
17118
  .pf-m-grid-md.pf-v6-c-table {
16374
17119
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
16375
17120
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -16647,15 +17392,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16647
17392
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
16648
17393
  text-align: end;
16649
17394
  }
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;
17395
+ @media screen and (max-width: 36rem) {
17396
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
17397
+ grid-row-start: 1;
17398
+ grid-column-start: 2;
17399
+ margin-inline-start: 0;
17400
+ }
16656
17401
  }
16657
- }
16658
- @media screen and (max-width: calc(48rem - 1px)) {
16659
17402
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
16660
17403
  grid-column: 2;
16661
17404
  grid-row: 2;
@@ -16681,7 +17424,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16681
17424
  }
16682
17425
  }
16683
17426
 
16684
- @media screen and (max-width: calc(62rem - 1px)) {
17427
+ @container pf-v6-contain-table (max-width: 62rem) {
16685
17428
  .pf-m-grid-lg.pf-v6-c-table {
16686
17429
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
16687
17430
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -16959,15 +17702,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16959
17702
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
16960
17703
  text-align: end;
16961
17704
  }
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;
17705
+ @media screen and (max-width: 36rem) {
17706
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
17707
+ grid-row-start: 1;
17708
+ grid-column-start: 2;
17709
+ margin-inline-start: 0;
17710
+ }
16968
17711
  }
16969
- }
16970
- @media screen and (max-width: calc(62rem - 1px)) {
16971
17712
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
16972
17713
  grid-column: 2;
16973
17714
  grid-row: 2;
@@ -16993,7 +17734,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16993
17734
  }
16994
17735
  }
16995
17736
 
16996
- @media screen and (max-width: calc(75rem - 1px)) {
17737
+ @container pf-v6-contain-table (max-width: 75rem) {
16997
17738
  .pf-m-grid-xl.pf-v6-c-table {
16998
17739
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
16999
17740
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17271,15 +18012,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17271
18012
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
17272
18013
  text-align: end;
17273
18014
  }
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;
18015
+ @media screen and (max-width: 36rem) {
18016
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
18017
+ grid-row-start: 1;
18018
+ grid-column-start: 2;
18019
+ margin-inline-start: 0;
18020
+ }
17280
18021
  }
17281
- }
17282
- @media screen and (max-width: calc(75rem - 1px)) {
17283
18022
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
17284
18023
  grid-column: 2;
17285
18024
  grid-row: 2;
@@ -17305,7 +18044,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17305
18044
  }
17306
18045
  }
17307
18046
 
17308
- @media screen and (max-width: calc(90.625rem - 1px)) {
18047
+ @container pf-v6-contain-table (max-width: 90.625rem) {
17309
18048
  .pf-m-grid-2xl.pf-v6-c-table {
17310
18049
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
17311
18050
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17583,15 +18322,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17583
18322
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
17584
18323
  text-align: end;
17585
18324
  }
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;
18325
+ @media screen and (max-width: 36rem) {
18326
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
18327
+ grid-row-start: 1;
18328
+ grid-column-start: 2;
18329
+ margin-inline-start: 0;
18330
+ }
17592
18331
  }
17593
- }
17594
- @media screen and (max-width: calc(90.625rem - 1px)) {
17595
18332
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
17596
18333
  grid-column: 2;
17597
18334
  grid-row: 2;
@@ -17706,6 +18443,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17706
18443
  --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
17707
18444
  --pf-v6-c-table__expandable-row--TranslateY: 0;
17708
18445
  --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
18446
+ }
18447
+ @media screen and (prefers-reduced-motion: no-preference) {
18448
+ .pf-v6-c-table {
18449
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
18450
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
18451
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
18452
+ }
18453
+ }
18454
+ .pf-v6-c-table {
17709
18455
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
17710
18456
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
17711
18457
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -17774,13 +18520,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17774
18520
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
17775
18521
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
17776
18522
  }
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
18523
 
17785
18524
  .pf-v6-c-table {
17786
18525
  width: 100%;
@@ -17845,22 +18584,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17845
18584
  --pf-v6-hidden-visible--hidden--Display: none;
17846
18585
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
17847
18586
  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
18587
  }
17865
18588
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden {
17866
18589
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -17905,6 +18628,24 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17905
18628
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
17906
18629
  }
17907
18630
  }
18631
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
18632
+ position: relative;
18633
+ width: var(--pf-v6-c-table--cell--Width);
18634
+ min-width: var(--pf-v6-c-table--cell--MinWidth);
18635
+ max-width: var(--pf-v6-c-table--cell--MaxWidth);
18636
+ padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
18637
+ padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
18638
+ padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
18639
+ padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
18640
+ overflow: var(--pf-v6-c-table--cell--Overflow);
18641
+ font-size: var(--pf-v6-c-table--cell--FontSize);
18642
+ font-weight: var(--pf-v6-c-table--cell--FontWeight);
18643
+ line-height: var(--pf-v6-c-table--cell--LineHeight);
18644
+ color: var(--pf-v6-c-table--cell--Color);
18645
+ text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
18646
+ word-break: var(--pf-v6-c-table--cell--WordBreak);
18647
+ white-space: var(--pf-v6-c-table--cell--WhiteSpace);
18648
+ }
17908
18649
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
17909
18650
  padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
17910
18651
  }
@@ -18261,16 +19002,16 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18261
19002
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
18262
19003
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
18263
19004
  }
19005
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
19006
+ scale: -1 1;
19007
+ }
19008
+
18264
19009
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
18265
19010
  transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
18266
19011
  transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
18267
19012
  transition-property: transform;
18268
19013
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
18269
19014
  }
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
19015
  .pf-v6-c-table__toggle svg {
18275
19016
  pointer-events: none;
18276
19017
  }
@@ -18747,13 +19488,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18747
19488
  }
18748
19489
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
18749
19490
  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
19491
  }
18753
19492
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
18754
19493
  transform: translateX(calc(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
18755
19494
  }
18756
19495
 
19496
+ .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
19497
+ position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
19498
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
19499
+ }
18757
19500
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
18758
19501
  min-width: var(--pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
18759
19502
  }
@@ -19666,6 +20409,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19666
20409
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
19667
20410
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19668
20411
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
20412
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
20413
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
20414
+ --pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
19669
20415
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
19670
20416
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19671
20417
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -19800,8 +20546,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19800
20546
  }
19801
20547
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list {
19802
20548
  position: relative;
19803
- flex-direction: column;
19804
20549
  flex-grow: 1;
20550
+ flex-direction: column;
19805
20551
  max-width: var(--pf-v6-c-tabs--m-vertical--MaxWidth);
19806
20552
  }
19807
20553
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list::before {
@@ -19943,6 +20689,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19943
20689
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
19944
20690
  overflow: visible;
19945
20691
  }
20692
+ .pf-v6-c-tabs.pf-m-nav {
20693
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20694
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
20695
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
20696
+ }
20697
+ .pf-v6-c-tabs.pf-m-nav::before,
20698
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
20699
+ border: 0;
20700
+ }
20701
+ .pf-v6-c-tabs.pf-m-nav.pf-m-subtab .pf-v6-c-tabs__scroll-button .pf-v6-c-button {
20702
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize);
20703
+ }
19946
20704
 
19947
20705
  .pf-v6-c-tabs__toggle {
19948
20706
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -19954,15 +20712,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19954
20712
  white-space: normal;
19955
20713
  }
19956
20714
 
20715
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
20716
+ scale: -1 1;
20717
+ }
20718
+
19957
20719
  .pf-v6-c-tabs__toggle-icon {
19958
20720
  display: inline-block;
19959
20721
  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
19960
20722
  transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
19961
20723
  }
19962
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
19963
- scale: -1 1;
19964
- }
19965
20724
 
20725
+ .pf-v6-c-tabs__list::-webkit-scrollbar {
20726
+ display: none;
20727
+ }
19966
20728
  .pf-v6-c-tabs__list {
19967
20729
  scrollbar-width: none;
19968
20730
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -19974,25 +20736,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19974
20736
  scroll-snap-type: var(--pf-v6-c-tabs__list--ScrollSnapType);
19975
20737
  -webkit-overflow-scrolling: touch;
19976
20738
  }
19977
- .pf-v6-c-tabs__list::-webkit-scrollbar {
19978
- display: none;
19979
- }
19980
20739
 
19981
20740
  .pf-v6-c-tabs__item {
19982
20741
  position: relative;
19983
20742
  display: flex;
19984
20743
  flex: none;
19985
20744
  column-gap: var(--pf-v6-c-tabs__item--ColumnGap);
19986
- scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
19987
20745
  padding-block-start: var(--pf-v6-c-tabs__item--PaddingBlockStart);
19988
20746
  padding-block-end: var(--pf-v6-c-tabs__item--PaddingBlockEnd);
19989
20747
  padding-inline-start: var(--pf-v6-c-tabs__item--PaddingInlineStart);
19990
20748
  padding-inline-end: var(--pf-v6-c-tabs__item--PaddingInlineEnd);
20749
+ scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
19991
20750
  background-color: var(--pf-v6-c-tabs__item--BackgroundColor);
19992
20751
  }
19993
20752
  .pf-v6-c-tabs__item.pf-m-current {
19994
20753
  --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);
20754
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
19996
20755
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
19997
20756
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
19998
20757
  }
@@ -20040,6 +20799,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20040
20799
  border: 0;
20041
20800
  }
20042
20801
 
20802
+ .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
20803
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
20804
+ }
20805
+
20043
20806
  .pf-v6-c-tabs__link {
20044
20807
  display: flex;
20045
20808
  flex: 1;
@@ -20057,10 +20820,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20057
20820
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
20058
20821
  transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
20059
20822
  }
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
20823
  .pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
20065
20824
  pointer-events: none;
20066
20825
  border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
@@ -20115,6 +20874,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20115
20874
  --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
20116
20875
  }
20117
20876
 
20877
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
20878
+ scale: -1 1;
20879
+ }
20880
+
20118
20881
  .pf-v6-c-tabs__link-toggle-icon {
20119
20882
  align-self: end;
20120
20883
  font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
@@ -20122,9 +20885,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20122
20885
  transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
20123
20886
  transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
20124
20887
  }
20125
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
20126
- scale: -1 1;
20127
- }
20128
20888
 
20129
20889
  .pf-v6-c-tabs__item-action {
20130
20890
  display: flex;
@@ -21045,6 +21805,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21045
21805
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21046
21806
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21047
21807
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
21808
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
21048
21809
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
21049
21810
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
21050
21811
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -21141,9 +21902,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21141
21902
  --pf-v6-hidden-visible--hidden--Display: none;
21142
21903
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
21143
21904
  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
21905
  }
21148
21906
  .pf-v6-c-toolbar__content.pf-m-hidden {
21149
21907
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -21188,6 +21946,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21188
21946
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
21189
21947
  }
21190
21948
  }
21949
+ .pf-v6-c-toolbar__content {
21950
+ row-gap: var(--pf-v6-c-toolbar__content--RowGap);
21951
+ padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
21952
+ padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
21953
+ }
21191
21954
 
21192
21955
  .pf-v6-c-toolbar__content-section {
21193
21956
  flex-wrap: wrap;
@@ -21248,14 +22011,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21248
22011
  .pf-v6-c-toolbar.pf-m-no-background {
21249
22012
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
21250
22013
  }
22014
+ .pf-v6-c-toolbar.pf-m-vertical {
22015
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
22016
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
22017
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
22018
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
22019
+ }
22020
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
22021
+ flex-direction: column;
22022
+ align-items: center;
22023
+ }
21251
22024
 
21252
22025
  .pf-v6-c-toolbar__item {
21253
22026
  --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
22027
  }
21260
22028
  @media (min-width: 36rem) {
21261
22029
  .pf-v6-c-toolbar__item {
@@ -21282,6 +22050,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21282
22050
  --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
22051
  }
21284
22052
  }
22053
+ .pf-v6-c-toolbar__item {
22054
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
22055
+ }
21285
22056
  @media (min-width: 36rem) {
21286
22057
  .pf-v6-c-toolbar__item {
21287
22058
  --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 +22078,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21307
22078
  --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
22079
  }
21309
22080
  }
22081
+ .pf-v6-c-toolbar__item {
22082
+ row-gap: var(--pf-v6-c-toolbar__item--RowGap);
22083
+ column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
22084
+ width: var(--pf-v6-c-toolbar__item--Width--base);
22085
+ min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
22086
+ }
21310
22087
  .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
21311
22088
  --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
21312
22089
  }
@@ -21327,6 +22104,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21327
22104
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
21328
22105
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
21329
22106
  }
22107
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
22108
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
22109
+ }
21330
22110
  .pf-v6-c-toolbar__group.pf-m-filter-group {
21331
22111
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
21332
22112
  }
@@ -21338,9 +22118,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21338
22118
  .pf-v6-c-toolbar__group.pf-m-action-group {
21339
22119
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
21340
22120
  }
22121
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
22122
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
22123
+ }
21341
22124
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
21342
22125
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
21343
22126
  }
22127
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
22128
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
22129
+ }
21344
22130
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
21345
22131
  flex-wrap: wrap;
21346
22132
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -21417,7 +22203,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21417
22203
  }
21418
22204
  .pf-v6-c-toolbar__group.pf-m-align-end,
21419
22205
  .pf-v6-c-toolbar__item.pf-m-align-end {
21420
- margin-inline-start: auto;
22206
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22207
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21421
22208
  }
21422
22209
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
21423
22210
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -21672,7 +22459,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21672
22459
  }
21673
22460
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
21674
22461
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
21675
- margin-inline-start: auto;
22462
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22463
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21676
22464
  }
21677
22465
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
21678
22466
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -21924,7 +22712,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21924
22712
  }
21925
22713
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
21926
22714
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
21927
- margin-inline-start: auto;
22715
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22716
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21928
22717
  }
21929
22718
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
21930
22719
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -22176,7 +22965,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22176
22965
  }
22177
22966
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
22178
22967
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
22179
- margin-inline-start: auto;
22968
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22969
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22180
22970
  }
22181
22971
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
22182
22972
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -22428,7 +23218,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22428
23218
  }
22429
23219
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
22430
23220
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
22431
- margin-inline-start: auto;
23221
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23222
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22432
23223
  }
22433
23224
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
22434
23225
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -22680,7 +23471,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22680
23471
  }
22681
23472
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
22682
23473
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
22683
- margin-inline-start: auto;
23474
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23475
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22684
23476
  }
22685
23477
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
22686
23478
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {
@@ -23165,6 +23957,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23165
23957
  --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
23166
23958
  --pf-v6-c-tree-view__list--TranslateY: 0;
23167
23959
  --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
23960
+ }
23961
+ @media screen and (prefers-reduced-motion: no-preference) {
23962
+ .pf-v6-c-tree-view {
23963
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
23964
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
23965
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
23966
+ }
23967
+ }
23968
+ .pf-v6-c-tree-view {
23168
23969
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
23169
23970
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
23170
23971
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -23193,6 +23994,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23193
23994
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
23194
23995
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
23195
23996
  --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
23997
+ --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
23998
+ --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
23999
+ --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
23196
24000
  --pf-v6-c-tree-view__node-text--max-lines: 1;
23197
24001
  --pf-v6-c-tree-view__node-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
23198
24002
  --pf-v6-c-tree-view__action--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -23248,6 +24052,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23248
24052
  --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart: var(--pf-t--global--spacer--lg);
23249
24053
  --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
23250
24054
  --pf-v6-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd: 0;
24055
+ --pf-v6-c-tree-view--m-compact__node-container--nested--Color: initial;
24056
+ --pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color: var(--pf-t--global--text--color--on-disabled);
24057
+ --pf-v6-c-tree-view--m-compact__node-icon--nested--Color: initial;
24058
+ --pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
24059
+ --pf-v6-c-tree-view--m-compact__node-toggle--nested--Color: initial;
24060
+ --pf-v6-c-tree-view--m-compact__node-toggle--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
23251
24061
  --pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
23252
24062
  --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset: var(--pf-t--global--spacer--sm);
23253
24063
  --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 +24067,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23257
24067
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
23258
24068
  --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
24069
  }
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
24070
 
23268
24071
  .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
24072
  position: relative;
@@ -23344,11 +24147,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23344
24147
  padding-block-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd);
23345
24148
  padding-inline-start: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart);
23346
24149
  padding-inline-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd);
24150
+ color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--Color, inherit);
23347
24151
  background-color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor);
23348
24152
  }
23349
24153
  .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
24154
  margin-inline-start: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart);
23351
24155
  margin-inline-end: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd);
24156
+ color: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--Color, inherit);
24157
+ }
24158
+ .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 {
24159
+ color: var(--pf-v6-c-tree-view--m-compact__node-icon--nested--Color, inherit);
23352
24160
  }
23353
24161
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__node-container {
23354
24162
  padding-block-start: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart);
@@ -23373,6 +24181,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23373
24181
  }
23374
24182
  .pf-v6-c-tree-view.pf-m-no-background {
23375
24183
  --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor);
24184
+ --pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color: initial;
24185
+ --pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color: initial;
24186
+ --pf-v6-c-tree-view--m-compact__node-toggle--m-disabled--nested--Color: initial;
24187
+ }
24188
+
24189
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
24190
+ scale: -1 1;
23376
24191
  }
23377
24192
 
23378
24193
  .pf-v6-c-tree-view__node-toggle-icon {
@@ -23382,9 +24197,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23382
24197
  transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
23383
24198
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
23384
24199
  }
23385
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
23386
- scale: -1 1;
23387
- }
23388
24200
 
23389
24201
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
23390
24202
  max-height: 0;
@@ -23448,6 +24260,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23448
24260
  .pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
23449
24261
  margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
23450
24262
  }
24263
+ .pf-v6-c-tree-view__node.pf-m-disabled {
24264
+ --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-disabled--Color);
24265
+ --pf-v6-c-tree-view__node-icon--Color: var(--pf-v6-c-tree-view__node-icon--m-disabled--Color);
24266
+ --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);
24267
+ --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);
24268
+ }
23451
24269
 
23452
24270
  .pf-v6-c-tree-view__node-container {
23453
24271
  display: var(--pf-v6-c-tree-view__node-container--Display);
@@ -23490,6 +24308,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23490
24308
  transform: translateX(calc(var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
23491
24309
  }
23492
24310
 
24311
+ .pf-v6-c-tree-view__node-toggle.pf-m-disabled {
24312
+ --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--m-disabled--Color);
24313
+ }
24314
+
23493
24315
  .pf-v6-c-tree-view__node-title.pf-m-truncate,
23494
24316
  .pf-v6-c-tree-view__node-text.pf-m-truncate {
23495
24317
  --pf-v6-c-tree-view__node-content--Overflow: hidden;
@@ -23505,6 +24327,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23505
24327
  white-space: nowrap;
23506
24328
  }
23507
24329
 
24330
+ label.pf-v6-c-tree-view__node-text {
24331
+ cursor: pointer;
24332
+ }
24333
+
23508
24334
  .pf-v6-c-tree-view__node-text {
23509
24335
  font-weight: inherit;
23510
24336
  color: inherit;
@@ -23512,9 +24338,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23512
24338
  background-color: transparent;
23513
24339
  border: 0;
23514
24340
  }
23515
- label.pf-v6-c-tree-view__node-text {
23516
- cursor: pointer;
23517
- }
23518
24341
 
23519
24342
  .pf-v6-c-tree-view__node-title {
23520
24343
  font-weight: var(--pf-v6-c-tree-view__node-title--FontWeight);
@@ -23743,6 +24566,15 @@ label.pf-v6-c-tree-view__node-text {
23743
24566
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
23744
24567
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
23745
24568
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
24569
+ }
24570
+ @media screen and (min-width: 62rem) {
24571
+ .pf-v6-c-wizard {
24572
+ --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
24573
+ --pf-v6-c-wizard__nav--BoxShadow: none;
24574
+ --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
24575
+ }
24576
+ }
24577
+ .pf-v6-c-wizard {
23746
24578
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
23747
24579
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23748
24580
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -23767,13 +24599,6 @@ label.pf-v6-c-tree-view__node-text {
23767
24599
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
23768
24600
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
23769
24601
  }
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
24602
 
23778
24603
  .pf-v6-c-wizard {
23779
24604
  position: relative;
@@ -23909,13 +24734,14 @@ label.pf-v6-c-tree-view__node-text {
23909
24734
  color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
23910
24735
  }
23911
24736
 
23912
- .pf-v6-c-wizard__toggle-separator {
23913
- color: var(--pf-v6-c-wizard__toggle-separator--Color);
23914
- }
23915
24737
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
23916
24738
  scale: -1 1;
23917
24739
  }
23918
24740
 
24741
+ .pf-v6-c-wizard__toggle-separator {
24742
+ color: var(--pf-v6-c-wizard__toggle-separator--Color);
24743
+ }
24744
+
23919
24745
  .pf-v6-c-wizard__toggle-icon {
23920
24746
  line-height: var(--pf-v6-c-wizard__toggle-icon--LineHeight);
23921
24747
  }
@@ -23923,8 +24749,8 @@ label.pf-v6-c-tree-view__node-text {
23923
24749
  .pf-v6-c-wizard__outer-wrap {
23924
24750
  position: relative;
23925
24751
  display: flex;
23926
- flex-direction: column;
23927
24752
  flex-grow: 1;
24753
+ flex-direction: column;
23928
24754
  min-height: var(--pf-v6-c-wizard__outer-wrap--MinHeight);
23929
24755
  background-color: var(--pf-v6-c-wizard__outer-wrap--BackgroundColor);
23930
24756
  }
@@ -23937,8 +24763,8 @@ label.pf-v6-c-tree-view__node-text {
23937
24763
  .pf-v6-c-wizard__inner-wrap {
23938
24764
  position: relative;
23939
24765
  display: flex;
23940
- flex-direction: column;
23941
24766
  flex-grow: 1;
24767
+ flex-direction: column;
23942
24768
  min-height: 0;
23943
24769
  }
23944
24770
  @media screen and (min-width: 62rem) {
@@ -24116,6 +24942,10 @@ label.pf-v6-c-tree-view__node-text {
24116
24942
  color: var(--pf-v6-c-wizard__nav-link-toggle--Color);
24117
24943
  }
24118
24944
 
24945
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
24946
+ scale: -1 1;
24947
+ }
24948
+
24119
24949
  .pf-v6-c-wizard__nav-link-toggle-icon {
24120
24950
  display: inline-block;
24121
24951
  transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
@@ -24123,15 +24953,12 @@ label.pf-v6-c-tree-view__node-text {
24123
24953
  transition-property: transform;
24124
24954
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
24125
24955
  }
24126
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
24127
- scale: -1 1;
24128
- }
24129
24956
 
24130
24957
  .pf-v6-c-wizard__main {
24131
24958
  z-index: var(--pf-v6-c-wizard__main--ZIndex);
24132
24959
  display: flex;
24133
- flex-direction: column;
24134
24960
  flex-grow: 1;
24961
+ flex-direction: column;
24135
24962
  overflow-x: hidden;
24136
24963
  overflow-y: auto;
24137
24964
  word-break: break-word;