@patternfly/react-styles 6.3.0-prerelease.9 → 6.3.1-prerelease.0

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 (39) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/css/components/Accordion/accordion.css +40 -15
  3. package/css/components/Alert/alert-group.css +15 -2
  4. package/css/components/Badge/badge.css +2 -0
  5. package/css/components/Banner/banner.css +4 -0
  6. package/css/components/Button/button.css +35 -5
  7. package/css/components/Card/card.css +5 -4
  8. package/css/components/CodeBlock/code-block.css +3 -0
  9. package/css/components/CodeEditor/code-editor.css +8 -3
  10. package/css/components/Drawer/drawer.css +44 -41
  11. package/css/components/DualListSelector/dual-list-selector.css +19 -1
  12. package/css/components/Label/label.css +20 -11
  13. package/css/components/Login/login.css +3 -0
  14. package/css/components/Menu/menu.css +11 -0
  15. package/css/components/MenuToggle/menu-toggle.css +12 -5
  16. package/css/components/ModalBox/modal-box.css +3 -0
  17. package/css/components/Nav/nav.css +17 -0
  18. package/css/components/Page/page.css +62 -23
  19. package/css/components/Panel/panel.css +7 -1
  20. package/css/components/Popover/popover.css +4 -0
  21. package/css/components/Progress/progress.css +10 -0
  22. package/css/components/SimpleList/simple-list.css +15 -0
  23. package/css/components/Table/table-grid.css +30 -0
  24. package/css/components/Table/table-grid.d.ts +2 -1
  25. package/css/components/Table/table-grid.js +2 -1
  26. package/css/components/Table/table-grid.mjs +2 -1
  27. package/css/components/Table/table.css +59 -15
  28. package/css/components/Tabs/tabs.css +7 -0
  29. package/css/components/TextInputGroup/text-input-group.css +7 -0
  30. package/css/components/TreeView/tree-view.css +15 -0
  31. package/css/components/Wizard/wizard.css +33 -6
  32. package/css/components/Wizard/wizard.d.ts +1 -1
  33. package/css/components/Wizard/wizard.js +1 -1
  34. package/css/components/Wizard/wizard.mjs +1 -1
  35. package/css/components/_index.css +490 -132
  36. package/css/components/_index.d.ts +0 -1
  37. package/css/components/_index.js +0 -1
  38. package/css/components/_index.mjs +0 -1
  39. package/package.json +3 -3
@@ -10,7 +10,8 @@
10
10
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
11
11
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
12
12
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
13
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
14
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
14
15
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
15
16
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
16
17
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -60,6 +61,9 @@
60
61
  --pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular);
61
62
  --pf-v6-c-table__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
62
63
  --pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
64
+ --pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
65
+ --pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
66
+ --pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
63
67
  --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
64
68
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
65
69
  --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -89,6 +93,8 @@
89
93
  --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
90
94
  --pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
91
95
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
96
+ --pf-v6-c-table__expandable-row-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
97
+ --pf-v6-c-table__expandable-row-content--BorderWidth: 0;
92
98
  --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
93
99
  --pf-v6-c-table__control-row--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
94
100
  --pf-v6-c-table__control-row__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -110,10 +116,12 @@
110
116
  --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
111
117
  --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
112
118
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
119
+ --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
113
120
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
114
121
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
115
122
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
116
123
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
124
+ --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
117
125
  --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
118
126
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
119
127
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -422,8 +430,11 @@
422
430
  .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
423
431
  --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
424
432
  }
433
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row {
434
+ border-block-end: 0;
435
+ }
425
436
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
426
- display: revert;
437
+ display: var(--pf-v6-c-table__expandable-row--Display, revert);
427
438
  visibility: hidden;
428
439
  opacity: var(--pf-v6-c-table__expandable-row--Opacity);
429
440
  transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
@@ -433,7 +444,7 @@
433
444
  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
434
445
  }
435
446
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
436
- display: revert;
447
+ display: var(--pf-v6-c-table__expandable-row--Display, revert);
437
448
  }
438
449
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
439
450
  visibility: visible;
@@ -455,6 +466,9 @@
455
466
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
456
467
  max-height: 0;
457
468
  }
469
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
470
+ border-block-end: 0;
471
+ }
458
472
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row {
459
473
  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s;
460
474
  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
@@ -519,6 +533,7 @@
519
533
  }
