@patternfly/react-templates 6.3.1-prerelease.16 → 6.3.1-prerelease.17

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.
@@ -721,6 +721,404 @@
721
721
  display: none;
722
722
  }
723
723
 
724
+ .pf-v6-c-check {
725
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
726
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
727
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
728
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
729
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
730
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
731
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
732
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
733
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
734
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
735
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
736
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
737
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
738
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
739
+ }
740
+
741
+ .pf-v6-c-check {
742
+ display: grid;
743
+ grid-template-columns: auto 1fr;
744
+ grid-gap: var(--pf-v6-c-check--GridGap);
745
+ accent-color: var(--pf-v6-c-check--AccentColor);
746
+ }
747
+
748
+ .pf-v6-c-check.pf-m-standalone {
749
+ display: inline-grid;
750
+ grid-template-columns: auto;
751
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
752
+ }
753
+
754
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
755
+ align-self: center;
756
+ transform: none;
757
+ }
758
+
759
+ .pf-v6-c-check__input {
760
+ align-self: start;
761
+ font-size: var(--pf-v6-c-check__label--FontSize);
762
+ line-height: var(--pf-v6-c-check__label--LineHeight);
763
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
764
+ }
765
+
766
+ .pf-v6-c-check__label {
767
+ font-size: var(--pf-v6-c-check__label--FontSize);
768
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
769
+ line-height: var(--pf-v6-c-check__label--LineHeight);
770
+ color: var(--pf-v6-c-check__label--Color);
771
+ }
772
+
773
+ .pf-v6-c-check__description {
774
+ grid-column: 2;
775
+ font-size: var(--pf-v6-c-check__description--FontSize);
776
+ color: var(--pf-v6-c-check__description--Color);
777
+ }
778
+
779
+ .pf-v6-c-check__body {
780
+ grid-column: 2;
781
+ }
782
+
783
+ .pf-v6-c-check__label,
784
+ .pf-v6-c-check__input {
785
+ justify-self: start;
786
+ }
787
+
788
+ label.pf-v6-c-check, .pf-v6-c-check__label,
789
+ .pf-v6-c-check__input {
790
+ cursor: pointer;
791
+ }
792
+
793
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
794
+ .pf-v6-c-check__input:disabled,
795
+ .pf-v6-c-check__input.pf-m-disabled {
796
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
797
+ cursor: not-allowed;
798
+ }
799
+
800
+ .pf-v6-c-check__label-required {
801
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
802
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
803
+ color: var(--pf-v6-c-check__label-required--Color);
804
+ }
805
+
806
+ .pf-v6-c-divider {
807
+ --pf-v6-c-divider--Display: flex;
808
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
809
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
810
+ --pf-v6-c-divider--before--FlexBasis: 100%;
811
+ }
812
+
813
+ .pf-v6-c-divider {
814
+ flex-direction: row;
815
+ width: 100%;
816
+ height: var(--pf-v6-c-divider--Size);
817
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
818
+ --pf-v6-hidden-visible--hidden--Display: none;
819
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
820
+ display: var(--pf-v6-hidden-visible--Display);
821
+ flex-shrink: 0;
822
+ align-items: stretch;
823
+ align-self: stretch;
824
+ justify-content: center;
825
+ border: 0;
826
+ }
827
+
828
+ .pf-v6-c-divider.pf-m-hidden {
829
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
830
+ }
831
+
832
+ @media screen and (min-width: 36rem) {
833
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
834
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
835
+ }
836
+ .pf-v6-c-divider.pf-m-visible-on-sm {
837
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
838
+ }
839
+ }
840
+ @media screen and (min-width: 48rem) {
841
+ .pf-v6-c-divider.pf-m-hidden-on-md {
842
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
843
+ }
844
+ .pf-v6-c-divider.pf-m-visible-on-md {
845
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
846
+ }
847
+ }
848
+ @media screen and (min-width: 62rem) {
849
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
850
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
851
+ }
852
+ .pf-v6-c-divider.pf-m-visible-on-lg {
853
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
854
+ }
855
+ }
856
+ @media screen and (min-width: 75rem) {
857
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
858
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
859
+ }
860
+ .pf-v6-c-divider.pf-m-visible-on-xl {
861
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
862
+ }
863
+ }
864
+ @media screen and (min-width: 90.625rem) {
865
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
866
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
867
+ }
868
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
869
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
870
+ }
871
+ }
872
+ .pf-v6-c-divider::before {
873
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
874
+ content: "";
875
+ background-color: var(--pf-v6-c-divider--Color);
876
+ }
877
+
878
+ .pf-v6-c-divider.pf-m-horizontal {
879
+ flex-direction: row;
880
+ width: 100%;
881
+ height: var(--pf-v6-c-divider--Size);
882
+ }
883
+
884
+ .pf-v6-c-divider.pf-m-vertical {
885
+ flex-direction: column;
886
+ width: var(--pf-v6-c-divider--Size);
887
+ height: inherit;
888
+ }
889
+
890
+ .pf-v6-c-divider.pf-m-inset-none {
891
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
892
+ }
893
+
894
+ .pf-v6-c-divider.pf-m-inset-xs {
895
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
896
+ }
897
+
898
+ .pf-v6-c-divider.pf-m-inset-sm {
899
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
900
+ }
901
+
902
+ .pf-v6-c-divider.pf-m-inset-md {
903
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
904
+ }
905
+
906
+ .pf-v6-c-divider.pf-m-inset-lg {
907
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
908
+ }
909
+
910
+ .pf-v6-c-divider.pf-m-inset-xl {
911
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
912
+ }
913
+
914
+ .pf-v6-c-divider.pf-m-inset-2xl {
915
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
916
+ }
917
+
918
+ .pf-v6-c-divider.pf-m-inset-3xl {
919
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
920
+ }
921
+
922
+ @media (min-width: 36rem) {
923
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
924
+ flex-direction: row;
925
+ width: 100%;
926
+ height: var(--pf-v6-c-divider--Size);
927
+ }
928
+ }
929
+ @media (min-width: 36rem) {
930
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
931
+ flex-direction: column;
932
+ width: var(--pf-v6-c-divider--Size);
933
+ height: inherit;
934
+ }
935
+ }
936
+ @media (min-width: 36rem) {
937
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
938
+ --pf-v6-c-divider--before--FlexBasis: 100%;
939
+ }
940
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
941
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
942
+ }
943
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
944
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
945
+ }
946
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
947
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
948
+ }
949
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
950
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
951
+ }
952
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
953
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
954
+ }
955
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
956
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
957
+ }
958
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
959
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
960
+ }
961
+ }
962
+ @media (min-width: 48rem) {
963
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
964
+ flex-direction: row;
965
+ width: 100%;
966
+ height: var(--pf-v6-c-divider--Size);
967
+ }
968
+ }
969
+ @media (min-width: 48rem) {
970
+ .pf-v6-c-divider.pf-m-vertical-on-md {
971
+ flex-direction: column;
972
+ width: var(--pf-v6-c-divider--Size);
973
+ height: inherit;
974
+ }
975
+ }
976
+ @media (min-width: 48rem) {
977
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
978
+ --pf-v6-c-divider--before--FlexBasis: 100%;
979
+ }
980
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
981
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
982
+ }
983
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
984
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
985
+ }
986
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
987
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
988
+ }
989
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
990
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
991
+ }
992
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
993
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
994
+ }
995
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
996
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
997
+ }
998
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
999
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1000
+ }
1001
+ }
1002
+ @media (min-width: 62rem) {
1003
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
1004
+ flex-direction: row;
1005
+ width: 100%;
1006
+ height: var(--pf-v6-c-divider--Size);
1007
+ }
1008
+ }
1009
+ @media (min-width: 62rem) {
1010
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
1011
+ flex-direction: column;
1012
+ width: var(--pf-v6-c-divider--Size);
1013
+ height: inherit;
1014
+ }
1015
+ }
1016
+ @media (min-width: 62rem) {
1017
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1018
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1019
+ }
1020
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1021
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1022
+ }
1023
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1024
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1025
+ }
1026
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
1027
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1028
+ }
1029
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1030
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1031
+ }
1032
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1033
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1034
+ }
1035
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1036
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1037
+ }
1038
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1039
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1040
+ }
1041
+ }
1042
+ @media (min-width: 75rem) {
1043
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1044
+ flex-direction: row;
1045
+ width: 100%;
1046
+ height: var(--pf-v6-c-divider--Size);
1047
+ }
1048
+ }
1049
+ @media (min-width: 75rem) {
1050
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1051
+ flex-direction: column;
1052
+ width: var(--pf-v6-c-divider--Size);
1053
+ height: inherit;
1054
+ }
1055
+ }
1056
+ @media (min-width: 75rem) {
1057
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1058
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1059
+ }
1060
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1061
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1062
+ }
1063
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1064
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1065
+ }
1066
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1067
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1068
+ }
1069
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1070
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1071
+ }
1072
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1073
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1074
+ }
1075
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1076
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1077
+ }
1078
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1079
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1080
+ }
1081
+ }
1082
+ @media (min-width: 90.625rem) {
1083
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1084
+ flex-direction: row;
1085
+ width: 100%;
1086
+ height: var(--pf-v6-c-divider--Size);
1087
+ }
1088
+ }
1089
+ @media (min-width: 90.625rem) {
1090
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1091
+ flex-direction: column;
1092
+ width: var(--pf-v6-c-divider--Size);
1093
+ height: inherit;
1094
+ }
1095
+ }
1096
+ @media (min-width: 90.625rem) {
1097
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1098
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1099
+ }
1100
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1101
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1102
+ }
1103
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1104
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1105
+ }
1106
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1107
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1108
+ }
1109
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1110
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1111
+ }
1112
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1113
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1114
+ }
1115
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1116
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1117
+ }
1118
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1119
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1120
+ }
1121
+ }
724
1122
  .pf-v6-c-button {
725
1123
  --pf-v6-c-button--Display: inline-flex;
726
1124
  --pf-v6-c-button--AlignItems: baseline;
@@ -1611,11 +2009,86 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1611
2009
  transform: rotate(-60deg);
1612
2010
  }
