@danske/sapphire-css 31.1.0 → 31.1.2

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 (19) 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 +5 -3
  13. package/components/listbox/listbox.module.css +9 -3
  14. package/components/radio/radio.module.css +6 -2
  15. package/components/table/table.module.css +7 -2
  16. package/components/tabs/tabs.module.css +6 -2
  17. package/components/tag/tag.module.css +6 -2
  18. package/components/textField/textField.module.css +3 -1
  19. package/package.json +2 -2
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
@@ -93,10 +93,10 @@
93
93
  box-shadow: inset 0px -1px 0px 0px var(--sapphire-list-color-border-item-default);
94
94
  }
95
95
  /* For not virtualized list */
96
- .sapphire-list--without-last-divider:not(:has([role="presentation"]))
96
+ .sapphire-list--without-last-divider:not(:has([role="presentation"] > [role="presentation"]))
97
97
  .sapphire-list__item:last-child
98
98
  .sapphire-list__item-content-wrapper:not(.is-focus):not(:focus),
99
- .sapphire-list--without-last-divider:not(:has([role="presentation"]))
99
+ .sapphire-list--without-last-divider:not(:has([role="presentation"] > [role="presentation"]))
100
100
  .sapphire-list__item:last-child,
101
101
  /* For virtualized lists.
102
102
  * This is admittedly a bad-looking selector. To keep in
@@ -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
@@ -173,7 +173,9 @@
173
173
  font-size: var(--sapphire-listbox-size-font-secondary-s);
174
174
  }
175
175
 
176
- .sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected)
176
+ .sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(
177
+ .sapphire-listbox__item--selected
178
+ )
177
179
  .sapphire-listbox__secondary-text {
178
180
  color: var(--sapphire-listbox-color-content-normal-secondary-default);
179
181
  }
@@ -223,7 +225,9 @@
223
225
 
224
226
  .sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
225
227
  .sapphire-listbox__content,
226
- .sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover
228
+ .sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(
229
+ .is-active
230
+ ):hover
227
231
  .sapphire-listbox__content {
228
232
  color: var(--sapphire-listbox-color-content-danger-hover);
229
233
  background-color: var(--sapphire-listbox-color-background-danger-hover);
@@ -231,7 +235,9 @@
231
235
 
232
236
  .sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover
233
237
  .sapphire-listbox__content,
234
- .sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover
238
+ .sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(
239
+ .js-hover
240
+ ):hover
235
241
  .sapphire-listbox__content {
236
242
  color: var(--sapphire-listbox-color-content-selected-hover);
237
243
  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);
package/components/table/table.module.css CHANGED
@@ -140,7 +140,9 @@
140
140
 
141
141
  .sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover
142
142
  .sapphire-table__headCell_container,
143
- .sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover
143
+ .sapphire-table__headCell.sapphire-table__headCell--sortable:not(
144
+ .js-hover
145
+ ):hover
144
146
  .sapphire-table__headCell_container {
145
147
  background-color: var(--sapphire-table-color-background-hover);
146
148
  border-radius: var(--sapphire-table-size-radius-hover);
@@ -246,7 +248,10 @@
246
248
  }
247
249
 
248
250
  .sapphire-table--without-last-divider
249
- .sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible):last-child {
251
+ .sapphire-table__row:not(
252
+ .is-focus,
253
+ :not(.js-focus):focus-visible
254
+ ):last-child {
250
255
  box-shadow: none;
251
256
  }
252
257
 
package/components/tabs/tabs.module.css CHANGED
@@ -127,8 +127,12 @@
127
127
  z-index: 1;
128
128
  }
129
129
 
130
- .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
131
- .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
130
+ .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(
131
+ .is-active
132
+ ):not(.js-hover):hover,
133
+ .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(
134
+ .is-active
135
+ ).is-hover {
132
136
  color: var(--sapphire-tabs-color-content-inactive-hover);
133
137
  }
134
138
 
package/components/tag/tag.module.css CHANGED
@@ -64,8 +64,12 @@
64
64
  }
65
65
 
66
66
  /* Actionable */
67
- .sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
68
- .sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
67
+ .sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(
68
+ .is-active
69
+ ):not(.js-hover):hover,
70
+ .sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(
71
+ .is-active
72
+ ).is-hover {
69
73
  background-color: var(--sapphire-tag-color-background-primary-hover);
70
74
  cursor: pointer;
71
75
  }
package/components/textField/textField.module.css CHANGED
@@ -271,7 +271,9 @@
271
271
  color: var(--sapphire-text-field-color-content-stepper-default);
272
272
  }
273
273
 
274
- .sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,
274
+ .sapphire-text-field__stepper-button:not(:active):not(.is-active):not(
275
+ .js-hover
276
+ ):hover,
275
277
  .sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover {
276
278
  background-color: var(--sapphire-text-field-color-background-stepper-hover);
277
279
  color: var(--sapphire-text-field-color-content-stepper-hover);