@patternfly/patternfly 6.2.0-prerelease.23 → 6.2.0-prerelease.25

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/Alert/alert-group.css +2 -2
  2. package/components/Alert/alert-group.scss +2 -1
  3. package/components/FormControl/form-control.css +108 -41
  4. package/components/FormControl/form-control.scss +138 -49
  5. package/components/_index.css +110 -43
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +110 -43
  8. package/patternfly.css +110 -43
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Alert/alert-group.css CHANGED
@@ -105,14 +105,14 @@
105
105
  transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
106
106
  }
107
107
  }
108
- .pf-v6-c-alert-group__item.pf-m-offstage-top {
108
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
109
109
  grid-template-rows: 0fr;
110
110
  margin-block: 0;
111
111
  overflow: hidden;
112
112
  opacity: 0;
113
113
  transform: translateY(-100%);
114
114
  }
115
- .pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
115
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
116
116
  min-height: 0;
117
117
  padding-block-start: 0;
118
118
  padding-block-end: 0;
package/components/Alert/alert-group.scss CHANGED
@@ -154,7 +154,8 @@
154
154
  }
155
155
 
156
156
  // This class is used BEFORE the alert item comes into the list
157
- &.pf-m-offstage-top {
157
+ // Only apply if the item is the first alert in the list (all new alerts should appear at the top)
158
+ &.pf-m-offstage-top:first-child {
158
159
  // make the item have no height and position it up above
159
160
  grid-template-rows: 0fr;
160
161
  margin-block: 0;
package/components/FormControl/form-control.css CHANGED
@@ -17,10 +17,29 @@
17
17
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
18
18
  --pf-v6-c-form-control--Width: 100%;
19
19
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
20
- --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
21
- --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
22
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
23
- --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
20
+ --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
21
+ --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
22
+ --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
23
+ --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
24
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
25
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
26
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
27
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
28
+ --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
29
+ --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
30
+ --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
31
+ --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
32
+ --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
33
+ --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
34
+ --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
35
+ --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
36
+ --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
37
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
38
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
39
+ --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
40
+ --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
41
+ --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
42
+ --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
24
43
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
25
44
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
26
45
  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
@@ -40,25 +59,33 @@
40
59
  --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
41
60
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
42
61
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
62
+ --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
43
63
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
44
64
  --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
45
- --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
65
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
66
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
67
+ --pf-v6-c-form-control__input--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
68
+ --pf-v6-c-form-control__select--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
69
+ --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
46
70
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
47
71
  --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
48
- --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
72
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
73
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
74
+ --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
75
+ --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
76
+ --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
49
77
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
50
78
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
51
- --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
79
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
80
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
52
81
  --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
53
- --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
82
+ --pf-v6-c-form-control__input--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
83
+ --pf-v6-c-form-control__select--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
84
+ --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
85
+ --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
54
86
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
55
87
  --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
56
- --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
57
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
58
- --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
59
- --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
60
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
61
- --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
88
+ --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--icon--width) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
62
89
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
63
90
  --pf-v6-c-form-control--textarea--Height: auto;
64
91
  --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
@@ -72,11 +99,13 @@
72
99
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
73
100
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
74
101
  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
75
- --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
76
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
77
- --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
78
- --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
102
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
103
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
104
+ --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
105
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
106
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
79
107
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
108
+ --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
80
109
  --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
81
110
  }
82
111
 
@@ -130,6 +159,14 @@
130
159
  .pf-v6-c-form-control > :is(input, select) {
131
160
  text-overflow: ellipsis;
132
161
  }
162
+ .pf-v6-c-form-control:has(input) {
163
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
164
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
165
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
166
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
167
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
168
+ }
169
+
133
170
  .pf-v6-c-form-control.pf-m-textarea {
134
171
  padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
135
172
  padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
@@ -139,14 +176,20 @@
139
176
  .pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error {
140
177
  --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap));
141
178
  }