1613
2011
  }
1614
- @keyframes pf-v6-c-button-icon-favorited {
1615
- 50% {
1616
- scale: 1.5;
1617
- }
2012
+ @keyframes pf-v6-c-button-icon-favorited {
2013
+ 50% {
2014
+ scale: 1.5;
2015
+ }
2016
+ }
2017
+ .pf-v6-c-badge {
2018
+ --pf-v6-c-badge--BorderColor: transparent;
2019
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2020
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2021
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2022
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2023
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2024
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2025
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2026
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2027
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2028
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2029
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2030
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2031
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2032
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2033
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2034
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2035
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2036
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2037
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2038
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2039
+ }
2040
+
2041
+ .pf-v6-c-badge {
2042
+ position: relative;
2043
+ display: inline-block;
2044
+ min-width: var(--pf-v6-c-badge--MinWidth);
2045
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2046
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2047
+ font-size: var(--pf-v6-c-badge--FontSize);
2048
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2049
+ color: var(--pf-v6-c-badge--Color);
2050
+ text-align: center;
2051
+ white-space: nowrap;
2052
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2053
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2054
+ }
2055
+
2056
+ .pf-v6-c-badge::after {
2057
+ position: absolute;
2058
+ inset: 0;
2059
+ pointer-events: none;
2060
+ content: "";
2061
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2062
+ border-radius: inherit;
2063
+ }
2064
+
2065
+ .pf-v6-c-badge.pf-m-read {
2066
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2067
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2068
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2069
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2070
+ }
2071
+
2072
+ .pf-v6-c-badge.pf-m-unread {
2073
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2074
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2075
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2076
+ }
2077
+
2078
+ .pf-v6-c-badge.pf-m-disabled {
2079
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2080
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2081
+ }
2082
+
2083
+ .pf-v6-c-badge.pf-m-disabled::after {
2084
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2085
+ }
2086
+
2087
+ .pf-v6-c-badge__toggle-icon {
2088
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2089
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1618
2090
  }
2091
+
1619
2092
  .pf-v6-c-text-input-group {
1620
2093
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1621
2094
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -1678,504 +2151,188 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1678
2151
  line-height: var(--pf-v6-c-text-input-group__LineHeight);
1679
2152
  color: var(--pf-v6-c-text-input-group--Color, inherit);
1680
2153
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1681
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1682
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1683
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1684
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1685
- }
1686
-
1687
- .pf-v6-c-text-input-group::before {
1688
- position: absolute;
1689
- inset: 0;
1690
- pointer-events: none;
1691
- content: "";
1692
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1693
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1694
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1695
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1696
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1697
- }
1698
-
1699
- .pf-v6-c-text-input-group.pf-m-disabled {
1700
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1701
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1702
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1703
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1704
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1705
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1706
- pointer-events: none;
1707
- }
1708
-
1709
- .pf-v6-c-text-input-group.pf-m-plain {
1710
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1711
- }
1712
-
1713
- .pf-v6-c-text-input-group.pf-m-plain::before {
1714
- border: 0;
1715
- }
1716
-
1717
- .pf-v6-c-text-input-group.pf-m-success {
1718
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1719
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1720
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1721
- }
1722
-
1723
- .pf-v6-c-text-input-group.pf-m-warning {
1724
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1725
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1726
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1727
- }
1728
-
1729
- .pf-v6-c-text-input-group.pf-m-error {
1730
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1731
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1732
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1733
- }
1734
-
1735
- @media (prefers-reduced-motion: no-preference) {
1736
- .pf-v6-c-text-input-group.pf-m-error {
1737
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1738
- animation-name: pf-v6-global-danger-jiggle-motion;
1739
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1740
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1741
- animation-fill-mode: both;
1742
- }
1743
- }
1744
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1745
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1746
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1747
- animation-name: pf-v6-global-fade-in;
1748
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1749
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1750
- }
1751
-
1752
- .pf-v6-c-text-input-group:hover {
1753
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1754
- }
1755
-
1756
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1757
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1758
- }
1759
-
1760
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1761
- --pf-v6-c-text-input-group__text--Position: relative;
1762
- }
1763
-
1764
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1765
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1766
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1767
- }
1768
-
1769
- .pf-v6-c-text-input-group__main {
1770
- display: flex;
1771
- flex: 1;
1772
- flex-wrap: wrap;
1773
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1774
- min-width: 0;
1775
- }
1776
-
1777
- .pf-v6-c-text-input-group__main.pf-m-icon {
1778
- --pf-v6-c-text-input-group__text--Position: relative;
1779
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1780
- display: inline-flex;
1781
- align-items: center;
1782
- justify-content: center;
1783
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1784
- }
1785
-
1786
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1787
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1788
- }
1789
-
1790
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1791
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1792
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1793
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1794
- }
1795
-
1796
- .pf-v6-c-text-input-group__text {
1797
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1798
- display: inline-grid;
1799
- flex: 1;
1800
- grid-template-areas: "text-input";
1801
- grid-template-columns: 1fr;
1802
- }
1803
-
1804
- .pf-v6-c-text-input-group__icon {
1805
- position: absolute;
1806
- inset-block-start: 50%;
1807
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1808
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1809
- color: var(--pf-v6-c-text-input-group__icon--Color);
1810
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1811
- }
1812
-
1813
- .pf-v6-c-text-input-group__icon.pf-m-status {
1814
- inset-inline-start: auto;
1815
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1816
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1817
- }
1818
-
1819
- .pf-v6-c-text-input-group__text-input {
1820
- overflow: hidden;
1821
- text-overflow: ellipsis;
1822
- white-space: nowrap;
1823
- position: relative;
1824
- width: 100%;
1825
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1826
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1827
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1828
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1829
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1830
- color: var(--pf-v6-c-text-input-group__text-input--Color);
1831
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1832
- border: 0;
1833
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1834
- }
1835
-
1836
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1837
- grid-area: text-input;
1838
- }
1839
-
1840
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1841
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1842
- }
1843
-
1844
- .pf-v6-c-text-input-group__text-input::placeholder {
1845
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1846
- }
1847
-
1848
- .pf-v6-c-text-input-group__utilities {
1849
- display: flex;
1850
- align-items: center;
1851
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1852
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1853
- }
1854
-
1855
- .pf-v6-c-text-input-group__utilities > * + * {
1856
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1857
- }
1858
-
1859
- .pf-v6-c-text-input-group__group {
1860
- display: flex;
1861
- }
1862
-
1863
- .pf-v6-c-divider {
1864
- --pf-v6-c-divider--Display: flex;
1865
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1866
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1867
- --pf-v6-c-divider--before--FlexBasis: 100%;
1868
- }
1869
-
1870
- .pf-v6-c-divider {
1871
- flex-direction: row;
1872
- width: 100%;
1873
- height: var(--pf-v6-c-divider--Size);
1874
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1875
- --pf-v6-hidden-visible--hidden--Display: none;
1876
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1877
- display: var(--pf-v6-hidden-visible--Display);
1878
- flex-shrink: 0;
1879
- align-items: stretch;
1880
- align-self: stretch;
1881
- justify-content: center;
1882
- border: 0;
1883
- }
1884
-
1885
- .pf-v6-c-divider.pf-m-hidden {
1886
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1887
- }
1888
-
1889
- @media screen and (min-width: 36rem) {
1890
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1891
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1892
- }
1893
- .pf-v6-c-divider.pf-m-visible-on-sm {
1894
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1895
- }
1896
- }
1897
- @media screen and (min-width: 48rem) {
1898
- .pf-v6-c-divider.pf-m-hidden-on-md {
1899
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1900
- }
1901
- .pf-v6-c-divider.pf-m-visible-on-md {
1902
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1903
- }
1904
- }
1905
- @media screen and (min-width: 62rem) {
1906
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1907
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1908
- }
1909
- .pf-v6-c-divider.pf-m-visible-on-lg {
1910
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1911
- }
1912
- }
1913
- @media screen and (min-width: 75rem) {
1914
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1915
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1916
- }
1917
- .pf-v6-c-divider.pf-m-visible-on-xl {
1918
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1919
- }
1920
- }
1921
- @media screen and (min-width: 90.625rem) {
1922
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1923
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1924
- }
1925
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1926
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1927
- }
2154
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2155
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2156
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2157
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1928
2158
  }
