@patternfly/patternfly 6.5.0-prerelease.1 → 6.5.0-prerelease.11

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 (195) 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/patternfly-common.css +46 -0
  10. package/base/patternfly-common.scss +56 -0
  11. package/components/ActionList/action-list.css +9 -0
  12. package/components/ActionList/action-list.scss +12 -0
  13. package/components/Button/button.css +18 -0
  14. package/components/Button/button.scss +22 -0
  15. package/components/Card/card.css +6 -0
  16. package/components/Card/card.scss +8 -0
  17. package/components/Compass/compass.css +211 -0
  18. package/components/Compass/compass.scss +275 -0
  19. package/components/DataList/data-list.css +5 -1
  20. package/components/DataList/data-list.scss +6 -1
  21. package/components/Menu/menu.css +1 -1
  22. package/components/Menu/menu.scss +1 -1
  23. package/components/MenuToggle/menu-toggle.css +4 -0
  24. package/components/MenuToggle/menu-toggle.scss +5 -0
  25. package/components/Panel/panel.css +1 -1
  26. package/components/Panel/panel.scss +1 -1
  27. package/components/Spinner/spinner.css +3 -0
  28. package/components/Spinner/spinner.scss +5 -0
  29. package/components/Table/table.css +3 -0
  30. package/components/Table/table.scss +5 -0
  31. package/components/Tabs/tabs.css +17 -1
  32. package/components/Tabs/tabs.scss +22 -1
  33. package/components/_index.css +278 -4
  34. package/components/_index.scss +1 -0
  35. package/docs/components/ActionList/examples/ActionList.md +85 -0
  36. package/docs/components/Button/examples/Button.md +116 -0
  37. package/docs/components/Card/examples/Card.md +6 -4
  38. package/docs/components/Compass/examples/Compass.css +11 -0
  39. package/docs/components/Compass/examples/Compass.md +65 -0
  40. package/docs/components/DataList/examples/DataList.md +181 -185
  41. package/docs/components/Drawer/examples/Drawer.md +1 -1
  42. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  43. package/docs/components/Table/examples/Table.md +88 -0
  44. package/docs/components/Tabs/examples/Tabs.md +188 -0
  45. package/docs/components/Wizard/examples/Wizard.md +15 -15
  46. package/docs/demos/Compass/examples/Compass.md +4550 -0
  47. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  48. package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
  49. package/docs/demos/Drawer/examples/Drawer.md +31 -33
  50. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
  51. package/docs/demos/Wizard/examples/Wizard.md +31 -34
  52. package/icons/PfIcons/add-circle-o.svg +4 -0
  53. package/icons/PfIcons/ansible-tower.svg +4 -0
  54. package/icons/PfIcons/applications.svg +4 -0
  55. package/icons/PfIcons/arrow.svg +4 -0
  56. package/icons/PfIcons/asleep.svg +4 -0
  57. package/icons/PfIcons/attention-bell.svg +4 -0
  58. package/icons/PfIcons/automation.svg +4 -0
  59. package/icons/PfIcons/bell.svg +4 -0
  60. package/icons/PfIcons/blueprint.svg +4 -0
  61. package/icons/PfIcons/build.svg +4 -0
  62. package/icons/PfIcons/builder-image.svg +4 -0
  63. package/icons/PfIcons/bundle.svg +4 -0
  64. package/icons/PfIcons/catalog.svg +4 -0
  65. package/icons/PfIcons/chat.svg +4 -0
  66. package/icons/PfIcons/close.svg +4 -0
  67. package/icons/PfIcons/cloud-security.svg +4 -0
  68. package/icons/PfIcons/cloud-tenant.svg +4 -0
  69. package/icons/PfIcons/cluster.svg +4 -0
  70. package/icons/PfIcons/connected.svg +4 -0
  71. package/icons/PfIcons/container-node.svg +4 -0
  72. package/icons/PfIcons/cpu.svg +4 -0
  73. package/icons/PfIcons/critical-risk.svg +4 -0
  74. package/icons/PfIcons/data-processor.svg +4 -0
  75. package/icons/PfIcons/data-sink.svg +4 -0
  76. package/icons/PfIcons/data-source.svg +4 -0
  77. package/icons/PfIcons/degraded.svg +4 -0
  78. package/icons/PfIcons/disconnected.svg +4 -0
  79. package/icons/PfIcons/domain.svg +4 -0
  80. package/icons/PfIcons/edit.svg +4 -0
  81. package/icons/PfIcons/enhancement.svg +4 -0
  82. package/icons/PfIcons/enterprise.svg +4 -0
  83. package/icons/PfIcons/equalizer.svg +4 -0
  84. package/icons/PfIcons/error-circle-o.svg +4 -0
  85. package/icons/PfIcons/export.svg +4 -0
  86. package/icons/PfIcons/filter.svg +4 -0
  87. package/icons/PfIcons/flavor.svg +4 -0
  88. package/icons/PfIcons/folder-close.svg +4 -0
  89. package/icons/PfIcons/folder-open.svg +4 -0
  90. package/icons/PfIcons/globe-route.svg +4 -0
  91. package/icons/PfIcons/help.svg +4 -0
  92. package/icons/PfIcons/history.svg +4 -0
  93. package/icons/PfIcons/home.svg +4 -0
  94. package/icons/PfIcons/import.svg +4 -0
  95. package/icons/PfIcons/in-progress.svg +4 -0
  96. package/icons/PfIcons/info.svg +4 -0
  97. package/icons/PfIcons/infrastructure.svg +4 -0
  98. package/icons/PfIcons/integration.svg +4 -0
  99. package/icons/PfIcons/key.svg +4 -0
  100. package/icons/PfIcons/locked.svg +4 -0
  101. package/icons/PfIcons/maintenance.svg +4 -0
  102. package/icons/PfIcons/memory.svg +4 -0
  103. package/icons/PfIcons/messages.svg +4 -0
  104. package/icons/PfIcons/middleware.svg +4 -0
  105. package/icons/PfIcons/migration.svg +4 -0
  106. package/icons/PfIcons/module.svg +4 -0
  107. package/icons/PfIcons/monitoring.svg +4 -0
  108. package/icons/PfIcons/multicluster.svg +4 -0
  109. package/icons/PfIcons/namespaces.svg +4 -0
  110. package/icons/PfIcons/network.svg +4 -0
  111. package/icons/PfIcons/new-process.svg +4 -0
  112. package/icons/PfIcons/not-started.svg +4 -0
  113. package/icons/PfIcons/off.svg +4 -0
  114. package/icons/PfIcons/ok.svg +4 -0
  115. package/icons/PfIcons/on-running.svg +4 -0
  116. package/icons/PfIcons/on.svg +4 -0
  117. package/icons/PfIcons/open-drawer-right.svg +4 -0
  118. package/icons/PfIcons/openshift.svg +4 -0
  119. package/icons/PfIcons/openstack.svg +4 -0
  120. package/icons/PfIcons/optimize.svg +4 -0
  121. package/icons/PfIcons/orders.svg +4 -0
  122. package/icons/PfIcons/os-image.svg +4 -0
  123. package/icons/PfIcons/package.svg +4 -0
  124. package/icons/PfIcons/panel-close.svg +4 -0
  125. package/icons/PfIcons/panel-open.svg +4 -0
  126. package/icons/PfIcons/paused.svg +4 -0
  127. package/icons/PfIcons/pending.svg +4 -0
  128. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  129. package/icons/PfIcons/pficon-history.svg +4 -0
  130. package/icons/PfIcons/pficon-network-range.svg +4 -0
  131. package/icons/PfIcons/pficon-satellite.svg +4 -0
  132. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  133. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  134. package/icons/PfIcons/pficon-template.svg +4 -0
  135. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  136. package/icons/PfIcons/plugged.svg +4 -0
  137. package/icons/PfIcons/port.svg +4 -0
  138. package/icons/PfIcons/print.svg +4 -0
  139. package/icons/PfIcons/private.svg +4 -0
  140. package/icons/PfIcons/process-automation.svg +4 -0
  141. package/icons/PfIcons/project.svg +4 -0
  142. package/icons/PfIcons/rebalance.svg +4 -0
  143. package/icons/PfIcons/rebooting.svg +4 -0
  144. package/icons/PfIcons/regions.svg +4 -0
  145. package/icons/PfIcons/registry.svg +4 -0
  146. package/icons/PfIcons/remove2.svg +4 -0
  147. package/icons/PfIcons/replicator.svg +4 -0
  148. package/icons/PfIcons/repository.svg +4 -0
  149. package/icons/PfIcons/resource-pool.svg +4 -0
  150. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  151. package/icons/PfIcons/resources-almost-full.svg +4 -0
  152. package/icons/PfIcons/resources-empty.svg +4 -0
  153. package/icons/PfIcons/resources-full.svg +4 -0
  154. package/icons/PfIcons/running.svg +4 -0
  155. package/icons/PfIcons/save.svg +4 -0
  156. package/icons/PfIcons/screen.svg +4 -0
  157. package/icons/PfIcons/security.svg +4 -0
  158. package/icons/PfIcons/server-group.svg +4 -0
  159. package/icons/PfIcons/server.svg +4 -0
  160. package/icons/PfIcons/service-catalog.svg +4 -0
  161. package/icons/PfIcons/service.svg +4 -0
  162. package/icons/PfIcons/services.svg +4 -0
  163. package/icons/PfIcons/severity-critical.svg +4 -0
  164. package/icons/PfIcons/severity-important.svg +4 -0
  165. package/icons/PfIcons/severity-minor.svg +4 -0
  166. package/icons/PfIcons/severity-moderate.svg +4 -0
  167. package/icons/PfIcons/severity-none.svg +4 -0
  168. package/icons/PfIcons/severity-undefined.svg +4 -0
  169. package/icons/PfIcons/spinner.svg +4 -0
  170. package/icons/PfIcons/spinner2.svg +4 -0
  171. package/icons/PfIcons/storage-domain.svg +4 -0
  172. package/icons/PfIcons/task.svg +4 -0
  173. package/icons/PfIcons/tenant.svg +4 -0
  174. package/icons/PfIcons/thumb-tack.svg +4 -0
  175. package/icons/PfIcons/topology.svg +4 -0
  176. package/icons/PfIcons/treeview.svg +4 -0
  177. package/icons/PfIcons/trend-down.svg +4 -0
  178. package/icons/PfIcons/trend-up.svg +4 -0
  179. package/icons/PfIcons/unknown.svg +4 -0
  180. package/icons/PfIcons/unlocked.svg +4 -0
  181. package/icons/PfIcons/unplugged.svg +4 -0
  182. package/icons/PfIcons/user.svg +4 -0
  183. package/icons/PfIcons/users.svg +4 -0
  184. package/icons/PfIcons/virtual-machine.svg +4 -0
  185. package/icons/PfIcons/volume.svg +4 -0
  186. package/icons/PfIcons/warning-triangle.svg +4 -0
  187. package/icons/PfIcons/zone.svg +4 -0
  188. package/package.json +28 -16
  189. package/patternfly-base-no-globals.css +46 -0
  190. package/patternfly-base.css +46 -0
  191. package/patternfly-no-globals.css +324 -4
  192. package/patternfly.css +324 -4
  193. package/patternfly.min.css +1 -1
  194. package/patternfly.min.css.map +1 -1
  195. package/sass-utilities/namespaces-components.scss +3 -0
