@patternfly/patternfly 6.5.0-prerelease.49 → 6.5.0-prerelease.50

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 (9) hide show
  1. package/components/ToggleGroup/toggle-group.css +33 -16
  2. package/components/ToggleGroup/toggle-group.scss +35 -19
  3. package/components/_index.css +33 -16
  4. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +33 -16
  7. package/patternfly.css +33 -16
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -6,30 +6,37 @@
6
6
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
7
7
  --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
8
8
  --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
9
- --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
10
10
  --pf-v6-c-toggle-group__button--ZIndex: auto;
11
- --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
11
+ --pf-v6-c-toggle-group__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
12
+ --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
12
13
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
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--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
14
15
  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15
16
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
16
17
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
17
18
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
18
- --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
19
- --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
20
- --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
21
- --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
19
+ --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
20
+ --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
21
+ --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
22
+ --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
22
23
  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
23
- --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
24
- --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
25
- --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
26
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
24
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-t--global--icon--color--regular);
25
+ --pf-v6-c-toggle-group__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
26
+ --pf-v6-c-toggle-group__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
27
+ --pf-v6-c-toggle-group__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
28
+ --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
29
+ --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
30
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
31
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
32
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
33
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
34
+ --pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
27
35
  --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);
29
36
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
30
37
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31
- --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
32
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
38
+ --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
39
+ --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
33
40
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
34
41
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
35
42
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -97,9 +104,11 @@
97
104
  }
98
105
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
99
106
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
107
+ --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--hover--Color);
100
108
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
101
109
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
102
110
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
111
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--hover--Color);
103
112
  text-decoration-line: none;
104
113
  }
105
114
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -107,22 +116,30 @@
107
116
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
108
117
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
109
118
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
119
+ --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth);
120
+ --pf-v6-c-toggle-group__button--after--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderColor);
110
121
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
122
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--m-selected--Color);
111
123
  }
112
124
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
113
125
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
114
126
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
115
127
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
116
128
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
129
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--disabled--Color);
117
130
  pointer-events: none;
118
131
  }
119
132
 
120
133
  .pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
121
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
134
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor);
122
135
  }
123
136
 
124
137
  .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
125
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
138
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor);
139
+ }
140
+
141
+ .pf-v6-c-toggle-group__icon {
142
+ color: var(--pf-v6-c-toggle-group__icon--Color);
126
143
  }
127
144
 
128
145
  .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -9,38 +9,45 @@
9
9
  --#{$toggle-group}__button--FontSize: var(--pf-t--global--font--size--body--default);
10
10
  --#{$toggle-group}__button--LineHeight: var(--pf-t--global--font--line-height--body);
11
11
  --#{$toggle-group}__button--Color: var(--pf-t--global--text--color--regular);
12
- --#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
12
+ --#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
13
13
  --#{$toggle-group}__button--ZIndex: auto;
14
- --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
14
+ --#{$toggle-group}__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
15
+ --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
15
16
  --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
16
- --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
17
+ --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
17
18
  --#{$toggle-group}__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
18
19
  --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
19
20
  --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
20
21
 
21
22
  // item
22
23
  --#{$toggle-group}__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
23
- --#{$toggle-group}__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
24
- --#{$toggle-group}__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
25
- --#{$toggle-group}__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
26
- --#{$toggle-group}__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
24
+ --#{$toggle-group}__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
25
+ --#{$toggle-group}__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
26
+ --#{$toggle-group}__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
27
+ --#{$toggle-group}__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
27
28
 
28
29
  // icon
29
30
  --#{$toggle-group}__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
31
+ --#{$toggle-group}__icon--Color: var(--pf-t--global--icon--color--regular);
32
+ --#{$toggle-group}__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
33
+ --#{$toggle-group}__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
34
+ --#{$toggle-group}__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
30
35
 
31
36
  // Selected
32
- --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
33
- --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
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--alt);
37
+ --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
38
+ --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
39
+ --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
40
+ --#{$toggle-group}__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
41
+ --#{$toggle-group}__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
42
+ --#{$toggle-group}__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
43
+ --#{$toggle-group}__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
36
44
  --#{$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);
38
45
 
39
46
  // disabled
40
47
  --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
41
48
  --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
42
- --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
43
- --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
49
+ --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
50
+ --#{$toggle-group}__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
44
51
  --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
45
52
 
46
53
  // Compact
@@ -124,9 +131,11 @@
124
131
 
