@patternfly/patternfly 6.0.0-alpha.157 → 6.0.0-alpha.158

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 (10) hide show
  1. package/components/TextInputGroup/text-input-group.css +20 -18
  2. package/components/TextInputGroup/text-input-group.scss +23 -22
  3. package/components/_index.css +20 -18
  4. package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  5. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -0
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +20 -18
  8. package/patternfly.css +20 -18
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -2,15 +2,19 @@
2
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
3
3
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
4
4
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
5
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
6
5
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
7
6
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
8
7
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
9
8
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
10
9
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
11
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
12
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
13
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
11
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
12
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
13
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
14
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
15
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
16
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
17
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
14
18
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15
19
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16
20
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -36,15 +40,6 @@
36
40
  width: 100%;
37
41
  color: var(--pf-v6-c-text-input-group--Color, inherit);
38
42
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
39
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
40
- }
41
- .pf-v6-c-text-input-group::before {
42
- position: absolute;
43
- inset: 0;
44
- pointer-events: none;
45
- content: "";
46
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
47
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
48
43
  }
49
44
  .pf-v6-c-text-input-group:hover {
50
45
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -58,7 +53,7 @@
58
53
  .pf-v6-c-text-input-group.pf-m-plain {
59
54
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
60
55
  }
61
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
56
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
62
57
  border: 0;
63
58
  }
64
59
 
@@ -73,12 +68,14 @@
73
68
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
74
69
  }
75
70
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
71
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
72
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
76
73
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
77
74
  }
78
75
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
79
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
80
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
81
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
76
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
77
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
78
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
82
79
  }
83
80
 
84
81
  .pf-v6-c-text-input-group__text {
@@ -87,11 +84,16 @@
87
84
  grid-template-areas: "text-input";
88
85
  grid-template-columns: 1fr;
89
86
  }
90
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
87
+ .pf-v6-c-text-input-group__text::before {
91
88
  position: absolute;
92
89
  inset: 0;
93
90
  pointer-events: none;
94
91
  content: "";
92
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
93
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
94
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
95
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
96
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
95
97
  }
96
98
 
97
99
  .pf-v6-c-text-input-group__icon {
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -4,7 +4,6 @@
4
4
  --#{$text-input-group}--BackgroundColor: var(--pf-t--global--background--color--control--default);
5
5
  --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--default);
6
6
  --#{$text-input-group}--BorderWidth: var(--pf-t--global--border--width--control--default);
7
- --#{$text-input-group}--BorderRadius: var(--pf-t--global--border--radius--small);
8
7
 
9
8
  // Border hover
10
9
  --#{$text-input-group}--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -15,10 +14,17 @@
15
14
  --#{$text-input-group}__main--RowGap: var(--pf-t--global--spacer--xs);
16
15
  --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
17
16
 
18
- // Chip group
19
- --#{$text-input-group}--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
20
- --#{$text-input-group}--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
21
- --#{$text-input-group}--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17
+ // Text wrapper
18
+ --#{$text-input-group}__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
19
+ --#{$text-input-group}__text--BorderStartStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
20
+ --#{$text-input-group}__text--BorderStartEndRadius: var(--#{$text-input-group}__text--BorderRadius--base);
21
+ --#{$text-input-group}__text--BorderEndEndRadius: var(--#{$text-input-group}__text--BorderRadius--base);
22
+ --#{$text-input-group}__text--BorderEndStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
23
+
24
+ // Label group
25
+ --#{$text-input-group}--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
26
+ --#{$text-input-group}--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
27
+ --#{$text-input-group}--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
22
28
 
23
29
  // Text input
24
30
  --#{$text-input-group}__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -52,16 +58,6 @@
52
58
  width: 100%; // when child of flex layout, take up space
53
59
  color: var(--#{$text-input-group}--Color, inherit);
54
60
  background-color: var(--#{$text-input-group}--BackgroundColor);
55
- border-radius: var(--#{$text-input-group}--BorderRadius);
56
-
57
- &::before {
58
- position: absolute;
59
- inset: 0;
60
- pointer-events: none;
61
- content: "";
62
- border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
63
- border-radius: var(--#{$text-input-group}--BorderRadius);
64
- }
65
61
 
66
62
  &:hover {
67
63
  --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-hover--BorderColor);
@@ -79,8 +75,7 @@
79
75
  --#{$text-input-group}--BackgroundColor: transparent;
80
76
 
81
77
  .#{$text-input-group}__text {
82
- &::before,
83
- &::after {
78
+ &::before {
84
79
  border: 0;
85
80
  }
86
81
  }
@@ -99,13 +94,15 @@
99
94
  }
100
95
 
101
96
  > :first-child:not(.#{$text-input-group}__text) {
97
+ padding-block-start: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockStart);
98
+ padding-block-end: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockEnd);
102
99
  margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart);
103
100
  }