package/patternfly.css CHANGED
@@ -196,11 +196,57 @@ button) {
196
196
  --pf-t--global--duration--200: 1ms !important;
197
197
  --pf-t--global--duration--100: 1ms !important;
198
198
  --pf-t--global--duration--50: 1ms !important;
199
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
199
200
  }
200
201
 
202
+ .pf-v6-m-ai-indicator {
203
+ position: relative;
204
+ }
205
+ .pf-v6-m-ai-indicator::before {
206
+ position: absolute;
207
+ inset: 0;
208
+ pointer-events: none;
209
+ content: "";
210
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
211
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
212
+ border-radius: inherit;
213
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
214
+ mask-composite: exclude;
215
+ }
216
+
217
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
218
+ syntax: "<length>";
219
+ initial-value: 0;
220
+ inherits: false;
221
+ }
222
+ .pf-v6-m-thinking {
223
+ 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);
224
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
225
+ }
226
+ .pf-v6-m-thinking.pf-m-inset {
227
+ 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);
228
+ }
229
+
230
+ @keyframes pf-v6-global-thinking {
231
+ 50% {
232
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
233
+ }
234
+ }
201
235
  :root {
202
236
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
203
237
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
238
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
239
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
240
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
241
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
242
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
243
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
244
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
245
+ }
246
+ @media screen and (prefers-reduced-motion: no-preference) {
247
+ :root {
248
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
249
+ }
204
250
  }
