@patternfly/patternfly 6.0.0-alpha.122 → 6.0.0-alpha.123

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 (21) hide show
  1. package/base/patternfly-variables.css +9 -22
  2. package/base/patternfly-variables.scss +11 -5
  3. package/base/tokens/_index.scss +1 -0
  4. package/base/tokens/tokens-charts-dark.scss +169 -0
  5. package/base/tokens/tokens-charts.scss +75 -65
  6. package/base/tokens/tokens-dark.scss +4 -5
  7. package/base/tokens/tokens-default.scss +10 -11
  8. package/base/tokens/tokens-font.scss +1 -1
  9. package/base/tokens/tokens-palette.scss +4 -5
  10. package/components/Wizard/wizard.css +80 -41
  11. package/components/Wizard/wizard.scss +98 -48
  12. package/components/_index.css +80 -41
  13. package/docs/components/Wizard/examples/Wizard.md +827 -91
  14. package/docs/demos/Wizard/examples/Wizard.md +356 -198
  15. package/package.json +1 -1
  16. package/patternfly-base-no-globals.css +9 -22
  17. package/patternfly-base.css +9 -22
  18. package/patternfly-no-globals.css +89 -63
  19. package/patternfly.css +89 -63
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/components/Wizard/wizard.css CHANGED
@@ -18,54 +18,61 @@
18
18
  --pf-v6-c-wizard__title-text--Color: var(--pf-t--global--text--color--regular);
19
19
  --pf-v6-c-wizard__description--PaddingBlockStart: var(--pf-t--global--spacer--sm);
20
20
  --pf-v6-c-wizard__description--Color: var(--pf-t--global--text--color--subtle);
21
- --pf-v6-c-wizard__nav-link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
22
- --pf-v6-c-wizard__nav-link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
23
- --pf-v6-c-wizard__nav-link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24
- --pf-v6-c-wizard__nav-link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21
+ --pf-v6-c-wizard__nav-link--Gap: var(--pf-t--global--spacer--xs);
25
22
  --pf-v6-c-wizard__nav-link--Color: var(--pf-t--global--text--color--subtle);
26
23
  --pf-v6-c-wizard__nav-link--TextDecoration: none;
27
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
28
- --pf-v6-c-wizard__nav-link--BorderRadius: var(--pf-t--global--border--radius--small);
29
24
  --pf-v6-c-wizard__nav-link--hover--Color: var(--pf-t--global--text--color--subtle);
30
25
  --pf-v6-c-wizard__nav-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
31
26
  --pf-v6-c-wizard__nav-link--m-current--Color: var(--pf-t--global--text--color--regular);
32
27
  --pf-v6-c-wizard__nav-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
33
28
  --pf-v6-c-wizard__nav-link--m-disabled--Color: var(--pf-t--global--text--color--disabled);
34
29
  --pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor: transparent;
30
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockStart: var(--pf-t--global--spacer--sm);
31
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
32
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
33
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
34
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
35
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
35
36
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
36
37
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
37
38
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
38
39
  --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
39
40
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
40
41
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
41
- --pf-v6-c-wizard__nav-link--before--Width: 1.5rem;
42
- --pf-v6-c-wizard__nav-link--before--Height: 1.5rem;
43
- --pf-v6-c-wizard__nav-link--before--InsetBlockStart: calc(calc(var(--pf-v6-c-wizard__nav-link--PaddingBlockStart) + var(--pf-v6-c-wizard__nav-link--PaddingBlockEnd) + 1em * var(--pf-t--global--font--line-height--body)) / 2);
42
+ --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
43
+ --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
44
+ --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
44
45
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
45
46
  --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
46
47
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
47
48
  --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
48
- --pf-v6-c-wizard__nav-link--before--TranslateX: calc(-100% - var(--pf-t--global--spacer--xs));
49
- --pf-v6-c-wizard__nav-link--before--TranslateY: -50%;
50
49
  --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
51
50
  --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
52
51
  --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
