@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

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 (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +42 -4
  59. package/components/Menu/menu.scss +39 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +14 -1
  71. package/components/Panel/panel.scss +14 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1404 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2851 -437
  165. package/patternfly.css +2853 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/components/Wizard/wizard.css CHANGED
@@ -36,6 +36,10 @@
36
36
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
37
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
38
38
  --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
39
+ --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
40
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
41
+ --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
42
+ --pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
39
43
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
40
44
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
41
45
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
@@ -47,15 +51,20 @@
47
51
  --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
48
52
  --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
49
53
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
54
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
55
+ --pf-v6-c-wizard__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular);
50
56
  --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
51
57
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
52
58
  --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
53
59
  --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
54
60
  --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
61
+ --pf-v6-c-wizard__nav-link--m-current--before--BorderColor: transparent;
55
62
  --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
56
63
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
64
+ --pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor: transparent;
57
65
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
58
66
  --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
67
+ --pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
59
68
  --pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
60
69
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
61
70
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -74,6 +83,7 @@
74
83
  --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
75
84
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
76
85
  --pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
86
+ --pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
77
87
  --pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
78
88
  --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
79
89
  --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -234,6 +244,9 @@
234
244
  .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
235
245
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
236
246
  }
247
+ .pf-v6-c-wizard__toggle-list-item.pf-m-warning {
248
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color);
249
+ }
237
250
  .pf-v6-c-wizard__toggle-list-item.pf-m-success {
238
251
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
239
252
  }
@@ -367,6 +380,7 @@
367
380
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
368
381
  position: relative;
369
382
  display: inline-flex;
383
+ flex-shrink: 0;
370
384
  align-items: center;
371
385
  justify-content: center;
372
386
  width: var(--pf-v6-c-wizard__nav-link--before--Width);
@@ -381,28 +395,35 @@
381
395
  .pf-v6-c-wizard__nav-link::before {
382
396
  inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
383
397
  content: counter(wizard-nav-count);
398
+ border: var(--pf-v6-c-wizard__nav-link--before--BorderWidth) solid var(--pf-v6-c-wizard__nav-link--before--BorderColor);
384
399
  }
385
400
  .pf-v6-c-wizard__nav-link.pf-m-current {
386
401
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
387
402
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
403
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth);
388
404
  }
389
405
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
390
406
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
391
407
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
408
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BorderColor);
392
409
  }
393
410
 
394
- .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
411
+ .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
395
412
  display: none;
396
413
  }
397
414
  .pf-v6-c-wizard__nav-link.pf-m-success {
398
415
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
399
416
  }
417
+ .pf-v6-c-wizard__nav-link.pf-m-warning {
418
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color);
419
+ }
400
420
  .pf-v6-c-wizard__nav-link.pf-m-danger {
401
421
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
402
422
  }
403
423
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
404
424
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
405
425
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
426
+ --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth);
406
427
  }
407
428
  .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
408
429
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
@@ -412,23 +433,29 @@
412
433
  .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
413
434
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor);
414
435
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--before--Color);
415
- }
416
-
417
- .pf-v6-c-wizard__nav-link-text {
418
- flex-grow: 1;
436
+ --pf-v6-c-wizard__nav-link--before--BorderColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor);
419
437
  }
420
438
 
421
439
  .pf-v6-c-wizard__nav-link-main {
440
+ position: relative;
422
441
  display: flex;
442
+ flex-grow: 1;
423
443
  justify-content: space-between;
424
444
  padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
425
445
  padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
426
446
  padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
427
447
  padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
428
448
  background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
429
- border: none;
430
449
  border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
431
450
  }
451
+ .pf-v6-c-wizard__nav-link-main::after {
452
+ position: absolute;
453
+ inset: 0;
454
+ pointer-events: none;
455
+ content: "";
456
+ border: var(--pf-v6-c-wizard__nav-link-main--BorderWidth) solid var(--pf-v6-c-wizard__nav-link-main--BorderColor);
457
+ border-radius: inherit;
458
+ }
432
459
 
