@i-cell/ids-styles 0.0.15-beta.8 → 0.0.15

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 (79) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +23 -11
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +23 -12
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2433 -1625
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2744 -1969
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
  77. /package/dist/{fieldset → form-elements/fieldset}/fieldset.css +0 -0
  78. /package/dist/{fieldset → form-elements/fieldset}/fieldset.min.css +0 -0
  79. /package/dist/{fieldset → form-elements/fieldset}/fieldset.plugin.js +0 -0
package/dist/card/card.plugin.js CHANGED
@@ -4,12 +4,7 @@ module.exports = function CardPlugin() {
4
4
  const cssObj = {
5
5
  '.ids-card': { display: 'flex', borderStyle: 'solid', boxSizing: 'border-box' },
6
6
  '.ids-card.ids-card-clickable': { pointerEvents: 'auto', cursor: 'pointer' },
7
- '.ids-card.ids-card-clickable:focus': {
8
- outlineOffset: '2px',
9
- outlineStyle: 'solid',
10
- outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
11
- },
12
- '.ids-card.ids-card-clickable:focus.ids-button-light': { outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)' },
7
+ '.ids-card.ids-card-clickable:focus,.ids-card.ids-card-clickable:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
13
8
  '.ids-card.ids-card-clickable.ids-card-disabled': { pointerEvents: 'none', cursor: 'not-allowed' },
14
9
  '.ids-card.ids-card-vertical': { flexDirection: 'column' },
15
10
  '.ids-card.ids-card-vertical .ids-card-section:first-child': {
@@ -247,10 +242,12 @@ module.exports = function CardPlugin() {
247
242
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-hovered)',
248
243
  borderColor: 'var(--ids-comp-card-filled-color-border-primary-hovered)',
249
244
  },
250
- '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus': {
251
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-focused)',
252
- borderColor: 'var(--ids-comp-card-filled-color-border-primary-focused)',
253
- },
245
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus-visible':
246
+ {
247
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-focused)',
248
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-focused)',
249
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
250
+ },
254
251
  '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:active': {
255
252
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-pressed)',
256
253
  borderColor: 'var(--ids-comp-card-filled-color-border-primary-pressed)',
@@ -267,10 +264,12 @@ module.exports = function CardPlugin() {
267
264
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-hovered)',
268
265
  borderColor: 'var(--ids-comp-card-filled-color-border-secondary-hovered)',
269
266
  },
270
- '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus': {
271
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-focused)',
272
- borderColor: 'var(--ids-comp-card-filled-color-border-secondary-focused)',
273
- },
267
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus-visible':
268
+ {
269
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-focused)',
270
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-focused)',
271
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
272
+ },
274
273
  '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:active': {
275
274
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-pressed)',
276
275
  borderColor: 'var(--ids-comp-card-filled-color-border-secondary-pressed)',
@@ -287,10 +286,12 @@ module.exports = function CardPlugin() {
287
286
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-hovered)',
288
287
  borderColor: 'var(--ids-comp-card-filled-color-border-brand-hovered)',
289
288
  },
290
- '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus': {
291
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-focused)',
292
- borderColor: 'var(--ids-comp-card-filled-color-border-brand-focused)',
293
- },
289
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus-visible':
290
+ {
291
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-focused)',
292
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-focused)',
293
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
294
+ },
294
295
  '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:active': {
295
296
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-pressed)',
296
297
  borderColor: 'var(--ids-comp-card-filled-color-border-brand-pressed)',
@@ -307,10 +308,12 @@ module.exports = function CardPlugin() {
307
308
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-hovered)',
308
309
  borderColor: 'var(--ids-comp-card-filled-color-border-error-hovered)',
309
310
  },
310
- '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus': {
311
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-focused)',
312
- borderColor: 'var(--ids-comp-card-filled-color-border-error-focused)',
313
- },
311
+ '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus-visible':
312
+ {
313
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-focused)',
314
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-focused)',
315
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
316
+ },
314
317
  '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:active': {
315
318
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-pressed)',
316
319
  borderColor: 'var(--ids-comp-card-filled-color-border-error-pressed)',