205
251
 
206
252
  @property --pf-v6-global--danger-jiggle--TranslateX {
@@ -9252,7 +9298,9 @@ button) {
9252
9298
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9253
9299
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
9254
9300
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
9301
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
9255
9302
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
9303
+ --pf-v6-c-action-list--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
9256
9304
  }
9257
9305
 
9258
9306
  .pf-v6-c-action-list,
@@ -9267,8 +9315,15 @@ button) {
9267
9315
  }
9268
9316
  .pf-v6-c-action-list.pf-m-icons {
9269
9317
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9318
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-v6-c-action-list--m-vertical--m-icons--RowGap);
9270
9319
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9271
9320
  }
9321
+ .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
9322
+ flex-direction: column;
9323
+ }
9324
+ .pf-v6-c-action-list.pf-m-vertical {
9325
+ row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap);
9326
+ }
9272
9327
 
9273
9328
  .pf-v6-c-action-list__group {
9274
9329
  row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
@@ -10685,6 +10740,14 @@ button.pf-v6-c-breadcrumb__link {
10685
10740
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
10686
10741
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
10687
10742
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
10743
+ --pf-v6-c-button--m-circle--ScaleX: 1.29;
10744
+ --pf-v6-c-button--m-circle--ScaleY: 1.29;
10745
+ --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
10746
+ --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
10747
+ --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
10748
+ --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
10749
+ --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
10750
+ --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
10688
10751
  }
10689
10752
 
10690
10753
  .pf-v6-c-button {
@@ -11052,6 +11115,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11052
11115
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
11053
11116
  --pf-v6-c-button--hover__icon--ScaleX: 1;
11054
11117
  }
11118
+ .pf-v6-c-button.pf-m-circle {
11119
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
11120
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
11121
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
11122
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
11123
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
11124
+ }
11125
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
11126
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
11127
+ }
11055
11128
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
11056
11129
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
11057
11130
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -11589,6 +11662,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11589
11662
  .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
