@patternfly/patternfly 6.3.0-prerelease.77 → 6.3.0-prerelease.78

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/components/FormControl/form-control.css +0 -6
  2. package/components/FormControl/form-control.scss +0 -7
  3. package/components/Label/label.css +3 -3
  4. package/components/Label/label.scss +3 -3
  5. package/components/Panel/panel.css +2 -2
  6. package/components/Panel/panel.scss +2 -2
  7. package/components/Progress/progress.css +1 -1
  8. package/components/Progress/progress.scss +1 -1
  9. package/components/ToggleGroup/toggle-group.css +18 -9
  10. package/components/ToggleGroup/toggle-group.scss +24 -17
  11. package/components/_index.css +24 -21
  12. package/docs/demos/Form/examples/BasicForms.md +89 -37
  13. package/package.json +1 -1
  14. package/patternfly-no-globals.css +24 -21
  15. package/patternfly.css +24 -21
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -9,7 +9,31 @@ subsection: forms
9
9
  ```html
10
10
  <form class="pf-v6-c-form" novalidate>
11
11
  <div class="pf-v6-c-form__group">
12
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-name">
12
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-title">
13
+ <span class="pf-v6-c-form__label-text">Title</span></label>
14
+ </div>
15
+ <div class="pf-v6-c-form__group-control">
16
+ <span class="pf-v6-c-form-control pf-m-placeholder">
17
+ <select id="form-demo-basic-title" name="form-demo-basic-title">
18
+ <option value selected>Selectable one</option>
19
+ <option value="Mr">Mr</option>
20
+ <option value="Miss">Miss</option>
21
+ <option value="Mrs">Mrs</option>
22
+ <option value="Ms">Ms</option>
23
+ <option value="Dr">Dr</option>
24
+ <option value="Dr" disabled>Disabled option</option>
25
+ <option value="Other">Other</option>
26
+ </select>
27
+ <span class="pf-v6-c-form-control__utilities">
28
+ <span class="pf-v6-c-form-control__toggle-icon">
29
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
30
+ </span>
31
+ </span>
32
+ </span>
33
+ </div>
34
+ </div>
35
+ <div class="pf-v6-c-form__group">
36
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-name">
13
37
  <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
14
38
  </div>
15
39
  <div class="pf-v6-c-form__group-control">
@@ -17,15 +41,18 @@ subsection: forms
17
41
  <input
18
42
  required
19
43
  type="text"
20
- id="-name"
21
- name="-name"
22
- aria-describedby="-name-helper"
44
+ id="form-demo-basic-name"
45
+ name="form-demo-basic-name"
46
+ aria-describedby="form-demo-basic-name-helper"
23
47
  />
24
48
  </span>
25
49
 
26
50
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
27
51
  <div class="pf-v6-c-helper-text">
28
- <div class="pf-v6-c-helper-text__item" id="-name-helper">
52
+ <div
53
+ class="pf-v6-c-helper-text__item"
54
+ id="form-demo-basic-name-helper"
55
+ >
29
56
  <span
30
57
  class="pf-v6-c-helper-text__item-text"
31
58
  >Include your middle name if you have one.</span>
@@ -35,17 +62,21 @@ subsection: forms
35
62
  </div>
36
63
  </div>
37
64
  <div class="pf-v6-c-form__group">
38
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-email">
65
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-email">
39
66
  <span class="pf-v6-c-form__label-text">Email</span></label>
40
67
  </div>
41
68
  <div class="pf-v6-c-form__group-control">
42
69
  <span class="pf-v6-c-form-control">
43
- <input type="email" id="-email" name="-email" />
70
+ <input
71
+ type="email"
72
+ id="form-demo-basic-email"
73
+ name="form-demo-basic-email"
74
+ />
44
75
  </span>
45
76
  </div>
46
77
  </div>
47
78
  <div class="pf-v6-c-form__group">
48
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-phone">
79
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-phone">
49
80
  <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
50
81
  <span
51
82
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
@@ -53,7 +84,7 @@ subsection: forms
53
84
  role="button"
54
85
  tabindex="0"
55
86
  aria-label="More information for phone number field"
56
- aria-describedby="-phone"
87
+ aria-describedby="form-demo-basic-phone"
57
88
  >
58
89
  <span class="pf-v6-c-button__icon">
59
90
  <svg
@@ -78,8 +109,8 @@ subsection: forms
78
109
  required
79
110
  type="tel"
80
111
  placeholder="555-555-5555"
81
- id="-phone"
82
- name="-phone"
112
+ id="form-demo-basic-phone"
113
+ name="form-demo-basic-phone"
83
114
  />
84
115
  </span>
85
116
  </div>
@@ -87,9 +118,12 @@ subsection: forms
87
118
  <div
88
119
  class="pf-v6-c-form__group"
89
120
  role="group"
90
- aria-labelledby="form-demo-basic-contact-legend"
121
+ aria-labelledby="form-demo-basicform-demo-basic-contact-legend"
91
122
  >
92
- <div class="pf-v6-c-form__group-label" id="form-demo-basic-contact-legend"><span class="pf-v6-c-form__label">
123
+ <div
124
+ class="pf-v6-c-form__group-label"
125
+ id="form-demo-basicform-demo-basic-contact-legend"
126
+ ><span class="pf-v6-c-form__label">
93
127
  <span class="pf-v6-c-form__label-text">How can we contact you?</span></span>
94
128
  </div>
95
129
  <div class="pf-v6-c-form__group-control pf-m-inline">
@@ -97,42 +131,51 @@ subsection: forms
97
131
  <input
98
132
  class="pf-v6-c-check__input"
99
133
  type="checkbox"
100
- id="-contact-check-1"
101
- name="-contact-check-1"
134
+ id="form-demo-basic-contact-check-1"
135
+ name="form-demo-basic-contact-check-1"
102
136
  />
103
137
 
104
- <label class="pf-v6-c-check__label" for="-contact-check-1">Email</label>
138
+ <label
139
+ class="pf-v6-c-check__label"
140
+ for="form-demo-basic-contact-check-1"
141
+ >Email</label>
105
142
  </div>
106
143
  <div class="pf-v6-c-check">
107
144
  <input
108
145
  class="pf-v6-c-check__input"
109
146
  type="checkbox"
110
- id="-contact-check-2"
111
- name="-contact-check-2"
147
+ id="form-demo-basic-contact-check-2"
148
+ name="form-demo-basic-contact-check-2"
112
149
  />
113
150
 
114
- <label class="pf-v6-c-check__label" for="-contact-check-2">Phone</label>
151
+ <label
152
+ class="pf-v6-c-check__label"
153
+ for="form-demo-basic-contact-check-2"
154
+ >Phone</label>
115
155
  </div>
116
156
  <div class="pf-v6-c-check">
117
157
  <input
118
158
  class="pf-v6-c-check__input"
119
159
  type="checkbox"
120
- id="-contact-check-3"
121
- name="-contact-check-3"
160
+ id="form-demo-basic-contact-check-3"
161
+ name="form-demo-basic-contact-check-3"
122
162
  />
123
163
 
124
- <label class="pf-v6-c-check__label" for="-contact-check-3">Mail</label>
164
+ <label
165
+ class="pf-v6-c-check__label"
166
+ for="form-demo-basic-contact-check-3"
167
+ >Mail</label>
125
168
  </div>
126
169
  </div>
127
170
  </div>
128
171
  <div
129
172
  class="pf-v6-c-form__group"
130
173
  role="radiogroup"
131
- aria-labelledby="form-demo-basic-time-zone-legend"
174
+ aria-labelledby="form-demo-basicform-demo-basic-time-zone-legend"
132
175
  >
133
176
  <div
134
177
  class="pf-v6-c-form__group-label"
135
- id="form-demo-basic-time-zone-legend"
178
+ id="form-demo-basicform-demo-basic-time-zone-legend"
136
179
  ><span class="pf-v6-c-form__label">
137
180
  <span class="pf-v6-c-form__label-text">Time zone</span></span>
138
181
  </div>
@@ -141,31 +184,40 @@ subsection: forms
141
184
  <input
142
185
  class="pf-v6-c-radio__input"
143
186
  type="radio"
144
- id="-time-zone-radio-1"
145
- name="-time-zone-radio"
187
+ id="form-demo-basic-time-zone-radio-1"
188
+ name="form-demo-basic-time-zone-radio"
146
189
  />
147
190
 
148
- <label class="pf-v6-c-radio__label" for="-time-zone-radio-1">Eastern</label>
191
+ <label
192
+ class="pf-v6-c-radio__label"
193
+ for="form-demo-basic-time-zone-radio-1"
194
+ >Eastern</label>
149
195
  </div>
150
196
  <div class="pf-v6-c-radio">
151
197
  <input
152
198
  class="pf-v6-c-radio__input"
153
199
  type="radio"
154
- id="-time-zone-radio-2"
155
- name="-time-zone-radio"
200
+ id="form-demo-basic-time-zone-radio-2"
201
+ name="form-demo-basic-time-zone-radio"
156
202
  />
157
203
 
158
- <label class="pf-v6-c-radio__label" for="-time-zone-radio-2">Central</label>
204
+ <label
205
+ class="pf-v6-c-radio__label"
206
+ for="form-demo-basic-time-zone-radio-2"
207
+ >Central</label>
159
208
  </div>
160
209
  <div class="pf-v6-c-radio">
161
210
  <input
162
211
  class="pf-v6-c-radio__input"
163
212
  type="radio"
164
- id="-time-zone-radio-3"
165
- name="-time-zone-radio"
213
+ id="form-demo-basic-time-zone-radio-3"
214
+ name="form-demo-basic-time-zone-radio"
166
215
  />
167
216
 
168
- <label class="pf-v6-c-radio__label" for="-time-zone-radio-3">Pacific</label>
217
+ <label
218
+ class="pf-v6-c-radio__label"
219
+ for="form-demo-basic-time-zone-radio-3"
220
+ >Pacific</label>
169
221
  </div>
170
222
  </div>
171
223
  </div>
@@ -1268,7 +1320,7 @@ subsection: forms
1268
1320
  <div class="pf-v6-c-form__group">
1269
1321
  <div class="pf-v6-c-form__group-label"><label
1270
1322
  class="pf-v6-c-form__label"
1271
- id="-node-selector-terms-title"
1323
+ id="form-demo-sections-complex-form-node-selector-terms-title"
1272
1324
  >
1273
1325
  <span class="pf-v6-c-form__label-text">Node selector terms</span>&nbsp;<span
1274
1326
  class="pf-v6-c-form__label-required"
@@ -1282,9 +1334,9 @@ subsection: forms
1282
1334
  <input
1283
1335
  required
1284
1336
  type="text"
1285
- id="-node-selector-terms-input-1"
1286
- name="-node-selector-terms-input-1"
1287
- aria-labelledby="-node-selector-terms -node-selector-terms-title"
1337
+ id="form-demo-sections-complex-form-node-selector-terms-input-1"
1338
+ name="form-demo-sections-complex-form-node-selector-terms-input-1"
1339
+ aria-labelledby="form-demo-sections-complex-form-node-selector-terms form-demo-sections-complex-form-node-selector-terms-title"
1288
1340
  />
1289
1341
  </span>
1290
1342
  </div>
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.3.0-prerelease.77",
4
+ "version": "6.3.0-prerelease.78",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
package/patternfly-no-globals.css CHANGED
@@ -16434,12 +16434,6 @@ ul) {
16434
16434
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
16435
16435
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
16436
16436
  }
16437
- @-moz-document url-prefix() {
16438
- .pf-v6-c-form-control:has(select) {
16439
- --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
16440
- --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
16441
- }
16442
- }
16443
16437
  .pf-v6-c-form-control.pf-m-placeholder > select {
16444
16438
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
16445
16439
  }
@@ -17404,7 +17398,7 @@ label.pf-v6-c-input-group__text {
17404
17398
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17405
17399
  --pf-v6-c-label--MaxWidth: 100%;
17406
17400
  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
17407
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
17401
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17408
17402
  --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
17409
17403
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
17410
17404
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -17545,10 +17539,10 @@ label.pf-v6-c-input-group__text {
17545
17539
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
17546
17540
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
17547
17541
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
17548
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
17542
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
17549
17543
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
17550
17544
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
17551
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
17545
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
17552
17546
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
17553
17547
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
17554
17548
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -22297,12 +22291,12 @@ ul.pf-v6-c-list {
22297
22291
  --pf-v6-c-panel--before--BorderWidth: 0;
22298
22292
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
22299
22293
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22300
- --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22294
+ --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22301
22295
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22302
22296
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
22303
22297
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22304
22298
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22305
- --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22299
+ --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22306
22300
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
22307
22301
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
22308
22302
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -22611,7 +22605,7 @@ ul.pf-v6-c-list {
22611
22605
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
22612
22606
  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
22613
22607
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
22614
- --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
22608
+ --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22615
22609
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
22616
22610
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
22617
22611
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -29529,6 +29523,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29529
29523
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
29530
29524
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
29531
29525
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
29526
+ --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
29532
29527
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
29533
29528
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
29534
29529
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -29540,12 +29535,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29540
29535
  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
29541
29536
  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
29542
29537
  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
29543
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
29538
+ --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
29544
29539
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
29540
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
29545
29541
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
29546
29542
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
29547
29543
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
29548
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
29544
+ --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
29549
29545
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
29550
29546
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
29551
29547
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -29568,11 +29564,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29568
29564
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
29569
29565
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
29570
29566
  }
29571
- .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
29567
+ .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
29572
29568
  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
29573
29569
  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
29574
29570
  }
29575
- .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
29571
+ .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
29576
29572
  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
29577
29573
  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
29578
29574
  }
@@ -29591,25 +29587,31 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29591
29587
  background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
29592
29588
  border: 0;
29593
29589
  }
29594
- .pf-v6-c-toggle-group__button::before {
29590
+ .pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
29595
29591
  position: absolute;
29596
- inset-block-start: 0;
29597
- inset-block-end: 0;
29598
- inset-inline-start: 0;
29599
- inset-inline-end: 0;
29592
+ inset: 0;
29600
29593
  pointer-events: none;
29601
29594
  content: "";
29602
29595
  border-style: solid;
29596
+ border-radius: inherit;
29597
+ }
29598
+ .pf-v6-c-toggle-group__button::before {
29603
29599
  border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
29604
29600
  border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29605
29601
  border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29606
29602
  border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29607
29603
  border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29608
29604
  }
29605
+ .pf-v6-c-toggle-group__button::after {
29606
+ inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
29607
+ border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
29608
+ border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
29609
+ }
29609
29610
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
29610
29611
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
29611
29612
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
29612
29613
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
29614
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
29613
29615
  text-decoration-line: none;
29614
29616
  }
29615
29617
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -29617,6 +29619,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29617
29619
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
29618
29620
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
29619
29621
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
29622
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
29620
29623
  }
29621
29624
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
29622
29625
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
package/patternfly.css CHANGED
@@ -16574,12 +16574,6 @@ ul) {
16574
16574
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
16575
16575
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
16576
16576
  }
16577
- @-moz-document url-prefix() {
16578
- .pf-v6-c-form-control:has(select) {
16579
- --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
16580
- --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
16581
- }
16582
- }
16583
16577
  .pf-v6-c-form-control.pf-m-placeholder > select {
16584
16578
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
16585
16579
  }
@@ -17544,7 +17538,7 @@ label.pf-v6-c-input-group__text {
17544
17538
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17545
17539
  --pf-v6-c-label--MaxWidth: 100%;
17546
17540
  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
17547
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
17541
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17548
17542
  --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
17549
17543
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
17550
17544
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -17685,10 +17679,10 @@ label.pf-v6-c-input-group__text {
17685
17679
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
17686
17680
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
17687
17681
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
17688
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
17682
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
17689
17683
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
17690
17684
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
17691
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
17685
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
17692
17686
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
17693
17687
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
17694
17688
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -22437,12 +22431,12 @@ ul.pf-v6-c-list {
22437
22431
  --pf-v6-c-panel--before--BorderWidth: 0;
22438
22432
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
22439
22433
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22440
- --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22434
+ --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22441
22435
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22442
22436
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
22443
22437
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22444
22438
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22445
- --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22439
+ --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22446
22440
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
22447
22441
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
22448
22442
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -22751,7 +22745,7 @@ ul.pf-v6-c-list {
22751
22745
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
22752
22746
  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
22753
22747
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
22754
- --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
22748
+ --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22755
22749
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
22756
22750
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
22757
22751
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -29669,6 +29663,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29669
29663
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
29670
29664
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
29671
29665
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
29666
+ --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
29672
29667
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
29673
29668
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
29674
29669
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -29680,12 +29675,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29680
29675
  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
29681
29676
  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
29682
29677
  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
29683
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
29678
+ --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
29684
29679
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
29680
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
29685
29681
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
29686
29682
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
29687
29683
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
29688
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
29684
+ --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
29689
29685
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
29690
29686
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
29691
29687
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -29708,11 +29704,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29708
29704
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
29709
29705
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
29710
29706
  }
29711
- .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
29707
+ .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
29712
29708
  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
29713
29709
  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
29714
29710
  }
29715
- .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
29711
+ .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
29716
29712
  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
29717
29713
  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
29718
29714
  }
@@ -29731,25 +29727,31 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29731
29727
  background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
29732
29728
  border: 0;
29733
29729
  }
29734
- .pf-v6-c-toggle-group__button::before {
29730
+ .pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
29735
29731
  position: absolute;
29736
- inset-block-start: 0;
29737
- inset-block-end: 0;
29738
- inset-inline-start: 0;
29739
- inset-inline-end: 0;
29732
+ inset: 0;
29740
29733
  pointer-events: none;
29741
29734
  content: "";
29742
29735
  border-style: solid;
29736
+ border-radius: inherit;
29737
+ }
29738
+ .pf-v6-c-toggle-group__button::before {
29743
29739
  border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
29744
29740
  border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29745
29741
  border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29746
29742
  border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29747
29743
  border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29748
29744
  }
29745
+ .pf-v6-c-toggle-group__button::after {
29746
+ inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
29747
+ border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
29748
+ border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
29749
+ }
29749
29750
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
29750
29751
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
29751
29752
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
29752
29753
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
29754
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
29753
29755
  text-decoration-line: none;
29754
29756
  }
29755
29757
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -29757,6 +29759,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29757
29759
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
29758
29760
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
29759
29761
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
29762
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
29760
29763
  }
29761
29764
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
29762
29765
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);