@@ -323,10 +326,12 @@ module.exports = function CardPlugin() {
323
326
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-hovered)',
324
327
  borderColor: 'var(--ids-comp-card-filled-color-border-success-hovered)',
325
328
  },
326
- '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus': {
327
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-focused)',
328
- borderColor: 'var(--ids-comp-card-filled-color-border-success-focused)',
329
- },
329
+ '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus-visible':
330
+ {
331
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-focused)',
332
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-focused)',
333
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
334
+ },
330
335
  '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:active': {
331
336
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-pressed)',
332
337
  borderColor: 'var(--ids-comp-card-filled-color-border-success-pressed)',
@@ -339,10 +344,12 @@ module.exports = function CardPlugin() {
339
344
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-hovered)',
340
345
  borderColor: 'var(--ids-comp-card-filled-color-border-warning-hovered)',
341
346
  },
342
- '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus': {
343
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-focused)',
344
- borderColor: 'var(--ids-comp-card-filled-color-border-warning-focused)',
345
- },
347
+ '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus-visible':
348
+ {
349
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-focused)',
350
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-focused)',
351
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
352
+ },
346
353
  '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:active': {
347
354
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-pressed)',
348
355
  borderColor: 'var(--ids-comp-card-filled-color-border-warning-pressed)',
@@ -355,10 +362,12 @@ module.exports = function CardPlugin() {
355
362
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-hovered)',
356
363
  borderColor: 'var(--ids-comp-card-filled-color-border-info-hovered)',
357
364
  },
358
- '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus': {
359
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-focused)',
360
- borderColor: 'var(--ids-comp-card-filled-color-border-info-focused)',
361
- },
365
+ '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus-visible':
366
+ {
367
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-focused)',
368
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-focused)',
369
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
370
+ },
362
371
  '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:active': {
363
372
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-pressed)',
364
373
  borderColor: 'var(--ids-comp-card-filled-color-border-info-pressed)',
@@ -371,10 +380,12 @@ module.exports = function CardPlugin() {
371
380
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-hovered)',
372
381
  borderColor: 'var(--ids-comp-card-filled-color-border-light-hovered)',
373
382
  },
374
- '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus': {
375
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-focused)',
376
- borderColor: 'var(--ids-comp-card-filled-color-border-light-focused)',
377
- },
383
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus-visible':
384
+ {
385
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-focused)',
386
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-focused)',
387
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)',
388
+ },
378
389
  '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:active': {
379
390
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-pressed)',
380
391
  borderColor: 'var(--ids-comp-card-filled-color-border-light-pressed)',
@@ -391,10 +402,12 @@ module.exports = function CardPlugin() {
391
402
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-hovered)',
392
403
  borderColor: 'var(--ids-comp-card-filled-color-border-dark-hovered)',
393
404
  },
394
- '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus': {
395
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-focused)',
396
- borderColor: 'var(--ids-comp-card-filled-color-border-dark-focused)',
397
- },
405
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus-visible':
406
+ {
407
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-focused)',
408
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-focused)',
409
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
410
+ },
398
411
  '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:active': {
399
412
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-pressed)',
400
413
  borderColor: 'var(--ids-comp-card-filled-color-border-dark-pressed)',
@@ -411,10 +424,12 @@ module.exports = function CardPlugin() {
411
424
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-hovered)',
412
425
  borderColor: 'var(--ids-comp-card-filled-color-border-surface-hovered)',
413
426
  },
414
- '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus': {
415
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-focused)',
416
- borderColor: 'var(--ids-comp-card-filled-color-border-surface-focused)',
417
- },
427
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus,.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus-visible':
428
+ {
429
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-focused)',
430
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-focused)',
431
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
432
+ },
418
433
  '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:active': {
419
434
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-pressed)',
420
435
  borderColor: 'var(--ids-comp-card-filled-color-border-surface-pressed)',
@@ -431,10 +446,12 @@ module.exports = function CardPlugin() {
431
446
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-hovered)',
432
447
  borderColor: 'var(--ids-comp-card-outlined-color-border-primary-hovered)',
433
448
  },
