@patternfly/patternfly 6.5.0-prerelease.52 → 6.5.0-prerelease.54

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 (15) hide show
  1. package/components/Card/card.css +20 -8
  2. package/components/Card/card.scss +26 -7
  3. package/components/Wizard/wizard.css +20 -2
  4. package/components/Wizard/wizard.scss +22 -2
  5. package/components/_index.css +40 -10
  6. package/docs/components/Wizard/examples/Wizard.md +323 -0
  7. package/docs/demos/Card/examples/Card.md +564 -86
  8. package/docs/demos/CardView/examples/CardView.md +15 -1
  9. package/docs/demos/Compass/examples/Compass.md +393 -82
  10. package/docs/demos/Dashboard/examples/Dashboard.md +434 -100
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +40 -10
  13. package/patternfly.css +40 -10
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.52",
4
+ "version": "6.5.0-prerelease.54",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11870,10 +11870,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11870
11870
 
11871
11871
  .pf-v6-c-card {
11872
11872
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11873
- --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
11873
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
11874
11874
  --pf-v6-c-card--BorderStyle: solid;
11875
11875
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
11876
11876
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
11877
+ --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
11877
11878
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11878
11879
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11879
11880
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -11903,7 +11904,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11903
11904
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
11904
11905
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11905
11906
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
11906
- --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
11907
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
11908
+ --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
11907
11909
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
11908
11910
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
11909
11911
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -11940,13 +11942,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11940
11942
  --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
11941
11943
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
11942
11944
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11943
- --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
11944
- --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11945
11945
  --pf-v6-c-card--m-full-height--Height: 100%;
11946
11946
  --pf-v6-c-card--m-plain--BorderColor: transparent;
11947
11947
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
11948
+ --pf-v6-c-card--m-plain--BoxShadow: none;
11948
11949
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
11949
11950
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
11951
+ --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
11952
+ --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
11950
11953
  }
11951
11954
 
11952
11955
  .pf-v6-c-card {
@@ -11957,6 +11960,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11957
11960
  background-color: var(--pf-v6-c-card--BackgroundColor);
11958
11961
  border: 0;
11959
11962
  border-radius: var(--pf-v6-c-card--BorderRadius);
11963
+ box-shadow: var(--pf-v6-c-card--BoxShadow);
11960
11964
  }
11961
11965
  .pf-v6-c-card::before {
11962
11966
  position: absolute;
@@ -11970,6 +11974,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11970
11974
  gap: 0;
11971
11975
  }
11972
11976
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
11977
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
11973
11978
  isolation: isolate;
11974
11979
  }
11975
11980
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -12004,12 +12009,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12004
12009
  .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 {
12005
12010
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
12006
12011
  }
12007
- .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) {
12012
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
12013
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
12014
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
12015
+ }
12016
+
12017
+ .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
12008
12018
  --pf-v6-c-card__actions--PaddingInlineStart: 0;
12009
12019
  --pf-v6-c-card__actions--MarginBlockStart: 0;
12010
12020
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
12011
12021
  }
12012
-
12013
12022
  .pf-v6-c-card.pf-m-compact {
12014
12023
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
12015
12024
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -12033,13 +12042,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12033
12042
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
12034
12043
  }
12035
12044
  .pf-v6-c-card.pf-m-secondary {
12036
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
12037
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
12038
12045
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
12039
12046
  }
12047
+ .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
12048
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
12049
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
12050
+ }
12040
12051
  .pf-v6-c-card.pf-m-plain {
12041
12052
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
12042
12053
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
12054
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
12043
12055
  }