11663
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
11591
11664
  }
11665
+ .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) {
11666
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
11667
+ --pf-v6-c-card__actions--MarginBlockStart: 0;
11668
+ --pf-v6-c-card__actions--MarginBlockEnd: 0;
11669
+ }
11670
+
11592
11671
  .pf-v6-c-card.pf-m-compact {
11593
11672
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
11594
11673
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -12263,6 +12342,217 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12263
12342
  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
12264
12343
  }
12265
12344
 
12345
+ .pf-v6-c-compass {
12346
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
12347
+ --pf-v6-c-compass--BackgroundImage--light: none;
12348
+ --pf-v6-c-compass--BackgroundImage--dark: none;
12349
+ --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12350
+ --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
12351
+ --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
12352
+ --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12353
+ --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12354
+ --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12355
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
12356
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
12357
+ --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
12358
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 0,0,0;
12359
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
12360
+ --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
12361
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
12362
+ --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
12363
+ --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
12364
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12365
+ --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12366
+ --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12367
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12368
+ --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12369
+ --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
12370
+ --pf-v6-c-compass__message-bar--Width: 450px;
12371
+ --pf-v6-c-compass__message-bar--MinWidth: 300px;
12372
+ --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12373
+ --pf-v6-c-compass__hero--gradient--angle: 109deg;
12374
+ --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
12375
+ --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
12376
+ --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
12377
+ --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
12378
+ --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
12379
+ --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
12380
+ --pf-v6-c-compass__hero--BackgroundImage--light: none;
12381
+ --pf-v6-c-compass__hero--BackgroundImage--dark: none;
12382
+ --pf-v6-c-compass__hero-body--Width: 800px;
12383
+ --pf-v6-c-compass__hero-body--MaxWidth: 80%;
12384
+ }
12385
+
12386
+ .pf-v6-c-compass {
12387
+ display: grid;
12388
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12389
+ grid-template-rows: auto 1fr auto;
12390
+ grid-template-columns: auto 1fr auto;
12391
+ gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12392
+ align-items: center;
12393
+ justify-content: center;
12394
+ height: 100dvh;
12395
+ padding: var(--pf-v6-c-compass--Padding);
12396
+ margin-inline: auto;
12397
+ background-image: var(--pf-v6-c-compass--BackgroundImage);
12398
+ background-size: cover;
12399
+ }
12400
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12401
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12402
+ }
12403
+
12404
+ .pf-v6-c-compass__header {
12405
+ display: grid;
12406
+ grid-area: header;
12407
+ grid-template-columns: 1fr auto 1fr;
12408
+ align-items: start;
12409
+ }
12410
+
12411
+ .pf-v6-c-compass__profile {
12412
+ justify-self: end;
12413
+ }
12414
+ .pf-v6-c-compass__profile .pf-v6-c-menu-toggle.pf-m-plain {
12415
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
12416
+ }
12417
+
12418
+ .pf-v6-c-compass__nav {
12419
+ display: flex;
12420
+ flex-direction: column;
12421
+ gap: var(--pf-v6-c-compass__nav--RowGap);
12422
+ align-items: center;
12423
+ justify-self: stretch;
12424
+ }
12425
+
12426
+ .pf-v6-c-compass__sidebar {
12427
+ --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
12428
+ }
12429
+ .pf-v6-c-compass__sidebar.pf-m-start {
12430
+ grid-area: sidebar-start;
12431
+ }
12432
+
12433
+ .pf-v6-c-compass__main {
12434
+ display: flex;
12435
+ flex-direction: column;
12436
+ grid-area: main;
12437
+ gap: var(--pf-v6-c-compass__main--RowGap);
12438
+ align-self: stretch;
12439
+ min-height: 0;
12440
+ }
12441
+
12442
+ .pf-v6-c-compass__content {
12443
+ display: flex;
12444
+ flex: 1 0 0;
12445
+ flex-direction: column;
12446
+ min-height: 0;
12447
+ overflow: auto;
12448
+ }
12449
+ .pf-v6-c-compass__content > *:last-child {
12450
+ flex-grow: 1;
12451
+ max-height: 100%;
12452
+ }
12453
+
12454
+ .pf-v6-c-compass__sidebar.pf-m-end {
12455
+ grid-area: sidebar-end;
12456
+ padding: var(--pf-t--global--spacer--sm);
12457
+ }
12458
+
12459
+ .pf-v6-c-compass__footer {
12460
+ display: flex;
12461
+ grid-area: footer;
12462
+ justify-content: center;
12463
+ }
12464
+
12465
+ .pf-v6-c-compass__message-bar {
12466
+ width: var(--pf-v6-c-compass__message-bar--Width);
12467
+ min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
12468
+ max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
12469
+ }
12470
+
12471
+ .pf-v6-c-compass__panel {
12472
+ padding: var(--pf-v6-c-compass__panel--Padding);
12473
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
12474
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
12475
+ border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
12476
+ border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
12477
+ box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
12478
+ }
12479
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
12480
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
12481
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
12482
+ }
12483
+ .pf-v6-c-compass__panel.pf-m-no-border {
12484
+ border-width: 0;
12485
+ }
12486
+ .pf-v6-c-compass__panel.pf-m-no-padding {
12487
+ padding: 0;
12488
+ }
12489
+ .pf-v6-c-compass__panel.pf-m-full-height {
12490
+ height: 100%;
12491
+ }
12492
+ .pf-v6-c-compass__panel.pf-m-pill {
12493
+ border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
12494
+ }
12495
+ .pf-v6-c-compass__panel.pf-m-scrollable {
12496
+ overflow: auto;
12497
+ }
12498
+
12499
+ .pf-v6-c-compass__hero {
12500
+ display: flex;
12501
+ padding-block-start: 32px;
12502
+ padding-block-end: 32px;
12503
+ padding-inline-start: 72px;
12504
+ padding-inline-end: 0;
12505
+ 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%);
12506
+ background-repeat: no-repeat;
12507
+ background-position: right center;
12508
+ background-size: contain;
12509
+ border-radius: 24px 72px;
12510
+ }
12511
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
12512
+ --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
12513
+ --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
12514
+ --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
12515
+ --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
12516
+ }
12517
+
12518
+ .pf-v6-c-compass__hero-body {
12519
+ width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
12520
+ }
12521
+
12522
+ :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
12523
+ --pf-v6-c-compass--glass--opacity: 100%;
12524
+ --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
12525
+ --pf-v6-c-compass--glass--blend-mode: none;
12526
+ --pf-v6-c-compass--glass--blend-mode--dark: none;
12527
+ }
12528
+
12529
+ /* stylelint-disable */
12530
+ @media (max-width: 1200px) {
12531
+ .pf-v6-c-compass * {
12532
+ display: none;
12533
+ }
12534
+ .pf-v6-c-compass {
12535
+ position: relative;
12536
+ display: grid;
12537
+ grid-template-columns: auto;
12538
+ grid-template-rows: auto;
12539
+ place-content: center;
12540
+ gap: 0;
12541
+ }
12542
+ .pf-v6-c-compass::after {
12543
+ padding: 1em;
12544
+ border-radius: var(--pf-t--global--border--radius--large);
12545
+ background: var(--pf-t--global--background--color--primary--default);
12546
+ content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
12547
+ width: 80%;
12548
+ width: 300px;
12549
+ border: 1px solid var(--pf-t--global--border--color--default);
12550
+ box-shadow: var(--pf-t--global--box-shadow--md);
12551
+ white-space: pre-wrap;
12552
+ text-align: center;
12553
+ }
12554
+ }
12555
+ /* stylelint-enable */
12266
12556
  :root {
12267
12557
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
12268
12558
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -12957,7 +13247,8 @@ ul) {
12957
13247
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
12958
13248
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12959
13249
  --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);