1929
- .pf-v6-c-divider::before {
1930
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2159
+
2160
+ .pf-v6-c-text-input-group::before {
2161
+ position: absolute;
2162
+ inset: 0;
2163
+ pointer-events: none;
1931
2164
  content: "";
1932
- background-color: var(--pf-v6-c-divider--Color);
2165
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2166
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2167
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2168
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2169
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1933
2170
  }
1934
2171
 
1935
- .pf-v6-c-divider.pf-m-horizontal {
1936
- flex-direction: row;
1937
- width: 100%;
1938
- height: var(--pf-v6-c-divider--Size);
2172
+ .pf-v6-c-text-input-group.pf-m-disabled {
2173
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2174
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2175
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2176
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2177
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2178
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2179
+ pointer-events: none;
1939
2180
  }
1940
2181
 
1941
- .pf-v6-c-divider.pf-m-vertical {
1942
- flex-direction: column;
1943
- width: var(--pf-v6-c-divider--Size);
1944
- height: inherit;
2182
+ .pf-v6-c-text-input-group.pf-m-plain {
2183
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1945
2184
  }
1946
2185
 
1947
- .pf-v6-c-divider.pf-m-inset-none {
1948
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2186
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2187
+ border: 0;
1949
2188
  }
1950
2189
 
1951
- .pf-v6-c-divider.pf-m-inset-xs {
1952
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2190
+ .pf-v6-c-text-input-group.pf-m-success {
2191
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2192
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2193
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1953
2194
  }
1954
2195
 
1955
- .pf-v6-c-divider.pf-m-inset-sm {
1956
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2196
+ .pf-v6-c-text-input-group.pf-m-warning {
2197
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2198
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2199
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1957
2200
  }
1958
2201
 
1959
- .pf-v6-c-divider.pf-m-inset-md {
1960
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2202
+ .pf-v6-c-text-input-group.pf-m-error {
2203
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2204
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2205
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1961
2206
  }
1962
2207
 
1963
- .pf-v6-c-divider.pf-m-inset-lg {
1964
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2208
+ @media (prefers-reduced-motion: no-preference) {
2209
+ .pf-v6-c-text-input-group.pf-m-error {
2210
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2211
+ animation-name: pf-v6-global-danger-jiggle-motion;
2212
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2213
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2214
+ animation-fill-mode: both;
2215
+ }
2216
+ }
2217
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2218
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2219
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2220
+ animation-name: pf-v6-global-fade-in;
2221
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2222
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1965
2223
  }
1966
2224
 
1967
- .pf-v6-c-divider.pf-m-inset-xl {
1968
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2225
+ .pf-v6-c-text-input-group:hover {
2226
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1969
2227
  }
1970
2228
 
1971
- .pf-v6-c-divider.pf-m-inset-2xl {
1972
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2229
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2230
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1973
2231
  }
1974
2232
 
1975
- .pf-v6-c-divider.pf-m-inset-3xl {
1976
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2233
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2234
+ --pf-v6-c-text-input-group__text--Position: relative;
1977
2235
  }
1978
2236
 
1979
- @media (min-width: 36rem) {
1980
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1981
- flex-direction: row;
1982
- width: 100%;
1983
- height: var(--pf-v6-c-divider--Size);
1984
- }
2237
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2238
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2239
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1985
2240
  }
1986
- @media (min-width: 36rem) {
1987
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1988
- flex-direction: column;
1989
- width: var(--pf-v6-c-divider--Size);
1990
- height: inherit;
1991
- }
2241
+
2242
+ .pf-v6-c-text-input-group__main {
2243
+ display: flex;
2244
+ flex: 1;
2245
+ flex-wrap: wrap;
2246
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2247
+ min-width: 0;
1992
2248
  }
1993
- @media (min-width: 36rem) {
1994
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1995
- --pf-v6-c-divider--before--FlexBasis: 100%;
1996
- }
1997
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1998
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1999
- }
2000
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2001
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2002
- }
2003
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
2004
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2005
- }
2006
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2007
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2008
- }
2009
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2010
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2011
- }
2012
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2013
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2014
- }
2015
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2016
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2017
- }
2249
+
2250
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2251
+ --pf-v6-c-text-input-group__text--Position: relative;
2252
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2253
+ display: inline-flex;
2254
+ align-items: center;
2255
+ justify-content: center;
2256
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2018
2257
  }
