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

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 (20) hide show
  1. package/components/CodeEditor/code-editor.css +17 -2
  2. package/components/CodeEditor/code-editor.scss +20 -2
  3. package/components/FormControl/form-control.css +0 -6
  4. package/components/FormControl/form-control.scss +0 -7
  5. package/components/Label/label.css +3 -3
  6. package/components/Label/label.scss +3 -3
  7. package/components/Panel/panel.css +2 -2
  8. package/components/Panel/panel.scss +2 -2
  9. package/components/Progress/progress.css +1 -1
  10. package/components/Progress/progress.scss +1 -1
  11. package/components/ToggleGroup/toggle-group.css +18 -9
  12. package/components/ToggleGroup/toggle-group.scss +24 -17
  13. package/components/_index.css +41 -23
  14. package/docs/components/CodeEditor/examples/CodeEditor.md +17 -3
  15. package/docs/demos/Form/examples/BasicForms.md +89 -37
  16. package/package.json +2 -2
  17. package/patternfly-no-globals.css +41 -23
  18. package/patternfly.css +41 -23
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
package/components/CodeEditor/code-editor.css CHANGED
@@ -41,6 +41,7 @@
41
41
  --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
42
42
  --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
43
43
  --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
44
+ --pf-v6-c-code-editor--m-read-only__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
44
45
  --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
45
46
  --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
46
47
  --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -60,6 +61,7 @@
60
61
  flex-direction: column;
61
62
  }
62
63
  .pf-v6-c-code-editor.pf-m-read-only {
64
+ --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor);
63
65
  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
64
66
  }
65
67
  .pf-v6-c-code-editor.pf-m-full-height {
@@ -76,17 +78,29 @@
76
78
  position: relative;
77
79
  display: flex;
78
80
  }
