@patternfly/patternfly 6.5.0-prerelease.2 → 6.5.0-prerelease.20

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 (196) hide show
  1. package/assets/images/RHAiExperienceIcon.svg +27 -0
  2. package/assets/images/RHAutomationsLogo.svg +96 -0
  3. package/assets/images/RHServerStackIcon.svg +16 -0
  4. package/assets/images/compass--hero-bg.png +0 -0
  5. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  6. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  7. package/assets/images/compass--wallpaper-dark.png +0 -0
  8. package/assets/images/compass--wallpaper-light.png +0 -0
  9. package/base/normalize.scss +7 -0
  10. package/base/patternfly-common.css +46 -0
  11. package/base/patternfly-common.scss +56 -0
  12. package/base/patternfly-variables.css +42 -0
  13. package/base/tokens/tokens-local.scss +66 -0
  14. package/components/ActionList/action-list.css +9 -0
  15. package/components/ActionList/action-list.scss +12 -0
  16. package/components/Button/button.css +34 -4
  17. package/components/Button/button.scss +40 -4
  18. package/components/Card/card.css +12 -0
  19. package/components/Card/card.scss +15 -1
  20. package/components/Compass/compass.css +195 -0
  21. package/components/Compass/compass.scss +262 -0
  22. package/components/DataList/data-list.css +5 -1
  23. package/components/DataList/data-list.scss +6 -1
  24. package/components/Drawer/drawer.css +43 -3
  25. package/components/Drawer/drawer.scss +52 -4
  26. package/components/MenuToggle/menu-toggle.css +4 -0
  27. package/components/MenuToggle/menu-toggle.scss +5 -0
  28. package/components/Spinner/spinner.css +3 -0
  29. package/components/Spinner/spinner.scss +5 -0
  30. package/components/Table/table.css +3 -0
  31. package/components/Table/table.scss +5 -0
  32. package/components/Tabs/tabs.css +16 -1
  33. package/components/Tabs/tabs.scss +21 -1
  34. package/components/_index.css +324 -9
  35. package/components/_index.scss +1 -0
  36. package/docs/components/ActionList/examples/ActionList.md +85 -0
  37. package/docs/components/Button/examples/Button.md +116 -0
  38. package/docs/components/Card/examples/Card.md +154 -0
  39. package/docs/components/Compass/examples/Compass.css +11 -0
  40. package/docs/components/Compass/examples/Compass.md +66 -0
  41. package/docs/components/DataList/examples/DataList.md +181 -185
  42. package/docs/components/Drawer/examples/Drawer.md +80 -14
  43. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  44. package/docs/components/Table/examples/Table.md +88 -0
  45. package/docs/components/Tabs/examples/Tabs.md +197 -18
  46. package/docs/components/Wizard/examples/Wizard.md +15 -15
  47. package/docs/demos/Compass/examples/Compass.md +5824 -0
  48. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  49. package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
  50. package/docs/demos/Drawer/examples/Drawer.md +31 -33
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
  52. package/docs/demos/Wizard/examples/Wizard.md +31 -34
  53. package/icons/PfIcons/add-circle-o.svg +4 -0
  54. package/icons/PfIcons/ansible-tower.svg +4 -0
  55. package/icons/PfIcons/applications.svg +4 -0
  56. package/icons/PfIcons/arrow.svg +4 -0
  57. package/icons/PfIcons/asleep.svg +4 -0
  58. package/icons/PfIcons/attention-bell.svg +4 -0
  59. package/icons/PfIcons/automation.svg +4 -0
  60. package/icons/PfIcons/bell.svg +4 -0
  61. package/icons/PfIcons/blueprint.svg +4 -0
  62. package/icons/PfIcons/build.svg +4 -0
  63. package/icons/PfIcons/builder-image.svg +4 -0
  64. package/icons/PfIcons/bundle.svg +4 -0
  65. package/icons/PfIcons/catalog.svg +4 -0
  66. package/icons/PfIcons/chat.svg +4 -0
  67. package/icons/PfIcons/close.svg +4 -0
  68. package/icons/PfIcons/cloud-security.svg +4 -0
  69. package/icons/PfIcons/cloud-tenant.svg +4 -0
  70. package/icons/PfIcons/cluster.svg +4 -0
  71. package/icons/PfIcons/connected.svg +4 -0
  72. package/icons/PfIcons/container-node.svg +4 -0
  73. package/icons/PfIcons/cpu.svg +4 -0
  74. package/icons/PfIcons/critical-risk.svg +4 -0
  75. package/icons/PfIcons/data-processor.svg +4 -0
  76. package/icons/PfIcons/data-sink.svg +4 -0
  77. package/icons/PfIcons/data-source.svg +4 -0
  78. package/icons/PfIcons/degraded.svg +4 -0
  79. package/icons/PfIcons/disconnected.svg +4 -0
  80. package/icons/PfIcons/domain.svg +4 -0
  81. package/icons/PfIcons/edit.svg +4 -0
  82. package/icons/PfIcons/enhancement.svg +4 -0
  83. package/icons/PfIcons/enterprise.svg +4 -0
  84. package/icons/PfIcons/equalizer.svg +4 -0
  85. package/icons/PfIcons/error-circle-o.svg +4 -0
  86. package/icons/PfIcons/export.svg +4 -0
  87. package/icons/PfIcons/filter.svg +4 -0
  88. package/icons/PfIcons/flavor.svg +4 -0
  89. package/icons/PfIcons/folder-close.svg +4 -0
  90. package/icons/PfIcons/folder-open.svg +4 -0
  91. package/icons/PfIcons/globe-route.svg +4 -0
  92. package/icons/PfIcons/help.svg +4 -0
  93. package/icons/PfIcons/history.svg +4 -0
  94. package/icons/PfIcons/home.svg +4 -0
  95. package/icons/PfIcons/import.svg +4 -0
  96. package/icons/PfIcons/in-progress.svg +4 -0
  97. package/icons/PfIcons/info.svg +4 -0
  98. package/icons/PfIcons/infrastructure.svg +4 -0
  99. package/icons/PfIcons/integration.svg +4 -0
  100. package/icons/PfIcons/key.svg +4 -0
  101. package/icons/PfIcons/locked.svg +4 -0
  102. package/icons/PfIcons/maintenance.svg +4 -0
  103. package/icons/PfIcons/memory.svg +4 -0
  104. package/icons/PfIcons/messages.svg +4 -0
  105. package/icons/PfIcons/middleware.svg +4 -0
  106. package/icons/PfIcons/migration.svg +4 -0
  107. package/icons/PfIcons/module.svg +4 -0
  108. package/icons/PfIcons/monitoring.svg +4 -0
  109. package/icons/PfIcons/multicluster.svg +4 -0
  110. package/icons/PfIcons/namespaces.svg +4 -0
  111. package/icons/PfIcons/network.svg +4 -0
  112. package/icons/PfIcons/new-process.svg +4 -0
  113. package/icons/PfIcons/not-started.svg +4 -0
  114. package/icons/PfIcons/off.svg +4 -0
  115. package/icons/PfIcons/ok.svg +4 -0
  116. package/icons/PfIcons/on-running.svg +4 -0
  117. package/icons/PfIcons/on.svg +4 -0
  118. package/icons/PfIcons/open-drawer-right.svg +4 -0
  119. package/icons/PfIcons/openshift.svg +4 -0
  120. package/icons/PfIcons/openstack.svg +4 -0
  121. package/icons/PfIcons/optimize.svg +4 -0
  122. package/icons/PfIcons/orders.svg +4 -0
  123. package/icons/PfIcons/os-image.svg +4 -0
  124. package/icons/PfIcons/package.svg +4 -0
  125. package/icons/PfIcons/panel-close.svg +4 -0
  126. package/icons/PfIcons/panel-open.svg +4 -0
  127. package/icons/PfIcons/paused.svg +4 -0
  128. package/icons/PfIcons/pending.svg +4 -0
  129. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  130. package/icons/PfIcons/pficon-history.svg +4 -0
  131. package/icons/PfIcons/pficon-network-range.svg +4 -0
  132. package/icons/PfIcons/pficon-satellite.svg +4 -0
  133. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  134. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  135. package/icons/PfIcons/pficon-template.svg +4 -0
  136. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  137. package/icons/PfIcons/plugged.svg +4 -0
  138. package/icons/PfIcons/port.svg +4 -0
  139. package/icons/PfIcons/print.svg +4 -0
  140. package/icons/PfIcons/private.svg +4 -0
  141. package/icons/PfIcons/process-automation.svg +4 -0
  142. package/icons/PfIcons/project.svg +4 -0
  143. package/icons/PfIcons/rebalance.svg +4 -0
  144. package/icons/PfIcons/rebooting.svg +4 -0
  145. package/icons/PfIcons/regions.svg +4 -0
  146. package/icons/PfIcons/registry.svg +4 -0
  147. package/icons/PfIcons/remove2.svg +4 -0
  148. package/icons/PfIcons/replicator.svg +4 -0
  149. package/icons/PfIcons/repository.svg +4 -0
  150. package/icons/PfIcons/resource-pool.svg +4 -0
  151. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  152. package/icons/PfIcons/resources-almost-full.svg +4 -0
  153. package/icons/PfIcons/resources-empty.svg +4 -0
  154. package/icons/PfIcons/resources-full.svg +4 -0
  155. package/icons/PfIcons/running.svg +4 -0
  156. package/icons/PfIcons/save.svg +4 -0
  157. package/icons/PfIcons/screen.svg +4 -0
  158. package/icons/PfIcons/security.svg +4 -0
  159. package/icons/PfIcons/server-group.svg +4 -0
  160. package/icons/PfIcons/server.svg +4 -0
  161. package/icons/PfIcons/service-catalog.svg +4 -0
  162. package/icons/PfIcons/service.svg +4 -0
  163. package/icons/PfIcons/services.svg +4 -0
  164. package/icons/PfIcons/severity-critical.svg +4 -0
  165. package/icons/PfIcons/severity-important.svg +4 -0
  166. package/icons/PfIcons/severity-minor.svg +4 -0
  167. package/icons/PfIcons/severity-moderate.svg +4 -0
  168. package/icons/PfIcons/severity-none.svg +4 -0
  169. package/icons/PfIcons/severity-undefined.svg +4 -0
  170. package/icons/PfIcons/spinner.svg +4 -0
  171. package/icons/PfIcons/spinner2.svg +4 -0
  172. package/icons/PfIcons/storage-domain.svg +4 -0
  173. package/icons/PfIcons/task.svg +4 -0
  174. package/icons/PfIcons/tenant.svg +4 -0
  175. package/icons/PfIcons/thumb-tack.svg +4 -0
  176. package/icons/PfIcons/topology.svg +4 -0
  177. package/icons/PfIcons/treeview.svg +4 -0
  178. package/icons/PfIcons/trend-down.svg +4 -0
  179. package/icons/PfIcons/trend-up.svg +4 -0
  180. package/icons/PfIcons/unknown.svg +4 -0
  181. package/icons/PfIcons/unlocked.svg +4 -0
  182. package/icons/PfIcons/unplugged.svg +4 -0
  183. package/icons/PfIcons/user.svg +4 -0
  184. package/icons/PfIcons/users.svg +4 -0
  185. package/icons/PfIcons/virtual-machine.svg +4 -0
  186. package/icons/PfIcons/volume.svg +4 -0
  187. package/icons/PfIcons/warning-triangle.svg +4 -0
  188. package/icons/PfIcons/zone.svg +4 -0
  189. package/package.json +29 -14
  190. package/patternfly-base-no-globals.css +88 -0
  191. package/patternfly-base.css +95 -0
  192. package/patternfly-no-globals.css +412 -9
  193. package/patternfly.css +419 -9
  194. package/patternfly.min.css +1 -1
  195. package/patternfly.min.css.map +1 -1
  196. package/sass-utilities/namespaces-components.scss +3 -0