2019
- @media (min-width: 48rem) {
2020
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2021
- flex-direction: row;
2022
- width: 100%;
2023
- height: var(--pf-v6-c-divider--Size);
2024
- }
2258
+
2259
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2260
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2025
2261
  }
2026
- @media (min-width: 48rem) {
2027
- .pf-v6-c-divider.pf-m-vertical-on-md {
2028
- flex-direction: column;
2029
- width: var(--pf-v6-c-divider--Size);
2030
- height: inherit;
2031
- }
2262
+
2263
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2264
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2265
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2266
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2032
2267
  }
2033
- @media (min-width: 48rem) {
2034
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2035
- --pf-v6-c-divider--before--FlexBasis: 100%;
2036
- }
2037
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2038
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2039
- }
2040
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2041
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2042
- }
2043
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2044
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2045
- }
2046
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2047
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2048
- }
2049
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2050
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2051
- }
2052
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2053
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2054
- }
2055
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2056
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2057
- }
2268
+
2269
+ .pf-v6-c-text-input-group__text {
2270
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2271
+ display: inline-grid;
2272
+ flex: 1;
2273
+ grid-template-areas: "text-input";
2274
+ grid-template-columns: 1fr;
2058
2275
  }
2059
- @media (min-width: 62rem) {
2060
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2061
- flex-direction: row;
2062
- width: 100%;
2063
- height: var(--pf-v6-c-divider--Size);
2064
- }
2276
+
2277
+ .pf-v6-c-text-input-group__icon {
2278
+ position: absolute;
2279
+ inset-block-start: 50%;
2280
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2281
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2282
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2283
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2065
2284
  }