104
101
 
105
102
  .#{$label-group}__main {
106
- padding-block-start: var(--#{$text-input-group}--c-chip-group__main--PaddingBlockStart);
107
- padding-block-end: var(--#{$text-input-group}--c-chip-group__main--PaddingBlockEnd);
108
- padding-inline-end: var(--#{$text-input-group}--c-chip-group__main--PaddingInlineEnd);
103
+ padding-block-start: var(--#{$text-input-group}--c-label-group__main--PaddingBlockStart);
104
+ padding-block-end: var(--#{$text-input-group}--c-label-group__main--PaddingBlockEnd);
105
+ padding-inline-end: var(--#{$text-input-group}--c-label-group__main--PaddingInlineEnd);
109
106
  }
110
107
  }
111
108
 
@@ -115,12 +112,16 @@
115
112
  grid-template-areas: "text-input";
116
113
  grid-template-columns: 1fr;
117
114
 
118
- &::before,
119
- &::after {
115
+ &::before {
120
116
  position: absolute;
121
117
  inset: 0;
122
118
  pointer-events: none;
123
119
  content: "";
120
+ border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
121
+ border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
122
+ border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
123
+ border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
124
+ border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
124
125
  }
125
126
  }
126
127
 
package/components/_index.css CHANGED
@@ -19015,15 +19015,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19015
19015
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
19016
19016
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
19017
19017
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
19018
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
19019
19018
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
19020
19019
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
19021
19020
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
19022
19021
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
19023
19022
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
19024
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19025
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
19026
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19023
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
19024
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19025
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19026
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19027
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19028
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19029
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
19030
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19027
19031
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19028
19032
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19029
19033
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -19049,15 +19053,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19049
19053
  width: 100%;
19050
19054
  color: var(--pf-v6-c-text-input-group--Color, inherit);
19051
19055
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
19052
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
19053
- }
19054
- .pf-v6-c-text-input-group::before {
19055
- position: absolute;
19056
- inset: 0;
19057
- pointer-events: none;
19058
- content: "";
19059
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
19060
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
19061
19056
  }
19062
19057
  .pf-v6-c-text-input-group:hover {
19063
19058
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -19071,7 +19066,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19071
19066
  .pf-v6-c-text-input-group.pf-m-plain {
19072
19067
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
19073
19068
  }
19074
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
19069
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
19075
19070
  border: 0;
19076
19071
  }
19077
19072
 
@@ -19086,12 +19081,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19086
19081
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
19087
19082
  }
19088
19083
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
19084
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
19085
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
19089
19086
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
19090
19087
  }
19091
19088
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
19092
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
19093
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
19094
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
19089
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
19090
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
19091
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
19095
19092
  }
19096
19093
 
19097
19094
  .pf-v6-c-text-input-group__text {
@@ -19100,11 +19097,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19100
19097
  grid-template-areas: "text-input";
19101
19098
  grid-template-columns: 1fr;
19102
19099
  }
19103
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
19100
+ .pf-v6-c-text-input-group__text::before {
19104
19101
  position: absolute;
19105
19102
  inset: 0;
19106
19103
  pointer-events: none;
19107
19104
  content: "";
19105
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
19106
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
19107
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
19108
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
19109
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
19108
19110
  }
19109
19111
 
19110
19112
  .pf-v6-c-text-input-group__icon {
package/docs/components/TextInputGroup/examples/TextInputGroup.css CHANGED
@@ -13,3 +13,7 @@
13
13
  #ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
14
14
  height: 540px;
15
15
  }
16
+
17
+ #ws-core-c-text-input-group-plain {
18
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
19
+ }
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -43,6 +43,27 @@ cssPrefix: pf-v6-c-text-input-group
43
43
 