125
132
  &:is(:hover, :focus) {
126
133
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--hover--BackgroundColor);
134
+ --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--hover--Color);
127
135
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
128
136
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
129
137
  --#{$toggle-group}__button--after--BorderWidth: var(--#{$toggle-group}__button--hover--after--BorderWidth);
138
+ --#{$toggle-group}__icon--Color: var(--#{$toggle-group}__icon--hover--Color);
130
139
 
131
140
  text-decoration-line: none;
132
141
  }
@@ -136,7 +145,10 @@
136
145
  --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
137
146
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex);
138
147
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor);
148
+ --#{$toggle-group}__button--before--BorderWidth: var(--#{$toggle-group}__button--m-selected--before--BorderWidth);
149
+ --#{$toggle-group}__button--after--BorderColor: var(--#{$toggle-group}__button--m-selected--after--BorderColor);
139
150
  --#{$toggle-group}__button--after--BorderWidth: var(--#{$toggle-group}__button--m-selected--after--BorderWidth);
151
+ --#{$toggle-group}__icon--Color: var(--#{$toggle-group}__icon--m-selected--Color);
140
152
  }
141
153
 
142
154
  &:is(:disabled, .pf-m-disabled) {
@@ -144,6 +156,7 @@
144
156
  --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--disabled--Color);
145
157
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--disabled--ZIndex);
146
158
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--disabled--before--BorderColor);
159
+ --#{$toggle-group}__icon--Color: var(--#{$toggle-group}__icon--disabled--Color);
147
160
 
148
161
  pointer-events: none;
149
162
  }
@@ -151,16 +164,19 @@
151
164
 
152
165
  // For consecutive selected items, turn the left border back to what it was
153
166
  .#{$toggle-group}__item:has(.pf-m-selected) + .#{$toggle-group}__item:has(.pf-m-selected) {
154
- --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor);
167
+ --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--m-selected--selected--before--BorderInlineStartColor);
155
168
  }
156
169
 
157
170
  // For consecutive disabled items, turn the left border back to what it was
158
171
  .#{$toggle-group}__item:has(:disabled, .pf-m-disabled) + .#{$toggle-group}__item:has(:disabled, .pf-m-disabled) {
159
- --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor);
172
+ --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--disabled--disabled--before--BorderInlineStartColor);
160
173
  }
161
174
 
162
- .#{$toggle-group}__icon + .#{$toggle-group}__text,
163
- .#{$toggle-group}__text + .#{$toggle-group}__icon {
164
- margin-inline-start: var(--#{$toggle-group}__icon--text--MarginInlineStart);
175
+ .#{$toggle-group}__icon {
176
+ color: var(--#{$toggle-group}__icon--Color);
165
177
  }
166
178
 
179
+ .#{$toggle-group}__icon+.#{$toggle-group}__text,
180
+ .#{$toggle-group}__text+.#{$toggle-group}__icon {
181
+ margin-inline-start: var(--#{$toggle-group}__icon--text--MarginInlineStart);
182
+ }
package/components/_index.css CHANGED
@@ -21721,30 +21721,37 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21721
21721
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
21722
21722
  --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
21723
21723
  --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
21724
- --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
21724
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
21725
21725
  --pf-v6-c-toggle-group__button--ZIndex: auto;
21726
- --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
21726
+ --pf-v6-c-toggle-group__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
21727
+ --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
21727
21728
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
21728
- --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
21729
+ --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
21729
21730
  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
21730
21731
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
21731
21732
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
21732
21733
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
21733
- --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
21734
- --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
21735
- --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
21736
- --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
21734
+ --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
21735
+ --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
21736
+ --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
21737
+ --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
21737
21738
  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
21738
- --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
21739
- --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
21740
- --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
21741
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
21739
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-t--global--icon--color--regular);
21740
+ --pf-v6-c-toggle-group__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
21741
+ --pf-v6-c-toggle-group__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
21742
+ --pf-v6-c-toggle-group__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
21743
+ --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
21744
+ --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
21745
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
21746
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
21747
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
21748
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
21749
+ --pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
21742
21750
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
21743
- --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
21744
21751
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
21745
21752
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
21746
- --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
21747
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
21753
+ --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
21754
+ --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
21748
21755
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
21749
21756
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
21750
21757
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -21812,9 +21819,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21812
21819
  }
21813
21820
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
21814
21821
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
21822
+ --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--hover--Color);
21815
21823
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
21816
21824
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
21817
21825
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
21826
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--hover--Color);
21818
21827
  text-decoration-line: none;
21819
21828
  }