2066
- @media (min-width: 62rem) {
2067
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2068
- flex-direction: column;
2069
- width: var(--pf-v6-c-divider--Size);
2070
- height: inherit;
2071
- }
2285
+
2286
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2287
+ inset-inline-start: auto;
2288
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2289
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2072
2290
  }
2073
- @media (min-width: 62rem) {
2074
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2075
- --pf-v6-c-divider--before--FlexBasis: 100%;
2076
- }
2077
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2078
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2079
- }
2080
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2081
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2082
- }
2083
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2084
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2085
- }
2086
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2087
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2088
- }
2089
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2090
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2091
- }
2092
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2093
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2094
- }
2095
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2096
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2097
- }
2291
+
2292
+ .pf-v6-c-text-input-group__text-input {
2293
+ overflow: hidden;
2294
+ text-overflow: ellipsis;
2295
+ white-space: nowrap;
2296
+ position: relative;
2297
+ width: 100%;
2298
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2299
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2300
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2301
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2302
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2303
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2304
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2305
+ border: 0;
2306
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2098
2307
  }
2099
- @media (min-width: 75rem) {
2100
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2101
- flex-direction: row;
2102
- width: 100%;
2103
- height: var(--pf-v6-c-divider--Size);
2104
- }
2308
+
2309
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2310
+ grid-area: text-input;
2105
2311
  }
