@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/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
@@ -7767,12 +7767,6 @@ ul) {
7767
7767
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
7768
7768
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7769
7769
  }
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
7770
  .pf-v6-c-form-control.pf-m-placeholder > select {
7777
7771
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
7778
7772
  }
@@ -8737,7 +8731,7 @@ label.pf-v6-c-input-group__text {
8737
8731
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
8738
8732
  --pf-v6-c-label--MaxWidth: 100%;
8739
8733
  --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);
8734
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
8741
8735
  --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
8742
8736
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
8743
8737
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -8878,10 +8872,10 @@ label.pf-v6-c-input-group__text {
8878
8872
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
8879
8873
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
8880
8874
  --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);
8875
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
8882
8876
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
8883
8877
  --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);
8878
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
8885
8879
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
8886
8880
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
8887
8881
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -13630,12 +13624,12 @@ ul.pf-v6-c-list {
13630
13624
  --pf-v6-c-panel--before--BorderWidth: 0;
13631
13625
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
13632
13626
  --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);
13627
+ --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13634
13628
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
13635
13629
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
13636
13630
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
13637
13631
  --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);
13632
+ --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13639
13633
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
13640
13634
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13641
13635
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -13944,7 +13938,7 @@ ul.pf-v6-c-list {
13944
13938
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
13945
13939
  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
13946
13940
  --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);
13941
+ --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13948
13942
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
13949
13943
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
13950
13944
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -20862,6 +20856,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20862
20856
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
20863
20857
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
20864
20858
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
20859
+ --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
20865
20860
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
20866
20861
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
20867
20862
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -20873,12 +20868,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20873
20868
  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
20874
20869
  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
20875
20870
  --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);
20871
+ --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
20877
20872
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
20873
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
20878
20874
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
20879
20875
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20880
20876
  --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);
20877
+ --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
20882
20878
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
20883
20879
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
20884
20880
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -20901,11 +20897,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20901
20897
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
20902
20898
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
20903
20899
  }
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 {
20900
+ .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
20905
20901
  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
20906
20902
  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
20907
20903
  }
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 {
20904
+ .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
20909
20905
  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
20910
20906
  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
20911
20907
  }
@@ -20924,25 +20920,31 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20924
20920
  background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
20925
20921
  border: 0;
20926
20922
  }
20927
- .pf-v6-c-toggle-group__button::before {
20923
+ .pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
20928
20924
  position: absolute;
20929
- inset-block-start: 0;
20930
- inset-block-end: 0;
20931
- inset-inline-start: 0;
20932
- inset-inline-end: 0;
20925
+ inset: 0;
20933
20926
  pointer-events: none;
20934
20927
  content: "";
20935
20928
  border-style: solid;
20929
+ border-radius: inherit;
20930
+ }
20931
+ .pf-v6-c-toggle-group__button::before {
20936
20932
  border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
20937
20933
  border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
20938
20934
  border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
20939
20935
  border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
20940
20936
  border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
20941
20937
  }
20938
+ .pf-v6-c-toggle-group__button::after {
20939
+ inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
20940
+ border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
20941
+ border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
20942
+ }
20942
20943
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
20943
20944
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
20944
20945
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
20945
20946
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
20947
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
20946
20948
  text-decoration-line: none;
20947
20949
  }
20948
20950
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -20950,6 +20952,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20950
20952
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
20951
20953
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
20952
20954
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
20955
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
20953
20956
  }
20954
20957
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
20955
20958
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);