@patternfly/patternfly 6.5.0-prerelease.53 → 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 (9) hide show
  1. package/components/Wizard/wizard.css +20 -2
  2. package/components/Wizard/wizard.scss +22 -2
  3. package/components/_index.css +20 -2
  4. package/docs/components/Wizard/examples/Wizard.md +323 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +20 -2
  7. package/patternfly.css +20 -2
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -33776,6 +33776,7 @@ label.pf-v6-c-tree-view__node-text {
33776
33776
  --pf-v6-c-wizard--Height--base: 100%;
33777
33777
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
33778
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;
33779
33780
  --pf-v6-c-wizard__header--ZIndex: auto;
33780
33781
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33781
33782
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -33808,7 +33809,7 @@ label.pf-v6-c-tree-view__node-text {
33808
33809
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
33809
33810
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33810
33811
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
33811
- --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);
33812
33813
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
33813
33814
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
33814
33815
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -33842,6 +33843,7 @@ label.pf-v6-c-tree-view__node-text {
33842
33843
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
33843
33844
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
33844
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;
33845
33847
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
33846
33848
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33847
33849
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -33866,17 +33868,20 @@ label.pf-v6-c-tree-view__node-text {
33866
33868
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
33867
33869
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
33868
33870
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
33869
- --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;
33870
33873
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
33871
33874
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
33872
33875
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
33873
33876
  --pf-v6-c-wizard__nav--Width: 100%;
33877
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33874
33878
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
33875
33879
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
33876
33880
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
33877
33881
  }
33878
33882
  @media screen and (min-width: 62rem) {
33879
33883
  .pf-v6-c-wizard {
33884
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
33880
33885
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
33881
33886
  --pf-v6-c-wizard__nav--BoxShadow: none;
33882
33887
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -33891,6 +33896,7 @@ label.pf-v6-c-tree-view__node-text {
33891
33896
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
33892
33897
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
33893
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;
33894
33900
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
33895
33901
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
33896
33902
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -33899,6 +33905,7 @@ label.pf-v6-c-tree-view__node-text {
33899
33905
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
33900
33906
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
33901
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;
33902
33909
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
33903
33910
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33904
33911
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -33929,6 +33936,17 @@ label.pf-v6-c-tree-view__node-text {
33929
33936
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
33930
33937
  display: none;
33931
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
+ }
33932
33950
 
33933
33951
  .pf-v6-c-wizard__header {
33934
33952
  position: relative;
package/patternfly.css CHANGED
@@ -33923,6 +33923,7 @@ label.pf-v6-c-tree-view__node-text {
33923
33923
  --pf-v6-c-wizard--Height--base: 100%;
33924
33924
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
33925
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;
33926
33927
  --pf-v6-c-wizard__header--ZIndex: auto;
33927
33928
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33928
33929
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -33955,7 +33956,7 @@ label.pf-v6-c-tree-view__node-text {
33955
33956
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
33956
33957
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33957
33958
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
33958
- --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);
33959
33960
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
33960
33961
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
33961
33962
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -33989,6 +33990,7 @@ label.pf-v6-c-tree-view__node-text {
33989
33990
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
33990
33991
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
33991
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;
33992
33994
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
33993
33995
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33994
33996
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -34013,17 +34015,20 @@ label.pf-v6-c-tree-view__node-text {
34013
34015
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
34014
34016
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
34015
34017
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
34016
- --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;
34017
34020
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
34018
34021
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
34019
34022
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
34020
34023
  --pf-v6-c-wizard__nav--Width: 100%;
34024
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
34021
34025
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
34022
34026
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
34023
34027
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
34024
34028
  }
34025
34029
  @media screen and (min-width: 62rem) {
34026
34030
  .pf-v6-c-wizard {
34031
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
34027
34032
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
34028
34033
  --pf-v6-c-wizard__nav--BoxShadow: none;
34029
34034
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -34038,6 +34043,7 @@ label.pf-v6-c-tree-view__node-text {
34038
34043
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
34039
34044
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
34040
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;
34041
34047
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
34042
34048
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
34043
34049
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -34046,6 +34052,7 @@ label.pf-v6-c-tree-view__node-text {
34046
34052
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
34047
34053
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
34048
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;
34049
34056
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
34050
34057
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
34051
34058
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -34076,6 +34083,17 @@ label.pf-v6-c-tree-view__node-text {
34076
34083
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
34077
34084
  display: none;
34078
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
+ }
34079
34097
 
34080
34098
  .pf-v6-c-wizard__header {
34081
34099
  position: relative;