53
52
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
53
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
54
+ --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
55
+ --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
56
+ --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
54
57
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
55
58
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
56
59
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
57
60
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
58
61
  --pf-v6-c-wizard__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
59
- --pf-v6-c-wizard__toggle--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
62
+ --pf-v6-c-wizard__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
60
63
  --pf-v6-c-wizard__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
61
64
  --pf-v6-c-wizard__toggle--BorderBlockEndColor: var(--pf-t--global--border--color--default);
62
- --pf-v6-c-wizard--m-in-page__toggle--xl--PaddingInlineStart: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
63
- --pf-v6-c-wizard__toggle-num--before--InsetBlockStart: -0.125rem;
65
+ --pf-v6-c-wizard__toggle-num--InsetBlockStart: 0;
64
66
  --pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
65
67
  --pf-v6-c-wizard__toggle-list-item--MarginBlockEnd: var(--pf-t--global--spacer--xs);
68
+ --pf-v6-c-wizard__toggle-list-item--Gap: var(--pf-t--global--spacer--sm);
69
+ --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
70
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
71
+ --pf-v6-c-wizard__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
72
+ --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
73
+ --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
66
74
  --pf-v6-c-wizard__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
67
75
  --pf-v6-c-wizard__toggle-list--MarginBlockEnd: calc(var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd) * -1);
68
- --pf-v6-c-wizard__toggle-separator--MarginInlineStart: var(--pf-t--global--spacer--sm);
69
76
  --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
70
77
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
71
78
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
@@ -79,8 +86,8 @@
79
86
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
80
87
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
81
88
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
82
- --pf-v6-c-wizard__nav-list--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
83
- --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--md);
89
+ --pf-v6-c-wizard__nav-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
90
+ --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--lg);
84
91
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
85
92
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
86
93
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -97,8 +104,8 @@
97
104
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
98
105
  --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
99
106
  --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
100
- --pf-v6-c-wizard__footer--BorderWidth: var(--pf-t--global--border--width--divider--default);
101
- --pf-v6-c-wizard__footer--BorderColor: var(--pf-t--global--border--color--default);
107
+ --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
108
+ --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
102
109
  --pf-v6-c-wizard__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
103
110
  --pf-v6-c-wizard__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
104
111
  --pf-v6-c-wizard__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginInlineEnd));
@@ -210,6 +217,9 @@
210
217
  }
211
218
 
212
219
  .pf-v6-c-wizard__toggle-list-item {
220
+ display: flex;
221
+ gap: var(--pf-v6-c-wizard__toggle-list-item--Gap);
222
+ align-items: baseline;
213
223
  margin-block-end: var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd);
214
224
  text-align: start;
215
225
  word-break: break-word;
@@ -217,14 +227,25 @@
217
227
  .pf-v6-c-wizard__toggle-list-item:not(:last-child) {
218
228
  margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
219
229
  }
230
+ .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
231
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
232
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
233
+ }
220
234
 
221
235
  .pf-v6-c-wizard__toggle-num {
222
- --pf-v6-c-wizard__nav-link--before--TranslateY: 0;
223
- --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-v6-c-wizard__toggle-num--before--InsetBlockStart);
236
+ position: relative;
237
+ inset-block-start: var(--pf-v6-c-wizard__toggle-num--InsetBlockStart);
238
+ }
239
+
240
+ .pf-v6-c-wizard__toggle-status-icon {
241
+ position: relative;
242
+ inset-block-start: var(--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart);
243
+ font-size: var(--pf-v6-c-wizard__toggle-status-icon--FontSize);
244
+ line-height: var(--pf-v6-c-wizard__nav-link-status-icon--LineHeight);
245
+ color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
224
246
  }
225
247
 
226
248
  .pf-v6-c-wizard__toggle-separator {
227
- margin-inline-start: var(--pf-v6-c-wizard__toggle-separator--MarginInlineStart);
228
249
  color: var(--pf-v6-c-wizard__toggle-separator--Color);
229
250
  }
230
251
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
@@ -323,30 +344,26 @@
323
344
  }
