@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/components/Wizard/wizard.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pf-v6-c-wizard--Height--base: 100%;
4
4
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
5
5
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6
+ --pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
6
7
  --pf-v6-c-wizard__header--ZIndex: auto;
7
8
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8
9
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -35,7 +36,7 @@
35
36
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
36
37
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
38
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
38
- --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
39
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
39
40
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
40
41
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
41
42
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -69,6 +70,7 @@
69
70
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
70
71
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
71
72
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
73
+ --pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
72
74
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
73
75
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
74
76
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -93,17 +95,20 @@
93
95
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
94
96
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
95
97
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
96
- --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
98
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
99
+ --pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
97
100
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
98
101
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
99
102
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
100
103
  --pf-v6-c-wizard__nav--Width: 100%;
104
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
101
105
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
102
106
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
103
107
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
104
108
  }
105
109
  @media screen and (min-width: 62rem) {
106
110
  .pf-v6-c-wizard {
111
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
107
112
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
108
113
  --pf-v6-c-wizard__nav--BoxShadow: none;
109
114
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -118,6 +123,7 @@
118
123
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
119
124
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
120
125
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
126
+ --pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
121
127
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
122
128
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
123
129
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -126,6 +132,7 @@
126
132
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
127
133
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
128
134
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
135
+ --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
129
136
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
130
137
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
131
138
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -156,6 +163,17 @@
156
163
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
157
164
  display: none;
158
165
  }
166
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
167
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
168
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
169
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
170
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
171
+ }
172
+ @media screen and (min-width: 62rem) {
173
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
174
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
175
+ }
176
+ }
159
177
 
160
178
  .pf-v6-c-wizard__header {
161
179
  position: relative;
package/components/Wizard/wizard.scss CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  // Header
9
9
  --#{$wizard}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
+ --#{$wizard}--m-plain__header--BackgroundColor: transparent;
10
11
  --#{$wizard}__header--ZIndex: auto;
11
12
  --#{$wizard}__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
12
13
  --#{$wizard}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -57,7 +58,7 @@
57
58
  --#{$wizard}__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
58
59
  --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
59
60
  --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
60
- --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
61
+ --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
61
62
  --#{$wizard}__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
62
63
  --#{$wizard}__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
63
64
  --#{$wizard}__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -99,6 +100,7 @@
99
100
 
100
101
  // Toggle
101
102
  --#{$wizard}__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
103
+ --#{$wizard}--m-plain__toggle--BackgroundColor: transparent;
102
104
  --#{$wizard}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
103
105
  --#{$wizard}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
104
106
  --#{$wizard}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -137,16 +139,19 @@
137
139
 
138
140
  // Nav
139
141
  --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--sm);
140
- --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
142
+ --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
143
+ --#{$wizard}--m-plain__nav--BackgroundColor: transparent;
141
144
  --#{$wizard}__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
142
145
  --#{$wizard}__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
143
146
  --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
144
147
  --#{$wizard}__nav--Width: 100%;
148
+ --#{$wizard}__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
145
149
  --#{$wizard}__nav--lg--Width: #{pf-size-prem(250px)};
146
150
  --#{$wizard}__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
147
151
  --#{$wizard}__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
148
152
 
149
153
  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
154
+ --#{$wizard}__nav--BackgroundColor: var(--#{$wizard}__nav--lg--BackgroundColor);
150
155
  --#{$wizard}__nav--Width: var(--#{$wizard}__nav--lg--Width);
151
156
  --#{$wizard}__nav--BoxShadow: none;
152
157
  --#{$wizard}__nav--BorderBlockEndWidth: 0;
@@ -165,6 +170,7 @@
165
170
 
166
171
  // Outer wrap
167
172
  --#{$wizard}__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
173
+ --#{$wizard}--m-plain__outer-wrap--BackgroundColor: transparent;
168
174
  --#{$wizard}__outer-wrap--lg--PaddingInlineStart: var(--#{$wizard}__nav--Width);
169
175
  --#{$wizard}__outer-wrap--MinHeight: #{pf-size-prem(250px)};
170
176
 
@@ -179,6 +185,7 @@
179
185
 