21820
21829
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -21822,22 +21831,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21822
21831
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
21823
21832
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
21824
21833
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
21834
+ --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth);
21835
+ --pf-v6-c-toggle-group__button--after--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderColor);
21825
21836
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
21837
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--m-selected--Color);
21826
21838
  }
21827
21839
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
21828
21840
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
21829
21841
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
21830
21842
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
21831
21843
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
21844
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--disabled--Color);
21832
21845
  pointer-events: none;
21833
21846
  }
21834
21847
 
21835
21848
  .pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
21836
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
21849
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor);
21837
21850
  }
21838
21851
 
21839
21852
  .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
21840
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
21853
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor);
21854
+ }
21855
+
21856
+ .pf-v6-c-toggle-group__icon {
21857
+ color: var(--pf-v6-c-toggle-group__icon--Color);
21841
21858
  }
21842
21859
 
21843
21860
  .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
package/docs/components/ToggleGroup/examples/toggle-group.md CHANGED
@@ -78,7 +78,19 @@ cssPrefix: pf-v6-c-toggle-group
78
78
  aria-label="Copy button"
79
79
  >
80
80
  <span class="pf-v6-c-toggle-group__icon">
81
- <i class="fas fa-copy" aria-hidden="true"></i>
81
+ <svg
82
+ class="pf-v6-svg"
83
+ viewBox="0 0 32 32"
84
+ fill="currentColor"
85
+ aria-hidden="true"
86
+ role="img"
87
+ width="1em"
88
+ height="1em"
89
+ >
90
+ <path
91
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
92
+ />
93
+ </svg>
82
94
  </span>
83
95
  </button>
84
96
  </div>
@@ -89,7 +101,19 @@ cssPrefix: pf-v6-c-toggle-group
89
101
  aria-label="Undo button"
90
102
  >
91
103
  <span class="pf-v6-c-toggle-group__icon">
92
- <i class="fas fa-undo" aria-hidden="true"></i>
104
+ <svg
105
+ class="pf-v6-svg"
106
+ viewBox="0 0 32 32"
107
+ fill="currentColor"
108
+ aria-hidden="true"
109
+ role="img"
110
+ width="1em"
111
+ height="1em"
112
+ >
113
+ <path
114
+ d="M31 20c0 5.514-4.486 10-10 10H6a1 1 0 1 1 0-2h15c4.411 0 8-3.589 8-8s-3.589-8-8-8H4.414l6.293 6.293a.999.999 0 1 1-1.414 1.414l-7.647-7.646c-.283-.283-.439-.66-.439-1.061s.156-.777.439-1.061l7.646-7.646a.999.999 0 1 1 1.414 1.414L4.413 10h16.586c5.514 0 10 4.486 10 10Z"
115
+ />
116
+ </svg>
93
117
  </span>
94
118
  </button>
95
119
  </div>
@@ -100,7 +124,19 @@ cssPrefix: pf-v6-c-toggle-group
100
124
  aria-label="Share button"
101
125
  >
102
126
  <span class="pf-v6-c-toggle-group__icon">
103
- <i class="fas fa-share-square" aria-hidden="true"></i>
127
+ <svg
128
+ class="pf-v6-svg"
129
+ viewBox="0 0 32 32"
130
+ fill="currentColor"
131
+ aria-hidden="true"
132
+ role="img"
133
+ width="1em"
134
+ height="1em"
135
+ >
136
+ <path
137
+ d="M9.293 8.707a.999.999 0 0 1 0-1.414l5.646-5.647a1.501 1.501 0 0 1 2.121 0l5.646 5.646a.999.999 0 1 1-1.414 1.414l-4.293-4.293v18.586a1 1 0 1 1-2 0V4.414l-4.293 4.293a.999.999 0 0 1-1.414 0ZM24.5 14H22a1 1 0 1 0 0 2h2v13H8V16h2a1 1 0 1 0 0-2H7.5c-.827 0-1.5.673-1.5 1.5v14c0 .827.673 1.5 1.5 1.5h17c.827 0 1.5-.673 1.5-1.5v-14c0-.827-.673-1.5-1.5-1.5Z"
138
+ />
139
+ </svg>
104
140
  </span>
105
141
  </button>
106
142
  </div>
@@ -116,7 +152,19 @@ cssPrefix: pf-v6-c-toggle-group
116
152
  aria-label="Copy button"
117
153
  >
118
154
  <span class="pf-v6-c-toggle-group__icon">
