@i-cell/ids-styles 0.0.59 → 0.0.61

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 (13) hide show
  1. package/dist/components.css +428 -75
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +202 -202
  4. package/dist/menu-item/menu-item.css +356 -0
  5. package/dist/menu-item/menu-item.min.css +1 -1
  6. package/dist/menu-item/menu-item.plugin.js +20 -0
  7. package/dist/overlay-panel/overlay-panel.css +0 -3
  8. package/dist/overlay-panel/overlay-panel.min.css +1 -1
  9. package/dist/overlay-panel/overlay-panel.plugin.js +0 -3
  10. package/dist/segmented-control-toggle/segmented-control-toggle.css +72 -72
  11. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -1
  12. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +182 -199
  13. package/package.json +1 -1
package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js CHANGED
@@ -165,297 +165,280 @@ module.exports = function SegmentedControlTogglePlugin() {
165
165
  },
166
166
  '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item>button:focus-visible':
167
167
  { outlineColor: 'var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused)' },
168
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button':
169
- {
170
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default)',
171
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default)',
172
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default)',
173
- },
174
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button .ids-icon':
175
- { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default)' },
176
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
168
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button': {
169
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default)',
170
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default)',
171
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default)',
172
+ },
173
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button .ids-icon': {
174
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default)',
175
+ },
176
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
177
177
  {
178
178
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-active)',
179
179
  color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active)',
180
180
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-active)',
181
181
  },
182
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
182
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
183
183
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active)' },
184
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:hover':
185
- {
186
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered)',
187
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered)',
188
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-hovered)',
189
- },
190
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:hover .ids-icon':
184
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:hover': {
185
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered)',
186
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered)',
187
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-hovered)',
188
+ },
189
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:hover .ids-icon':
191
190
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered)' },
192
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:active':
193
- {
194
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed)',
195
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed)',
196
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-pressed)',
197
- },
198
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:active .ids-icon':
191
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:active': {
192
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed)',
193
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed)',
194
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-pressed)',
195
+ },
196
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:active .ids-icon':
199
197
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed)' },
200
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus-visible':
198
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus-visible':
201
199
  {
202
200
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused)',
203
201
  color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused)',
204
202
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-focused)',
205
203
  },
206
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus-visible .ids-icon':
204
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus-visible .ids-icon':
207
205
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused)' },
208
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:disabled':
209
- {
210
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled)',
211
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled)',
212
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-disabled)',
213
- },
214
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:disabled .ids-icon':
206
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:disabled': {
207
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled)',
208
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled)',
209
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-disabled)',
210
+ },
211
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:disabled .ids-icon':
215
212
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled)' },
216
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button':
217
- {
218
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default)',
219
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-default)',
220
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default)',
221
- },
222
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button .ids-icon':
223
- { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-default)' },
224
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
213
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button': {
214
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default)',
215
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-default)',
216
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default)',
217
+ },
218
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button .ids-icon': {
219
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-default)',
220
+ },
221
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
225
222
  {
226
223
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-active)',
227
224
  color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-active)',
228
225
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-active)',
229
226
  },
230
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
227
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
231
228
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-active)' },
232
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:hover':
233
- {
234
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered)',
235
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-hovered)',
236
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-hovered)',
237
- },
238
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:hover .ids-icon':
229
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:hover': {
230
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered)',
231
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-hovered)',
232
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-hovered)',
233
+ },
234
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:hover .ids-icon':
239
235
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-hovered)' },
240
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:active':
241
- {
242
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed)',
243
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-pressed)',
244
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-pressed)',
245
- },
246
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:active .ids-icon':
236
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:active': {
237
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed)',
238
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-pressed)',
239
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-pressed)',
240
+ },
241
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:active .ids-icon':
247
242
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-pressed)' },
248
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus-visible':
243
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus-visible':
249
244
  {
250
245
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused)',
251
246
  color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-focused)',
252
247
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-focused)',
253
248
  },