79
- .pf-v6-c-code-editor__header::before {
81
+ .pf-v6-c-code-editor__header::before, .pf-v6-c-code-editor__header::after {
82
+ position: absolute;
83
+ pointer-events: none;
84
+ content: "";
85
+ }
86
+ .pf-v6-c-code-editor__header::after {
80
87
  position: absolute;
81
88
  inset: 0;
82
89
  pointer-events: none;
83
90
  content: "";
84
91
  border: var(--pf-v6-c-code-editor__header--BorderWidth) solid var(--pf-v6-c-code-editor__header--BorderColor);
85
- border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
92
+ border-block-end-width: 0;
86
93
  border-start-start-radius: var(--pf-v6-c-code-editor__header--BorderStartStartRadius);
87
94
  border-start-end-radius: var(--pf-v6-c-code-editor__header--BorderStartEndRadius);
88
95
  }
96
+ .pf-v6-c-code-editor__header::before {
97
+ inset-block-end: 0;
98
+ inset-inline-start: 0;
99
+ inset-inline-end: 0;
100
+ border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
101
+ }
89
102
  .pf-v6-c-code-editor__header.pf-m-plain {
103
+ --pf-v6-c-code-editor__header--BorderWidth: 0;
90
104
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
91
105
  }
92
106
 
@@ -183,6 +197,7 @@
183
197
  padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
184
198
  padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
185
199
  padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
200
+ margin-inline-start: auto;
186
201
  color: var(--pf-v6-c-code-editor__tab--Color);
187
202
  background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
188
203
  border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
package/components/CodeEditor/code-editor.scss CHANGED
@@ -58,6 +58,7 @@
58
58
 
59
59
  // tab
60
60
  --#{$code-editor}__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
61
+ --#{$code-editor}--m-read-only__tab--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
61
62
  --#{$code-editor}__tab--Color: var(--pf-t--global--text--color--subtle);
62
63
  --#{$code-editor}__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
63
64
  --#{$code-editor}__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -79,6 +80,7 @@
79
80
  flex-direction: column;
80
81
 
81
82
  &.pf-m-read-only {
83
+ --#{$code-editor}__tab--BackgroundColor: var(--#{$code-editor}--m-read-only__tab--BackgroundColor);
82
84
  --#{$code-editor}__main--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
83
85
  }
84
86
 
@@ -97,18 +99,33 @@
97
99
  position: relative;
98
100
  display: flex;
99
101
 
100
- &::before {
102
+ &::before,
103
+ &::after {
104
+ position: absolute;
105
+ pointer-events: none;
106
+ content: "";
107
+ }
108
+
109
+ &::after {
101
110
  position: absolute;
102
111
  inset: 0;
103
112
  pointer-events: none;
104
113
  content: "";
105
114
  border: var(--#{$code-editor}__header--BorderWidth) solid var(--#{$code-editor}__header--BorderColor);
106
- border-block-end: var(--#{$code-editor}__header--before--BorderBlockEndWidth) solid var(--#{$code-editor}__header--before--BorderBlockEndColor); // TODO - remove in breaking change
115
+ border-block-end-width: 0;
107
116
  border-start-start-radius: var(--#{$code-editor}__header--BorderStartStartRadius);
108
117
  border-start-end-radius: var(--#{$code-editor}__header--BorderStartEndRadius);
109
118
  }
110
119
 
120
+ &::before {
121
+ inset-block-end: 0;
122
+ inset-inline-start: 0;
123
+ inset-inline-end: 0;
124
+ border-block-end: var(--#{$code-editor}__header--before--BorderBlockEndWidth) solid var(--#{$code-editor}__header--before--BorderBlockEndColor);
125
+ }
126
+
111
127
  &.pf-m-plain {
128
+ --#{$code-editor}__header--BorderWidth: 0;
112
129
  --#{$code-editor}__header-content--BackgroundColor: var(--#{$code-editor}__header-content--m-plain--BackgroundColor);
113
130
  }
114
131
  }
@@ -212,6 +229,7 @@
212
229
  padding-block-end: var(--#{$code-editor}__tab--PaddingBlockEnd);
213
230
  padding-inline-start: var(--#{$code-editor}__tab--PaddingInlineStart);
214
231
  padding-inline-end: var(--#{$code-editor}__tab--PaddingInlineEnd);
232
+ margin-inline-start: auto;
215
233
  color: var(--#{$code-editor}__tab--Color);
216
234
  background-color: var(--#{$code-editor}__tab--BackgroundColor);
217
235
  border-color: var(--#{$code-editor}__tab--BorderColor);
package/components/FormControl/form-control.css CHANGED
@@ -313,12 +313,6 @@
313
313
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
314
314
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
315
315
  }
316
- @-moz-document url-prefix() {
317
- .pf-v6-c-form-control:has(select) {
318
- --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
319
- --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
320
- }
321
- }
322
316
  .pf-v6-c-form-control.pf-m-placeholder > select {
323
317
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
324
318
  }
package/components/FormControl/form-control.scss CHANGED
@@ -394,13 +394,6 @@
394
394
  & .#{$form-control}__utilities {
395
395
  padding-inline-end: var(--#{$form-control}__utilities--select--PaddingInlineEnd);
396
396
  }
397
-
398
- // Firefox's select text has additional padding
399
- // stylelint-disable-next-line
400
- @-moz-document url-prefix() {
401
- --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) - 1px);
402
- --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__select--PaddingInlineStart) - 4px);
403
- }
404
397
  }
405
398
 
406
399
  &.pf-m-placeholder > select {
package/components/Label/label.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6
6
  --pf-v6-c-label--MaxWidth: 100%;
7
7
  --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)));
8
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
8
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9
9
  --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
10
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
11
11
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -146,10 +146,10 @@
146
146
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
147
147
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
148
148
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
149
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
149
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
150
150
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
151
151
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
152
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
152
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
153
153
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
154
154
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
155
155
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
package/components/Label/label.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  --#{$label}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
8
8
  --#{$label}--MaxWidth: 100%;
9
9
  --#{$label}--MinWidth: calc((var(--#{$label}--FontSize) * var(--pf-t--global--font--line-height--body) + var(--#{$label}--PaddingBlockStart) + var(--#{$label}--PaddingBlockEnd)));
10
- --#{$label}--BorderWidth: var(--pf-t--global--border--width--regular);
10
+ --#{$label}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11
11
  --#{$label}--BorderColor: var(--pf-t--global--border--color--high-contrast);
12
12
  --#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
13
13
  --#{$label}--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -184,10 +184,10 @@
184
184
  // Overflow
185
185
  --#{$label}--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
186
186
  --#{$label}--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
187
- --#{$label}--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
187
+ --#{$label}--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
188
188
  --#{$label}--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
189
189
  --#{$label}--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
190
- --#{$label}--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
190
+ --#{$label}--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
191
191
 
192
192
  // Add
193
193
  --#{$label}--m-add--Color: var(--pf-t--global--text--color--brand--default);
package/components/Panel/panel.css CHANGED
@@ -8,12 +8,12 @@
8
8
  --pf-v6-c-panel--before--BorderWidth: 0;
9
9
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
10
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
- --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
11
+ --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
12
12
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
13
13
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
14
14
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
15
15
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
16
- --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
16
+ --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17
17
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
18
18
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
19
19
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
package/components/Panel/panel.scss CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  // secondary modifier
16
16
  --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
17
- --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
17
+ --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
18
18
 
19
19
  // bordered
20
20
  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
@@ -23,7 +23,7 @@
23
23
  // raised
24
24
  --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
25
25
  --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
26
- --#{$panel}--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
26
+ --#{$panel}--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
27
27
 
28
28
  // header
29
29
  --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
package/components/Progress/progress.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
5
5
  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
6
6
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
7
- --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
7
+ --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
8
8
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
9
9
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
package/components/Progress/progress.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
10
10
  --#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
11
11
  --#{$progress}__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
12
- --#{$progress}__bar--BorderWidth: var(--pf-t--global--border--width--regular);
12
+ --#{$progress}__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13
13
  --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
14
14
  --#{$progress}__status--Gap: var(--pf-t--global--spacer--sm);
15
15
  --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
12
12
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
13
13
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
14
+ --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14
15
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
15
16
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
16
17
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -22,12 +23,13 @@
22
23
  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
23
24
  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
24
25
  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
25
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
26
+ --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
26
27
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
28
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
27
29
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
28
30
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
29
31
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
30
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
32
+ --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
31
33
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
32
34
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
33
35
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -50,11 +52,11 @@
50
52
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
51
53
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
52
54
  }
53
- .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 {
55
+ .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
54
56
  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
55
57
  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
56
58
  }
57
- .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 {
59
+ .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
58
60
  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
59
61
  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
60
62
  }
@@ -73,25 +75,31 @@
73
75
  background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
74
76
  border: 0;
75
77
  }
76
- .pf-v6-c-toggle-group__button::before {
78
+ .pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
77
79
  position: absolute;
78
- inset-block-start: 0;
79
- inset-block-end: 0;
80
- inset-inline-start: 0;
81
- inset-inline-end: 0;
80
+ inset: 0;
82
81
  pointer-events: none;
83
82
  content: "";
84
83
  border-style: solid;
84
+ border-radius: inherit;
85
+ }
86
+ .pf-v6-c-toggle-group__button::before {
85
87
  border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
86
88
  border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
87
89
  border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
88
90
  border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
89
91
  border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
90
92
  }
93
+ .pf-v6-c-toggle-group__button::after {
94
+ inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
95
+ border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
96
+ border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
97
+ }
91
98
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
92
99
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
93
100
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
94
101
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
102
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
95
103
  text-decoration-line: none;
96
104
  }
97
105
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -99,6 +107,7 @@
99
107
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
100
108
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
101
109
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
110
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
102
111
  }
