@patternfly/patternfly 6.0.0-alpha.66 → 6.0.0-alpha.67

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 (14) hide show
  1. package/base/patternfly-variables.css +1 -4
  2. package/base/tokens/_tokens-default.scss +4 -4
  3. package/components/ToggleGroup/toggle-group.css +22 -3
  4. package/components/ToggleGroup/toggle-group.scss +30 -7
  5. package/package.json +1 -1
  6. package/patternfly-base-no-globals-theme-dark-unversioned.css +1 -4
  7. package/patternfly-base-no-globals.css +1 -4
  8. package/patternfly-base-theme-dark-unversioned.css +1 -4
  9. package/patternfly-base.css +1 -4
  10. package/patternfly-no-globals.css +23 -7
  11. package/patternfly-theme-dark-unversioned.css +23 -7
  12. package/patternfly.css +23 -7
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -384,10 +384,6 @@ html .ws-preview {
384
384
  --pf-t--color--white: #fff;
385
385
  }
386
386
 
387
- /**
388
- * Do not edit directly
389
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
390
- */
391
387
  :root {
392
388
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
393
389
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -670,6 +666,7 @@ html .ws-preview {
670
666
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
671
667
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
672
668
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
669
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
673
670
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
674
671
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
675
672
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/base/tokens/_tokens-default.scss CHANGED
@@ -1,7 +1,6 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
4
- */
1
+ // Do not edit directly
2
+ // Generated on Tue, 05 Dec 2023 16:11:05 GMT
3
+
5
4
 
6
5
  :root {
7
6
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
@@ -285,6 +284,7 @@
285
284
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
286
285
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
287
286
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
287
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
288
288
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
289
289
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
290
290
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -12,8 +12,6 @@
12
12
  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
13
13
  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
14
14
  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
15
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
17
15
  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
18
16
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
19
17
  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -25,7 +23,13 @@
25
23
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
26
24
  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
27
25
  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
26
+ --pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
28
27
  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
28
+ --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
29
+ --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
30
+ --pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
31
+ --pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
32
+ --pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
29
33
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
30
34
  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
31
35
  --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
@@ -78,7 +82,12 @@
78
82
  inset-inline-end: 0;
79
83
  pointer-events: none;
80
84
  content: "";
81
- border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
85
+ border-style: solid;
86
+ border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
87
+ border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
88
+ border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
89
+ border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
90
+ border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
82
91
  }
83
92
  .pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
84
93
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
@@ -95,9 +104,19 @@
95
104
  .pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
96
105
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
97
106
  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
107
+ --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
108
+ --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
98
109
  pointer-events: none;
99
110
  }
100
111
 
112
+ .pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
113
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
114
+ }
115
+
116
+ .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
117
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
118
+ }
119
+
101
120
  .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
102
121
  .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
103
122
  margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -15,8 +15,6 @@
15
15
  --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
16
16
  --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
17
17
  --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
18
- --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
19
- --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20
18
  --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
21
19
  --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
22
20
 
@@ -34,8 +32,16 @@
34
32
  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
35
33
  --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
36
34
  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
35
+ --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
37
36
  --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
38
37
 
38
+ // disabled
39
+ --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
40
+ --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
41
+ --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
42
+ --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
43
+ --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
44
+
39
45
  // Compact
40
46
  --#{$toggle-group}--m-compact__button--PaddingTop: 0;
41
47
  --#{$toggle-group}--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
@@ -98,13 +104,18 @@
98
104
 