119
- <i class="fas fa-copy" aria-hidden="true"></i>
155
+ <svg
156
+ class="pf-v6-svg"
157
+ viewBox="0 0 32 32"
158
+ fill="currentColor"
159
+ aria-hidden="true"
160
+ role="img"
161
+ width="1em"
162
+ height="1em"
163
+ >
164
+ <path
165
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
166
+ />
167
+ </svg>
120
168
  </span>
121
169
  </button>
122
170
  </div>
@@ -127,7 +175,19 @@ cssPrefix: pf-v6-c-toggle-group
127
175
  aria-label="Undo button"
128
176
  >
129
177
  <span class="pf-v6-c-toggle-group__icon">
130
- <i class="fas fa-undo" aria-hidden="true"></i>
178
+ <svg
179
+ class="pf-v6-svg"
180
+ viewBox="0 0 32 32"
181
+ fill="currentColor"
182
+ aria-hidden="true"
183
+ role="img"
184
+ width="1em"
185
+ height="1em"
186
+ >
187
+ <path
188
+ d="M31 20c0 5.514-4.486 10-10 10H6a1 1 0 1 1 0-2h15c4.411 0 8-3.589 8-8s-3.589-8-8-8H4.414l6.293 6.293a.999.999 0 1 1-1.414 1.414l-7.647-7.646c-.283-.283-.439-.66-.439-1.061s.156-.777.439-1.061l7.646-7.646a.999.999 0 1 1 1.414 1.414L4.413 10h16.586c5.514 0 10 4.486 10 10Z"
189
+ />
190
+ </svg>
131
191
  </span>
132
192
  </button>
133
193
  </div>
@@ -138,7 +198,19 @@ cssPrefix: pf-v6-c-toggle-group
138
198
  aria-label="Share button"
139
199
  >
140
200
  <span class="pf-v6-c-toggle-group__icon">
141
- <i class="fas fa-share-square" aria-hidden="true"></i>
201
+ <svg
202
+ class="pf-v6-svg"
203
+ viewBox="0 0 32 32"
204
+ fill="currentColor"
205
+ aria-hidden="true"
206
+ role="img"
207
+ width="1em"
208
+ height="1em"
209
+ >
210
+ <path
211
+ d="M9.293 8.707a.999.999 0 0 1 0-1.414l5.646-5.647a1.501 1.501 0 0 1 2.121 0l5.646 5.646a.999.999 0 1 1-1.414 1.414l-4.293-4.293v18.586a1 1 0 1 1-2 0V4.414l-4.293 4.293a.999.999 0 0 1-1.414 0ZM24.5 14H22a1 1 0 1 0 0 2h2v13H8V16h2a1 1 0 1 0 0-2H7.5c-.827 0-1.5.673-1.5 1.5v14c0 .827.673 1.5 1.5 1.5h17c.827 0 1.5-.673 1.5-1.5v-14c0-.827-.673-1.5-1.5-1.5Z"
212
+ />
213
+ </svg>
142
214
  </span>
143
215
  </button>
144
216
  </div>
@@ -154,7 +226,19 @@ cssPrefix: pf-v6-c-toggle-group
154
226
  aria-label="Copy button"
155
227
  >
156
228
  <span class="pf-v6-c-toggle-group__icon">
157
- <i class="fas fa-copy" aria-hidden="true"></i>
229
+ <svg
230
+ class="pf-v6-svg"
231
+ viewBox="0 0 32 32"
232
+ fill="currentColor"
233
+ aria-hidden="true"
234
+ role="img"
235
+ width="1em"
236
+ height="1em"
237
+ >
238
+ <path
239
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
240
+ />
241
+ </svg>
158
242
  </span>
159
243
  </button>
160
244
  </div>
@@ -165,7 +249,19 @@ cssPrefix: pf-v6-c-toggle-group
165
249
  aria-label="Undo button"
166
250
  >
167
251
  <span class="pf-v6-c-toggle-group__icon">
168
- <i class="fas fa-undo" aria-hidden="true"></i>
252
+ <svg
253
+ class="pf-v6-svg"
254
+ viewBox="0 0 32 32"
255
+ fill="currentColor"
256
+ aria-hidden="true"
257
+ role="img"
258
+ width="1em"
259
+ height="1em"
260
+ >
261
+ <path
262
+ d="M31 20c0 5.514-4.486 10-10 10H6a1 1 0 1 1 0-2h15c4.411 0 8-3.589 8-8s-3.589-8-8-8H4.414l6.293 6.293a.999.999 0 1 1-1.414 1.414l-7.647-7.646c-.283-.283-.439-.66-.439-1.061s.156-.777.439-1.061l7.646-7.646a.999.999 0 1 1 1.414 1.414L4.413 10h16.586c5.514 0 10 4.486 10 10Z"
263
+ />
264
+ </svg>
169
265
  </span>