13250
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13251
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
12961
13252
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
12962
13253
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
12963
13254
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -13112,6 +13403,9 @@ ul) {
13112
13403
  .pf-v6-c-data-list.pf-m-drag-over {
13113
13404
  overflow-anchor: none;
13114
13405
  }
13406
+ .pf-v6-c-data-list.pf-m-plain {
13407
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
13408
+ }
13115
13409
 
13116
13410
  .pf-v6-c-data-list.pf-m-truncate,
13117
13411
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -19093,7 +19387,7 @@ ul.pf-v6-c-list {
19093
19387
  --pf-v6-c-menu__footer--BoxShadow: none;
19094
19388
  --pf-v6-c-menu__footer--BorderColor: transparent;
19095
19389
  --pf-v6-c-menu__footer--BorderWidth: 0;
19096
- --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
19390
+ --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
19097
19391
  --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
19098
19392
  --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
19099
19393
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
@@ -19819,6 +20113,7 @@ ul.pf-v6-c-list {
19819
20113
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
19820
20114
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
19821
20115
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
20116
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
19822
20117
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
19823
20118
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
19824
20119
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -19947,6 +20242,9 @@ ul.pf-v6-c-list {
19947
20242
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
19948
20243
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
19949
20244
  }
20245
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
20246
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
20247
+ }
19950
20248
  .pf-v6-c-menu-toggle.pf-m-plain::before {
19951
20249
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
19952
20250
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -22471,7 +22769,7 @@ ul.pf-v6-c-list {
22471
22769
  --pf-v6-c-panel__footer--BorderWidth: 0;
22472
22770
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
22473
22771
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
22474
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
22772
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
22475
22773
  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
22476
22774
  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
22477
22775
  --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
@@ -24558,6 +24856,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24558
24856
  .pf-v6-c-spinner.pf-m-xl {
24559
24857
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
24560
24858
  }
24859
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
24860
+ --pf-v6-c-spinner--AnimationDuration: 0s;
24861
+ }
24561
24862
 
24562
24863
  .pf-v6-c-spinner__path {
24563
24864
  width: 100%;
@@ -26623,6 +26924,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26623
26924
  .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
26925
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
26625
26926
  }
26927
+ .pf-v6-c-table.pf-m-plain {
26928
+ --pf-v6-c-table--BackgroundColor: transparent;
26929
+ }
26626
26930
  .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
26931
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
26628
26932
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -28460,6 +28764,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28460
28764
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28461
28765
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
28462
28766
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
28767
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
28768
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
28769
+ --pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
28463
28770
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
28464
28771
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
28465
28772
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -28737,6 +29044,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28737
29044
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
28738
29045
  overflow: visible;
28739
29046
  }
29047
+ .pf-v6-c-tabs.pf-m-nav {
29048
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
29049
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
29050
+ --pf-v6-c-tabs__link--hover--BorderColor: transparent;
29051
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
29052
+ }
29053
+ .pf-v6-c-tabs.pf-m-nav::before,
29054
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
29055
+ border: 0;
29056
+ }
29057
+ .pf-v6-c-tabs.pf-m-nav.pf-m-subtab .pf-v6-c-tabs__scroll-button .pf-v6-c-button {
29058
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize);
29059
+ }
28740
29060
 
28741
29061
  .pf-v6-c-tabs__toggle {
28742
29062
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -28786,7 +29106,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28786
29106
  }
28787
29107
  .pf-v6-c-tabs__item.pf-m-current {
28788
29108
  --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);
29109
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
28790
29110
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
28791
29111
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
28792
29112
  }