434
- '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus': {
435
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-focused)',
436
- borderColor: 'var(--ids-comp-card-outlined-color-border-primary-focused)',
437
- },
449
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus-visible':
450
+ {
451
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-focused)',
452
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-focused)',
453
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
454
+ },
438
455
  '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:active': {
439
456
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-pressed)',
440
457
  borderColor: 'var(--ids-comp-card-outlined-color-border-primary-pressed)',
@@ -451,10 +468,12 @@ module.exports = function CardPlugin() {
451
468
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-hovered)',
452
469
  borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-hovered)',
453
470
  },
454
- '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus': {
455
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-focused)',
456
- borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-focused)',
457
- },
471
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus-visible':
472
+ {
473
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-focused)',
474
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-focused)',
475
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
476
+ },
458
477
  '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:active': {
459
478
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-pressed)',
460
479
  borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-pressed)',
@@ -471,10 +490,12 @@ module.exports = function CardPlugin() {
471
490
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-hovered)',
472
491
  borderColor: 'var(--ids-comp-card-outlined-color-border-brand-hovered)',
473
492
  },
474
- '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus': {
475
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-focused)',
476
- borderColor: 'var(--ids-comp-card-outlined-color-border-brand-focused)',
477
- },
493
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus-visible':
494
+ {
495
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-focused)',
496
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-focused)',
497
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
498
+ },
478
499
  '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:active': {
479
500
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-pressed)',
480
501
  borderColor: 'var(--ids-comp-card-outlined-color-border-brand-pressed)',
@@ -491,10 +512,12 @@ module.exports = function CardPlugin() {
491
512
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-hovered)',
492
513
  borderColor: 'var(--ids-comp-card-outlined-color-border-error-hovered)',
493
514
  },
494
- '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus': {
495
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-focused)',
496
- borderColor: 'var(--ids-comp-card-outlined-color-border-error-focused)',
497
- },
515
+ '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus-visible':
516
+ {
517
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-focused)',
518
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-focused)',
519
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
520
+ },
498
521
  '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:active': {
499
522
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-pressed)',
500
523
  borderColor: 'var(--ids-comp-card-outlined-color-border-error-pressed)',
@@ -507,10 +530,12 @@ module.exports = function CardPlugin() {
507
530
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-hovered)',
508
531
  borderColor: 'var(--ids-comp-card-outlined-color-border-success-hovered)',
509
532
  },
510
- '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus': {
511
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-focused)',
512
- borderColor: 'var(--ids-comp-card-outlined-color-border-success-focused)',
513
- },
533
+ '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus-visible':
534
+ {
535
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-focused)',
536
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-focused)',
537
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
538
+ },
514
539
  '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:active': {
515
540
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-pressed)',
516
541
  borderColor: 'var(--ids-comp-card-outlined-color-border-success-pressed)',
@@ -523,10 +548,12 @@ module.exports = function CardPlugin() {
523
548
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-hovered)',
524
549
  borderColor: 'var(--ids-comp-card-outlined-color-border-warning-hovered)',
525
550
  },
526
- '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus': {
527
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-focused)',
528
- borderColor: 'var(--ids-comp-card-outlined-color-border-warning-focused)',
529
- },
551
+ '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus-visible':
552
+ {
553
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-focused)',
554
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-focused)',
555
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
556
+ },
530
557
  '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:active': {
531
558
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-pressed)',
532
559
  borderColor: 'var(--ids-comp-card-outlined-color-border-warning-pressed)',
@@ -539,10 +566,12 @@ module.exports = function CardPlugin() {
539
566
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-hovered)',
540
567
  borderColor: 'var(--ids-comp-card-outlined-color-border-info-hovered)',
541
568
  },
542
- '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus': {
543
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-focused)',
544
- borderColor: 'var(--ids-comp-card-outlined-color-border-info-focused)',
545
- },
569
+ '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus-visible':
570
+ {
571
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-focused)',
572
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-focused)',
573
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
574
+ },
546
575
  '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:active': {
547
576
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-pressed)',
548
577
  borderColor: 'var(--ids-comp-card-outlined-color-border-info-pressed)',