520
534
 
521
535
  .pf-v6-c-table__button {
536
+ position: relative;
522
537
  width: auto;
523
538
  padding-block-start: var(--pf-v6-c-table__button--PaddingBlockStart);
524
539
  padding-block-end: var(--pf-v6-c-table__button--PaddingBlockEnd);
@@ -537,6 +552,14 @@
537
552
  border-radius: var(--pf-v6-c-table__button--BorderRadius);
538
553
  outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
539
554
  }
555
+ .pf-v6-c-table__button::after {
556
+ position: absolute;
557
+ inset: 0;
558
+ pointer-events: none;
559
+ content: "";
560
+ border: var(--pf-v6-c-table__button--BorderWidth) solid var(--pf-v6-c-table__button--BorderColor);
561
+ border-radius: inherit;
562
+ }
540
563
  .pf-v6-c-table .pf-v6-c-table .pf-v6-c-table__button {
541
564
  margin-block-end: 0;
542
565
  }
@@ -607,6 +630,12 @@
607
630
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
608
631
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
609
632
  }
633
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
634
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
635
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
636
+ line-height: 1lh;
637
+ }
638
+
610
639
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
611
640
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
612
641
  }
@@ -706,6 +735,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
706
735
  content: "";
707
736
  border: 0;
708
737
  border-block-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth) solid var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor);
738
+ border-radius: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius);
709
739
  }
710
740
  .pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within {
711
741
  --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor);
@@ -729,6 +759,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
729
759
  align-self: last baseline;
730
760
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
731
761
  }
762
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
763
+ line-height: 1lh;
764
+ }
732
765
 
733
766
  .pf-v6-c-table__sort {
734
767
  vertical-align: bottom;
@@ -737,6 +770,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
737
770
  --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort__button--hover__sort-indicator--Color);
738
771
  --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort__button--hover__text--Color);
739
772
  --pf-v6-c-table__button--BackgroundColor: var(--pf-v6-c-table__button--hover--BackgroundColor);
773
+ --pf-v6-c-table__button--BorderWidth: var(--pf-v6-c-table__button--hover--BorderWidth);
740
774
  }
741
775
  .pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text {
742
776
  color: var(--pf-v6-c-table__sort__button__text--Color);
@@ -766,37 +800,46 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
766
800
  position: relative;
767
801
  border-block-end: 0 solid transparent;
768
802
  }
769
- .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
770
- .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
803
+ :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
804
+ :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
771
805
  padding-block-start: 0;
772
806
  }
773
- .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
774
- .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
807
+ .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) {
775
808
  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
776
809
  }
777
- .pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
778
- .pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding {
810
+ .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
811
+ .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
779
812
  padding-block-start: 0;
780
813
  padding-block-end: 0;
781
814
  padding-inline-start: 0;
782
815
  padding-inline-end: 0;
783
816
  }
784
- .pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
785
- .pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding .pf-v6-c-table__expandable-row-content {
817
+ .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
818
+ .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
786
819
  padding: 0;
787
820
  border-radius: 0;
788
821
  }
789
822
  .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
823
+ position: relative;
790
824
  padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart);
791
825
  padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBlockEnd);
792
826
  padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingInlineStart);
793
827
  padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingInlineEnd);
794
828
  background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
829
+ border: 0;
795
830
  border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
796
831
  }
797
832
  .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content.pf-m-no-background {
798
833
  background-color: transparent;
799
834
  }
835
+ .pf-v6-c-table__expandable-row .pf-v6-c-table__td:not(.pf-m-no-padding) > .pf-v6-c-table__expandable-row-content::after {
836
+ position: absolute;
837
+ inset: 0;
838
+ pointer-events: none;
839
+ content: "";
840
+ border: var(--pf-v6-c-table__expandable-row-content--BorderWidth) solid var(--pf-v6-c-table__expandable-row-content--BorderColor);
841
+ border-radius: inherit;
842
+ }
800
843
  .pf-v6-c-table__expandable-row.pf-m-expanded {
801
844
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
802
845
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
@@ -808,10 +851,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
808
851
  border-block-end: 0;
809
852
  }
810
853
 