180
186
  // Footer
181
187
  --#{$wizard}__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
188
+ --#{$wizard}--m-plain__footer--BackgroundColor: transparent;
182
189
  --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--xs);
183
190
  --#{$wizard}__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
184
191
  --#{$wizard}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -186,6 +193,7 @@
186
193
  --#{$wizard}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
187
194
  --#{$wizard}__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
188
195
  --#{$wizard}__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
196
+
189
197
  }
190
198
 
191
199
  .#{$wizard} {
@@ -215,6 +223,18 @@
215
223
  display: none;
216
224
  }
217
225
  }
226
+
227
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
228
+ &.pf-m-plain {
229
+ --#{$wizard}__header--BackgroundColor: var(--#{$wizard}--m-plain__header--BackgroundColor);
230
+ --#{$wizard}__toggle--BackgroundColor: var(--#{$wizard}--m-plain__toggle--BackgroundColor);
231
+ --#{$wizard}__outer-wrap--BackgroundColor: var(--#{$wizard}--m-plain__outer-wrap--BackgroundColor);
232
+ --#{$wizard}__footer--BackgroundColor: var(--#{$wizard}--m-plain__footer--BackgroundColor);
233
+
234
+ @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
235
+ --#{$wizard}__nav--BackgroundColor: var(--#{$wizard}--m-plain__nav--BackgroundColor);
236
+ }
237
+ }
218
238
  }
219
239
 
220
240
  .#{$wizard}__header {