@@ -555,10 +584,12 @@ module.exports = function CardPlugin() {
555
584
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-hovered)',
556
585
  borderColor: 'var(--ids-comp-card-outlined-color-border-light-hovered)',
557
586
  },
558
- '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus': {
559
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-focused)',
560
- borderColor: 'var(--ids-comp-card-outlined-color-border-light-focused)',
561
- },
587
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus-visible':
588
+ {
589
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-focused)',
590
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-focused)',
591
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)',
592
+ },
562
593
  '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:active': {
563
594
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-pressed)',
564
595
  borderColor: 'var(--ids-comp-card-outlined-color-border-light-pressed)',
@@ -575,10 +606,12 @@ module.exports = function CardPlugin() {
575
606
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-hovered)',
576
607
  borderColor: 'var(--ids-comp-card-outlined-color-border-dark-hovered)',
577
608
  },
578
- '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus': {
579
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-focused)',
580
- borderColor: 'var(--ids-comp-card-outlined-color-border-dark-focused)',
581
- },
609
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus-visible':
610
+ {
611
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-focused)',
612
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-focused)',
613
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
614
+ },
582
615
  '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:active': {
583
616
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-pressed)',
584
617
  borderColor: 'var(--ids-comp-card-outlined-color-border-dark-pressed)',
@@ -595,10 +628,12 @@ module.exports = function CardPlugin() {
595
628
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-hovered)',
596
629
  borderColor: 'var(--ids-comp-card-outlined-color-border-surface-hovered)',
597
630
  },
598
- '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus': {
599
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-focused)',
600
- borderColor: 'var(--ids-comp-card-outlined-color-border-surface-focused)',
601
- },
631
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus,.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus-visible':
632
+ {
633
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-focused)',
634
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-focused)',
635
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
636
+ },
602
637
  '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:active': {
603
638
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-pressed)',
604
639
  borderColor: 'var(--ids-comp-card-outlined-color-border-surface-pressed)',
@@ -615,10 +650,12 @@ module.exports = function CardPlugin() {
615
650
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-hovered)',
616
651
  borderColor: 'var(--ids-comp-card-elevated-color-border-primary-hovered)',
617
652
  },
618
- '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus': {
619
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-focused)',
620
- borderColor: 'var(--ids-comp-card-elevated-color-border-primary-focused)',
621
- },
653
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus-visible':
654
+ {
655
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-focused)',
656
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-focused)',
657
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
658
+ },
622
659
  '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:active': {
623
660
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-pressed)',
624
661
  borderColor: 'var(--ids-comp-card-elevated-color-border-primary-pressed)',
@@ -635,10 +672,12 @@ module.exports = function CardPlugin() {
635
672
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-hovered)',
636
673
  borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-hovered)',
637
674
  },
638
- '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus': {
639
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-focused)',
640
- borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-focused)',
641
- },
675
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus-visible':
676
+ {
677
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-focused)',
678
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-focused)',
679
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
680
+ },
642
681
  '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:active': {
643
682
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-pressed)',
644
683
  borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-pressed)',
@@ -655,10 +694,12 @@ module.exports = function CardPlugin() {
655
694
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-hovered)',
656
695
  borderColor: 'var(--ids-comp-card-elevated-color-border-brand-hovered)',
657
696
  },
658
- '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus': {
659
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-focused)',
660
- borderColor: 'var(--ids-comp-card-elevated-color-border-brand-focused)',
661
- },
697
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus-visible':
698
+ {
699
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-focused)',
700
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-focused)',
701
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
702
+ },
662
703
  '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:active': {
663
704
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-pressed)',
664
705
  borderColor: 'var(--ids-comp-card-elevated-color-border-brand-pressed)',
@@ -675,10 +716,12 @@ module.exports = function CardPlugin() {
675
716
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-hovered)',
676
717
  borderColor: 'var(--ids-comp-card-elevated-color-border-error-hovered)',
677
718
  },