179
+ .pf-v6-c-form-control.pf-m-textarea:has(textarea) {
180
+ --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
181
+ --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
182
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
183
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px));
184
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
185
+ }
142
186
  .pf-v6-c-form-control.pf-m-textarea > textarea {
143
- padding-block-start: calc(var(--pf-v6-c-form-control--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
144
- padding-block-end: calc(var(--pf-v6-c-form-control--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
145
- padding-inline-start: calc(var(--pf-v6-c-form-control--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
146
- padding-inline-end: calc(var(--pf-v6-c-form-control--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0));
147
187
  outline-offset: 0;
148
188
  scrollbar-gutter: stable;
149
189
  }
190
+ .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
191
+ padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
192
+ }
150
193
  .pf-v6-c-form-control.pf-m-readonly {
151
194
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
152
195
  --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
@@ -179,37 +222,58 @@
179
222
  cursor: not-allowed;
180
223
  }
181
224
  .pf-v6-c-form-control.pf-m-error {
182
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
183
225
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
184
226
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
185
227
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
186
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
187
228
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
188
229
  }
189
- .pf-v6-c-form-control.pf-m-error.pf-m-icon {
190
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
230
+ .pf-v6-c-form-control.pf-m-error > textarea {
231
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
232
+ }
233
+ .pf-v6-c-form-control.pf-m-error > input {
234
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
235
+ }
236
+ .pf-v6-c-form-control.pf-m-error > select {
237
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-error--PaddingInlineEnd));
238
+ }
239
+ .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
240
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
191
241
  }
192
242
  .pf-v6-c-form-control.pf-m-success {
193
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
194
243
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
195
244
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
196
245
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
197
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
198
246
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
199
247
  }
200
- .pf-v6-c-form-control.pf-m-success.pf-m-icon {
201
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
248
+ .pf-v6-c-form-control.pf-m-success > textarea {
249
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
250
+ }
251
+ .pf-v6-c-form-control.pf-m-success > input {
252
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
253
+ }
254
+ .pf-v6-c-form-control.pf-m-success > select {
255
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-success--PaddingInlineEnd));
256
+ }
257
+ .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
258
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
202
259
  }
203
260
  .pf-v6-c-form-control.pf-m-warning {
204
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
205
261
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
206
262
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
207
263
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
208
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
209
264
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
210
265
  }
211
- .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
212
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
266
+ .pf-v6-c-form-control.pf-m-warning > textarea {
267
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
268
+ }
269
+ .pf-v6-c-form-control.pf-m-warning > input {
270
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
271
+ }
272
+ .pf-v6-c-form-control.pf-m-warning > select {
273
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd));
274
+ }
275
+ .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
276
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
213
277
  }
214
278
  .pf-v6-c-form-control:hover {
215
279
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
@@ -218,13 +282,19 @@
218
282
  .pf-v6-c-form-control.pf-m-icon {
219
283
  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
220
284
  }
221
- .pf-v6-c-form-control > select {
222
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
285
+ .pf-v6-c-form-control:has(select) {
286
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
287
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
223
288
  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
289
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
290
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
224
291
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
225
292
  }
293
+ .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
294
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
295
+ }
226
296
  @-moz-document url-prefix() {
227
- .pf-v6-c-form-control > select {
297
+ .pf-v6-c-form-control:has(select) {
228
298
  --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
229
299
  --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
230
300
  }
@@ -270,6 +340,7 @@
270
340
  grid-column: 3;
271
341
  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
272
342
  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
343
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
273
344
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
274
345
  pointer-events: none;
275
346
  }
@@ -283,8 +354,4 @@
283
354
  padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
284
355
  padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
285
356
  pointer-events: none;
286
- }
287
-
288
- select ~ .pf-v6-c-form-control__utilities {
289
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
290
357
  }
package/components/FormControl/form-control.scss CHANGED
@@ -21,10 +21,37 @@
21
21
 
22
22
  // padding
23
23
  --#{$form-control}--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
24
- --#{$form-control}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
25
- --#{$form-control}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
26
- --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--inset--base);
27
- --#{$form-control}--PaddingInlineStart: var(--#{$form-control}--inset--base);
24
+ --#{$form-control}--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
25
+ --#{$form-control}--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
26
+ --#{$form-control}--PaddingInlineEnd--base: var(--#{$form-control}--inset--base);
27
+ --#{$form-control}--PaddingInlineStart--base: var(--#{$form-control}--inset--base);
28
+ --#{$form-control}--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart--base);
29
+ --#{$form-control}--PaddingBlockEnd: var(--#{$form-control}--PaddingBlockEnd--base);
30
+ --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
31
+ --#{$form-control}--PaddingInlineStart: var(--#{$form-control}--PaddingInlineStart--base);
32
+
33
+ // utilities padding inline end
34
+ --#{$form-control}__utilities--input--PaddingInlineEnd: var(--#{$form-control}__input--PaddingInlineEnd);
35
+ --#{$form-control}__utilities--select--PaddingInlineEnd: var(--#{$form-control}__select--PaddingInlineEnd);
36
+ --#{$form-control}__utilities--textarea--PaddingInlineEnd: var(--#{$form-control}__textarea--PaddingInlineEnd);
37
+
38
+ // input padding
39
+ --#{$form-control}__input--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart--base);
40
+ --#{$form-control}__input--PaddingBlockEnd: var(--#{$form-control}--PaddingBlockEnd--base);
41
+ --#{$form-control}__input--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
42
+ --#{$form-control}__input--PaddingInlineStart: var(--#{$form-control}--PaddingInlineStart--base);
43
+
44
+ // select padding
45
+ --#{$form-control}__select--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart--base);
46
+ --#{$form-control}__select--PaddingBlockEnd: var(--#{$form-control}--PaddingBlockEnd--base);
47
+ --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
48
+ --#{$form-control}__select--PaddingInlineStart: var(--#{$form-control}--PaddingInlineStart--base);
49
+
50
+ // textarea padding
51
+ --#{$form-control}__textarea--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart--base);
52
+ --#{$form-control}__textarea--PaddingBlockEnd: var(--#{$form-control}--PaddingBlockEnd--base);
53
+ --#{$form-control}__textarea--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
54
+ --#{$form-control}__textarea--PaddingInlineStart: var(--#{$form-control}--PaddingInlineStart--base);
28
55
 