170
266
  </button>
171
267
  </div>
@@ -177,7 +273,19 @@ cssPrefix: pf-v6-c-toggle-group
177
273
  disabled
178
274
  >
179
275
  <span class="pf-v6-c-toggle-group__icon">
180
- <i class="fas fa-share-square" aria-hidden="true"></i>
276
+ <svg
277
+ class="pf-v6-svg"
278
+ viewBox="0 0 32 32"
279
+ fill="currentColor"
280
+ aria-hidden="true"
281
+ role="img"
282
+ width="1em"
283
+ height="1em"
284
+ >
285
+ <path
286
+ d="M9.293 8.707a.999.999 0 0 1 0-1.414l5.646-5.647a1.501 1.501 0 0 1 2.121 0l5.646 5.646a.999.999 0 1 1-1.414 1.414l-4.293-4.293v18.586a1 1 0 1 1-2 0V4.414l-4.293 4.293a.999.999 0 0 1-1.414 0ZM24.5 14H22a1 1 0 1 0 0 2h2v13H8V16h2a1 1 0 1 0 0-2H7.5c-.827 0-1.5.673-1.5 1.5v14c0 .827.673 1.5 1.5 1.5h17c.827 0 1.5-.673 1.5-1.5v-14c0-.827-.673-1.5-1.5-1.5Z"
287
+ />
288
+ </svg>
181
289
  </span>
182
290
  </button>
183
291
  </div>
@@ -192,7 +300,19 @@ cssPrefix: pf-v6-c-toggle-group
192
300
  <div class="pf-v6-c-toggle-group__item">
193
301
  <button class="pf-v6-c-toggle-group__button" type="button">
194
302
  <span class="pf-v6-c-toggle-group__icon">
195
- <i class="fas fa-copy" aria-hidden="true"></i>
303
+ <svg
304
+ class="pf-v6-svg"
305
+ viewBox="0 0 32 32"
306
+ fill="currentColor"
307
+ aria-hidden="true"
308
+ role="img"
309
+ width="1em"
310
+ height="1em"
311
+ >
312
+ <path
313
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
314
+ />
315
+ </svg>
196
316
  </span>
197
317
  <span class="pf-v6-c-toggle-group__text">Copy</span>
198
318
  </button>
@@ -204,7 +324,19 @@ cssPrefix: pf-v6-c-toggle-group
204
324
  aria-label="Undo button"
205
325
  >
206
326
  <span class="pf-v6-c-toggle-group__icon">
207
- <i class="fas fa-undo" aria-hidden="true"></i>
327
+ <svg
328
+ class="pf-v6-svg"
329
+ viewBox="0 0 32 32"
330
+ fill="currentColor"
331
+ aria-hidden="true"
332
+ role="img"
333
+ width="1em"
334
+ height="1em"
335
+ >
336
+ <path
337
+ d="M31 20c0 5.514-4.486 10-10 10H6a1 1 0 1 1 0-2h15c4.411 0 8-3.589 8-8s-3.589-8-8-8H4.414l6.293 6.293a.999.999 0 1 1-1.414 1.414l-7.647-7.646c-.283-.283-.439-.66-.439-1.061s.156-.777.439-1.061l7.646-7.646a.999.999 0 1 1 1.414 1.414L4.413 10h16.586c5.514 0 10 4.486 10 10Z"
338
+ />
339
+ </svg>
208
340
  </span>
209
341
  <span class="pf-v6-c-toggle-group__text">Undo</span>
210
342
  </button>
@@ -212,7 +344,19 @@ cssPrefix: pf-v6-c-toggle-group
212
344
  <div class="pf-v6-c-toggle-group__item">
213
345
  <button class="pf-v6-c-toggle-group__button pf-m-selected" type="button">
214
346
  <span class="pf-v6-c-toggle-group__icon">