99
105
  &::before {
100
106
  position: absolute;
101
- inset-block-start: 0;
102
- inset-block-end: 0;
103
- inset-inline-start: 0;
104
- inset-inline-end: 0;
107
+ inset-block-start: 0;
108
+ inset-block-end: 0;
109
+ inset-inline-start: 0;
110
+ inset-inline-end: 0;
105
111
  pointer-events: none;
106
112
  content: "";
107
- border: var(--#{$toggle-group}__button--before--BorderWidth) solid var(--#{$toggle-group}__button--before--BorderColor);
113
+ border-style: solid;
114
+ border-width: var(--#{$toggle-group}__button--before--BorderWidth);
115
+ border-block-start-color: var(--#{$toggle-group}__button--before--BorderBlockStartColor, var(--#{$toggle-group}__button--before--BorderColor));
116
+ border-block-end-color: var(--#{$toggle-group}__button--before--BorderBlockEndColor, var(--#{$toggle-group}__button--before--BorderColor));
117
+ border-inline-start-color: var(--#{$toggle-group}__button--before--BorderInlineStartColor, var(--#{$toggle-group}__button--before--BorderColor));
118
+ border-inline-end-color: var(--#{$toggle-group}__button--before--BorderInlineEndColor, var(--#{$toggle-group}__button--before--BorderColor));
108
119
  }
109
120
 
110
121
  &:hover,
@@ -127,11 +138,23 @@
127
138
  &.pf-m-disabled {
128
139
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--disabled--BackgroundColor);
129
140
  --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--disabled--Color);
141
+ --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--disabled--ZIndex);
142
+ --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--disabled--before--BorderColor);
130
143
 
131
144
  pointer-events: none;
132
145
  }
133
146
  }
134
147
 
148
+ // For consecutive selected items, turn the left border back to what it was
149
+ .pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
150
+ --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor);
151
+ }
152
+
153
+ // For consecutive disabled items, turn the left border back to what it was
154
+ .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
155
+ --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor);
156
+ }
157
+
135
158
  .#{$toggle-group}__icon + .#{$toggle-group}__text,
136
159
  .#{$toggle-group}__text + .#{$toggle-group}__icon {