29
56
  // hover
30
57
  --#{$form-control}--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
@@ -56,39 +83,41 @@
56
83
  --#{$form-control}--m-readonly--m-plain--BorderColor: transparent;
57
84
  --#{$form-control}--m-readonly--m-plain--inset--base: 0;
58
85
  --#{$form-control}--m-readonly--m-plain--OutlineOffset: 0;
86
+ --#{$form-control}--icon--width: var(--#{$form-control}--FontSize);
59
87
 
60
88
  // success
61
89
  --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
62
90
  --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
63
- --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
91
+ --#{$form-control}--m-success--PaddingInlineEnd: initial; // remove in breaking change
92
+ --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: initial; // remove in breaking change
93
+ --#{$form-control}__input--m-success--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
94
+ --#{$form-control}__select--m-success--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--select--PaddingInlineEnd));
95
+ --#{$form-control}__textarea--m-success--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--textarea--PaddingInlineEnd));
64
96
 
65
97
  // warning
66
98
  --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
67
99
  --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
68
- --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
69
-
100
+ --#{$form-control}--m-warning--PaddingInlineEnd: initial; // remove in breaking change
101
+ --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: initial; // remove in breaking change
102
+ --#{$form-control}__input--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
103
+ --#{$form-control}__select--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--select--PaddingInlineEnd));
104
+ --#{$form-control}__textarea--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--textarea--PaddingInlineEnd));
105
+
70
106
  // error
71
107
  --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
72
108
  --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
73
- --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
74
- --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
109
+ --#{$form-control}--m-error--PaddingInlineEnd: initial; // remove in breaking change
110
+ --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: initial; // remove in breaking change
111
+ --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize); // remove in breaking change
112
+ --#{$form-control}__input--m-error--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
113
+ --#{$form-control}__select--m-error--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--select--PaddingInlineEnd));
114
+ --#{$form-control}__textarea--m-error--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--textarea--PaddingInlineEnd));
75
115
 
76
116
  // custom icon
77
- --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
117
+ --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
78
118
  --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
79
119
  --#{$form-control}--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
80
- --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
81
- --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}--inset--base);
82
- --#{$form-control}__select--PaddingInlineStart: var(--#{$form-control}--inset--base);
83
-
84
- // Select success
85
- --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
86
-
87
- // Select warning
88
- --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
89
-
90
- // Select invalid
91
- --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
120
+ --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--icon--width) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--ColumnGap) + var(--#{$form-control}__utilities--input--PaddingInlineEnd));
92
121
 
93
122
  // Textarea
94
123
  --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
@@ -108,13 +137,15 @@
108
137
 
109
138
  // Form control utilities
110
139
  --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
111
- --#{$form-control}__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
112
- --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--inset--base);
140
+ --#{$form-control}__utilities--PaddingBlockStart: var(--#{$form-control}--PaddingBlockStart);
141
+ --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--PaddingInlineEnd--base);
142
+ --#{$form-control}__utilities--textarea--PaddingBlockStart: calc(var(--#{$form-control}__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
113
143
 
114
144
  // Form control select toggle icon