44
44
  ```
45
45
 
46
+ ### Plain
47
+
48
+ The following example shows a `TextInputGroup` with the `.pf-m-plain` class applied. A plain `TextInputGroup` must only be used when contained in an ancestor that has its own border or background color styling. <br/> <br/>
49
+ For the purposes of this example, the `TextInputGroup` is contained in a wrapper with dashed border styling to show where the component is.
50
+
51
+ ```html
52
+ <div class="pf-v6-c-text-input-group pf-m-plain">
53
+ <div class="pf-v6-c-text-input-group__main">
54
+ <span class="pf-v6-c-text-input-group__text">
55
+ <input
56
+ class="pf-v6-c-text-input-group__text-input"
57
+ type="text"
58
+ value="Text input group with plain styling"
59
+ aria-label="Type to filter"
60
+ />
61
+ </span>
62
+ </div>
63
+ </div>
64
+
65
+ ```
66
+
46
67
  ### Utilities and icon with placeholder text
47
68
 
48
69
  ```html
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.157",
4
+ "version": "6.0.0-alpha.158",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -25035,15 +25035,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25035
25035
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
25036
25036
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
25037
25037
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
25038
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
25039
25038
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
25040
25039
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
25041
25040
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
25042
25041
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
25043
25042
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25044
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25045
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25046
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25043
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
25044
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25045
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25046
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25047
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25048
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25049
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25050
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25047
25051
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25048
25052
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25049
25053
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -25069,15 +25073,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25069
25073
  width: 100%;
25070
25074
  color: var(--pf-v6-c-text-input-group--Color, inherit);
25071
25075
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
25072
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25073
- }
25074
- .pf-v6-c-text-input-group::before {
25075
- position: absolute;
25076
- inset: 0;
25077
- pointer-events: none;
25078
- content: "";
25079
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25080
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25081
25076
  }
25082
25077
  .pf-v6-c-text-input-group:hover {
25083
25078
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -25091,7 +25086,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25091
25086
  .pf-v6-c-text-input-group.pf-m-plain {
25092
25087
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
25093
25088
  }
25094
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
25089
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
25095
25090
  border: 0;
25096
25091
  }
25097
25092
 
@@ -25106,12 +25101,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25106
25101
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
25107
25102
  }
25108
25103
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
25104
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
25105
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
25109
25106
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
25110
25107
  }
25111
25108
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
25112
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
25113
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
25114
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
25109
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
25110
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
25111
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
25115
25112
  }
25116
25113
 
25117
25114
  .pf-v6-c-text-input-group__text {
@@ -25120,11 +25117,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25120
25117
  grid-template-areas: "text-input";
25121
25118
  grid-template-columns: 1fr;
25122
25119
  }
25123
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
25120
+ .pf-v6-c-text-input-group__text::before {
25124
25121
  position: absolute;
25125
25122
  inset: 0;
25126
25123
  pointer-events: none;
25127
25124
  content: "";
25125
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25126
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
25127
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
25128
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
25129
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
25128
25130
  }
25129
25131
 
25130
25132
  .pf-v6-c-text-input-group__icon {
package/patternfly.css CHANGED
@@ -25156,15 +25156,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25156
25156
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
25157
25157
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
25158
25158
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
25159
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
25160
25159
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
25161
25160
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
25162
25161
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
25163
25162
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
25164
25163
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25165
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25166
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25167
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25164
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
25165
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25166
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25167
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25168
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25169
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25170
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25171
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25168
25172
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25169
25173
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25170
25174
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -25190,15 +25194,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25190
25194
  width: 100%;
25191
25195
  color: var(--pf-v6-c-text-input-group--Color, inherit);
25192
25196
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
25193
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25194
- }
25195
- .pf-v6-c-text-input-group::before {
25196
- position: absolute;
25197
- inset: 0;
25198
- pointer-events: none;
25199
- content: "";
25200
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25201
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25202
25197
  }
25203
25198
  .pf-v6-c-text-input-group:hover {
25204
25199
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -25212,7 +25207,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25212
25207
  .pf-v6-c-text-input-group.pf-m-plain {
25213
25208
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
25214
25209
  }
25215
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
25210
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
25216
25211
  border: 0;
25217
25212
  }
25218
25213
 
@@ -25227,12 +25222,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25227
25222
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
25228
25223
  }
25229
25224
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
25225
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
25226
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
25230
25227
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
25231
25228
  }
25232
25229
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
25233
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
25234
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
25235
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
25230
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
25231
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
25232
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
25236
25233
  }
25237
25234
 
25238
25235
  .pf-v6-c-text-input-group__text {
@@ -25241,11 +25238,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25241
25238
  grid-template-areas: "text-input";
25242
25239
  grid-template-columns: 1fr;
25243
25240
  }
25244
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
25241
+ .pf-v6-c-text-input-group__text::before {
25245
25242
  position: absolute;
25246
25243
  inset: 0;
25247
25244
  pointer-events: none;
25248
25245
  content: "";
25246
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25247
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
25248
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
25249
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
25250
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
25249
25251
  }
25250
25252
 
25251
25253
  .pf-v6-c-text-input-group__icon {