324
345
  .pf-v6-c-wizard__nav-item :where(:hover) {
325
346
  --pf-v6-c-wizard__nav-link--Color: var({$wizard}__nav-link--hover--Color);
326
- --pf-v6-c-wizard__nav-link--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
347
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
327
348
  }
328
349
 
329
350
  .pf-v6-c-wizard__nav-link {
330
351
  position: relative;
331
- display: inline-block;
352
+ display: flex;
353
+ gap: var(--pf-v6-c-wizard__nav-link--Gap);
332
354
  width: 100%;
333
- padding-block-start: var(--pf-v6-c-wizard__nav-link--PaddingBlockStart);
334
- padding-block-end: var(--pf-v6-c-wizard__nav-link--PaddingBlockEnd);
335
- padding-inline-start: var(--pf-v6-c-wizard__nav-link--PaddingInlineStart);
336
- padding-inline-end: var(--pf-v6-c-wizard__nav-link--PaddingInlineEnd);
355
+ padding-inline: 0;
337
356
  color: var(--pf-v6-c-wizard__nav-link--Color);
338
357
  text-align: start;
339
358
  text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
340
359
  word-break: break-word;
341
- background-color: var(--pf-v6-c-wizard__nav-link--BackgroundColor);
360
+ counter-increment: wizard-nav-count;
361
+ background-color: transparent;
342
362
  border: none;
343
363
  border-radius: var(--pf-v6-c-wizard__nav-link--BorderRadius);
344
364
  }
345
365
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
346
- transform: translateX(var(--pf-v6-c-wizard__nav-link--before--TranslateX)) translateY(var(--pf-v6-c-wizard__nav-link--before--TranslateY));
347
- position: absolute;
348
- inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
349
- inset-inline-start: 0;
366
+ position: relative;
350
367
  display: inline-flex;
351
368
  align-items: center;
352
369
  justify-content: center;
@@ -358,30 +375,33 @@
358
375
  background-color: var(--pf-v6-c-wizard__nav-link--before--BackgroundColor);
359
376
  border-radius: var(--pf-v6-c-wizard__nav-link--before--BorderRadius);
360
377
  }
361
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
362
- transform: translateX(calc(var(--pf-v6-c-wizard__nav-link--before--TranslateX) * var(--pf-v6-global--inverse--multiplier))) translateY(var(--pf-v6-c-wizard__nav-link--before--TranslateY));
363
- }
364
378
 
365
379
  .pf-v6-c-wizard__nav-link::before {
380
+ inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
366
381
  content: counter(wizard-nav-count);
367
- counter-increment: wizard-nav-count;
368
382
  }
369
383
  .pf-v6-c-wizard__nav-link.pf-m-current {
370
384
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
371
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
385
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
372
386
  }
373
387
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
374
388
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
375
389
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
376
390
  }
377
391
 
392
+ .pf-v6-c-wizard__nav-link.pf-m-danger {
393
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
394
+ }
395
+ .pf-v6-c-wizard__nav-link.pf-m-danger::before {
396
+ display: none;
397
+ }
378
398
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
379
399
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
380
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
400
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
381
401
  }
382
402
  .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
383
403
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
384
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
404
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
385
405
  pointer-events: none;
386
406
  }
387
407
  .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
@@ -393,6 +413,25 @@
393
413
  flex-grow: 1;
394
414
  }
395
415
 
416
+ .pf-v6-c-wizard__nav-link-main {
417
+ display: flex;
418
+ justify-content: space-between;
419
+ padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
420
+ padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
421
+ padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
422
+ padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
423
+ background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
424
+ border: none;
425
+ border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
426
+ }
427
+
428
+ .pf-v6-c-wizard__nav-link-status-icon {
429
+ position: relative;
430
+ inset-block-start: var(--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart);
431
+ font-size: var(--pf-v6-c-wizard__nav-link-status-icon--FontSize);
432
+ color: var(--pf-v6-c-wizard__nav-link-status-icon--Color);
433
+ }
434
+
396
435
  .pf-v6-c-wizard__nav-link-toggle {
397
436
  padding-inline-start: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart);