package/patternfly.css CHANGED
@@ -119,11 +119,18 @@ pre) {
119
119
  :where(a) {
120
120
  color: var(--pf-t--global--text--color--link--default);
121
121
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
122
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--default);
123
+ text-decoration-color: var(--pf-t--global--text-decoration--color--default);
124
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--default), 0.28em);
125
+ transition: ease text-underline-offset 0.3s;
122
126
  }
123
127
 
124
128
  :where(a:hover, a:focus) {
125
129
  color: var(--pf-t--global--text--color--link--hover);
126
130
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
131
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--hover);
132
+ text-decoration-color: var(--pf-t--global--text-decoration--color--hover);
133
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--hover), 0.33em);
127
134
  }
128
135
 
129
136
  :where(a,
@@ -196,11 +203,57 @@ button) {
196
203
  --pf-t--global--duration--200: 1ms !important;
197
204
  --pf-t--global--duration--100: 1ms !important;
198
205
  --pf-t--global--duration--50: 1ms !important;
206
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
199
207
  }
200
208
 
209
+ .pf-v6-m-ai-indicator {
210
+ position: relative;
211
+ }
212
+ .pf-v6-m-ai-indicator::before {
213
+ position: absolute;
214
+ inset: 0;
215
+ pointer-events: none;
216
+ content: "";
217
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
218
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
219
+ border-radius: inherit;
220
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
221
+ mask-composite: exclude;
222
+ }
223
+
224
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
225
+ syntax: "<length>";
226
+ initial-value: 0;
227
+ inherits: false;
228
+ }
229
+ .pf-v6-m-thinking {
230
+ box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
231
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
232
+ }
233
+ .pf-v6-m-thinking.pf-m-inset {
234
+ box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
235
+ }
236
+
237
+ @keyframes pf-v6-global-thinking {
238
+ 50% {
239
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
240
+ }
241
+ }
201
242
  :root {
202
243
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
203
244
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
245
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
246
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
247
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
248
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
249
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
250
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
251
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
252
+ }
253
+ @media screen and (prefers-reduced-motion: no-preference) {
254
+ :root {
255
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
256
+ }
204
257
  }