103
112
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
104
113
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
15
15
  --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
16
16
  --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
17
+ --#{$toggle-group}__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17
18
  --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
18
19
  --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
19
20
 
@@ -31,14 +32,15 @@
31
32
  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
32
33
  --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
33
34
  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
34
- --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
35
+ --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
35
36
  --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
37
+ --#{$toggle-group}__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
36
38
 
37
39
  // disabled
38
40
  --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
39
41
  --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
40
42
  --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
41
- --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
43
+ --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
42
44
  --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
43
45
 
44
46
  // Compact
@@ -68,21 +70,15 @@
68
70
 
69
71
  &:first-child {
70
72
  .#{$toggle-group}__button {
71
- &,
72
- &::before {
73
- border-start-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderStartStartRadius);
74
- border-end-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderEndStartRadius);
75
- }
73
+ border-start-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderStartStartRadius);
74
+ border-end-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderEndStartRadius);
76
75
  }
77
76
  }
78
77
 
79
78
  &:last-child {
80
79
  .#{$toggle-group}__button {
81
- &,
82
- &::before {
83
- border-start-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderStartEndRadius);
84
- border-end-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderEndEndRadius);
85
- }
80
+ border-start-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderStartEndRadius);
81
+ border-end-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderEndEndRadius);
86
82
  }