137
160
  margin-inline-start: var(--#{$toggle-group}__icon--text--MarginLeft);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.66",
4
+ "version": "6.0.0-alpha.67",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -411,10 +411,6 @@ html .ws-preview {
411
411
  --pf-t--color--white: #fff;
412
412
  }
413
413
 
414
- /**
415
- * Do not edit directly
416
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
417
- */
418
414
  :root {
419
415
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
420
416
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -697,6 +693,7 @@ html .ws-preview {
697
693
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
698
694
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
699
695
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
696
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
700
697
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
701
698
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
702
699
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/patternfly-base-no-globals.css CHANGED
@@ -411,10 +411,6 @@ html .ws-preview {
411
411
  --pf-t--color--white: #fff;
412
412
  }
413
413
 
414
- /**
415
- * Do not edit directly
416
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
417
- */
418
414
  :root {
419
415
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
420
416
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -697,6 +693,7 @@ html .ws-preview {
697
693
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
698
694
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
699
695
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
696
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
700
697
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
701
698
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
702
699
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -411,10 +411,6 @@ html .ws-preview {
411
411
  --pf-t--color--white: #fff;
412
412
  }
413
413
 
414
- /**
415
- * Do not edit directly
416
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
417
- */
418
414
  :root {
419
415
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
420
416
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -697,6 +693,7 @@ html .ws-preview {
697
693
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
698
694
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
699
695
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
696
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
700
697
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
701
698
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
702
699
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/patternfly-base.css CHANGED
@@ -411,10 +411,6 @@ html .ws-preview {
411
411
  --pf-t--color--white: #fff;
412
412
  }
413
413
 
414
- /**
415
- * Do not edit directly
416
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
417
- */
418
414
  :root {
419
415
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
420
416
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -697,6 +693,7 @@ html .ws-preview {
697
693
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
698
694
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
699
695
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
696
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
700
697
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
701
698
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
702
699
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/patternfly-no-globals.css CHANGED
@@ -495,10 +495,6 @@ html .ws-preview {
495
495
  --pf-t--color--white: #fff;
496
496
  }
497
497
 
498
- /**
499
- * Do not edit directly
500
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
501
- */
502
498
  :root {
503
499
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
504
500
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -781,6 +777,7 @@ html .ws-preview {
781
777
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
782
778
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
783
779
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
780
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
784
781
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
785
782
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
786
783
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -30966,8 +30963,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
30966
30963
  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
30967
30964
  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
30968
30965
  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
30969
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
30970
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
30971
30966
  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
30972
30967
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
30973
30968
  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -30979,7 +30974,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
30979
30974
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
30980
30975
  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
30981
30976
  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
30977
+ --pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
30982
30978
  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
30979
+ --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
30980
+ --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
30981
+ --pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
30982
+ --pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
30983
+ --pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
30983
30984
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
30984
30985
  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
30985
30986
  --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
@@ -31032,7 +31033,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31032
31033
  inset-inline-end: 0;
31033
31034
  pointer-events: none;
31034
31035
  content: "";
31035
- border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
31036
+ border-style: solid;
31037
+ border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
31038
+ border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31039
+ border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31040
+ border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31041
+ border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31036
31042
  }
31037
31043
  .pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
31038
31044
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
@@ -31049,9 +31055,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31049
31055
  .pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
31050
31056
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
31051
31057
  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
31058
+ --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
31059
+ --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
31052
31060
  pointer-events: none;
31053
31061
  }
31054
31062
 
31063
+ .pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
31064
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
31065
+ }
31066
+
31067
+ .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
31068
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
31069
+ }
31070
+
31055
31071
  .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
31056
31072
  .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
31057
31073
  margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -495,10 +495,6 @@ html .ws-preview {
495
495
  --pf-t--color--white: #fff;
496
496
  }
497
497
 
498
- /**
499
- * Do not edit directly
500
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
501
- */
502
498
  :root {
503
499
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
504
500
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -781,6 +777,7 @@ html .ws-preview {
781
777
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
782
778
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
783
779
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
780
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
784
781
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
785
782
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
786
783
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -31083,8 +31080,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31083
31080
  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
31084
31081
  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
31085
31082
  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
31086
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
31087
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31088
31083
  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
31089
31084
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
31090
31085
  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -31096,7 +31091,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31096
31091
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
31097
31092
  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
31098
31093
  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
31094
+ --pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
31099
31095
  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
31096
+ --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
31097
+ --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31098
+ --pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
31099
+ --pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
31100
+ --pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
31100
31101
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
31101
31102
  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
31102
31103
  --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
@@ -31149,7 +31150,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31149
31150
  inset-inline-end: 0;
31150
31151
  pointer-events: none;
31151
31152
  content: "";
31152
- border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
31153
+ border-style: solid;
31154
+ border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
31155
+ border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31156
+ border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31157
+ border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31158
+ border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31153
31159
  }
31154
31160
  .pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
31155
31161
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
@@ -31166,9 +31172,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31166
31172
  .pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
31167
31173
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
31168
31174
  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
31175
+ --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
31176
+ --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
31169
31177
  pointer-events: none;
31170
31178
  }
31171
31179
 
31180
+ .pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
31181
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
31182
+ }
31183
+
31184
+ .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
31185
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
31186
+ }
31187
+
31172
31188
  .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
31173
31189
  .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
31174
31190
  margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
package/patternfly.css CHANGED
@@ -495,10 +495,6 @@ html .ws-preview {
495
495
  --pf-t--color--white: #fff;
496
496
  }
497
497
 
498
- /**
499
- * Do not edit directly
500
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
501
- */
502
498
  :root {
503
499
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
504
500
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -781,6 +777,7 @@ html .ws-preview {
781
777
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
782
778
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
783
779
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
780
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
784
781
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
785
782
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
786
783
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -31083,8 +31080,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31083
31080
  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
31084
31081
  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
31085
31082
  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
31086
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
31087
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31088
31083
  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
31089
31084
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
31090
31085
  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -31096,7 +31091,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31096
31091
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
31097
31092
  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
31098
31093
  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
31094
+ --pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
31099
31095
  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
31096
+ --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
31097
+ --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31098
+ --pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
31099
+ --pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
31100
+ --pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
31100
31101
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
31101
31102
  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
31102
31103
  --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
@@ -31149,7 +31150,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31149
31150
  inset-inline-end: 0;
31150
31151
  pointer-events: none;
31151
31152
  content: "";
31152
- border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
31153
+ border-style: solid;
31154
+ border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
31155
+ border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31156
+ border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31157
+ border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31158
+ border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
31153
31159
  }
31154
31160
  .pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
31155
31161
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
@@ -31166,9 +31172,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
31166
31172
  .pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
31167
31173
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
31168
31174
  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
31175
+ --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
31176
+ --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
31169
31177
  pointer-events: none;
31170
31178
  }
31171
31179
 
31180
+ .pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
31181
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
31182
+ }
31183
+
31184
+ .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
31185
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
31186
+ }
31187
+
31172
31188
  .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
31173
31189
  .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
31174
31190
  margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);