811
- .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
812
- border-block-end: 0;
813
- }
814
-
815
854
  .pf-v6-c-table.pf-m-compact {
816
855
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
817
856
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
@@ -844,6 +883,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
844
883
 
845
884
  .pf-v6-c-table__thead {
846
885
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
886
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
847
887
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
848
888
  vertical-align: bottom;
849
889
  }
@@ -857,6 +897,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
857
897
  vertical-align: top;
858
898
  }
859
899
  .pf-v6-c-table__tbody .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded {
900
+ --pf-v6-c-table__expandable-row-content--BorderWidth: var(--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth);
860
901
  background-color: var(--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor);
861
902
  }
862
903
 
@@ -871,6 +912,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
871
912
  }
872
913
  .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
873
914
  background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
915
+ border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
916
+ }
917
+ .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded {
874
918
  border-block-end: 0;
875
919
  }
876
920
 
@@ -46,6 +46,10 @@
46
46
  --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
47
47
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
48
48
  --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
49
+ --pf-v6-c-tabs__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
50
+ --pf-v6-c-tabs__link--BorderColor: transparent;
51
+ --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
52
+ --pf-v6-c-tabs__link--disabled--BorderColor: transparent;
49
53
  --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
50
54
  --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
51
55
  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -545,6 +549,7 @@
545
549
  color: var(--pf-v6-c-tabs__link--Color);
546
550
  text-decoration-line: none;
547
551
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
552
+ border: var(--pf-v6-c-tabs__link--BorderWidth) solid var(--pf-v6-c-tabs__link--BorderColor);
548
553
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
549
554
  transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
550
555
  }
@@ -578,6 +583,7 @@
578
583
 
579
584
  .pf-v6-c-tabs__link:where(:hover, :focus) {
580
585
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--hover--BackgroundColor);
586
+ --pf-v6-c-tabs__link--BorderColor: var(--pf-v6-c-tabs__link--hover--BorderColor);
581
587
  }
582
588
  .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled {
583
589
  pointer-events: none;
@@ -592,6 +598,7 @@
592
598
 
593
599
  .pf-v6-c-tabs__link:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled) {
594
600
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--disabled--BackgroundColor);
601
+ --pf-v6-c-tabs__link--BorderColor: var(--pf-v6-c-tabs__link--disabled--BorderColor);
595
602
  }
596
603
  .pf-v6-c-tabs__item.pf-m-action.pf-m-disabled {
597
604
  --pf-v6-c-tabs__link--BackgroundColor: transparent;
@@ -31,6 +31,7 @@
31
31
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
32
32
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
33
33
  --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
34
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
34
35
  --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
35
36
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
36
37
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
@@ -77,6 +78,8 @@
77
78
  }
78
79
  .pf-v6-c-text-input-group.pf-m-disabled {
79
80
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
81
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
82
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
80
83
  --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
81
84
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
82
85
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
@@ -125,6 +128,9 @@
125
128
  .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
126
129
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
127
130
  }
131
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
132
+ --pf-v6-c-text-input-group__text--Position: relative;
133
+ }
128
134
  .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
129
135
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
130
136
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
@@ -187,6 +193,7 @@
187
193
  padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
188
194
  padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
189
195
  padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
196
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
190
197
  background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
191
198
  border: 0;
192
199
  outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
@@ -8,6 +8,11 @@
8
8
  --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view__node--indent--base);
9
9
  --pf-v6-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
10
10
  --pf-v6-c-tree-view__node--BackgroundColor: transparent;
11
+ --pf-v6-c-tree-view__node--BorderRadius: var(--pf-v6-c-tree-view__content--BorderRadius);
12
+ --pf-v6-c-tree-view__node--BorderColor: var(--pf-t--global--border--color--high-contrast);
13
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
14
+ --pf-v6-c-tree-view__node--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
15
+ --pf-v6-c-tree-view__node--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
11
16
  --pf-v6-c-tree-view__node--m-current--Color: var(--pf-t--global--text--color--regular);
12
17
  --pf-v6-c-tree-view__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
13
18
  --pf-v6-c-tree-view__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -293,8 +298,17 @@
293
298
  color: var(--pf-v6-c-tree-view__node--Color);
294
299
  background-color: var(--pf-v6-c-tree-view__node--BackgroundColor);
295
300
  }