205
258
 
206
259
  @property --pf-v6-global--danger-jiggle--TranslateX {
@@ -7209,6 +7262,11 @@ button) {
7209
7262
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7210
7263
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7211
7264
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7265
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
7266
+ --pf-t--global--text-decoration--color--hover: currentcolor;
7267
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7268
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7269
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7212
7270
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7213
7271
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7214
7272
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -7314,6 +7372,43 @@ button) {
7314
7372
  var(--pf-t--global--box-shadow--color--lg--directional);
7315
7373
  --pf-t--global--list-style: disc outside;
7316
7374
  --pf-t--temp--dev--tbd: #BC11E0;
7375
+ --pf-t--global--background--color--glass--filter--base: none;
7376
+ --pf-t--global--background--color--glass--opacity--base: 1;
7377
+ --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7378
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7379
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7380
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7381
+ --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7382
+ --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7383
+ --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7384
+ --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7385
+ --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7386
+ --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7387
+ --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
7388
+ --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7389
+ --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7390
+ --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7391
+ --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
7392
+ }
7393
+ :root:where(.pf-v6-theme-dark) {
7394
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7395
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7396
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7397
+ }
7398
+ :root:where(.pf-v6-theme-glass) {
7399
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7400
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7401
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7402
+ }
7403
+ :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7404
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7405
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7406
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7407
+ }
7408
+ :root:where(.pf-v6-theme-high-contrast) {
7409
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7410
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7411
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7317
7412
  }
