@danske/sapphire-css 31.1.1 → 31.2.1

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 (20) hide show
  1. package/components/accordion/accordion.module.css +7 -2
  2. package/components/button/button.module.css +240 -72
  3. package/components/button/button.module.css.d.ts +3 -0
  4. package/components/buttonGroup/buttonGroup.module.css +3 -1
  5. package/components/calendar/calendar.module.css +89 -29
  6. package/components/checkbox/checkbox.module.css +27 -9
  7. package/components/dateField/dateField.module.css +9 -3
  8. package/components/dropzone/dropzone.module.css +12 -4
  9. package/components/iconButton/iconButton.module.css +190 -60
  10. package/components/iconButton/iconButton.module.css.d.ts +3 -1
  11. package/components/link/link.module.css +15 -5
  12. package/components/list/list.module.css +3 -1
  13. package/components/listbox/listbox.module.css +10 -3
  14. package/components/radio/radio.module.css +6 -2
  15. package/components/table/table.module.css +49 -5
  16. package/components/table/table.module.css.d.ts +5 -0
  17. package/components/tabs/tabs.module.css +6 -2
  18. package/components/tag/tag.module.css +6 -2
  19. package/components/textField/textField.module.css +3 -1
  20. package/package.json +4 -4
package/components/iconButton/iconButton.module.css CHANGED
@@ -72,6 +72,16 @@ a.sapphire-icon-button {
72
72
  outline-offset: var(--sapphire-icon-button-size-focus-ring-offset);
73
73
  }
74
74
 
75
+ /* Button loading */
76
+ .sapphire-icon-button__spinner {
77
+ position: absolute;
78
+ display: inherit;
79
+ }
80
+
81
+ .sapphire-icon-button--loading .sapphire-icon-button__icon {
82
+ visibility: hidden;
83
+ }
84
+
75
85
  /**
76
86
  * Skin rules
77
87
  */
@@ -84,8 +94,12 @@ a.sapphire-icon-button {
84
94
  );
85
95
  color: var(--sapphire-icon-button-color-content-primary-default);
86
96
  }
87
- .sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
88
- .sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
97
+ .sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(
98
+ :active
99
+ ):not(.is-active):not(.js-hover):hover,
100
+ .sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(
101
+ :active
102
+ ):not(.is-active).is-hover {
89
103
  background-color: var(--sapphire-icon-button-color-background-primary-hover);
90
104
  }
91
105
  .sapphire-icon-button--primary-fill.is-focus,
@@ -94,7 +108,9 @@ a.sapphire-icon-button {
94
108
  }
95
109
  .sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled).is-active,
96
110
  .sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):active,
97
- .sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active {
111
+ .sapphire-icon-button--primary-fill:not(:disabled):not(
112
+ .is-disabled
113
+ ):focus-visible:active {
98
114
  background-color: var(--sapphire-icon-button-color-background-primary-active);
99
115
  }
100
116
 
@@ -108,8 +124,12 @@ a.sapphire-icon-button {
108
124
  color: var(--sapphire-icon-button-color-content-secondary-default);
109
125
  }
110
126
 
111
- .sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
112
- .sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
127
+ .sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(
128
+ :active
129
+ ):not(.is-active):not(.js-hover):hover,
130
+ .sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(
131
+ :active
132
+ ):not(.is-active).is-hover {
113
133
  background-color: var(
114
134
  --sapphire-icon-button-color-background-secondary-hover
115
135
  );
@@ -123,9 +143,13 @@ a.sapphire-icon-button {
123
143
  );
124
144
  }
125
145
 
126
- .sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,
146
+ .sapphire-icon-button--secondary-fill:not(:disabled):not(
147
+ .is-disabled
148
+ ).is-active,
127
149
  .sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):active,