package/components/_index.css CHANGED
@@ -24717,6 +24717,7 @@ label.pf-v6-c-tree-view__node-text {
24717
24717
  --pf-v6-c-wizard--Height--base: 100%;
24718
24718
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
24719
24719
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24720
+ --pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
24720
24721
  --pf-v6-c-wizard__header--ZIndex: auto;
24721
24722
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
24722
24723
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -24749,7 +24750,7 @@ label.pf-v6-c-tree-view__node-text {
24749
24750
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24750
24751
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
24751
24752
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
24752
- --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
24753
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
24753
24754
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
24754
24755
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
24755
24756
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -24783,6 +24784,7 @@ label.pf-v6-c-tree-view__node-text {
24783
24784
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
24784
24785
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
24785
24786
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24787
+ --pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
24786
24788
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
24787
24789
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
24788
24790
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -24807,17 +24809,20 @@ label.pf-v6-c-tree-view__node-text {
24807
24809
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
24808
24810
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
24809
24811
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
24810
- --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24812
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
24813
+ --pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
24811
24814
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
24812
24815
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
24813
24816
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
24814
24817
  --pf-v6-c-wizard__nav--Width: 100%;
24818
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24815
24819
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
24816
24820
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
24817
24821
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
24818
24822
  }
24819
24823
  @media screen and (min-width: 62rem) {
24820
24824
  .pf-v6-c-wizard {
24825
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
24821
24826
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
24822
24827
  --pf-v6-c-wizard__nav--BoxShadow: none;
24823
24828
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -24832,6 +24837,7 @@ label.pf-v6-c-tree-view__node-text {
24832
24837
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
24833
24838
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
24834
24839
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24840
+ --pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
24835
24841
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
24836
24842
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
24837
24843
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -24840,6 +24846,7 @@ label.pf-v6-c-tree-view__node-text {
24840
24846
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
24841
24847
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
24842
24848
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24849
+ --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
24843
24850
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
24844
24851
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
24845
24852
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -24870,6 +24877,17 @@ label.pf-v6-c-tree-view__node-text {
24870
24877
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
24871
24878
  display: none;
24872
24879
  }
24880
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
24881
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
24882
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
24883
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
24884
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
24885
+ }
24886
+ @media screen and (min-width: 62rem) {
24887
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
24888
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
24889
+ }
24890
+ }
24873
24891
 
24874
24892
  .pf-v6-c-wizard__header {
24875
24893
  position: relative;
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -3813,6 +3813,327 @@ wrapperTag: div
3813
3813
 
3814
3814
  ```
3815
3815
 
3816
+ ### Plain
3817
+
3818
+ ```html isFullscreen
3819
+ <div class="pf-v6-c-wizard pf-m-plain">
3820
+ <div class="pf-v6-c-wizard__header">
3821
+ <div class="pf-v6-c-wizard__close">
3822
+ <button
3823
+ class="pf-v6-c-button pf-m-plain"
3824
+ type="button"
3825
+ aria-label="Close"
3826
+ >
3827
+ <span class="pf-v6-c-button__icon">
3828
+ <svg
3829
+ class="pf-v6-svg"
3830
+ viewBox="0 0 20 20"
3831
+ fill="currentColor"
3832
+ aria-hidden="true"
3833
+ role="img"
3834
+ width="1em"
3835
+ height="1em"
3836
+ >
3837
+ <path
3838
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3839
+ />
3840
+ </svg>
3841
+ </span>
3842
+ </button>
3843
+ </div>
3844
+ <div class="pf-v6-c-wizard__title">
3845
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
3846
+ </div>
3847
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
3848
+ </div>
3849
+ <button
3850
+ aria-label="Wizard Header Toggle"
3851
+ class="pf-v6-c-wizard__toggle"
3852
+ aria-expanded="false"
3853
+ >
3854
+ <span class="pf-v6-c-wizard__toggle-list">
3855
+ <span class="pf-v6-c-wizard__toggle-list-item">
3856
+ <span class="pf-v6-c-wizard__toggle-num">2</span>
3857
+ Configuration
3858
+ <span class="pf-v6-c-wizard__toggle-separator">
3859
+ <svg
3860
+ class="pf-v6-svg"
3861
+ viewBox="0 0 20 20"
3862
+ fill="currentColor"
3863
+ aria-hidden="true"
3864
+ role="img"
3865
+ width="1em"
3866
+ height="1em"
3867
+ >
3868
+ <path
3869
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3870
+ />
3871
+ </svg>
3872
+ </span>
3873
+ </span>
3874
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3875
+ </span>
3876
+ <span class="pf-v6-c-wizard__toggle-icon">
3877
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3878
+ </span>
3879
+ </button>
3880
+ <div class="pf-v6-c-wizard__outer-wrap">
3881
+ <div class="pf-v6-c-wizard__inner-wrap">
3882
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
3883
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3884
+ <li class="pf-v6-c-wizard__nav-item">
3885
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3886
+ <span class="pf-v6-c-wizard__nav-link-main">
3887
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
3888
+ </span>
3889
+ </button>
3890
+ </li>
3891
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
3892
+ <button
3893
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3894
+ type="button"
3895
+ aria-expanded="true"
3896
+ >
3897
+ <span class="pf-v6-c-wizard__nav-link-main">
3898
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3899
+ <span class="pf-v6-c-wizard__nav-link-toggle">
3900
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3901
+ <svg
3902
+ class="pf-v6-svg"
3903
+ viewBox="0 0 20 20"
3904
+ fill="currentColor"
3905
+ aria-hidden="true"
3906
+ role="img"
3907
+ width="1em"
3908
+ height="1em"
3909
+ >
3910
+ <path
3911
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3912
+ />
3913
+ </svg>
3914
+ </span>
3915
+ </span>
3916
+ </span>
3917
+ </button>
3918
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3919
+ <li class="pf-v6-c-wizard__nav-item">
3920
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3921
+ <span class="pf-v6-c-wizard__nav-link-main">
3922
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
3923
+ </span>
3924
+ </button>
3925
+ </li>
3926
+ <li class="pf-v6-c-wizard__nav-item">
3927
+ <button
3928
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3929
+ type="button"
3930
+ aria-current="page"
3931
+ >
3932
+ <span class="pf-v6-c-wizard__nav-link-main">
3933
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
3934
+ </span>
3935
+ </button>
3936
+ </li>
3937
+ <li class="pf-v6-c-wizard__nav-item">
3938
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3939
+ <span class="pf-v6-c-wizard__nav-link-main">
3940
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
3941
+ </span>
3942
+ </button>
3943
+ </li>
3944
+ </ol>
3945
+ </li>
3946
+ <li class="pf-v6-c-wizard__nav-item">
3947
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3948
+ <span class="pf-v6-c-wizard__nav-link-main">
3949
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
3950
+ </span>
3951
+ </button>
3952
+ </li>
3953
+ <li class="pf-v6-c-wizard__nav-item">
3954
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
3955
+ <span class="pf-v6-c-wizard__nav-link-main">
3956
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
3957
+ </span>
3958
+ </button>
3959
+ </li>
3960
+ </ol>
3961
+ </nav>
3962
+ <main class="pf-v6-c-wizard__main" tabindex="0">
3963
+ <div class="pf-v6-c-wizard__main-body">
3964
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
3965
+ <div class="pf-v6-c-form__group">
3966
+ <div class="pf-v6-c-form__group-label"><label
3967
+ class="pf-v6-c-form__label"
3968
+ for="wizard-plain-header-form-field1"
3969
+ >
3970
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
3971
+ class="pf-v6-c-form__label-required"
3972
+ aria-hidden="true"
3973
+ >&#42;</span></label>
3974
+ </div>
3975
+ <div class="pf-v6-c-form__group-control">
3976
+ <span class="pf-v6-c-form-control">
3977
+ <input
3978
+ type="text"
3979
+ id="wizard-plain-header-form-field1"
3980
+ name="wizard-plain-header-form-field1"
3981
+ />
3982
+ </span>
3983
+ </div>
3984
+ </div>
3985
+ <div class="pf-v6-c-form__group">
3986
+ <div class="pf-v6-c-form__group-label"><label
3987
+ class="pf-v6-c-form__label"
3988
+ for="wizard-plain-header-form-field2"
3989
+ >
3990
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
3991
+ class="pf-v6-c-form__label-required"
3992
+ aria-hidden="true"
3993
+ >&#42;</span></label>
3994
+ </div>
3995
+ <div class="pf-v6-c-form__group-control">
3996
+ <span class="pf-v6-c-form-control">
3997
+ <input
3998
+ type="text"
3999
+ id="wizard-plain-header-form-field2"
4000
+ name="wizard-plain-header-form-field2"
4001
+ />
4002
+ </span>
4003
+ </div>
4004
+ </div>
4005
+ <div class="pf-v6-c-form__group">
4006
+ <div class="pf-v6-c-form__group-label"><label
4007
+ class="pf-v6-c-form__label"
4008
+ for="wizard-plain-header-form-field3"
4009
+ >
4010
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
4011
+ class="pf-v6-c-form__label-required"
4012
+ aria-hidden="true"
4013
+ >&#42;</span></label>
4014
+ </div>
4015
+ <div class="pf-v6-c-form__group-control">
4016
+ <span class="pf-v6-c-form-control">
4017
+ <input
4018
+ type="text"
4019
+ id="wizard-plain-header-form-field3"
4020
+ name="wizard-plain-header-form-field3"
4021
+ />
4022
+ </span>
4023
+ </div>
4024
+ </div>
4025
+ <div class="pf-v6-c-form__group">
4026
+ <div class="pf-v6-c-form__group-label"><label
4027
+ class="pf-v6-c-form__label"
4028
+ for="wizard-plain-header-form-field4"
4029
+ >
4030
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
4031
+ class="pf-v6-c-form__label-required"
4032
+ aria-hidden="true"
4033
+ >&#42;</span></label>
4034
+ </div>
4035
+ <div class="pf-v6-c-form__group-control">
4036
+ <span class="pf-v6-c-form-control">
4037
+ <input
4038
+ type="text"
4039
+ id="wizard-plain-header-form-field4"
4040
+ name="wizard-plain-header-form-field4"
4041
+ />
4042
+ </span>
4043
+ </div>
4044
+ </div>
4045
+ <div class="pf-v6-c-form__group">
4046
+ <div class="pf-v6-c-form__group-label"><label
4047
+ class="pf-v6-c-form__label"
4048
+ for="wizard-plain-header-form-field5"
4049
+ >
4050
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
4051
+ class="pf-v6-c-form__label-required"
4052
+ aria-hidden="true"
4053
+ >&#42;</span></label>
4054
+ </div>
4055
+ <div class="pf-v6-c-form__group-control">
4056
+ <span class="pf-v6-c-form-control">
4057
+ <input
4058
+ type="text"
4059
+ id="wizard-plain-header-form-field5"
4060
+ name="wizard-plain-header-form-field5"
4061
+ />
4062
+ </span>
4063
+ </div>
4064
+ </div>
4065
+ <div class="pf-v6-c-form__group">
4066
+ <div class="pf-v6-c-form__group-label"><label
4067
+ class="pf-v6-c-form__label"
4068
+ for="wizard-plain-header-form-field6"
4069
+ >
4070
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
4071
+ class="pf-v6-c-form__label-required"
4072
+ aria-hidden="true"
4073
+ >&#42;</span></label>
4074
+ </div>
4075
+ <div class="pf-v6-c-form__group-control">
4076
+ <span class="pf-v6-c-form-control">
4077
+ <input
4078
+ type="text"
4079
+ id="wizard-plain-header-form-field6"
4080
+ name="wizard-plain-header-form-field6"
4081
+ />
4082
+ </span>
4083
+ </div>
4084
+ </div>
4085
+ <div class="pf-v6-c-form__group">
4086
+ <div class="pf-v6-c-form__group-label"><label
4087
+ class="pf-v6-c-form__label"
4088
+ for="wizard-plain-header-form-field7"
4089
+ >
4090
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
4091
+ class="pf-v6-c-form__label-required"
4092
+ aria-hidden="true"
4093
+ >&#42;</span></label>
4094
+ </div>
4095
+ <div class="pf-v6-c-form__group-control">
4096
+ <span class="pf-v6-c-form-control">
4097
+ <input
4098
+ type="text"
4099
+ id="wizard-plain-header-form-field7"
4100
+ name="wizard-plain-header-form-field7"
4101
+ />
4102
+ </span>
4103
+ </div>
4104
+ </div>
4105
+ </form>
4106
+ </div>
4107
+ </main>
4108
+ </div>
4109
+ <footer class="pf-v6-c-wizard__footer">
4110
+ <div class="pf-v6-c-action-list">
4111
+ <div class="pf-v6-c-action-list__group">
4112
+ <div class="pf-v6-c-action-list__item">
4113
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
4114
+ <span class="pf-v6-c-button__text">Back</span>
4115
+ </button>
4116
+ </div>
4117
+ <div class="pf-v6-c-action-list__item">
4118
+ <button class="pf-v6-c-button pf-m-primary" type="button">
4119
+ <span class="pf-v6-c-button__text">Next</span>
4120
+ </button>
4121
+ </div>
4122
+ </div>
4123
+ <div class="pf-v6-c-action-list__group">
4124
+ <div class="pf-v6-c-action-list__item">
4125
+ <button class="pf-v6-c-button pf-m-link" type="button">
4126
+ <span class="pf-v6-c-button__text">Cancel</span>
4127
+ </button>
4128
+ </div>
4129
+ </div>
4130
+ </div>
4131
+ </footer>
4132
+ </div>
4133
+ </div>
4134
+
4135
+ ```
4136
+
3816
4137
  ## Documentation
3817
4138
 
3818
4139
  ### Accessibility
@@ -3865,6 +4186,8 @@ wrapperTag: div
3865
4186
  | `.pf-v6-c-wizard__footer-cancel` | `<div>` | Initiates the cancel button. **Required** |
3866
4187
  | `.pf-m-expanded` | `.pf-v6-c-wizard__toggle`, `.pf-v6-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state. |
3867
4188
  | `.pf-m-finished` | `.pf-v6-c-wizard` | Modifies the wizard for the finished state. |
4189
+ | `.pf-m-plain` | `.pf-v6-c-wizard` | Modifies the wizard to have a transparent background. |
4190
+ | `.pf-m-no-plain` | `.pf-v6-c-wizard` | Prevents the wizard from automatically applying plain styling when glass theme is enabled. |
3868
4191
  | `.pf-m-expandable` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
3869
4192
  | `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
3870
4193
  | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
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.53",
4
+ "version": "6.5.0-prerelease.54",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {