@patternfly/patternfly 6.0.0-alpha.183 → 6.0.0-alpha.185

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 (17) hide show
  1. package/base/patternfly-fonts.css +6 -6
  2. package/base/patternfly-fonts.scss +6 -6
  3. package/base/patternfly-variables.css +2 -18
  4. package/base/tokens/tokens-local.scss +4 -25
  5. package/components/Icon/icon.css +4 -4
  6. package/components/Icon/icon.scss +4 -4
  7. package/components/TextInputGroup/text-input-group.css +67 -15
  8. package/components/TextInputGroup/text-input-group.scss +78 -21
  9. package/components/_index.css +71 -19
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +80 -0
  11. package/package.json +1 -1
  12. package/patternfly-base-no-globals.css +8 -24
  13. package/patternfly-base.css +8 -24
  14. package/patternfly-no-globals.css +79 -43
  15. package/patternfly.css +79 -43
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -59,42 +59,42 @@
59
59
  }
60
60
 
61
61
  @font-face {
62
- font-family: RedHatTextVF;
62
+ font-family: "Red Hat Text";
63
63
  font-style: normal;
64
64
  font-weight: 400 500;
65
65
  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
66
66
  font-display: fallback;
67
67
  }
68
68
  @font-face {
69
- font-family: RedHatTextVF;
69
+ font-family: "Red Hat Text";
70
70
  font-style: italic;
71
71
  font-weight: 400 500;
72
72
  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
73
73
  font-display: fallback;
74
74
  }
75
75
  @font-face {
76
- font-family: RedHatDisplayVF;
76
+ font-family: "Red Hat Display";
77
77
  font-style: normal;
78
78
  font-weight: 400 700;
79
79
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
80
80
  font-display: fallback;
81
81
  }
82
82
  @font-face {
83
- font-family: RedHatDisplayVF;
83
+ font-family: "Red Hat Display";
84
84
  font-style: italic;
85
85
  font-weight: 400 700;
86
86
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
87
87
  font-display: fallback;
88
88
  }
89
89
  @font-face {
90
- font-family: RedHatMonoVF;
90
+ font-family: "Red Hat Mono";
91
91
  font-style: normal;
92
92
  font-weight: 400;
93
93
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
94
94
  font-display: fallback;
95
95
  }
96
96
  @font-face {
97
- font-family: RedHatMonoVF;
97
+ font-family: "Red Hat Mono";
98
98
  font-style: italic;
99
99
  font-weight: 400;
100
100
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
@@ -5577,24 +5577,8 @@
5577
5577
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
5578
5578
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
5579
5579
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5580
- --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
5581
- --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
5582
- --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
5583
- --pf-t--global--font--line-height--100: 1.3;
5584
- --pf-t--global--font--line-height--200: 1.5;
5585
- --pf-t--global--font--weight--body--100: 400;
5586
- --pf-t--global--font--weight--body--200: 500;
5587
- --pf-t--global--font--weight--heading--100: 700;
5588
- --pf-t--global--font--weight--heading--200: 700;
5589
- --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
5590
- --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
5591
- --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
5592
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
5593
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
5594
- --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
5595
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
5596
- --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
5597
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
5580
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
5581
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
5598
5582
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
5599
5583
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
5600
5584
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -13245,8 +13229,8 @@ select ~ .pf-v6-c-form-control__utilities {
13245
13229
  }
13246
13230
 
13247
13231
  :where(:root, .pf-v6-c-icon) {
13248
- --pf-v6-c-icon--Width: 1em;
13249
- --pf-v6-c-icon--Height: 1em;
13232
+ --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
13233
+ --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
13250
13234
  --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
13251
13235
  --pf-v6-c-icon--m-sm--Height: var(--pf-t--global--icon--size--sm);
13252
13236
  --pf-v6-c-icon--m-md--Width: var(--pf-t--global--icon--size--md);
@@ -13280,14 +13264,14 @@ select ~ .pf-v6-c-form-control__utilities {
13280
13264
  --pf-v6-c-icon--m-inline--Width: 1em;
13281
13265
  --pf-v6-c-icon--m-inline--Height: 1em;
13282
13266
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
13283
- --pf-v6-c-icon__content--Color: initial;
13267
+ --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--regular);
13284
13268
  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
13285
13269
  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
13286
13270
  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
13287
13271
  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
13288
13272
  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
13289
13273
  --pf-v6-c-icon--m-inline__content--Color: initial;
13290
- --pf-v6-c-icon__content--FontSize: 1em;
13274
+ --pf-v6-c-icon__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
13291
13275
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
13292
13276
  --pf-v6-c-icon--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
13293
13277
  --pf-v6-c-icon--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);
@@ -24819,10 +24803,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24819
24803
  :where(:root, .pf-v6-c-text-input-group) {
24820
24804
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
24821
24805
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
24806
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
24807
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
24808
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
24822
24809
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
24810
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
24811
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
24823
24812
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
24813
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
24814
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
24815
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
24824
24816
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
24825
24817
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
24818
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
24826
24819
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24827
24820
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
24828
24821
  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
@@ -24843,7 +24836,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24843
24836
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
24844
24837
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
24845
24838
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
24839
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
24846
24840
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
24841
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
24842
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
24843
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
24844
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
24845
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
24846
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
24847
24847
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
24848
24848
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
24849
24849
  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -24856,24 +24856,60 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24856
24856
  position: relative;
24857
24857
  display: flex;
24858
24858
  width: 100%;
24859
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
24860
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
24859
24861
  color: var(--pf-v6-c-text-input-group--Color, inherit);
24860
24862
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
24863
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
24864
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
24865
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
24866
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
24861
24867
  }
24862
- .pf-v6-c-text-input-group:hover {
24863
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
24868
+ .pf-v6-c-text-input-group::before {
24869
+ position: absolute;
24870
+ inset: 0;
24871
+ pointer-events: none;
24872
+ content: "";
24873
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
24874
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
24875
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
24876
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
24877
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
24864
24878
  }
24865
24879
  .pf-v6-c-text-input-group.pf-m-disabled {
24866
24880
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
24867
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
24881
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
24882
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
24868
24883
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
24869
24884
  pointer-events: none;
24870
24885
  }
24871
24886
  .pf-v6-c-text-input-group.pf-m-plain {
24872
24887
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
24873
24888
  }
24874
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
24889
+ .pf-v6-c-text-input-group.pf-m-plain::before {
24875
24890
  border: 0;
24876
24891
  }
24892
+ .pf-v6-c-text-input-group.pf-m-success {
24893
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
24894
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
24895
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
24896
+ }
24897
+ .pf-v6-c-text-input-group.pf-m-warning {
24898
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
24899
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
24900
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
24901
+ }
24902
+ .pf-v6-c-text-input-group.pf-m-error {
24903
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
24904
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
24905
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
24906
+ }
24907
+ .pf-v6-c-text-input-group:hover {
24908
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
24909
+ }
24910
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
24911
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
24912
+ }
24877
24913
 
24878
24914
  .pf-v6-c-text-input-group__main {
24879
24915
  display: flex;
@@ -24883,7 +24919,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24883
24919
  min-width: 0;
24884
24920
  }
24885
24921
  .pf-v6-c-text-input-group__main.pf-m-icon {
24922
+ --pf-v6-c-text-input-group__text--Position: relative;
24886
24923
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
24924
+ display: inline-flex;
24925
+ align-items: center;
24926
+ justify-content: center;
24927
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
24887
24928
  }
24888
24929
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
24889
24930
  padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
@@ -24897,22 +24938,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24897
24938
  }
24898
24939
 
24899
24940
  .pf-v6-c-text-input-group__text {
24941
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
24900
24942
  display: inline-grid;
24901
24943
  flex: 1;
24902
24944
  grid-template-areas: "text-input";
24903
24945
  grid-template-columns: 1fr;
24904
24946
  }
24905
- .pf-v6-c-text-input-group__text::before {
24906
- position: absolute;
24907
- inset: 0;
24908
- pointer-events: none;
24909
- content: "";
24910
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
24911
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
24912
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
24913
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
24914
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
24915
- }
24916
24947
 
24917
24948
  .pf-v6-c-text-input-group__icon {
24918
24949
  position: absolute;
@@ -24921,6 +24952,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24921
24952
  color: var(--pf-v6-c-text-input-group__icon--Color);
24922
24953
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
24923
24954
  }
24955
+ .pf-v6-c-text-input-group__icon.pf-m-status {
24956
+ inset-inline-start: auto;
24957
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
24958
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
24959
+ }
24924
24960
 
24925
24961
  .pf-v6-c-text-input-group__text-input {
24926
24962
  overflow: hidden;
package/patternfly.css CHANGED
@@ -180,42 +180,42 @@ button) {
180
180
  }
181
181
 
182
182
  @font-face {
183
- font-family: RedHatTextVF;
183
+ font-family: "Red Hat Text";
184
184
  font-style: normal;
185
185
  font-weight: 400 500;
186
186
  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
187
187
  font-display: fallback;
188
188
  }
189
189
  @font-face {
190
- font-family: RedHatTextVF;
190
+ font-family: "Red Hat Text";
191
191
  font-style: italic;
192
192
  font-weight: 400 500;
193
193
  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
194
194
  font-display: fallback;
195
195
  }
196
196
  @font-face {
197
- font-family: RedHatDisplayVF;
197
+ font-family: "Red Hat Display";
198
198
  font-style: normal;
199
199
  font-weight: 400 700;
200
200
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
201
201
  font-display: fallback;
202
202
  }
203
203
  @font-face {
204
- font-family: RedHatDisplayVF;
204
+ font-family: "Red Hat Display";
205
205
  font-style: italic;
206
206
  font-weight: 400 700;
207
207
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
208
208
  font-display: fallback;
209
209
  }
210
210
  @font-face {
211
- font-family: RedHatMonoVF;
211
+ font-family: "Red Hat Mono";
212
212
  font-style: normal;
213
213
  font-weight: 400;
214
214
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
215
215
  font-display: fallback;
216
216
  }