12044
12056
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
12045
12057
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -33764,6 +33776,7 @@ label.pf-v6-c-tree-view__node-text {
33764
33776
  --pf-v6-c-wizard--Height--base: 100%;
33765
33777
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
33766
33778
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
33779
+ --pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
33767
33780
  --pf-v6-c-wizard__header--ZIndex: auto;
33768
33781
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33769
33782
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -33796,7 +33809,7 @@ label.pf-v6-c-tree-view__node-text {
33796
33809
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
33797
33810
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33798
33811
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
33799
- --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
33812
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
33800
33813
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
33801
33814
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
33802
33815
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -33830,6 +33843,7 @@ label.pf-v6-c-tree-view__node-text {
33830
33843
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
33831
33844
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
33832
33845
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33846
+ --pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
33833
33847
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
33834
33848
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33835
33849
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -33854,17 +33868,20 @@ label.pf-v6-c-tree-view__node-text {
33854
33868
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
33855
33869
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
33856
33870
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
33857
- --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33871
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
33872
+ --pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
33858
33873
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
33859
33874
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
33860
33875
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
33861
33876
  --pf-v6-c-wizard__nav--Width: 100%;
33877
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33862
33878
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
33863
33879
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
33864
33880
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
33865
33881
  }
33866
33882
  @media screen and (min-width: 62rem) {
33867
33883
  .pf-v6-c-wizard {
33884
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
33868
33885
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
33869
33886
  --pf-v6-c-wizard__nav--BoxShadow: none;
33870
33887
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -33879,6 +33896,7 @@ label.pf-v6-c-tree-view__node-text {
33879
33896
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
33880
33897
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
33881
33898
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33899
+ --pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
33882
33900
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
33883
33901
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
33884
33902
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -33887,6 +33905,7 @@ label.pf-v6-c-tree-view__node-text {
33887
33905
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
33888
33906
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
33889
33907
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33908
+ --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
33890
33909
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
33891
33910
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33892
33911
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -33917,6 +33936,17 @@ label.pf-v6-c-tree-view__node-text {
33917
33936
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
33918
33937
  display: none;
33919
33938
  }
33939
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
33940
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
33941
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
33942
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
33943
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
33944
+ }
33945
+ @media screen and (min-width: 62rem) {
33946
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
33947
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
33948
+ }
33949
+ }
33920
33950
 
33921
33951
  .pf-v6-c-wizard__header {
33922
33952
  position: relative;
package/patternfly.css CHANGED
@@ -12017,10 +12017,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12017
12017
 
12018
12018
  .pf-v6-c-card {
12019
12019
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12020
- --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
12020
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
12021
12021
  --pf-v6-c-card--BorderStyle: solid;
12022
12022
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
12023
12023
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
12024
+ --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
12024
12025
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
12025
12026
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12026
12027
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -12050,7 +12051,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12050
12051
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12051
12052
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
12052
12053
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
12053
- --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
12054
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
12055
+ --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
12054
12056
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
12055
12057
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
12056
12058
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -12087,13 +12089,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12087
12089
  --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
12088
12090
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
12089
12091
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12090
- --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
12091
- --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
12092
12092
  --pf-v6-c-card--m-full-height--Height: 100%;
12093
12093
  --pf-v6-c-card--m-plain--BorderColor: transparent;
12094
12094
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
12095
+ --pf-v6-c-card--m-plain--BoxShadow: none;
12095
12096
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
12096
12097
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
12098
+ --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
12099
+ --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
12097
12100
  }
12098
12101
 
12099
12102
  .pf-v6-c-card {
@@ -12104,6 +12107,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12104
12107
  background-color: var(--pf-v6-c-card--BackgroundColor);
12105
12108
  border: 0;
12106
12109
  border-radius: var(--pf-v6-c-card--BorderRadius);
12110
+ box-shadow: var(--pf-v6-c-card--BoxShadow);
12107
12111
  }
12108
12112
  .pf-v6-c-card::before {
12109
12113
  position: absolute;
@@ -12117,6 +12121,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12117
12121
  gap: 0;
12118
12122
  }
12119
12123
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
12124
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
12120
12125
  isolation: isolate;
12121
12126
  }
12122
12127
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -12151,12 +12156,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12151
12156
  .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 {
12152
12157
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
12153
12158
  }
12154
- .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) {
12159
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
12160
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
12161
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
12162
+ }
12163
+
12164
+ .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
12155
12165
  --pf-v6-c-card__actions--PaddingInlineStart: 0;
12156
12166
  --pf-v6-c-card__actions--MarginBlockStart: 0;
12157
12167
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
12158
12168
  }
12159
-
12160
12169
  .pf-v6-c-card.pf-m-compact {
12161
12170
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
12162
12171
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -12180,13 +12189,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12180
12189
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
12181
12190
  }
12182
12191
  .pf-v6-c-card.pf-m-secondary {
12183
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
12184
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
12185
12192
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
12186
12193
  }
12194
+ .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
12195
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
12196
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
12197
+ }
12187
12198
  .pf-v6-c-card.pf-m-plain {
12188
12199
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
12189
12200
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
12201
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
12190
12202
  }
12191
12203
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
12192
12204
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -33911,6 +33923,7 @@ label.pf-v6-c-tree-view__node-text {
33911
33923
  --pf-v6-c-wizard--Height--base: 100%;
33912
33924
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
33913
33925
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
33926
+ --pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
33914
33927
  --pf-v6-c-wizard__header--ZIndex: auto;
33915
33928
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33916
33929
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -33943,7 +33956,7 @@ label.pf-v6-c-tree-view__node-text {
33943
33956
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
33944
33957
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33945
33958
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
33946
- --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
33959
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
33947
33960
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
33948
33961
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
33949
33962
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -33977,6 +33990,7 @@ label.pf-v6-c-tree-view__node-text {
33977
33990
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
33978
33991
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
33979
33992
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33993
+ --pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
33980
33994
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
33981
33995
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33982
33996
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -34001,17 +34015,20 @@ label.pf-v6-c-tree-view__node-text {
34001
34015
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
34002
34016
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
34003
34017
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
34004
- --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
34018
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
34019
+ --pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
34005
34020
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
34006
34021
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
34007
34022
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
34008
34023
  --pf-v6-c-wizard__nav--Width: 100%;
34024
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
34009
34025
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
34010
34026
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
34011
34027
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
34012
34028
  }
34013
34029
  @media screen and (min-width: 62rem) {
34014
34030
  .pf-v6-c-wizard {
34031
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
34015
34032
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
34016
34033
  --pf-v6-c-wizard__nav--BoxShadow: none;
34017
34034
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -34026,6 +34043,7 @@ label.pf-v6-c-tree-view__node-text {
34026
34043
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
34027
34044
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
34028
34045
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
34046
+ --pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
34029
34047
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
34030
34048
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
34031
34049
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -34034,6 +34052,7 @@ label.pf-v6-c-tree-view__node-text {
34034
34052
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
34035
34053
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
34036
34054
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
34055
+ --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
34037
34056
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
34038
34057
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
34039
34058
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -34064,6 +34083,17 @@ label.pf-v6-c-tree-view__node-text {
34064
34083
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
34065
34084
  display: none;
34066
34085
  }
34086
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
34087
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
34088
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
34089
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
34090
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
34091
+ }
34092
+ @media screen and (min-width: 62rem) {
34093
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
34094
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
34095
+ }
34096
+ }
34067
34097
 
34068
34098
  .pf-v6-c-wizard__header {
34069
34099
  position: relative;