433
460
  .pf-v6-c-wizard__nav-link-status-icon {
434
461
  position: relative;
package/components/Wizard/wizard.scss CHANGED
@@ -58,6 +58,10 @@
58
58
  --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
59
59
  --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
60
60
  --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
61
+ --#{$wizard}__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
62
+ --#{$wizard}__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
63
+ --#{$wizard}__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
64
+ --#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
61
65
 
62
66
  // Nav link toggle icon
63
67
  --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -73,17 +77,22 @@
73
77
  --#{$wizard}__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
74
78
  --#{$wizard}__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
75
79
  --#{$wizard}__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
80
+ --#{$wizard}__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
81
+ --#{$wizard}__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular);
76
82
  --#{$wizard}__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
77
83
  --#{$wizard}__nav-link--before--Color: var(--pf-t--global--text--color--regular);
78
84
  --#{$wizard}__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
79
85
  --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
80
86
  --#{$wizard}__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
87
+ --#{$wizard}__nav-link--m-current--before--BorderColor: transparent;
81
88
  --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
82
89
  --#{$wizard}__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
90
+ --#{$wizard}__nav-link--m-disabled--before--BorderColor: transparent;
83
91
 
84
92
  // Nav link status icon
85
93
  --#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
86
94
  --#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
95
+ --#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
87
96
  --#{$wizard}__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
88
97
  --#{$wizard}__nav-link-status-icon--InsetBlockStart: 4px; // not spacer-based but needed to align
89
98
  --#{$wizard}__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -110,6 +119,7 @@
110
119
  --#{$wizard}__nav-link-status-icon--LineHeight: 1;
111
120
  --#{$wizard}__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
112
121
  --#{$wizard}__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
122
+ --#{$wizard}__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
113
123
  --#{$wizard}__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
114
124
  --#{$wizard}__toggle-status-icon--InsetBlockStart: 2px; // not spacer-based but needed to align
115
125
  --#{$wizard}__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -302,6 +312,10 @@
302
312
  --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-danger__status-icon--Color);
303
313
  }
304
314
 
315
+ &.pf-m-warning {
316
+ --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-warning__status-icon--Color);
317
+ }
318
+
305
319
  &.pf-m-success {
306
320
  --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-success__status-icon--Color);
307
321
  }
@@ -452,6 +466,7 @@
452
466
  &::before {
453
467
  position: relative;
454
468
  display: inline-flex;
469
+ flex-shrink: 0;
455
470
  align-items: center;
456
471
  justify-content: center;
457
472
  width: var(--#{$wizard}__nav-link--before--Width);
@@ -465,22 +480,25 @@
465
480
 
466
481
  // Nav step number
467
482
  &::before {
468
- inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
483
+ inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
469
484
  content: counter(wizard-nav-count);
470
- }
485
+ border: var(--#{$wizard}__nav-link--before--BorderWidth) solid var(--#{$wizard}__nav-link--before--BorderColor);
486
+ }
471
487
 
472
488
  &.pf-m-current {
473
489
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-current--Color);
474
490
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--m-current--BackgroundColor);
491
+ --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth);
475
492
 
476
493
  @at-root .#{$wizard}__toggle-num,
477
494
  &::before {
478
495
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-current--before--BackgroundColor);
479
496
  --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-current--before--Color);
497
+ --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-current--before--BorderColor);
480
498
  }
481
499
  }
482
500
 
483
- &:is(.pf-m-success, .pf-m-danger) {
501
+ &:is(.pf-m-success, .pf-m-warning, .pf-m-danger) {
484
502
  &::before {
485
503
  display: none;
486
504
  }
@@ -490,6 +508,10 @@
490
508
  --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-success__nav-link-status-icon--Color);
491
509
  }
492
510
 
511
+ &.pf-m-warning {
512
+ --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color);
513
+ }
514
+
493
515
  &.pf-m-danger {
494
516
  --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
495
517
  }
@@ -497,6 +519,7 @@
497
519
  &:where(:hover, :focus) {
498
520
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
499
521
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
522
+ --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--hover__nav-link-main--BorderWidth);
500
523
  }
501
524
 
502
525
  // override the button background/color for disabled nav links
@@ -510,24 +533,31 @@
510
533
  &::before {
511
534
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-disabled--before--BackgroundColor);
512
535
  --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-disabled--before--Color);
536
+ --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-disabled--before--BorderColor);
513
537
  }
514
538
  }
515
539
  }
516
540
 
517
- .#{$wizard}__nav-link-text {
518
- flex-grow: 1;
519
- }
520
-
521
541
  .#{$wizard}__nav-link-main {
542
+ position: relative;
522
543
  display: flex;
544
+ flex-grow: 1;
523
545
  justify-content: space-between;
524
546
  padding-block-start: var(--#{$wizard}__nav-link-main--PaddingBlockStart);
525
547
  padding-block-end: var(--#{$wizard}__nav-link-main--PaddingBlockEnd);
526
548
  padding-inline-start: var(--#{$wizard}__nav-link-main--PaddingInlineStart);
527
549
  padding-inline-end: var(--#{$wizard}__nav-link-main--PaddingInlineEnd);
528
550
  background-color: var(--#{$wizard}__nav-link-main--BackgroundColor);
529
- border: none;
530
551
  border-radius: var(--#{$wizard}__nav-link-main--BorderRadius);
552
+
553
+ &::after {
554
+ position: absolute;
555
+ inset: 0;
556
+ pointer-events: none;
557
+ content: "";
558
+ border: var(--#{$wizard}__nav-link-main--BorderWidth) solid var(--#{$wizard}__nav-link-main--BorderColor);
559
+ border-radius: inherit;
560
+ }
531
561
  }
532
562
 
533
563
  .#{$wizard}__nav-link-status-icon {