87
83
  }
88
84
  }
@@ -101,15 +97,17 @@
101
97
  background-color: var(--#{$toggle-group}__button--BackgroundColor);
102
98
  border: 0;
103
99
 
104
- &::before {
100
+ &::before,
101
+ &::after {
105
102
  position: absolute;
106
- inset-block-start: 0;
107
- inset-block-end: 0;
108
- inset-inline-start: 0;
109
- inset-inline-end: 0;
103
+ inset: 0;
110
104
  pointer-events: none;
111
105
  content: "";
112
106
  border-style: solid;
107
+ border-radius: inherit;
108
+ }
109
+
110
+ &::before {
113
111
  border-width: var(--#{$toggle-group}__button--before--BorderWidth);
114
112
  border-block-start-color: var(--#{$toggle-group}__button--before--BorderBlockStartColor, var(--#{$toggle-group}__button--before--BorderColor));
115
113
  border-block-end-color: var(--#{$toggle-group}__button--before--BorderBlockEndColor, var(--#{$toggle-group}__button--before--BorderColor));
@@ -117,10 +115,18 @@
117
115
  border-inline-end-color: var(--#{$toggle-group}__button--before--BorderInlineEndColor, var(--#{$toggle-group}__button--before--BorderColor));
118
116
  }
119
117
 
118
+ // forced-colors borders
119
+ &::after {
120
+ inset: var(--#{$toggle-group}__button--before--BorderWidth);
121
+ border-color: var(--#{$toggle-group}__button--after--BorderColor, transparent);
122
+ border-width: var(--#{$toggle-group}__button--after--BorderWidth, 0);
123
+ }
124
+
120
125
  &:is(:hover, :focus) {
121
126
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--hover--BackgroundColor);
122
127
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
123
128
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
129
+ --#{$toggle-group}__button--after--BorderWidth: var(--#{$toggle-group}__button--hover--after--BorderWidth);
124
130
 
125
131
  text-decoration-line: none;
126
132
  }
@@ -130,6 +136,7 @@
130
136
  --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
131
137
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex);
132
138
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor);
139
+ --#{$toggle-group}__button--after--BorderWidth: var(--#{$toggle-group}__button--m-selected--after--BorderWidth);
133
140
  }
134
141
 
135
142
  &:is(:disabled, .pf-m-disabled) {
package/components/_index.css CHANGED
@@ -3284,6 +3284,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3284
3284
  --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3285
3285
  --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3286
3286
  --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3287
+ --pf-v6-c-code-editor--m-read-only__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
3287
3288
  --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
3288
3289
  --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3289
3290
  --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -3303,6 +3304,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3303
3304
  flex-direction: column;
3304
3305
  }
3305
3306
  .pf-v6-c-code-editor.pf-m-read-only {
3307
+ --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor);
3306
3308
  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
3307
3309
  }
3308
3310
  .pf-v6-c-code-editor.pf-m-full-height {
@@ -3319,17 +3321,29 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3319
3321
  position: relative;
3320
3322
  display: flex;
3321
3323
  }
3322
- .pf-v6-c-code-editor__header::before {
3324
+ .pf-v6-c-code-editor__header::before, .pf-v6-c-code-editor__header::after {
3325
+ position: absolute;
3326
+ pointer-events: none;
3327
+ content: "";
3328
+ }
3329
+ .pf-v6-c-code-editor__header::after {
3323
3330
  position: absolute;
3324
3331
  inset: 0;
3325
3332
  pointer-events: none;
3326
3333
  content: "";
3327
3334
  border: var(--pf-v6-c-code-editor__header--BorderWidth) solid var(--pf-v6-c-code-editor__header--BorderColor);
3328
- border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
3335
+ border-block-end-width: 0;
3329
3336
  border-start-start-radius: var(--pf-v6-c-code-editor__header--BorderStartStartRadius);
3330
3337
  border-start-end-radius: var(--pf-v6-c-code-editor__header--BorderStartEndRadius);
3331
3338
  }
3339
+ .pf-v6-c-code-editor__header::before {
3340
+ inset-block-end: 0;
3341
+ inset-inline-start: 0;
3342
+ inset-inline-end: 0;
3343
+ border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
3344
+ }
3332
3345
  .pf-v6-c-code-editor__header.pf-m-plain {
3346
+ --pf-v6-c-code-editor__header--BorderWidth: 0;
3333
3347
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
3334
3348
  }
3335
3349
 
@@ -3426,6 +3440,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3426
3440
  padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
3427
3441
  padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
3428
3442
  padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
3443
+ margin-inline-start: auto;
3429
3444
  color: var(--pf-v6-c-code-editor__tab--Color);
3430
3445
  background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
3431
3446
  border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
@@ -7767,12 +7782,6 @@ ul) {
7767
7782
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
7768
7783
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7769
7784
  }
7770
- @-moz-document url-prefix() {
7771
- .pf-v6-c-form-control:has(select) {
7772
- --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
7773
- --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
7774
- }
7775
- }
7776
7785
  .pf-v6-c-form-control.pf-m-placeholder > select {
7777
7786
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
7778
7787
  }
@@ -8737,7 +8746,7 @@ label.pf-v6-c-input-group__text {
8737
8746
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
8738
8747
  --pf-v6-c-label--MaxWidth: 100%;
8739
8748
  --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)));
8740
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
8749
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
8741
8750
  --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
8742
8751
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
8743
8752
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -8878,10 +8887,10 @@ label.pf-v6-c-input-group__text {
8878
8887
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
8879
8888
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
8880
8889
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
8881
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
8890
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
8882
8891
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
8883
8892
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
8884
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
8893
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
8885
8894
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
8886
8895
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
8887
8896
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -13630,12 +13639,12 @@ ul.pf-v6-c-list {
13630
13639
  --pf-v6-c-panel--before--BorderWidth: 0;
13631
13640
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
13632
13641
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13633
- --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
13642
+ --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13634
13643
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
13635
13644
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
13636
13645
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
13637
13646
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13638
- --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
13647
+ --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13639
13648
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
13640
13649
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13641
13650
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -13944,7 +13953,7 @@ ul.pf-v6-c-list {
13944
13953
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
13945
13954
  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
13946
13955
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
13947
- --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
13956
+ --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13948
13957
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
13949
13958
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
13950
13959
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -20862,6 +20871,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20862
20871
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
20863
20872
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
20864
20873
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
20874
+ --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
20865
20875
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
20866
20876
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
20867
20877
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -20873,12 +20883,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20873
20883
  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
20874
20884
  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
20875
20885
  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
20876
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
20886
+ --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
20877
20887
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
20888
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
20878
20889
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
20879
20890
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20880
20891
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
20881
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
20892
+ --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
20882
20893
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
20883
20894
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
20884
20895
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -20901,11 +20912,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20901
20912
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
20902
20913
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
20903
20914
  }
20904
- .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 {
20915
+ .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
20905
20916
  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
20906
20917
  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
20907
20918
  }
20908
- .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 {
20919
+ .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
20909
20920
  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
20910
20921
  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
20911
20922
  }
@@ -20924,25 +20935,31 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20924
20935
  background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
20925
20936
  border: 0;
20926
20937
  }
20927
- .pf-v6-c-toggle-group__button::before {
20938
+ .pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
20928
20939
  position: absolute;
20929
- inset-block-start: 0;
20930
- inset-block-end: 0;
20931
- inset-inline-start: 0;
20932
- inset-inline-end: 0;
20940
+ inset: 0;
20933
20941
  pointer-events: none;
20934
20942
  content: "";
20935
20943
  border-style: solid;
20944
+ border-radius: inherit;
20945
+ }
20946
+ .pf-v6-c-toggle-group__button::before {
20936
20947
  border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
20937
20948
  border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
20938
20949
  border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
20939
20950
  border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
20940
20951
  border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
20941
20952
  }
20953
+ .pf-v6-c-toggle-group__button::after {
20954
+ inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
20955
+ border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
20956
+ border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
20957
+ }
20942
20958
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
20943
20959
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
20944
20960
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
20945
20961
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
20962
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
20946
20963
  text-decoration-line: none;
20947
20964
  }
20948
20965
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -20950,6 +20967,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20950
20967
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
20951
20968
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
20952
20969
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
20970
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
20953
20971
  }
20954
20972
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
20955
20973
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);