678
- '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus': {
679
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-focused)',
680
- borderColor: 'var(--ids-comp-card-elevated-color-border-error-focused)',
681
- },
719
+ '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus-visible':
720
+ {
721
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-focused)',
722
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-focused)',
723
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
724
+ },
682
725
  '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:active': {
683
726
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-pressed)',
684
727
  borderColor: 'var(--ids-comp-card-elevated-color-border-error-pressed)',
@@ -691,10 +734,12 @@ module.exports = function CardPlugin() {
691
734
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-hovered)',
692
735
  borderColor: 'var(--ids-comp-card-elevated-color-border-success-hovered)',
693
736
  },
694
- '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus': {
695
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-focused)',
696
- borderColor: 'var(--ids-comp-card-elevated-color-border-success-focused)',
697
- },
737
+ '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus-visible':
738
+ {
739
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-focused)',
740
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-focused)',
741
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
742
+ },
698
743
  '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:active': {
699
744
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-pressed)',
700
745
  borderColor: 'var(--ids-comp-card-elevated-color-border-success-pressed)',
@@ -707,10 +752,12 @@ module.exports = function CardPlugin() {
707
752
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-hovered)',
708
753
  borderColor: 'var(--ids-comp-card-elevated-color-border-warning-hovered)',
709
754
  },
710
- '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus': {
711
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-focused)',
712
- borderColor: 'var(--ids-comp-card-elevated-color-border-warning-focused)',
713
- },
755
+ '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus-visible':
756
+ {
757
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-focused)',
758
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-focused)',
759
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
760
+ },
714
761
  '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:active': {
715
762
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-pressed)',
716
763
  borderColor: 'var(--ids-comp-card-elevated-color-border-warning-pressed)',
@@ -723,10 +770,12 @@ module.exports = function CardPlugin() {
723
770
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-hovered)',
724
771
  borderColor: 'var(--ids-comp-card-elevated-color-border-info-hovered)',
725
772
  },
726
- '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus': {
727
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-focused)',
728
- borderColor: 'var(--ids-comp-card-elevated-color-border-info-focused)',
729
- },
773
+ '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus-visible':
774
+ {
775
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-focused)',
776
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-focused)',
777
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
778
+ },
730
779
  '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:active': {
731
780
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-pressed)',
732
781
  borderColor: 'var(--ids-comp-card-elevated-color-border-info-pressed)',
@@ -739,10 +788,12 @@ module.exports = function CardPlugin() {
739
788
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-hovered)',
740
789
  borderColor: 'var(--ids-comp-card-elevated-color-border-light-hovered)',
741
790
  },
742
- '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus': {
743
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-focused)',
744
- borderColor: 'var(--ids-comp-card-elevated-color-border-light-focused)',
745
- },
791
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus-visible':
792
+ {
793
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-focused)',
794
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-focused)',
795
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)',
796
+ },
746
797
  '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:active': {
747
798
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-pressed)',
748
799
  borderColor: 'var(--ids-comp-card-elevated-color-border-light-pressed)',
@@ -759,10 +810,12 @@ module.exports = function CardPlugin() {
759
810
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-hovered)',
760
811
  borderColor: 'var(--ids-comp-card-elevated-color-border-dark-hovered)',
761
812
  },
762
- '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus': {
763
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-focused)',
764
- borderColor: 'var(--ids-comp-card-elevated-color-border-dark-focused)',
765
- },
813
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus-visible':
814
+ {
815
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-focused)',
816
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-focused)',
817
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
818
+ },
766
819
  '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:active': {
767
820
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-pressed)',
768
821
  borderColor: 'var(--ids-comp-card-elevated-color-border-dark-pressed)',
@@ -779,10 +832,12 @@ module.exports = function CardPlugin() {
779
832
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-hovered)',
780
833
  borderColor: 'var(--ids-comp-card-elevated-color-border-surface-hovered)',
781
834
  },
782
- '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus': {
783
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-focused)',
784
- borderColor: 'var(--ids-comp-card-elevated-color-border-surface-focused)',
785
- },
835
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus,.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus-visible':
836
+ {
837
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-focused)',
838
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-focused)',
839
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
840
+ },
786
841
  '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:active': {
787
842
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-pressed)',
788
843
  borderColor: 'var(--ids-comp-card-elevated-color-border-surface-pressed)',