7318
7413
 
7319
7414
  :root:where(.pf-v6-theme-dark) {
@@ -9252,7 +9347,9 @@ button) {
9252
9347
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9253
9348
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
9254
9349
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
9350
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
9255
9351
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
9352
+ --pf-v6-c-action-list--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
9256
9353
  }
9257
9354
 
9258
9355
  .pf-v6-c-action-list,
@@ -9267,8 +9364,15 @@ button) {
9267
9364
  }
9268
9365
  .pf-v6-c-action-list.pf-m-icons {
9269
9366
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9367
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-v6-c-action-list--m-vertical--m-icons--RowGap);
9270
9368
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9271
9369
  }
9370
+ .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
9371
+ flex-direction: column;
9372
+ }
9373
+ .pf-v6-c-action-list.pf-m-vertical {
9374
+ row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap);
9375
+ }
9272
9376
 
9273
9377
  .pf-v6-c-action-list__group {
9274
9378
  row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
@@ -10483,10 +10587,17 @@ button.pf-v6-c-breadcrumb__link {
10483
10587
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
10484
10588
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
10485
10589
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
10590
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
10486
10591
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
10487
10592
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
10593
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
10594
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
10488
10595
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
10489
10596
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
10597
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
10598
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
10599
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
10600
+ --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);
10490
10601
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
10491
10602
  --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));