2106
- @media (min-width: 75rem) {
2107
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2108
- flex-direction: column;
2109
- width: var(--pf-v6-c-divider--Size);
2110
- height: inherit;
2111
- }
2312
+
2313
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2314
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2112
2315
  }
2113
- @media (min-width: 75rem) {
2114
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
2115
- --pf-v6-c-divider--before--FlexBasis: 100%;
2116
- }
2117
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2118
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2119
- }
2120
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2121
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2122
- }
2123
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
2124
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2125
- }
2126
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2127
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2128
- }
2129
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2130
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2131
- }
2132
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2133
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2134
- }
2135
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2136
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2137
- }
2316
+
2317
+ .pf-v6-c-text-input-group__text-input::placeholder {
2318
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2138
2319
  }
2139
- @media (min-width: 90.625rem) {
2140
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2141
- flex-direction: row;
2142
- width: 100%;
2143
- height: var(--pf-v6-c-divider--Size);
2144
- }
2320
+
2321
+ .pf-v6-c-text-input-group__utilities {
2322
+ display: flex;
2323
+ align-items: center;
2324
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2325
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2145
2326
  }
2146
- @media (min-width: 90.625rem) {
2147
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2148
- flex-direction: column;
2149
- width: var(--pf-v6-c-divider--Size);
2150
- height: inherit;
2151
- }
2327
+
2328
+ .pf-v6-c-text-input-group__utilities > * + * {
2329
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2152
2330
  }