128
- .sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active {
150
+ .sapphire-icon-button--secondary-fill:not(:disabled):not(
151
+ .is-disabled
152
+ ):focus-visible:active {
129
153
  background-color: var(
130
154
  --sapphire-icon-button-color-background-secondary-active
131
155
  );
@@ -139,23 +163,35 @@ a.sapphire-icon-button {
139
163
  );
140
164
  }
141
165
 
142
- .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
143
- .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
166
+ .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
167
+ :disabled
168
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
169
+ .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
170
+ :disabled
171
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover {
144
172
  background-color: var(
145
173
  --sapphire-icon-button-color-background-secondary-surface-secondary-hover
146
174
  );
147
175
  }
148
176
 
149
177
  .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface.is-focus,
150
- .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible {
178
+ .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
179
+ .js-focus
180
+ ):focus-visible {
151
181
  background-color: var(
152
182
  --sapphire-icon-button-color-background-secondary-surface-secondary-focus
153
183
  );
154
184
  }
155
185
 
156
- .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
157
- .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,
158
- .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
186
+ .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
187
+ :disabled
188
+ ):not(.is-disabled).is-active,
189
+ .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
190
+ :disabled
191
+ ):not(.is-disabled):active,
192
+ .sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
193
+ :disabled
194
+ ):not(.is-disabled):focus-visible:active {
159
195
  background-color: var(
160
196
  --sapphire-icon-button-color-background-secondary-surface-secondary-active
161
197
  );
@@ -170,8 +206,12 @@ a.sapphire-icon-button {
170
206
  color: var(--sapphire-icon-button-color-content-secondary-default);
171
207
  }
172
208
 
173
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
174
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
209
+ .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
210
+ :active
211
+ ):not(.is-active):not(.js-hover):hover,
212
+ .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
213
+ :active
214
+ ):not(.is-active).is-hover {
175
215
  background-color: var(
176
216
  --sapphire-icon-button-color-background-secondary-ghost-hover
177
217
  );
@@ -185,9 +225,13 @@ a.sapphire-icon-button {
185
225
  );
186
226
  }
187
227
 
188
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,
228
+ .sapphire-icon-button--secondary-ghost:not(:disabled):not(
229
+ .is-disabled
230
+ ).is-active,
189
231
  .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):active,
190
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active {
232
+ .sapphire-icon-button--secondary-ghost:not(:disabled):not(
233
+ .is-disabled
234
+ ):focus-visible:active {
191
235
  background-color: var(
192
236
  --sapphire-icon-button-color-background-secondary-ghost-active
193
237
  );
@@ -201,23 +245,35 @@ a.sapphire-icon-button {
201
245
  );
202
246
  }
203
247
 
204
- .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
205
- .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
248
+ .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
249
+ :disabled
250
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
251
+ .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
252
+ :disabled
253
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover {
206
254
  background-color: var(
207
255
  --sapphire-icon-button-color-background-secondary-ghost-surface-secondary-hover
208
256
  );
209
257
  }
210
258
 
211
259
  .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface.is-focus,
212
- .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible {
260
+ .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
261
+ .js-focus
262
+ ):focus-visible {
213
263
  background-color: var(
214
264
  --sapphire-icon-button-color-background-secondary-ghost-surface-secondary-focus
215
265
  );
216
266
  }
217
267
 
218
- .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
219
- .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,
220
- .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
268
+ .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
269
+ :disabled
270
+ ):not(.is-disabled).is-active,
271
+ .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
272
+ :disabled
273
+ ):not(.is-disabled):active,
274
+ .sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
275
+ :disabled
276
+ ):not(.is-disabled):focus-visible:active {
221
277
  background-color: var(
222
278
  --sapphire-icon-button-color-background-secondary-ghost-surface-secondary-active
223
279
  );
@@ -233,8 +289,12 @@ a.sapphire-icon-button {
233
289
  color: var(--sapphire-icon-button-color-content-tertiary-default);
234
290
  }
235
291
 
236
- .sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
237
- .sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
292
+ .sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(
293
+ :active
294
+ ):not(.is-active):not(.js-hover):hover,
295
+ .sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(
296
+ :active
297
+ ):not(.is-active).is-hover {
238
298
  background-color: var(--sapphire-icon-button-color-background-tertiary-hover);
239
299
  color: var(--sapphire-icon-button-color-content-tertiary-hover);
240
300
  }
@@ -246,7 +306,9 @@ a.sapphire-icon-button {
246
306
 
247
307
  .sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,
248
308
  .sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):active,
249
- .sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active {
309
+ .sapphire-icon-button--tertiary-fill:not(:disabled):not(
310
+ .is-disabled
311
+ ):focus-visible:active {
250
312
  background-color: var(
251
313
  --sapphire-icon-button-color-background-tertiary-active
252
314
  );
@@ -260,23 +322,35 @@ a.sapphire-icon-button {
260
322
  );
261
323
  }
262
324
 
263
- .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
264
- .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
325
+ .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
326
+ :disabled
327
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
328
+ .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
329
+ :disabled
330
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover {
265
331
  background-color: var(
266
332
  --sapphire-icon-button-color-background-tertiary-surface-secondary-hover
267
333
  );
268
334
  }
269
335
 
270
336
  .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface.is-focus,
271
- .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible {
337
+ .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
338
+ .js-focus
339
+ ):focus-visible {
272
340
  background-color: var(
273
341
  --sapphire-icon-button-color-background-tertiary-surface-secondary-focus
274
342
  );
275
343
  }
276
344
 
277
- .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
278
- .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,
279
- .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
345
+ .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
346
+ :disabled
347
+ ):not(.is-disabled).is-active,
348
+ .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
349
+ :disabled
350
+ ):not(.is-disabled):active,
351
+ .sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
352
+ :disabled
353
+ ):not(.is-disabled):focus-visible:active {
280
354
  background-color: var(
281
355
  --sapphire-icon-button-color-background-tertiary-surface-secondary-active
282
356
  );
@@ -291,8 +365,12 @@ a.sapphire-icon-button {
291
365
  color: var(--sapphire-icon-button-color-content-tertiary-default);
292
366
  }
293
367
 
294
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
295
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
368
+ .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
369
+ :active
370
+ ):not(.is-active):not(.js-hover):hover,
371
+ .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
372
+ :active
373
+ ):not(.is-active).is-hover {
296
374
  background-color: var(
297
375
  --sapphire-icon-button-color-background-tertiary-ghost-hover
298
376
  );
@@ -306,9 +384,13 @@ a.sapphire-icon-button {
306
384
  );
307
385
  }
308
386
 
309
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,
387
+ .sapphire-icon-button--tertiary-ghost:not(:disabled):not(
388
+ .is-disabled
389
+ ).is-active,
310
390
  .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,
311
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active {
391
+ .sapphire-icon-button--tertiary-ghost:not(:disabled):not(
392
+ .is-disabled
393
+ ):focus-visible:active {
312
394
  background-color: var(
313
395
  --sapphire-icon-button-color-background-tertiary-ghost-active
314
396
  );
@@ -322,23 +404,35 @@ a.sapphire-icon-button {
322
404
  );
323
405
  }
324
406
 
325
- .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
326
- .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
407
+ .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
408
+ :disabled
409
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
410
+ .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
411
+ :disabled
412
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover {
327
413
  background-color: var(
328
414
  --sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-hover
329
415
  );
330
416
  }
331
417
 
332
418
  .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface.is-focus,
333
- .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible {
419
+ .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
420
+ .js-focus
421
+ ):focus-visible {
334
422
  background-color: var(
335
423
  --sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-focus
336
424
  );
337
425
  }
338
426
 
339
- .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
340
- .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,
341
- .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
427
+ .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
428
+ :disabled
429
+ ):not(.is-disabled).is-active,
430
+ .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
431
+ :disabled
432
+ ):not(.is-disabled):active,
433
+ .sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
434
+ :disabled
435
+ ):not(.is-disabled):focus-visible:active {
342
436
  background-color: var(
343
437
  --sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-active
344
438
  );
@@ -352,8 +446,12 @@ a.sapphire-icon-button {
352
446
  color: var(--sapphire-icon-button-color-content-danger-default);
353
447
  }
354
448
 
355
- .sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
356
- .sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
449
+ .sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(
450
+ :active
451
+ ):not(.is-active):not(.js-hover):hover,
452
+ .sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(
453
+ :active
454
+ ):not(.is-active).is-hover {
357
455
  background-color: var(--sapphire-icon-button-color-background-danger-hover);
358
456
  color: var(--sapphire-icon-button-color-content-danger-hover);
359
457
  }
@@ -365,7 +463,9 @@ a.sapphire-icon-button {
365
463
 
366
464
  .sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled).is-active,
367
465
  .sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):active,
368
- .sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active {
466
+ .sapphire-icon-button--danger-fill:not(:disabled):not(
467
+ .is-disabled
468
+ ):focus-visible:active {
369
469
  background-color: var(--sapphire-icon-button-color-background-danger-active);
370
470
  color: var(--sapphire-icon-button-color-content-danger-active);
371
471
  }
@@ -377,23 +477,35 @@ a.sapphire-icon-button {
377
477
  );
378
478
  }
379
479
 
380
- .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
381
- .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
480
+ .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
481
+ :disabled
482
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
483
+ .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
484
+ :disabled
485
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover {
382
486
  background-color: var(
383
487
  --sapphire-icon-button-color-background-danger-surface-secondary-hover
384
488
  );
385
489
  }
386
490
 
387
491
  .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface.is-focus,
388
- .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible {
492
+ .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
493
+ .js-focus
494
+ ):focus-visible {
389
495
  background-color: var(
390
496
  --sapphire-icon-button-color-background-danger-surface-secondary-focus
391
497
  );
392
498
  }
393
499
 
394
- .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
395
- .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,
396
- .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
500
+ .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
501
+ :disabled
502
+ ):not(.is-disabled).is-active,
503
+ .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
504
+ :disabled
505
+ ):not(.is-disabled):active,
506
+ .sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
507
+ :disabled
508
+ ):not(.is-disabled):focus-visible:active {
397
509
  background-color: var(
398
510
  --sapphire-icon-button-color-background-danger-surface-secondary-active
399
511
  );
@@ -408,8 +520,12 @@ a.sapphire-icon-button {
408
520
  color: var(--sapphire-icon-button-color-content-danger-default);
409
521
  }
410
522
 
411
- .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
412
- .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
523
+ .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(
524
+ :active
525
+ ):not(.is-active):not(.js-hover):hover,
526
+ .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(
527
+ :active
528
+ ):not(.is-active).is-hover {
413
529
  background-color: var(
414
530
  --sapphire-icon-button-color-background-danger-ghost-hover
415
531
  );
@@ -425,7 +541,9 @@ a.sapphire-icon-button {
425
541
 
426
542
  .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,
427
543
  .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):active,
428
- .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active {
544
+ .sapphire-icon-button--danger-ghost:not(:disabled):not(
545
+ .is-disabled
546
+ ):focus-visible:active {
429
547
  background-color: var(
430
548
  --sapphire-icon-button-color-background-danger-ghost-active
431
549
  );
@@ -439,23 +557,35 @@ a.sapphire-icon-button {
439
557
  );
440
558
  }
441
559
 
442
- .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
443
- .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
560
+ .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
561
+ :disabled
562
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
563
+ .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
564
+ :disabled
565
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover {
444
566
  background-color: var(
445
567
  --sapphire-icon-button-color-background-danger-ghost-surface-secondary-hover
446
568
  );
447
569
  }
448
570
 
449
571
  .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface.is-focus,
450
- .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible {
572
+ .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
573
+ .js-focus
574
+ ):focus-visible {
451
575
  background-color: var(
452
576
  --sapphire-icon-button-color-background-danger-ghost-surface-secondary-focus
453
577
  );
454
578
  }
455
579
 
456
- .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
457
- .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,
458
- .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
580
+ .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
581
+ :disabled
582
+ ):not(.is-disabled).is-active,
583
+ .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
584
+ :disabled
585
+ ):not(.is-disabled):active,
586
+ .sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
587
+ :disabled
588
+ ):not(.is-disabled):focus-visible:active {
459
589
  background-color: var(
460
590
  --sapphire-icon-button-color-background-danger-ghost-surface-secondary-active
461
591
  );
package/components/iconButton/iconButton.module.css.d.ts CHANGED
@@ -3,6 +3,9 @@ declare const styles: {
3
3
  readonly "is-disabled": string;
4
4
  readonly "is-focus": string;
5
5
  readonly "js-focus": string;
6
+ readonly "sapphire-icon-button__spinner": string;
7
+ readonly "sapphire-icon-button--loading": string;
8
+ readonly "sapphire-icon-button__icon": string;
6
9
  readonly "sapphire-icon-button--primary-fill": string;
7
10
  readonly "is-active": string;
8
11
  readonly "js-hover": string;
@@ -14,7 +17,6 @@ declare const styles: {
14
17
  readonly "sapphire-icon-button--tertiary-ghost": string;
15
18
  readonly "sapphire-icon-button--danger-fill": string;
16
19
  readonly "sapphire-icon-button--danger-ghost": string;
17
- readonly "sapphire-icon-button__icon": string;
18
20
  readonly "sapphire-icon-button--large": string;
19
21
  readonly "sapphire-icon-button--small": string;
20
22
  readonly "sapphire-icon-button--extra-small": string;
package/components/link/link.module.css CHANGED
@@ -42,8 +42,12 @@
42
42
  .sapphire-link--primary {
43
43
  color: var(--sapphire-link-color-content-primary-default);
44
44
  }
45
- .sapphire-link--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
46
- .sapphire-link--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
45
+ .sapphire-link--primary:not(:disabled):not(.is-disabled):not(:active):not(
46
+ .is-active
47
+ ):not(.js-hover):hover,
48
+ .sapphire-link--primary:not(:disabled):not(.is-disabled):not(:active):not(
49
+ .is-active
50
+ ).is-hover {
47
51
  color: var(--sapphire-link-color-content-primary-hover);
48
52
  }
49
53
  .sapphire-link--primary.is-focus,
@@ -63,8 +67,12 @@
63
67
  color: var(--sapphire-link-color-content-secondary-default);
64
68
  }
65
69
 
66
- .sapphire-link--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
67
- .sapphire-link--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
70
+ .sapphire-link--secondary:not(:disabled):not(.is-disabled):not(:active):not(
71
+ .is-active
72
+ ):not(.js-hover):hover,
73
+ .sapphire-link--secondary:not(:disabled):not(.is-disabled):not(:active):not(
74
+ .is-active
75
+ ).is-hover {
68
76
  color: var(--sapphire-link-color-content-secondary-hover);
69
77
  }
70
78
 
@@ -77,7 +85,9 @@
77
85
 
78
86
  .sapphire-link--secondary:not(:disabled):not(.is-disabled).is-active,
79
87
  .sapphire-link--secondary:not(:disabled):not(.is-disabled):active,
80
- .sapphire-link--secondary:not(:disabled):not(.is-disabled):focus-visible:active {
88
+ .sapphire-link--secondary:not(:disabled):not(
89
+ .is-disabled
90
+ ):focus-visible:active {
81
91
  color: var(--sapphire-link-color-content-secondary-active);
82
92
  }
83
93
 
package/components/list/list.module.css CHANGED
@@ -126,7 +126,9 @@
126
126
  */
127
127
  .sapphire-list .sapphire-list__item-content-wrapper.is-hover,
128
128
  .sapphire-list
129
- .sapphire-list__item-content-wrapper:not(.js-hover):not([aria-disabled='true']):not(:disabled):hover {
129
+ .sapphire-list__item-content-wrapper:not(.js-hover):not(
130
+ [aria-disabled='true']
131
+ ):not(:disabled):hover {
130
132
  background-color: var(--sapphire-list-color-background-item-hover);
131
133
  cursor: pointer;
132
134
  }
package/components/listbox/listbox.module.css CHANGED
@@ -54,6 +54,7 @@
54
54
  color: var(--sapphire-listbox-color-content-normal-primary-default);
55
55
  outline: none;
56
56
  cursor: pointer;
57
+ text-decoration: none;
57
58
 
58
59
  /**
59
60
  * Making sure listbox will grow to the maximum width needed by the content, which should
@@ -173,7 +174,9 @@
173
174
  font-size: var(--sapphire-listbox-size-font-secondary-s);
174
175
  }
175
176
 
176
- .sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected)
177
+ .sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(
178
+ .sapphire-listbox__item--selected
179
+ )
177
180
  .sapphire-listbox__secondary-text {
178
181
  color: var(--sapphire-listbox-color-content-normal-secondary-default);
179
182
  }
@@ -223,7 +226,9 @@
223
226
 
224
227
  .sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
225
228
  .sapphire-listbox__content,
226
- .sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover
229
+ .sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(
230
+ .is-active
231
+ ):hover
227
232
  .sapphire-listbox__content {
228
233
  color: var(--sapphire-listbox-color-content-danger-hover);
229
234
  background-color: var(--sapphire-listbox-color-background-danger-hover);
@@ -231,7 +236,9 @@
231
236
 
232
237
  .sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover
233
238
  .sapphire-listbox__content,
234
- .sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover
239
+ .sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(
240
+ .js-hover
241
+ ):hover
235
242
  .sapphire-listbox__content {
236
243
  color: var(--sapphire-listbox-color-content-selected-hover);
237
244
  background-color: var(--sapphire-listbox-color-background-selected-hover);
package/components/radio/radio.module.css CHANGED
@@ -97,9 +97,13 @@
97
97
 
98
98
  /* Hover when not checked */
99
99
 
100
- .sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover
100
+ .sapphire-radio:not(:active):not(.is-active):not(
101
+ .sapphire-radio--checked
102
+ ).is-hover
101
103
  .sapphire-radio__box,
102
- .sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover
104
+ .sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(
105
+ .js-hover
106
+ ):hover
103
107
  .sapphire-radio__input:not(:disabled)
104
108
  ~ .sapphire-radio__box {
105
109
  border-color: var(--sapphire-radio-color-border-box-unchecked-hover);