10492
10603
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -10496,10 +10607,8 @@ button.pf-v6-c-breadcrumb__link {
10496
10607
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
10497
10608
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
10498
10609
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
10499
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
10500
10610
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
10501
10611
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
10502
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
10503
10612
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10504
10613
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
10505
10614
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -10685,6 +10794,14 @@ button.pf-v6-c-breadcrumb__link {
10685
10794
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
10686
10795
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
10687
10796
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
10797
+ --pf-v6-c-button--m-circle--ScaleX: 1.29;
10798
+ --pf-v6-c-button--m-circle--ScaleY: 1.29;
10799
+ --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
10800
+ --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
10801
+ --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
10802
+ --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
10803
+ --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
10804
+ --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
10688
10805
  }
10689
10806
 
10690
10807
  .pf-v6-c-button {
@@ -10816,12 +10933,13 @@ button.pf-v6-c-breadcrumb__link {
10816
10933
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
10817
10934
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
10818
10935
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
10936
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
10937
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
10938
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
10819
10939
  --pf-v6-c-button--BackgroundColor: transparent;
10820
10940
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
10821
10941
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
10822
10942
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
10823
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10824
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10825
10943
  --pf-v6-c-button--hover--BackgroundColor: transparent;
10826
10944
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
10827
10945
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -10830,6 +10948,8 @@ button.pf-v6-c-breadcrumb__link {
10830
10948
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
10831
10949
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
10832
10950
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
10951
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10952
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10833
10953
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
10834
10954
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
10835
10955
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -10837,6 +10957,7 @@ button.pf-v6-c-breadcrumb__link {
10837
10957
  --pf-v6-c-button--hover--BorderWidth: 0;
10838
10958
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
10839
10959
  text-align: start;
10960
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
10840
10961
  white-space: normal;
10841
10962
  background: transparent;
10842
10963
  outline-offset: 0.125rem;
@@ -10847,6 +10968,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10847
10968
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
10848
10969
  }
10849
10970
 
10971
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
10972
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
10973
+ }
10850
10974
  .pf-v6-c-button.pf-m-link.pf-m-danger {
10851
10975
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
10852
10976
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -11052,6 +11176,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11052
11176
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
11053
11177
  --pf-v6-c-button--hover__icon--ScaleX: 1;
11054
11178
  }
11179
+ .pf-v6-c-button.pf-m-circle {
11180
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
11181
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
11182
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
11183
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
11184
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
11185
+ }
11186
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
11187
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
11188
+ }
11055
11189
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
11056
11190
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
11057
11191
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -11589,6 +11723,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11589
11723
  .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 {
11590
11724
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
11591
11725
  }
11726
+ .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) {
11727
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
11728
+ --pf-v6-c-card__actions--MarginBlockStart: 0;
11729
+ --pf-v6-c-card__actions--MarginBlockEnd: 0;
11730
+ }
11731
+
11592
11732
  .pf-v6-c-card.pf-m-compact {
11593
11733
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
11594
11734
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -11694,6 +11834,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11694
11834
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
11695
11835
  }
11696
11836
 
11837
+ .pf-v6-c-card__subtitle {
11838
+ padding-block-start: var(--pf-t--global--spacer--sm);
11839
+ font-size: var(--pf-t--global--font--size--body--sm);
11840
+ color: var(--pf-t--global--text--color--subtle);
11841
+ }
11842
+
11697
11843
  .pf-v6-c-card__actions {
11698
11844
  display: flex;
11699
11845
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -12263,6 +12409,201 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12263
12409
  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
12264
12410
  }
12265
12411
 
12412
+ .pf-v6-c-compass {
12413
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
12414
+ --pf-v6-c-compass--BackgroundImage--light: none;
12415
+ --pf-v6-c-compass--BackgroundImage--dark: none;
12416
+ --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12417
+ --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
12418
+ --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
12419
+ --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12420
+ --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12421
+ --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12422
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12423
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12424
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12425
+ --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12426
+ --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12427
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12428
+ --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12429
+ --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
12430
+ --pf-v6-c-compass__message-bar--Width: 450px;
12431
+ --pf-v6-c-compass__message-bar--MinWidth: 300px;
12432
+ --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12433
+ --pf-v6-c-compass__hero--gradient--angle: 109deg;
12434
+ --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
12435
+ --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
12436
+ --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
12437
+ --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
12438
+ --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
12439
+ --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
12440
+ --pf-v6-c-compass__hero--BackgroundImage--light: none;
12441
+ --pf-v6-c-compass__hero--BackgroundImage--dark: none;
12442
+ --pf-v6-c-compass__hero-body--Width: 800px;
12443
+ --pf-v6-c-compass__hero-body--MaxWidth: 80%;
12444
+ }
12445
+
12446
+ .pf-v6-c-compass {
12447
+ display: grid;
12448
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12449
+ grid-template-rows: auto 1fr auto;
12450
+ grid-template-columns: auto 1fr auto;
12451
+ gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12452
+ align-items: center;
12453
+ justify-content: center;
12454
+ height: 100dvh;
12455
+ padding: var(--pf-v6-c-compass--Padding);
12456
+ background-image: var(--pf-v6-c-compass--BackgroundImage);
12457
+ background-size: cover;
12458
+ }
12459
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12460
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12461
+ }
12462
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
12463
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12464
+ }
12465
+
12466
+ .pf-v6-c-compass__header {
12467
+ display: grid;
12468
+ grid-area: header;
12469
+ grid-template-columns: 1fr auto 1fr;
12470
+ align-items: start;
12471
+ }
12472
+
12473
+ .pf-v6-c-compass__profile {
12474
+ justify-self: end;
12475
+ }
12476
+ .pf-v6-c-compass__profile .pf-v6-c-menu-toggle.pf-m-plain {
12477
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
12478
+ }
12479
+
12480
+ .pf-v6-c-compass__nav {
12481
+ display: flex;
12482
+ flex-direction: column;
12483
+ gap: var(--pf-v6-c-compass__nav--RowGap);
12484
+ align-items: center;
12485
+ justify-self: stretch;
12486
+ }
12487
+
12488
+ .pf-v6-c-compass__sidebar {
12489
+ --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
12490
+ }
12491
+ .pf-v6-c-compass__sidebar.pf-m-start {
12492
+ grid-area: sidebar-start;
12493
+ }
12494
+
12495
+ .pf-v6-c-compass__main {
12496
+ display: flex;
12497
+ flex-direction: column;
12498
+ grid-area: main;
12499
+ gap: var(--pf-v6-c-compass__main--RowGap);
12500
+ align-self: stretch;
12501
+ min-height: 0;
12502
+ }
12503
+
12504
+ .pf-v6-c-compass__content {
12505
+ display: flex;
12506
+ flex: 1 0 0;
12507
+ flex-direction: column;
12508
+ min-height: 0;
12509
+ overflow: auto;
12510
+ }
12511
+ .pf-v6-c-compass__content > *:last-child {
12512
+ flex-grow: 1;
12513
+ max-height: 100%;
12514
+ }
12515
+
12516
+ .pf-v6-c-compass__sidebar.pf-m-end {
12517
+ grid-area: sidebar-end;
12518
+ padding: var(--pf-t--global--spacer--sm);
12519
+ }
12520
+
12521
+ .pf-v6-c-compass__footer {
12522
+ display: flex;
12523
+ grid-area: footer;
12524
+ justify-content: center;
12525
+ }
12526
+
12527
+ .pf-v6-c-compass__message-bar {
12528
+ width: var(--pf-v6-c-compass__message-bar--Width);
12529
+ min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
12530
+ max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
12531
+ }
12532
+
12533
+ .pf-v6-c-compass__panel {
12534
+ padding: var(--pf-v6-c-compass__panel--Padding);
12535
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12536
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12537
+ border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
12538
+ border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
12539
+ box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
12540
+ }
12541
+ .pf-v6-c-compass__panel.pf-m-no-border {
12542
+ border-width: 0;
12543
+ }
12544
+ .pf-v6-c-compass__panel.pf-m-no-padding {
12545
+ padding: 0;
12546
+ }
12547
+ .pf-v6-c-compass__panel.pf-m-full-height {
12548
+ height: 100%;
12549
+ }
12550
+ .pf-v6-c-compass__panel.pf-m-pill {
12551
+ border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
12552
+ }
12553
+ .pf-v6-c-compass__panel.pf-m-scrollable {
12554
+ overflow: auto;
12555
+ }
12556
+
12557
+ .pf-v6-c-compass__hero {
12558
+ display: flex;
12559
+ padding-block-start: 32px;
12560
+ padding-block-end: 32px;
12561
+ padding-inline-start: 72px;
12562
+ padding-inline-end: 0;
12563
+ background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
12564
+ background-repeat: no-repeat;
12565
+ background-position: right center;
12566
+ background-size: contain;
12567
+ border-radius: 24px 72px;
12568
+ }
12569
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
12570
+ --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
12571
+ --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
12572
+ --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
12573
+ --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
12574
+ }
12575
+
12576
+ .pf-v6-c-compass__hero-body {
12577
+ width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
12578
+ }
12579
+
12580
+ /* stylelint-disable */
12581
+ @media (max-width: 1200px) {
12582
+ .pf-v6-c-compass * {
12583
+ display: none;
12584
+ }
12585
+ .pf-v6-c-compass {
12586
+ position: relative;
12587
+ display: grid;
12588
+ grid-template-columns: auto;
12589
+ grid-template-rows: auto;
12590
+ place-content: center;
12591
+ gap: 0;
12592
+ }
12593
+ .pf-v6-c-compass::after {
12594
+ padding: 1em;
12595
+ border-radius: var(--pf-t--global--border--radius--large);
12596
+ background: var(--pf-t--global--background--color--primary--default);
12597
+ content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
12598
+ width: 80%;
12599
+ width: 300px;
12600
+ border: 1px solid var(--pf-t--global--border--color--default);
12601
+ box-shadow: var(--pf-t--global--box-shadow--md);
12602
+ white-space: pre-wrap;
12603
+ text-align: center;
12604
+ }
12605
+ }
12606
+ /* stylelint-enable */
12266
12607
  :root {
12267
12608
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
12268
12609
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -12957,7 +13298,8 @@ ul) {
12957
13298
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
12958
13299
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12959
13300
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
12960
- --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
13301
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13302
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
12961
13303
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
12962
13304
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
12963
13305
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -13112,6 +13454,9 @@ ul) {
13112
13454
  .pf-v6-c-data-list.pf-m-drag-over {
13113
13455
  overflow-anchor: none;
13114
13456
  }
13457
+ .pf-v6-c-data-list.pf-m-plain {
13458
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
13459
+ }
13115
13460
 
13116
13461
  .pf-v6-c-data-list.pf-m-truncate,
13117
13462
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -14519,6 +14864,7 @@ ul) {
14519
14864
  }