115
- --#{$form-control}__toggle-icon--PaddingInlineEnd: var(--#{$form-control}--inset--base);
116
- --#{$form-control}__toggle-icon--PaddingInlineStart: var(--#{$form-control}--inset--base);
145
+ --#{$form-control}__toggle-icon--PaddingInlineStart: 0; // remove in breaking change
146
+ --#{$form-control}__toggle-icon--PaddingInlineEnd: 0; // remove in breaking change
117
147
  --#{$form-control}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
148
+ --#{$form-control}__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
118
149
  --#{$form-control}--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
119
150
  }
120
151
 
@@ -178,26 +209,44 @@
178
209
  text-overflow: ellipsis;
179
210
  }
180
211
 
212
+ @at-root .#{$form-control} {
213
+ &:has(input) {
214
+ --#{$form-control}--PaddingBlockStart: var(--#{$form-control}__input--PaddingBlockStart);
215
+ --#{$form-control}--PaddingBlockEnd: var(--#{$form-control}__input--PaddingBlockEnd);
216
+ --#{$form-control}--PaddingInlineStart: var(--#{$form-control}__input--PaddingInlineStart);
217
+ --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}__input--PaddingInlineEnd);
218
+ --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}__utilities--input--PaddingInlineEnd);
219
+ }
220
+ }
221
+
181
222
  &.pf-m-textarea {
182
223
  padding-block-start: var(--#{$form-control}--textarea--PaddingBlockStart--offset);
183
224
  padding-block-end: var(--#{$form-control}--textarea--PaddingBlockEnd--offset);
184
225
  padding-inline-start: var(--#{$form-control}--textarea--PaddingInlineStart--offset);
185
226
  padding-inline-end: var(--#{$form-control}--textarea--PaddingInlineEnd--offset);
186
-
227
+
187
228
  &.pf-m-success,
188
229
  &.pf-m-warning,
189
230
  &.pf-m-error {
190
231
  --#{$form-control}--m-status--PaddingInlineEnd--offset: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--ColumnGap));
191
232
  }
192
233
 
234
+ &:has(textarea) {
235
+ --#{$form-control}--PaddingBlockStart: calc(var(--#{$form-control}__textarea--PaddingBlockStart) - var(--#{$form-control}--textarea--PaddingBlockStart--offset));
236
+ --#{$form-control}--PaddingBlockEnd: calc(var(--#{$form-control}__textarea--PaddingBlockEnd) - var(--#{$form-control}--textarea--PaddingBlockEnd--offset));
237
+ --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__textarea--PaddingInlineStart) - var(--#{$form-control}--textarea--PaddingInlineStart--offset));
238
+ --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__textarea--PaddingInlineEnd) - var(--#{$form-control}--textarea--PaddingInlineEnd--offset) + var(--#{$form-control}--m-status--PaddingInlineEnd--offset, 0px));
239
+ --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}__utilities--textarea--PaddingInlineEnd);
240
+ }
241
+
193
242
  > textarea {
194
- padding-block-start: calc(var(--#{$form-control}--PaddingBlockStart) - var(--#{$form-control}--textarea--PaddingBlockStart--offset));
195
- padding-block-end: calc(var(--#{$form-control}--PaddingBlockEnd) - var(--#{$form-control}--textarea--PaddingBlockEnd--offset));
196
- padding-inline-start: calc(var(--#{$form-control}--PaddingInlineStart) - var(--#{$form-control}--textarea--PaddingInlineStart--offset));
197
- padding-inline-end: calc(var(--#{$form-control}--PaddingInlineEnd) - var(--#{$form-control}--textarea--PaddingInlineEnd--offset) + var(--#{$form-control}--m-status--PaddingInlineEnd--offset, 0));
198
243
  outline-offset: 0;
199
244
  scrollbar-gutter: stable;
200
245
  }
246
+
247
+ .#{$form-control}__utilities {
248
+ padding-block-start: var(--#{$form-control}__utilities--textarea--PaddingBlockStart);
249
+ }
201
250
  }
202
251
 
203
252
  &.pf-m-readonly {
@@ -240,56 +289,99 @@
240
289
  }
241
290
 
242
291
  &.pf-m-error {
243
- --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-error--PaddingInlineEnd);
244
292
  --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-error--after--BorderColor);
245
293
  --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-error--hover--after--BorderColor);
246
294
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
247
- --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd);
248
295
  --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
249
296
 
297
+ > textarea {
298
+ padding-inline-end: var(--#{$form-control}--m-error--PaddingInlineEnd, var(--#{$form-control}__textarea--m-error--PaddingInlineEnd));
299
+ }
300
+
301
+ > input {
302
+ padding-inline-end: var(--#{$form-control}--m-error--PaddingInlineEnd, var(--#{$form-control}__input--m-error--PaddingInlineEnd));
303
+ }
304
+
305
+ > select {
306
+ padding-inline-end: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd, var(--#{$form-control}__select--m-error--PaddingInlineEnd));
307
+ }
308
+
250
309
  &.pf-m-icon {
251
- --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
310
+ > :is(input) {
311
+ padding-inline-end: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
312
+ }
252
313
  }
253
314
  }
254
315
 
255
316
  &.pf-m-success {
256
- --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-success--PaddingInlineEnd);
257
317
  --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-success--after--BorderColor);
258
318
  --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-success--hover--after--BorderColor);
259
319
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
260
- --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd);
261
320
  --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-success--after--BorderWidth);
262
321
 
322
+ > textarea {
323
+ padding-inline-end: var(--#{$form-control}--m-success--PaddingInlineEnd, var(--#{$form-control}__textarea--m-success--PaddingInlineEnd));
324
+ }
325
+
326
+ > input {
327
+ padding-inline-end: var(--#{$form-control}--m-success--PaddingInlineEnd, var(--#{$form-control}__input--m-success--PaddingInlineEnd));
328
+ }
329
+
330
+ > select {
331
+ padding-inline-end: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd, var(--#{$form-control}__select--m-success--PaddingInlineEnd));
332
+ }
333
+
263
334
  &.pf-m-icon {
264
- --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
335
+ > :is(input) {
336
+ padding-inline-end: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
337
+ }
265
338
  }
266
339
  }
267
340
 
268
341
  &.pf-m-warning {
269
- --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-warning--PaddingInlineEnd);
270
342
  --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-warning--after--BorderColor);
271
343
  --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-warning--hover--after--BorderColor);
272
344
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
273
- --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd);
274
345
  --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-warning--after--BorderWidth);
275
-
346
+
347
+ > textarea {
348
+ padding-inline-end: var(--#{$form-control}--m-warning--PaddingInlineEnd, var(--#{$form-control}__textarea--m-warning--PaddingInlineEnd));
349
+ }
350
+
351
+ > input {
352
+ padding-inline-end: var(--#{$form-control}--m-warning--PaddingInlineEnd, var(--#{$form-control}__input--m-warning--PaddingInlineEnd));
353
+ }
354
+
355
+ > select {
356
+ padding-inline-end: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd, var(--#{$form-control}__select--m-warning--PaddingInlineEnd));
357
+ }
358
+
276
359
  &.pf-m-icon {
277
- --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
360
+ > :is(input) {
361
+ padding-inline-end: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
362
+ }
278
363
  }
279
364
  }
280
-
365
+
281
366
  &:hover {
282
367
  --#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
283
368
  --#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
284
369
  }
285
-
370
+
286
371
  &.pf-m-icon {
287
372
  --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--PaddingInlineEnd);
288
373
  }
289
374
 
290
- > select {
291
- --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}__select--PaddingInlineEnd);
375
+ &:has(select) {
376
+ --#{$form-control}--PaddingBlockStart: var(--#{$form-control}__select--PaddingBlockStart);
377
+ --#{$form-control}--PaddingBlockEnd: var(--#{$form-control}__select--PaddingBlockEnd);
292
378
  --#{$form-control}--PaddingInlineStart: var(--#{$form-control}__select--PaddingInlineStart);
379
+ --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) + var(--#{$form-control}__icon--FontSize));
380
+ --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}__utilities--select--PaddingInlineEnd);
381
+
382
+ & .#{$form-control}__utilities {
383
+ padding-inline-end: var(--#{$form-control}__utilities--select--PaddingInlineEnd);
384
+ }
293
385
 
294
386
  // Firefox's select text has additional padding
295
387
  // stylelint-disable-next-line
@@ -358,6 +450,7 @@
358
450
  grid-column: 3;
359
451
  padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingInlineStart);
360
452
  padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingInlineEnd);
453
+ font-size: var(--#{$form-control}__toggle-icon--FontSize);
361
454
  color: var(--#{$form-control}__toggle-icon--Color);
362
455
  pointer-events: none;
363
456
  }
@@ -372,7 +465,3 @@
372
465
  padding-inline-end: var(--#{$form-control}__utilities--PaddingInlineEnd);
373
466
  pointer-events: none;
374
467
  }
375
-
376
- select ~ .#{$form-control}__utilities {
377
- --#{$form-control}__utilities--PaddingInlineEnd: 0;
378
- }