398
437
  padding-inline-end: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd);
@@ -437,7 +476,7 @@
437
476
  padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
438
477
  padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
439
478
  background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
440
- border-block-start: var(--pf-v6-c-wizard__footer--BorderWidth) solid var(--pf-v6-c-wizard__footer--BorderColor);
479
+ border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
441
480
  }
442
481
  .pf-v6-c-wizard__footer > * {
443
482
  margin-block-end: var(--pf-v6-c-wizard__footer--child--MarginBlockEnd);
package/components/Wizard/wizard.scss CHANGED
@@ -32,21 +32,30 @@
32
32
  --#{$wizard}__description--Color: var(--pf-t--global--text--color--subtle);
33
33
 
34
34
  // Nav link
35
- --#{$wizard}__nav-link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
36
- --#{$wizard}__nav-link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
37
- --#{$wizard}__nav-link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
38
- --#{$wizard}__nav-link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
35
+ --#{$wizard}__nav-link--Gap: var(--pf-t--global--spacer--xs);
39
36
  --#{$wizard}__nav-link--Color: var(--pf-t--global--text--color--subtle);
40
37
  --#{$wizard}__nav-link--TextDecoration: none;
41
- --#{$wizard}__nav-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
42
- --#{$wizard}__nav-link--BorderRadius: var(--pf-t--global--border--radius--small);
38
+
39
+ // Nav link hover
43
40
  --#{$wizard}__nav-link--hover--Color: var(--pf-t--global--text--color--subtle);
44
41
  --#{$wizard}__nav-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
42
+
43
+ // Nav link current
45
44
  --#{$wizard}__nav-link--m-current--Color: var(--pf-t--global--text--color--regular);
46
45
  --#{$wizard}__nav-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
46
+
47
+ // Nav link disabled
47
48
  --#{$wizard}__nav-link--m-disabled--Color: var(--pf-t--global--text--color--disabled);
48
49
  --#{$wizard}__nav-link--m-disabled--BackgroundColor: transparent;
49
50
 
51
+ // Nav link main
52
+ --#{$wizard}__nav-link-main--PaddingBlockStart: var(--pf-t--global--spacer--sm);
53
+ --#{$wizard}__nav-link-main--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
54
+ --#{$wizard}__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
55
+ --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
56
+ --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
57
+ --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
58
+
50
59
  // Nav link toggle icon
51
60
  --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
52
61
  --#{$wizard}__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -56,44 +65,54 @@
56
65
  --#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
57
66
 
58
67
  // Nav link number
59
- --#{$wizard}__nav-link--before--Width: 1.5rem;
60
- --#{$wizard}__nav-link--before--Height: 1.5rem;
61
- --#{$wizard}__nav-link--before--InsetBlockStart: calc(calc(var(--#{$wizard}__nav-link--PaddingBlockStart) + var(--#{$wizard}__nav-link--PaddingBlockEnd) + 1em * var(--pf-t--global--font--line-height--body)) / 2); // half of the link button it's beside
68
+ --#{$wizard}__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
69
+ --#{$wizard}__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
70
+ --#{$wizard}__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
62
71
  --#{$wizard}__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
63
72
  --#{$wizard}__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
64
73
  --#{$wizard}__nav-link--before--Color: var(--pf-t--global--text--color--regular);
65
74
  --#{$wizard}__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
66
- --#{$wizard}__nav-link--before--TranslateX: calc(-100% - var(--pf-t--global--spacer--xs));
67
- --#{$wizard}__nav-link--before--TranslateY: -50%;
68
75
  --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
69
76
  --#{$wizard}__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
70
77
  --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
71
78
  --#{$wizard}__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
72
79
 
80
+ // Nav link status icon
81
+ --#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
82
+ --#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
83
+ --#{$wizard}__nav-link-status-icon--InsetBlockStart: 4px; // not spacer-based but needed to align
84
+ --#{$wizard}__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
85
+
73
86
  // Toggle
74
87
  --#{$wizard}__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
75
88
  --#{$wizard}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
76
89
  --#{$wizard}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
77
90
  --#{$wizard}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
78
91
  --#{$wizard}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
79
- --#{$wizard}__toggle--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--#{$wizard}__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
92
+ --#{$wizard}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
80
93
  --#{$wizard}__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
81
94
  --#{$wizard}__toggle--BorderBlockEndColor: var(--pf-t--global--border--color--default);
82
- --#{$wizard}--m-in-page__toggle--xl--PaddingInlineStart: calc(var(--pf-t--global--spacer--xl) + var(--#{$wizard}__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
83
95
 
84
96
  // Toggle number
85
- --#{$wizard}__toggle-num--before--InsetBlockStart: #{pf-size-prem(-2px)}; // TODO this should probably be calculated
97
+ --#{$wizard}__toggle-num--InsetBlockStart: 0;
86
98
 
87
99
  // Toggle list item
88
100
  --#{$wizard}__toggle-list-item--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
89
101
  --#{$wizard}__toggle-list-item--MarginBlockEnd: var(--pf-t--global--spacer--xs);
90
-
102
+ --#{$wizard}__toggle-list-item--Gap: var(--pf-t--global--spacer--sm);
103
+
104
+ // Toggle status icon
105
+ --#{$wizard}__nav-link-status-icon--LineHeight: 1;
106
+ --#{$wizard}__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
107
+ --#{$wizard}__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
108
+ --#{$wizard}__toggle-status-icon--InsetBlockStart: 2px; // not spacer-based but needed to align
109
+ --#{$wizard}__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
110
+
91
111
  // Toggle list
92
112
  --#{$wizard}__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
93
113
  --#{$wizard}__toggle-list--MarginBlockEnd: calc(var(--#{$wizard}__toggle-list-item--MarginBlockEnd) * -1);
94
114
 
95
115
  // Toggle separator
96
- --#{$wizard}__toggle-separator--MarginInlineStart: var(--pf-t--global--spacer--sm);
97
116
  --#{$wizard}__toggle-separator--Color: var(--pf-t--global--border--color--default);
98
117
 
99
118
  // Toggle icon
@@ -118,14 +137,14 @@
118
137
  --#{$wizard}__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
119
138
  --#{$wizard}__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
120
139
  --#{$wizard}__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
121
- --#{$wizard}__nav-list--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--#{$wizard}__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
122
- --#{$wizard}__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--md);
140
+ --#{$wizard}__nav-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
141
+ --#{$wizard}__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--lg);
123
142
  --#{$wizard}__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
124
143
 
125
144
  // Nav item
126
145
  --#{$wizard}__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
127
146
 
128
- // Outer wrap
147
+ // Outer wrap
129
148
  --#{$wizard}__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
130
149
  --#{$wizard}__outer-wrap--lg--PaddingInlineStart: var(--#{$wizard}__nav--Width);
131
150
  --#{$wizard}__outer-wrap--MinHeight: #{pf-size-prem(250px)};
@@ -146,8 +165,8 @@
146
165
  --#{$wizard}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
147
166
  --#{$wizard}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
148
167
  --#{$wizard}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
149
- --#{$wizard}__footer--BorderWidth: var(--pf-t--global--border--width--divider--default);
150
- --#{$wizard}__footer--BorderColor: var(--pf-t--global--border--color--default);
168
+ --#{$wizard}__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
169
+ --#{$wizard}__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
151
170
  --#{$wizard}__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
152
171
  --#{$wizard}__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
153
172
  --#{$wizard}__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--#{$wizard}__footer--child--MarginInlineEnd));
@@ -264,6 +283,9 @@
264
283
  }