2153
- @media (min-width: 90.625rem) {
2154
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2155
- --pf-v6-c-divider--before--FlexBasis: 100%;
2156
- }
2157
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2158
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2159
- }
2160
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2161
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2162
- }
2163
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2164
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2165
- }
2166
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2167
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2168
- }
2169
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2170
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2171
- }
2172
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2173
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2174
- }
2175
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2176
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2177
- }
2331
+
2332
+ .pf-v6-c-text-input-group__group {
2333
+ display: flex;
2178
2334
  }
2335
+
2179
2336
  .pf-v6-c-label {
2180
2337
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2181
2338
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -2719,163 +2876,6 @@ input.pf-v6-c-label__content {
2719
2876
  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2720
2877
  }
2721
2878
 
2722
- .pf-v6-c-check {
2723
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2724
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2725
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2726
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2727
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2728
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2729
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2730
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2731
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2732
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2733
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2734
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2735
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2736
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2737
- }
2738
-
2739
- .pf-v6-c-check {
2740
- display: grid;
2741
- grid-template-columns: auto 1fr;
2742
- grid-gap: var(--pf-v6-c-check--GridGap);
2743
- accent-color: var(--pf-v6-c-check--AccentColor);
2744
- }
2745
-
2746
- .pf-v6-c-check.pf-m-standalone {
2747
- display: inline-grid;
2748
- grid-template-columns: auto;
2749
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2750
- }
2751
-
2752
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2753
- align-self: center;
2754
- transform: none;
2755
- }
2756
-
2757
- .pf-v6-c-check__input {
2758
- align-self: start;
2759
- font-size: var(--pf-v6-c-check__label--FontSize);
2760
- line-height: var(--pf-v6-c-check__label--LineHeight);
2761
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2762
- }
2763
-
2764
- .pf-v6-c-check__label {
2765
- font-size: var(--pf-v6-c-check__label--FontSize);
2766
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2767
- line-height: var(--pf-v6-c-check__label--LineHeight);
2768
- color: var(--pf-v6-c-check__label--Color);
2769
- }
2770
-
2771
- .pf-v6-c-check__description {
2772
- grid-column: 2;
2773
- font-size: var(--pf-v6-c-check__description--FontSize);
2774
- color: var(--pf-v6-c-check__description--Color);
2775
- }
2776
-
2777
- .pf-v6-c-check__body {
2778
- grid-column: 2;
2779
- }
2780
-
2781
- .pf-v6-c-check__label,
2782
- .pf-v6-c-check__input {
2783
- justify-self: start;
2784
- }
2785
-
2786
- label.pf-v6-c-check, .pf-v6-c-check__label,
2787
- .pf-v6-c-check__input {
2788
- cursor: pointer;
2789
- }
2790
-
2791
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2792
- .pf-v6-c-check__input:disabled,
2793
- .pf-v6-c-check__input.pf-m-disabled {
2794
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2795
- cursor: not-allowed;
2796
- }
2797
-
2798
- .pf-v6-c-check__label-required {
2799
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2800
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2801
- color: var(--pf-v6-c-check__label-required--Color);
2802
- }
2803
-
2804
- .pf-v6-c-badge {
2805
- --pf-v6-c-badge--BorderColor: transparent;
2806
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2807
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2808
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2809
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2810
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2811
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2812
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2813
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2814
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2815
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2816
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2817
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2818
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2819
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2820
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2821
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2822
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2823
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2824
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2825
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2826
- }
2827
-
2828
- .pf-v6-c-badge {
2829
- position: relative;
2830
- display: inline-block;
2831
- min-width: var(--pf-v6-c-badge--MinWidth);
2832
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2833
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2834
- font-size: var(--pf-v6-c-badge--FontSize);
2835
- font-weight: var(--pf-v6-c-badge--FontWeight);
2836
- color: var(--pf-v6-c-badge--Color);
2837
- text-align: center;
2838
- white-space: nowrap;
2839
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2840
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2841
- }
2842
-
2843
- .pf-v6-c-badge::after {
2844
- position: absolute;
2845
- inset: 0;
2846
- pointer-events: none;
2847
- content: "";
2848
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2849
- border-radius: inherit;
2850
- }
2851
-
2852
- .pf-v6-c-badge.pf-m-read {
2853
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2854
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2855
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2856
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2857
- }
2858
-
2859
- .pf-v6-c-badge.pf-m-unread {
2860
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2861
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2862
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2863
- }
2864
-
2865
- .pf-v6-c-badge.pf-m-disabled {
2866
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2867
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2868
- }
2869
-
2870
- .pf-v6-c-badge.pf-m-disabled::after {
2871
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2872
- }
2873
-
2874
- .pf-v6-c-badge__toggle-icon {
2875
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2876
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2877
- }
2878
-
2879
2879
  .pf-v6-c-breadcrumb {
2880
2880
  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2881
2881
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);