254
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus-visible .ids-icon':
249
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus-visible .ids-icon':
255
250
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-focused)' },
256
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:disabled':
257
- {
258
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled)',
259
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-disabled)',
260
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-disabled)',
261
- },
262
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:disabled .ids-icon':
251
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:disabled': {
252
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled)',
253
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-disabled)',
254
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-disabled)',
255
+ },
256
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:disabled .ids-icon':
263
257
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-disabled)' },
264
258
  '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item>button:focus-visible':
265
259
  { outlineColor: 'var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused)' },
266
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button':
267
- {
268
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default)',
269
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default)',
270
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default)',
271
- },
272
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button .ids-icon':
273
- { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default)' },
274
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
260
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button': {
261
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default)',
262
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default)',
263
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default)',
264
+ },
265
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button .ids-icon': {
266
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default)',
267
+ },
268
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
275
269
  {
276
270
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-active)',
277
271
  color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active)',
278
272
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-active)',
279
273
  },
280
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
274
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
281
275
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active)' },
282
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:hover':
283
- {
284
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered)',
285
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered)',
286
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-hovered)',
287
- },
288
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:hover .ids-icon':
276
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:hover': {
277
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered)',
278
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered)',
279
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-hovered)',
280
+ },
281
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:hover .ids-icon':
289
282
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered)' },
290
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:active':
291
- {
292
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed)',
293
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed)',
294
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-pressed)',
295
- },
296
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:active .ids-icon':
283
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:active': {
284
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed)',
285
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed)',
286
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-pressed)',
287
+ },
288
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:active .ids-icon':
297
289
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed)' },
298
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus-visible':
290
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus-visible':
299
291
  {
300
292
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused)',
301
293
  color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused)',
302
294
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-focused)',
303
295
  },
304
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus-visible .ids-icon':
296
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus-visible .ids-icon':
305
297
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused)' },
306
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:disabled':
307
- {
308
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled)',
309
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled)',
310
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-disabled)',
311
- },
312
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:disabled .ids-icon':
298
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:disabled': {
299
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled)',
300
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled)',
301
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-disabled)',
302
+ },
303
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:disabled .ids-icon':
313
304
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled)' },
314
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button':
315
- {
316
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default)',
317
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-default)',
318
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default)',
319
- },
320
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button .ids-icon':
321
- { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-default)' },
322
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
305
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button': {
306
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default)',
307
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-default)',
308
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default)',
309
+ },
310
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button .ids-icon': {
311
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-default)',
312
+ },
313
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
323
314
  {
324
315
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-active)',
325
316
  color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-active)',
326
317
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-active)',
327
318
  },
328
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
319
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
329
320
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-active)' },
330
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:hover':
331
- {
332
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered)',
333
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-hovered)',
334
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-hovered)',
335
- },
336
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:hover .ids-icon':
321
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:hover': {
322
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered)',
323
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-hovered)',
324
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-hovered)',
325
+ },
326
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:hover .ids-icon':
337
327
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-hovered)' },
338
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:active':
339
- {
340
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed)',
341
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-pressed)',
342
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-pressed)',
343
- },
344
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:active .ids-icon':
328
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:active': {
329
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed)',
330
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-pressed)',
331
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-pressed)',
332
+ },
333
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:active .ids-icon':
345
334
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-pressed)' },
346
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus-visible':
335
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus-visible':
347
336
  {
348
337
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused)',
349
338
  color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-focused)',
350
339
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-focused)',
351
340
  },
352
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus-visible .ids-icon':
341
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus-visible .ids-icon':
353
342
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-focused)' },
354
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:disabled':
355
- {
356
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled)',
357
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-disabled)',
358
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-disabled)',
359
- },
360
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:disabled .ids-icon':
343
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:disabled': {
344
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled)',
345
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-disabled)',
346
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-disabled)',
347
+ },
348
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:disabled .ids-icon':
361
349
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-disabled)' },
362
350
  '.ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item>button:focus-visible':