14520
14865
 
14521
14866
  .pf-v6-c-drawer {
14867
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
14522
14868
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14523
14869
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14524
14870
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -14549,6 +14895,7 @@ ul) {
14549
14895
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
14550
14896
  --pf-v6-c-drawer__panel--Opacity: 0;
14551
14897
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
14898
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
14552
14899
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
14553
14900
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
14554
14901
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -14564,6 +14911,16 @@ ul) {
14564
14911
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
14565
14912
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
14566
14913
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
14914
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
14915
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
14916
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
14917
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
14918
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
14919
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
14920
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
14921
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14922
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
14923
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
14567
14924
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
14568
14925
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14569
14926
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14680,6 +15037,8 @@ ul) {
14680
15037
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
14681
15038
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
14682
15039
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
15040
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
15041
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
14683
15042
  }
14684
15043
  .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) {
14685
15044
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -14703,7 +15062,7 @@ ul) {
14703
15062
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
14704
15063
  }
14705
15064
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14706
- transform: translateX(-100%);
15065
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
14707
15066
  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
14708
15067
  visibility: visible;
14709
15068
  }
@@ -14715,7 +15074,7 @@ ul) {
14715
15074
  transform: translateX(0);
14716
15075
  }
14717
15076
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14718
- transform: translate(0, -100%);
15077
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
14719
15078
  }