301
+ .pf-v6-c-tree-view__node::after {
302
+ position: absolute;
303
+ inset: 0;
304
+ pointer-events: none;
305
+ content: "";
306
+ border: var(--pf-v6-c-tree-view__node--BorderWidth) solid var(--pf-v6-c-tree-view__node--BorderColor);
307
+ border-radius: var(--pf-v6-c-tree-view__node--BorderRadius);
308
+ }
296
309
  .pf-v6-c-tree-view__node.pf-m-current {
297
310
  --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-current--Color);
311
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-v6-c-tree-view__node--m-current--BorderWidth);
298
312
  }
299
313
  .pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
300
314
  margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
@@ -392,6 +406,7 @@ label.pf-v6-c-tree-view__node-text {
392
406
 
393
407
  .pf-v6-c-tree-view__content:hover,
394
408
  .pf-v6-c-tree-view__content:focus-within {
409
+ --pf-v6-c-tree-view__node--BorderWidth: var(--pf-v6-c-tree-view__node--hover--BorderWidth);
395
410
  background-color: var(--pf-v6-c-tree-view__node--hover--BackgroundColor);
396
411
  }
397
412
 
@@ -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;
@@ -7,6 +7,7 @@ declare const _default: {
7
7
  "finished": "pf-m-finished",
8
8
  "expanded": "pf-m-expanded",
9
9
  "danger": "pf-m-danger",
10
+ "warning": "pf-m-warning",
10
11
  "success": "pf-m-success",
11
12
  "current": "pf-m-current",
12
13
  "expandable": "pf-m-expandable",
@@ -26,7 +27,6 @@ declare const _default: {
26
27
  "wizardNavLink": "pf-v6-c-wizard__nav-link",
27
28
  "wizardNavLinkMain": "pf-v6-c-wizard__nav-link-main",
28
29
  "wizardNavLinkStatusIcon": "pf-v6-c-wizard__nav-link-status-icon",
29
- "wizardNavLinkText": "pf-v6-c-wizard__nav-link-text",
30
30
  "wizardNavLinkToggle": "pf-v6-c-wizard__nav-link-toggle",
31
31
  "wizardNavLinkToggleIcon": "pf-v6-c-wizard__nav-link-toggle-icon",
32
32
  "wizardNavList": "pf-v6-c-wizard__nav-list",
@@ -9,6 +9,7 @@ exports.default = {
9
9
  "finished": "pf-m-finished",
10
10
  "expanded": "pf-m-expanded",
11
11
  "danger": "pf-m-danger",
12
+ "warning": "pf-m-warning",
12
13
  "success": "pf-m-success",
13
14
  "current": "pf-m-current",
14
15
  "expandable": "pf-m-expandable",
@@ -28,7 +29,6 @@ exports.default = {
28
29
  "wizardNavLink": "pf-v6-c-wizard__nav-link",
29
30
  "wizardNavLinkMain": "pf-v6-c-wizard__nav-link-main",
30
31
  "wizardNavLinkStatusIcon": "pf-v6-c-wizard__nav-link-status-icon",
31
- "wizardNavLinkText": "pf-v6-c-wizard__nav-link-text",
32
32
  "wizardNavLinkToggle": "pf-v6-c-wizard__nav-link-toggle",
33
33
  "wizardNavLinkToggleIcon": "pf-v6-c-wizard__nav-link-toggle-icon",
34
34
  "wizardNavList": "pf-v6-c-wizard__nav-list",
@@ -7,6 +7,7 @@ export default {
7
7
  "finished": "pf-m-finished",
8
8
  "expanded": "pf-m-expanded",
9
9
  "danger": "pf-m-danger",
10
+ "warning": "pf-m-warning",
10
11
  "success": "pf-m-success",
11
12
  "current": "pf-m-current",
12
13
  "expandable": "pf-m-expandable",
@@ -26,7 +27,6 @@ export default {
26
27
  "wizardNavLink": "pf-v6-c-wizard__nav-link",
27
28
  "wizardNavLinkMain": "pf-v6-c-wizard__nav-link-main",
28
29
  "wizardNavLinkStatusIcon": "pf-v6-c-wizard__nav-link-status-icon",
29
- "wizardNavLinkText": "pf-v6-c-wizard__nav-link-text",
30
30
  "wizardNavLinkToggle": "pf-v6-c-wizard__nav-link-toggle",
31
31
  "wizardNavLinkToggleIcon": "pf-v6-c-wizard__nav-link-toggle-icon",
32
32
  "wizardNavList": "pf-v6-c-wizard__nav-list",