217
217
  @font-face {
218
- font-family: RedHatMonoVF;
218
+ font-family: "Red Hat Mono";
219
219
  font-style: italic;
220
220
  font-weight: 400;
221
221
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
@@ -5698,24 +5698,8 @@ button) {
5698
5698
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
5699
5699
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
5700
5700
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5701
- --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
5702
- --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
5703
- --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
5704
- --pf-t--global--font--line-height--100: 1.3;
5705
- --pf-t--global--font--line-height--200: 1.5;
5706
- --pf-t--global--font--weight--body--100: 400;
5707
- --pf-t--global--font--weight--body--200: 500;
5708
- --pf-t--global--font--weight--heading--100: 700;
5709
- --pf-t--global--font--weight--heading--200: 700;
5710
- --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
5711
- --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
5712
- --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
5713
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
5714
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
5715
- --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
5716
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
5717
- --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
5718
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
5701
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
5702
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
5719
5703
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
5720
5704
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
5721
5705
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -13366,8 +13350,8 @@ select ~ .pf-v6-c-form-control__utilities {
13366
13350
  }
13367
13351
 
13368
13352
  :where(:root, .pf-v6-c-icon) {
13369
- --pf-v6-c-icon--Width: 1em;
13370
- --pf-v6-c-icon--Height: 1em;
13353
+ --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
13354
+ --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
13371
13355
  --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
13372
13356
  --pf-v6-c-icon--m-sm--Height: var(--pf-t--global--icon--size--sm);
13373
13357
  --pf-v6-c-icon--m-md--Width: var(--pf-t--global--icon--size--md);
@@ -13401,14 +13385,14 @@ select ~ .pf-v6-c-form-control__utilities {
13401
13385
  --pf-v6-c-icon--m-inline--Width: 1em;
13402
13386
  --pf-v6-c-icon--m-inline--Height: 1em;
13403
13387
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
13404
- --pf-v6-c-icon__content--Color: initial;
13388
+ --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--regular);
13405
13389
  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
13406
13390
  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
13407
13391
  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
13408
13392
  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
13409
13393
  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
13410
13394
  --pf-v6-c-icon--m-inline__content--Color: initial;
13411
- --pf-v6-c-icon__content--FontSize: 1em;
13395
+ --pf-v6-c-icon__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
13412
13396
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
13413
13397
  --pf-v6-c-icon--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
13414
13398
  --pf-v6-c-icon--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);
@@ -24940,10 +24924,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24940
24924
  :where(:root, .pf-v6-c-text-input-group) {
24941
24925
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
24942
24926
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
24927
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
24928
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
24929
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
24943
24930
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
24931
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
24932
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
24944
24933
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
24934
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
24935
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
24936
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
24945
24937
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
24946
24938
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
24939
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
24947
24940
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24948
24941
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
24949
24942
  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
@@ -24964,7 +24957,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24964
24957
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
24965
24958
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
24966
24959
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
24960
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
24967
24961
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
24962
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
24963
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
24964
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
24965
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
24966
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
24967
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
24968
24968
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
24969
24969
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
24970
24970
  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -24977,24 +24977,60 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24977
24977
  position: relative;
24978
24978
  display: flex;
24979
24979
  width: 100%;
24980
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
24981
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
24980
24982
  color: var(--pf-v6-c-text-input-group--Color, inherit);
24981
24983
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
24984
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
24985
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
24986
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
24987
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
24982
24988
  }
24983
- .pf-v6-c-text-input-group:hover {
24984
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
24989
+ .pf-v6-c-text-input-group::before {
24990
+ position: absolute;
24991
+ inset: 0;
24992
+ pointer-events: none;
24993
+ content: "";
24994
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
24995
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
24996
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
24997
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
24998
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
24985
24999
  }
24986
25000
  .pf-v6-c-text-input-group.pf-m-disabled {
24987
25001
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
24988
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
25002
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
25003
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
24989
25004
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
24990
25005
  pointer-events: none;
24991
25006
  }
24992
25007
  .pf-v6-c-text-input-group.pf-m-plain {
24993
25008
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
24994
25009
  }
24995
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
25010
+ .pf-v6-c-text-input-group.pf-m-plain::before {
24996
25011
  border: 0;
24997
25012
  }
25013
+ .pf-v6-c-text-input-group.pf-m-success {
25014
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
25015
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
25016
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
25017
+ }
25018
+ .pf-v6-c-text-input-group.pf-m-warning {
25019
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
25020
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
25021
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
25022
+ }
25023
+ .pf-v6-c-text-input-group.pf-m-error {
25024
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
25025
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
25026
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
25027
+ }
25028
+ .pf-v6-c-text-input-group:hover {
25029
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
25030
+ }
25031
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
25032
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
25033
+ }
24998
25034
 
24999
25035
  .pf-v6-c-text-input-group__main {
25000
25036
  display: flex;
@@ -25004,7 +25040,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25004
25040
  min-width: 0;
25005
25041
  }
25006
25042
  .pf-v6-c-text-input-group__main.pf-m-icon {
25043
+ --pf-v6-c-text-input-group__text--Position: relative;
25007
25044
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
25045
+ display: inline-flex;
25046
+ align-items: center;
25047
+ justify-content: center;
25048
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
25008
25049
  }
25009
25050
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
25010
25051
  padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
@@ -25018,22 +25059,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25018
25059
  }
25019
25060
 
25020
25061
  .pf-v6-c-text-input-group__text {
25062
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
25021
25063
  display: inline-grid;
25022
25064
  flex: 1;
25023
25065
  grid-template-areas: "text-input";
25024
25066
  grid-template-columns: 1fr;
25025
25067
  }
25026
- .pf-v6-c-text-input-group__text::before {
25027
- position: absolute;
25028
- inset: 0;
25029
- pointer-events: none;
25030
- content: "";
25031
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25032
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
25033
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
25034
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
25035
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
25036
- }
25037
25068
 
25038
25069
  .pf-v6-c-text-input-group__icon {
25039
25070
  position: absolute;
@@ -25042,6 +25073,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25042
25073
  color: var(--pf-v6-c-text-input-group__icon--Color);
25043
25074
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
25044
25075
  }
25076
+ .pf-v6-c-text-input-group__icon.pf-m-status {
25077
+ inset-inline-start: auto;
25078
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
25079
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
25080
+ }
25045
25081
 
25046
25082
  .pf-v6-c-text-input-group__text-input {
25047
25083
  overflow: hidden;