14720
15079
  .pf-v6-c-drawer.pf-m-resizing {
14721
15080
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -14724,6 +15083,26 @@ ul) {
14724
15083
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
14725
15084
  pointer-events: auto;
14726
15085
  }
15086
+ @media screen and (min-width: 48rem) {
15087
+ .pf-v6-c-drawer.pf-m-pill {
15088
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
15089
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
15090
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
15091
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
15092
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
15093
+ }
15094
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15095
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
15096
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
15097
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
15098
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
15099
+ }
15100
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
15101
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
15102
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
15103
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
15104
+ }
15105
+ }
14727
15106
 
14728
15107
  .pf-v6-c-drawer__section {
14729
15108
  flex-grow: 0;
@@ -14739,6 +15118,7 @@ ul) {
14739
15118
  .pf-v6-c-drawer__main {
14740
15119
  display: flex;
14741
15120
  flex: 1;
15121
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
14742
15122
  overflow: hidden;
14743
15123
  }
14744
15124
 
@@ -14777,6 +15157,8 @@ ul) {
14777
15157
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
14778
15158
  order: 1;
14779
15159
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
15160
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
15161
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
14780
15162
  overflow: auto;
14781
15163
  visibility: hidden;
14782
15164
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -14785,6 +15167,7 @@ ul) {
14785
15167
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
14786
15168
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
14787
15169
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
15170
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
14788
15171
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
14789
15172
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
14790
15173
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -14972,7 +15355,7 @@ ul) {
14972
15355
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
14973
15356
  }