215
- <i class="fas fa-share-square" aria-hidden="true"></i>
347
+ <svg
348
+ class="pf-v6-svg"
349
+ viewBox="0 0 32 32"
350
+ fill="currentColor"
351
+ aria-hidden="true"
352
+ role="img"
353
+ width="1em"
354
+ height="1em"
355
+ >
356
+ <path
357
+ d="M9.293 8.707a.999.999 0 0 1 0-1.414l5.646-5.647a1.501 1.501 0 0 1 2.121 0l5.646 5.646a.999.999 0 1 1-1.414 1.414l-4.293-4.293v18.586a1 1 0 1 1-2 0V4.414l-4.293 4.293a.999.999 0 0 1-1.414 0ZM24.5 14H22a1 1 0 1 0 0 2h2v13H8V16h2a1 1 0 1 0 0-2H7.5c-.827 0-1.5.673-1.5 1.5v14c0 .827.673 1.5 1.5 1.5h17c.827 0 1.5-.673 1.5-1.5v-14c0-.827-.673-1.5-1.5-1.5Z"
358
+ />
359
+ </svg>
216
360
  </span>
217
361
  <span class="pf-v6-c-toggle-group__text">Share</span>
218
362
  </button>
@@ -226,7 +370,19 @@ cssPrefix: pf-v6-c-toggle-group
226
370
  <button class="pf-v6-c-toggle-group__button" type="button">
227
371
  <span class="pf-v6-c-toggle-group__text">Copy</span>
228
372
  <span class="pf-v6-c-toggle-group__icon">
229
- <i class="fas fa-copy" aria-hidden="true"></i>
373
+ <svg
374
+ class="pf-v6-svg"
375
+ viewBox="0 0 32 32"
376
+ fill="currentColor"
377
+ aria-hidden="true"
378
+ role="img"
379
+ width="1em"
380
+ height="1em"
381
+ >
382
+ <path
383
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
384
+ />
385
+ </svg>
230
386
  </span>
231
387
  </button>
232
388
  </div>
@@ -234,7 +390,19 @@ cssPrefix: pf-v6-c-toggle-group
234
390
  <button class="pf-v6-c-toggle-group__button" type="button">
235
391
  <span class="pf-v6-c-toggle-group__text">Undo</span>
236
392
  <span class="pf-v6-c-toggle-group__icon">
237
- <i class="fas fa-undo" aria-hidden="true"></i>
393
+ <svg
394
+ class="pf-v6-svg"
395
+ viewBox="0 0 32 32"
396
+ fill="currentColor"
397
+ aria-hidden="true"
398
+ role="img"
399
+ width="1em"
400
+ height="1em"
401
+ >
402
+ <path
403
+ d="M31 20c0 5.514-4.486 10-10 10H6a1 1 0 1 1 0-2h15c4.411 0 8-3.589 8-8s-3.589-8-8-8H4.414l6.293 6.293a.999.999 0 1 1-1.414 1.414l-7.647-7.646c-.283-.283-.439-.66-.439-1.061s.156-.777.439-1.061l7.646-7.646a.999.999 0 1 1 1.414 1.414L4.413 10h16.586c5.514 0 10 4.486 10 10Z"
404
+ />
405
+ </svg>
238
406
  </span>
239
407
  </button>
240
408
  </div>
@@ -242,7 +410,19 @@ cssPrefix: pf-v6-c-toggle-group
242
410
  <button class="pf-v6-c-toggle-group__button pf-m-selected" type="button">
243
411
  <span class="pf-v6-c-toggle-group__text">Share</span>
244
412
  <span class="pf-v6-c-toggle-group__icon">
245
- <i class="fas fa-share-square" aria-hidden="true"></i>
413
+ <svg
414
+ class="pf-v6-svg"
415
+ viewBox="0 0 32 32"
416
+ fill="currentColor"
417
+ aria-hidden="true"
418
+ role="img"
419
+ width="1em"
420
+ height="1em"
421
+ >
422
+ <path
423
+ d="M9.293 8.707a.999.999 0 0 1 0-1.414l5.646-5.647a1.501 1.501 0 0 1 2.121 0l5.646 5.646a.999.999 0 1 1-1.414 1.414l-4.293-4.293v18.586a1 1 0 1 1-2 0V4.414l-4.293 4.293a.999.999 0 0 1-1.414 0ZM24.5 14H22a1 1 0 1 0 0 2h2v13H8V16h2a1 1 0 1 0 0-2H7.5c-.827 0-1.5.673-1.5 1.5v14c0 .827.673 1.5 1.5 1.5h17c.827 0 1.5-.673 1.5-1.5v-14c0-.827-.673-1.5-1.5-1.5Z"
424
+ />
425
+ </svg>
246
426
  </span>
247
427
  </button>
248
428
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.49",
4
+ "version": "6.5.0-prerelease.50",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {