@patternfly/patternfly 6.4.0 → 6.5.0-prerelease.10

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 (58) 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 +276 -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.md +4608 -0
  39. package/docs/components/DataList/examples/DataList.md +181 -185
  40. package/docs/components/Drawer/examples/Drawer.md +1 -1
  41. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  42. package/docs/components/Progress/examples/Progress.md +3 -3
  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/Dashboard/examples/Dashboard.md +1 -4
  47. package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
  48. package/docs/demos/Drawer/examples/Drawer.md +31 -33
  49. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
  50. package/docs/demos/Wizard/examples/Wizard.md +31 -34
  51. package/package.json +5 -5
  52. package/patternfly-base-no-globals.css +46 -0
  53. package/patternfly-base.css +46 -0
  54. package/patternfly-no-globals.css +324 -4
  55. package/patternfly.css +324 -4
  56. package/patternfly.min.css +1 -1
  57. package/patternfly.min.css.map +1 -1
  58. 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: 289deg;
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
+ .pf-v6-c-compass__panel.pf-m-padding {
12499
+ padding: 0;
12500
+ }
12501
+
12502
+ .pf-v6-c-compass__hero {
12503
+ display: flex;
12504
+ padding-block-start: 32px;
12505
+ padding-block-end: 32px;
12506
+ padding-inline-start: 72px;
12507
+ padding-inline-end: 0;
12508
+ 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%);
12509
+ background-repeat: no-repeat;
12510
+ background-position: right center;
12511
+ background-size: contain;
12512
+ border-radius: 24px 72px;
12513
+ }
12514
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
12515
+ --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
12516
+ --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
12517
+ --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
12518
+ --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
12519
+ }
12520
+
12521
+ .pf-v6-c-compass__hero-body {
12522
+ width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
12523
+ }
12524
+
12525
+ :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
12526
+ --pf-v6-c-compass--glass--opacity: 100%;
12527
+ --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
12528
+ --pf-v6-c-compass--glass--blend-mode: none;
12529
+ --pf-v6-c-compass--glass--blend-mode--dark: none;
12530
+ }
12531
+
12532
+ /* stylelint-disable */
12533
+ @media (max-width: 1200px) {
12534
+ .pf-v6-c-compass {
12535
+ display: none;
12536
+ }
12537
+ body {
12538
+ display: grid;
12539
+ min-height: 100%;
12540
+ place-content: center;
12541
+ }
12542
+ body::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
+ max-width: 360px;
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
  }