363
351
  { outlineColor: 'var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused)' },
364
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button':
365
- {
366
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default)',
367
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default)',
368
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default)',
369
- },
370
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button .ids-icon':
371
- { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default)' },
372
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
352
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button': {
353
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default)',
354
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default)',
355
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default)',
356
+ },
357
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button .ids-icon': {
358
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default)',
359
+ },
360
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
373
361
  {
374
362
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-active)',
375
363
  color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active)',
376
364
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-active)',
377
365
  },
378
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
366
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
379
367
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active)' },
380
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:hover':
381
- {
382
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered)',
383
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered)',
384
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-hovered)',
385
- },
386
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:hover .ids-icon':
387
- { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered)' },
388
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:active':
389
- {
390
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed)',
391
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed)',
392
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-pressed)',
393
- },
394
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:active .ids-icon':
368
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:hover': {
369
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered)',
370
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered)',
371
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-hovered)',
372
+ },
373
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:hover .ids-icon': {
374
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered)',
375
+ },
376
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:active': {
377
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed)',
378
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed)',
379
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-pressed)',
380
+ },
381
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:active .ids-icon':
395
382
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed)' },
396
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus-visible':
383
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus-visible':
397
384
  {
398
385
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused)',
399
386
  color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused)',
400
387
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-focused)',
401
388
  },
402
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus-visible .ids-icon':
389
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus-visible .ids-icon':
403
390
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused)' },
404
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:disabled':
405
- {
406
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled)',
407
- color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled)',
408
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-disabled)',
409
- },
410
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:disabled .ids-icon':
391
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:disabled': {
392
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled)',
393
+ color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled)',
394
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-disabled)',
395
+ },
396
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:disabled .ids-icon':
411
397
  { color: 'var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled)' },
412
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button':
413
- {
414
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default)',
415
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-default)',
416
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default)',
417
- },
418
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button .ids-icon':
419
- { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-default)' },
420
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
398
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button': {
399
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default)',
400
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-default)',
401
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default)',
402
+ },
403
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button .ids-icon': {
404
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-default)',
405
+ },
406
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled)':
421
407
  {
422
408
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-active)',
423
409
  color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-active)',
424
410
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-active)',
425
411
  },
426
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
412
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon':
427
413
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-active)' },
428
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:hover':
429
- {
430
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered)',
431
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-hovered)',
432
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-hovered)',
433
- },
434
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:hover .ids-icon':
414
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:hover': {
415
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered)',
416
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-hovered)',
417
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-hovered)',
418
+ },
419
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:hover .ids-icon':
435
420
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-hovered)' },
436
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:active':
437
- {
438
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed)',
439
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-pressed)',
440
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-pressed)',
441
- },
442
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:active .ids-icon':
421
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:active': {
422
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed)',
423
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-pressed)',
424
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-pressed)',
425
+ },
426
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:active .ids-icon':
443
427
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-pressed)' },
444
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus-visible':
428
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus-visible':
445
429
  {
446
430
  backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused)',
447
431
  color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-focused)',
448
432
  borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-focused)',
449
433
  },
450
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus-visible .ids-icon':
434
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus-visible .ids-icon':
451
435
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-focused)' },
452
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:disabled':
453
- {
454
- backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled)',
455
- color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-disabled)',
456
- borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-disabled)',
457
- },
458
- '.ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:disabled .ids-icon':
436
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:disabled': {
437
+ backgroundColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled)',
438
+ color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-disabled)',
439
+ borderColor: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-disabled)',
440
+ },
441
+ '.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:disabled .ids-icon':
459
442
  { color: 'var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-disabled)' },
460
443
  };
461
444
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@i-cell/ids-styles",
3
- "version": "0.0.59",
3
+ "version": "0.0.61",
4
4
  "private": false,
5
5
  "description": "Stylesheets for i-Cell Design System UI Kit components (currently Vue and Angular)",
6
6
  "scripts": {