14974
15357
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14975
- transform: translateX(0);
15358
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
14976
15359
  }
14977
15360
  .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 {
14978
15361
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -14984,6 +15367,8 @@ ul) {
14984
15367
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
14985
15368
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
14986
15369
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
15370
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
15371
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
14987
15372
  min-width: auto;
14988
15373
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
14989
15374
  }
@@ -19819,6 +20204,7 @@ ul.pf-v6-c-list {
19819
20204
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
19820
20205
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
19821
20206
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
20207
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
19822
20208
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
19823
20209
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
19824
20210
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -19947,6 +20333,9 @@ ul.pf-v6-c-list {
19947
20333
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
19948
20334
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
19949
20335
  }
20336
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
20337
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
20338
+ }
19950
20339
  .pf-v6-c-menu-toggle.pf-m-plain::before {
19951
20340
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
19952
20341
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -24558,6 +24947,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24558
24947
  .pf-v6-c-spinner.pf-m-xl {
24559
24948
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
24560
24949
  }
24950
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
24951
+ --pf-v6-c-spinner--AnimationDuration: 0s;
24952
+ }
24561
24953
 
24562
24954
  .pf-v6-c-spinner__path {
24563
24955
  width: 100%;
@@ -26623,6 +27015,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26623
27015
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
26624
27016
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
26625
27017
  }
27018
+ .pf-v6-c-table.pf-m-plain {
27019
+ --pf-v6-c-table--BackgroundColor: transparent;
27020
+ }
26626
27021
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
26627
27022
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
26628
27023
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -28460,6 +28855,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28460
28855
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28461
28856
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
28462
28857
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
28858
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
28859
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
28860
+ --pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
28463
28861
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
28464
28862
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
28465
28863
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -28737,6 +29135,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28737
29135
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
28738
29136
  overflow: visible;
28739
29137
  }
29138
+ .pf-v6-c-tabs.pf-m-nav {
29139
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
29140
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
29141
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
29142
+ }
29143
+ .pf-v6-c-tabs.pf-m-nav::before,
29144
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
29145
+ border: 0;
29146
+ }
29147
+ .pf-v6-c-tabs.pf-m-nav.pf-m-subtab .pf-v6-c-tabs__scroll-button .pf-v6-c-button {
29148
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize);
29149
+ }
28740
29150
 
28741
29151
  .pf-v6-c-tabs__toggle {
28742
29152
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -28786,7 +29196,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28786
29196
  }
28787
29197
  .pf-v6-c-tabs__item.pf-m-current {
28788
29198
  --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
28789
- --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
29199
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
28790
29200
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
28791
29201
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
28792
29202
  }