265
284
 
266
285
  .#{$wizard}__toggle-list-item {
286
+ display: flex;
287
+ gap: var(--#{$wizard}__toggle-list-item--Gap);
288
+ align-items: baseline;
267
289
  margin-block-end: var(--#{$wizard}__toggle-list-item--MarginBlockEnd);
268
290
  text-align: start;
269
291
  word-break: break-word;
@@ -271,17 +293,29 @@
271
293
  &:not(:last-child) {
272
294
  margin-inline-end: var(--#{$wizard}__toggle-list-item--not-last-child--MarginInlineEnd);
273
295
  }
296
+
297
+ &.pf-m-danger {
298
+ --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
299
+ --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
300
+ }
274
301
  }
275
302
 
276
303
  .#{$wizard}__toggle-num {
277
- --#{$wizard}__nav-link--before--TranslateY: 0;
278
- --#{$wizard}__nav-link--before--InsetBlockStart: var(--#{$wizard}__toggle-num--before--InsetBlockStart);
304
+ position: relative;
305
+ inset-block-start: var(--#{$wizard}__toggle-num--InsetBlockStart);
306
+ }
307
+
308
+ .#{$wizard}__toggle-status-icon {
309
+ position: relative;
310
+ inset-block-start: var(--#{$wizard}__toggle-status-icon--InsetBlockStart);
311
+ font-size: var(--#{$wizard}__toggle-status-icon--FontSize);
312
+ line-height: var(--#{$wizard}__nav-link-status-icon--LineHeight);
313
+ color: var(--#{$wizard}__toggle-status-icon--Color);
279
314
  }
280
315
 
281
316
  .#{$wizard}__toggle-separator {
282
317
  @include pf-v6-mirror-inline-on-rtl;
283
318
 
284
- margin-inline-start: var(--#{$wizard}__toggle-separator--MarginInlineStart);
285
319
  color: var(--#{$wizard}__toggle-separator--Color);
286
320
  }
287
321
 
@@ -392,38 +426,29 @@
392
426
 
393
427
  :where(:hover) {
394
428
  --#{$wizard}__nav-link--Color: var({$wizard}__nav-link--hover--Color);
395
- --#{$wizard}__nav-link--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
429
+ --#{$wizard}__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
396
430
  }
397
431
  }
398
432
 
399
433
  .#{$wizard}__nav-link {
400
434
  position: relative;
401
- display: inline-block;
435
+ display: flex;
436
+ gap: var(--#{$wizard}__nav-link--Gap);
402
437
  width: 100%;
403
- padding-block-start: var(--#{$wizard}__nav-link--PaddingBlockStart);
404
- padding-block-end: var(--#{$wizard}__nav-link--PaddingBlockEnd);
405
- padding-inline-start: var(--#{$wizard}__nav-link--PaddingInlineStart);
406
- padding-inline-end: var(--#{$wizard}__nav-link--PaddingInlineEnd);
438
+ padding-inline: 0;
407
439
  color: var(--#{$wizard}__nav-link--Color);
408
440
  text-align: start; // needed for when the item is a button
409
441
  text-decoration: var(--#{$wizard}__nav-link--TextDecoration);
410
442
  word-break: break-word;
411
- background-color: var(--#{$wizard}__nav-link--BackgroundColor);
443
+ counter-increment: wizard-nav-count;
444
+ background-color: transparent;
412
445
  border: none;
413
446
  border-radius: var(--#{$wizard}__nav-link--BorderRadius);
414
447
 
415
448
  // Common step number styles
416
449
  @at-root .#{$wizard}__toggle-num,
417
450
  &::before {
418
- @include pf-v6-bidirectional-style(
419
- $prop: transform,
420
- $ltr-val: translateX(var(--#{$wizard}__nav-link--before--TranslateX)) translateY(var(--#{$wizard}__nav-link--before--TranslateY)),
421
- $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))}) translateY(var(--#{$wizard}__nav-link--before--TranslateY))
422
- );
423
-
424
- position: absolute;
425
- inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart);
426
- inset-inline-start: 0;
451
+ position: relative;
427
452
  display: inline-flex;
428
453
  align-items: center;
429
454
  justify-content: center;
@@ -438,13 +463,13 @@
438
463
 
439
464
  // Nav step number
440
465
  &::before {
466
+ inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
441
467
  content: counter(wizard-nav-count);
442
- counter-increment: wizard-nav-count;
443
- }
468
+ }
444
469
 
445
470
  &.pf-m-current {
446
471
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-current--Color);
447
- --#{$wizard}__nav-link--BackgroundColor: var(--#{$wizard}__nav-link--m-current--BackgroundColor);
472
+ --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--m-current--BackgroundColor);
448
473
 
449
474
  @at-root .#{$wizard}__toggle-num,
450
475
  &::before {
@@ -453,16 +478,24 @@
453
478
  }
454
479
  }
455
480
 
481
+ &.pf-m-danger {
482
+ --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
483
+
484
+ &::before {
485
+ display: none;
486
+ }
487
+ }
488
+
456
489
  &:where(:hover, :focus) {
457
490
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
458
- --#{$wizard}__nav-link--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
491
+ --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
459
492
  }
460
493
 
461
494
  // override the button background/color for disabled nav links
462
495
  &:disabled,
463
496
  &.pf-m-disabled {
464
497
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-disabled--Color);
465
- --#{$wizard}__nav-link--BackgroundColor: var(--#{$wizard}__nav-link--m-disabled--BackgroundColor);
498
+ --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--m-disabled--BackgroundColor);
466
499
 
467
500
  pointer-events: none;
468
501
 
@@ -477,6 +510,25 @@
477
510
  flex-grow: 1;
478
511
  }
479
512
 
513
+ .#{$wizard}__nav-link-main {
514
+ display: flex;
515
+ justify-content: space-between;
516
+ padding-block-start: var(--#{$wizard}__nav-link-main--PaddingBlockStart);
517
+ padding-block-end: var(--#{$wizard}__nav-link-main--PaddingBlockEnd);
518
+ padding-inline-start: var(--#{$wizard}__nav-link-main--PaddingInlineStart);
519
+ padding-inline-end: var(--#{$wizard}__nav-link-main--PaddingInlineEnd);
520
+ background-color: var(--#{$wizard}__nav-link-main--BackgroundColor);
521
+ border: none;
522
+ border-radius: var(--#{$wizard}__nav-link-main--BorderRadius);
523
+ }
524
+
525
+ .#{$wizard}__nav-link-status-icon {
526
+ position: relative;
527
+ inset-block-start: var(--#{$wizard}__nav-link-status-icon--InsetBlockStart);
528
+ font-size: var(--#{$wizard}__nav-link-status-icon--FontSize);
529
+ color: var(--#{$wizard}__nav-link-status-icon--Color);
530
+ }
531
+
480
532
  .#{$wizard}__nav-link-toggle {
481
533
  padding-inline-start: var(--#{$wizard}__nav-link-toggle--PaddingInlineStart);
482
534
  padding-inline-end: var(--#{$wizard}__nav-link-toggle--PaddingInlineEnd);
@@ -521,7 +573,7 @@
521
573
  padding-inline-start: var(--#{$wizard}__footer--PaddingInlineStart);
522
574
  padding-inline-end: var(--#{$wizard}__footer--PaddingInlineEnd);
523
575
  background-color: var(--#{$wizard}__footer--BackgroundColor);
524
- border-block-start: var(--#{$wizard}__footer--BorderWidth) solid var(--#{$wizard}__footer--BorderColor);
576
+ border-block-start: var(--#{$wizard}__footer--BorderBlockStartWidth) solid var(--#{$wizard}__footer--BorderBlockStartColor);
525
577
 
526
578
  > * {
527
579
  margin-block-end: var(--#{$wizard}__footer--child--MarginBlockEnd);
@@ -536,6 +588,4 @@
536
588
  margin-inline-start: var(--#{$wizard}__footer-cancel--MarginInlineStart);
537
589
  }
538
590
 
539
- // stylelint-disable no-invalid-position-at-import-rule
540
-
541
591