@carbon/styles 1.111.0 → 1.112.0

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 (16) hide show
  1. package/README.md +89 -0
  2. package/css/styles.css +323 -213
  3. package/css/styles.min.css +1 -1
  4. package/package.json +9 -9
  5. package/scss/__tests__/__snapshots__/motion-test.js.snap +96 -1
  6. package/scss/components/__tests__/ai-label-test.js +58 -0
  7. package/scss/components/__tests__/code-snippet-test.js +46 -1
  8. package/scss/components/__tests__/content-switcher-test.js +46 -1
  9. package/scss/components/__tests__/notification-test.js +41 -1
  10. package/scss/components/code-snippet/_code-snippet.scss +42 -23
  11. package/scss/components/content-switcher/_content-switcher.scss +265 -189
  12. package/scss/components/copy-button/_copy-button.scss +5 -3
  13. package/scss/components/notification/_actionable-notification.scss +37 -18
  14. package/scss/components/notification/_inline-notification.scss +16 -6
  15. package/scss/components/progress-indicator/_progress-indicator.scss +28 -17
  16. package/scss/components/slug/_slug.scss +57 -47
package/scss/components/content-switcher/_content-switcher.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright IBM Corp. 2016, 2025
2
+ // Copyright IBM Corp. 2016, 2026
3
3
  //
4
4
  // This source code is licensed under the Apache-2.0 license found in the
5
5
  // LICENSE file in the root directory of this source tree.
@@ -86,25 +86,30 @@
86
86
  inset 0 0 0 3px $focus-inset;
87
87
  }
88
88
 
89
- &:hover {
90
- color: $text-primary;
91
- cursor: pointer;
92
- }
93
-
94
- &:hover,
95
89
  &:active {
96
90
  z-index: 3;
97
91
  background-color: $layer-hover;
98
92
  color: $text-primary;
99
93
  }
100
94
 
95
+ @media (any-hover: hover) {
96
+ &:hover {
97
+ z-index: 3;
98
+ background-color: $layer-hover;
99
+ color: $text-primary;
100
+ cursor: pointer;
101
+ }
102
+ }
103
+
101
104
  &:disabled {
102
105
  border-color: $border-disabled;
103
106
  background-color: transparent;
104
107
  color: $text-disabled;
105
108
 
106
- &:hover {
107
- cursor: not-allowed;
109
+ @media (any-hover: hover) {
110
+ &:hover {
111
+ cursor: not-allowed;
112
+ }
108
113
  }
109
114
  }
110
115
  }
@@ -126,12 +131,14 @@
126
131
  transform: scaleY(1);
127
132
  }
128
133
 
129
- &:focus:hover::after {
130
- border-radius: 0;
131
- background-color: $layer-hover;
132
- border-block-end: convert.to-rem(1px) solid $border-inverse;
133
- border-block-start: convert.to-rem(1px) solid $border-inverse;
134
- box-shadow: none;
134
+ @media (any-hover: hover) {
135
+ &:focus:hover::after {
136
+ border-radius: 0;
137
+ background-color: $layer-hover;
138
+ border-block-end: convert.to-rem(1px) solid $border-inverse;
139
+ border-block-start: convert.to-rem(1px) solid $border-inverse;
140
+ box-shadow: none;
141
+ }
135
142
  }
136
143
  }
137
144
 
@@ -196,28 +203,43 @@
196
203
  .#{$prefix}--content-switcher-btn:focus::before,
197
204
  .#{$prefix}--content-switcher-btn:focus
198
205
  + .#{$prefix}--content-switcher-btn::before,
199
- .#{$prefix}--content-switcher-btn:hover::before,
200
- .#{$prefix}--content-switcher-btn:hover
201
- + .#{$prefix}--content-switcher-btn::before,
202
206
  .#{$prefix}--content-switcher--selected::before,
203
207
  .#{$prefix}--content-switcher--selected
204
208
  + .#{$prefix}--content-switcher-btn::before {
205
209
  background-color: transparent;
206
210
  }
207
211
 
208
- .#{$prefix}--content-switcher-btn:disabled::before,
209
- .#{$prefix}--content-switcher-btn:disabled:hover
210
- + .#{$prefix}--content-switcher-btn:disabled::before {
212
+ @media (any-hover: hover) {
213
+ .#{$prefix}--content-switcher-btn:hover::before,
214
+ .#{$prefix}--content-switcher-btn:hover
215
+ + .#{$prefix}--content-switcher-btn::before {
216
+ background-color: transparent;
217
+ }
218
+ }
219
+
220
+ .#{$prefix}--content-switcher-btn:disabled::before {
211
221
  background-color: $border-disabled;
212
222
  }
213
223
 
224
+ @media (any-hover: hover) {
225
+ .#{$prefix}--content-switcher-btn:disabled:hover
226
+ + .#{$prefix}--content-switcher-btn:disabled::before {
227
+ background-color: $border-disabled;
228
+ }
229
+ }
230
+
214
231
  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled
215
- + .#{$prefix}--content-switcher-btn::before,
216
- .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled:hover
217
232
  + .#{$prefix}--content-switcher-btn::before {
218
233
  background-color: transparent;
219
234
  }
220
235
 
236
+ @media (any-hover: hover) {
237
+ .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled:hover
238
+ + .#{$prefix}--content-switcher-btn::before {
239
+ background-color: transparent;
240
+ }
241
+ }
242
+
221
243
  .#{$prefix}--content-switcher__icon {
222
244
  fill: $icon-secondary;
223
245
  }
@@ -234,39 +256,47 @@
234
256
  white-space: nowrap;
235
257
  }
236
258
 
237
- .#{$prefix}--content-switcher-btn:hover .#{$prefix}--content-switcher__icon,
238
259
  .#{$prefix}--content-switcher-btn:focus .#{$prefix}--content-switcher__icon {
239
260
  fill: $icon-primary;
240
261
  }
241
262
 
242
- .#{$prefix}--content-switcher-btn:focus:has(
243
- + .#{$prefix}--content-switcher-btn:not(
244
- .#{$prefix}--content-switcher--selected
245
- ):hover
246
- ),
247
- .#{$prefix}--content-switcher-btn:not(
248
- .#{$prefix}--content-switcher--selected
249
- ):hover
250
- + .#{$prefix}--content-switcher-btn:focus,
251
- .#{$prefix}--content-switcher-btn:hover
252
- + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected,
253
- .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:has(
254
- + .#{$prefix}--content-switcher-btn:hover
255
- ) {
256
- &::before {
257
- z-index: 0;
258
- border-radius: 0;
259
- block-size: 100%;
260
- border-block-end: convert.to-rem(1px) solid $border-inverse;
261
- border-block-start: convert.to-rem(1px) solid $border-inverse;
262
- box-shadow: inset 0 0 0 convert.to-rem(1px) $layer-hover;
263
- content: '';
264
- inline-size: 100%;
263
+ @media (any-hover: hover) {
264
+ .#{$prefix}--content-switcher-btn:hover
265
+ .#{$prefix}--content-switcher__icon {
266
+ fill: $icon-primary;
265
267
  }
268
+ }
266
269
 
267
- &:not(.#{$prefix}--content-switcher--selected)::after {
268
- background-color: $focus-inset;
269
- transform: scaleY(1);
270
+ @media (any-hover: hover) {
271
+ .#{$prefix}--content-switcher-btn:focus:has(
272
+ + .#{$prefix}--content-switcher-btn:not(
273
+ .#{$prefix}--content-switcher--selected
274
+ ):hover
275
+ ),
276
+ .#{$prefix}--content-switcher-btn:not(
277
+ .#{$prefix}--content-switcher--selected
278
+ ):hover
279
+ + .#{$prefix}--content-switcher-btn:focus,
280
+ .#{$prefix}--content-switcher-btn:hover
281
+ + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected,
282
+ .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:has(
283
+ + .#{$prefix}--content-switcher-btn:hover
284
+ ) {
285
+ &::before {
286
+ z-index: 0;
287
+ border-radius: 0;
288
+ block-size: 100%;
289
+ border-block-end: convert.to-rem(1px) solid $border-inverse;
290
+ border-block-start: convert.to-rem(1px) solid $border-inverse;
291
+ box-shadow: inset 0 0 0 convert.to-rem(1px) $layer-hover;
292
+ content: '';
293
+ inline-size: 100%;
294
+ }
295
+
296
+ &:not(.#{$prefix}--content-switcher--selected)::after {
297
+ background-color: $focus-inset;
298
+ transform: scaleY(1);
299
+ }
270
300
  }
271
301
  }
272
302
 
@@ -274,8 +304,10 @@
274
304
  z-index: 3;
275
305
  color: $text-inverse;
276
306
 
277
- &:hover {
278
- background-color: transparent;
307
+ @media (any-hover: hover) {
308
+ &:hover {
309
+ background-color: transparent;
310
+ }
279
311
  }
280
312
 
281
313
  &:disabled {
@@ -381,13 +413,6 @@
381
413
  .#{$prefix}--content-switcher-popover__wrapper:focus-within
382
414
  + .#{$prefix}--content-switcher-popover__wrapper
383
415
  .#{$prefix}--content-switcher-btn::before,
384
- .#{$prefix}--content-switcher-popover__wrapper:not(
385
- .#{$prefix}--content-switcher-popover--disabled
386
- ):hover
387
- + .#{$prefix}--content-switcher-popover__wrapper
388
- .#{$prefix}--content-switcher-btn:not(
389
- .#{$prefix}--content-switcher--selected
390
- ):not(:focus)::before,
391
416
  .#{$prefix}--content-switcher--selected::before,
392
417
  .#{$prefix}--content-switcher-popover--selected
393
418
  + .#{$prefix}--content-switcher-popover__wrapper
@@ -395,62 +420,76 @@
395
420
  background-color: transparent;
396
421
  }
397
422
 
423
+ @media (any-hover: hover) {
424
+ .#{$prefix}--content-switcher-popover__wrapper:not(
425
+ .#{$prefix}--content-switcher-popover--disabled
426
+ ):hover
427
+ + .#{$prefix}--content-switcher-popover__wrapper
428
+ .#{$prefix}--content-switcher-btn:not(
429
+ .#{$prefix}--content-switcher--selected
430
+ ):not(:focus)::before {
431
+ background-color: transparent;
432
+ }
433
+ }
434
+
398
435
  .#{$prefix}--content-switcher--icon-only
399
436
  .#{$prefix}--content-switcher-btn[disabled]
400
437
  svg {
401
438
  fill: $icon-disabled;
402
439
  }
403
440
 
404
- .#{$prefix}--content-switcher--icon-only
405
- .#{$prefix}--content-switcher-btn[disabled]:not(
406
- .#{$prefix}--content-switcher--selected
407
- ):hover,
408
- .#{$prefix}--content-switcher--icon-only
409
- .#{$prefix}--content-switcher-popover--selected
410
- + .#{$prefix}--content-switcher-popover--disabled
411
- .#{$prefix}--content-switcher-btn[disabled]:hover::before {
412
- background-color: transparent;
413
- }
441
+ @media (any-hover: hover) {
442
+ .#{$prefix}--content-switcher--icon-only
443
+ .#{$prefix}--content-switcher-btn[disabled]:not(
444
+ .#{$prefix}--content-switcher--selected
445
+ ):hover,
446
+ .#{$prefix}--content-switcher--icon-only
447
+ .#{$prefix}--content-switcher-popover--selected
448
+ + .#{$prefix}--content-switcher-popover--disabled
449
+ .#{$prefix}--content-switcher-btn[disabled]:hover::before {
450
+ background-color: transparent;
451
+ }
414
452
 
415
- .#{$prefix}--content-switcher--icon-only
416
- .#{$prefix}--content-switcher-btn[disabled]:hover::before {
417
- background-color: $border-subtle;
418
- }
453
+ .#{$prefix}--content-switcher--icon-only
454
+ .#{$prefix}--content-switcher-btn[disabled]:hover::before {
455
+ background-color: $border-subtle;
456
+ }
419
457
 
420
- .#{$prefix}--content-switcher-popover__wrapper:has(
458
+ .#{$prefix}--content-switcher-popover__wrapper:has(
459
+ + .#{$prefix}--content-switcher-popover__wrapper
460
+ .#{$prefix}--content-switcher-btn:not(
461
+ .#{$prefix}--content-switcher--selected
462
+ ):hover
463
+ )
464
+ .#{$prefix}--content-switcher-btn:focus,
465
+ .#{$prefix}--content-switcher-popover__wrapper:not(
466
+ .#{$prefix}--content-switcher-popover--selected
467
+ ):hover
421
468
  + .#{$prefix}--content-switcher-popover__wrapper
422
- .#{$prefix}--content-switcher-btn:not(
423
- .#{$prefix}--content-switcher--selected
424
- ):hover
425
- )
426
- .#{$prefix}--content-switcher-btn:focus,
427
- .#{$prefix}--content-switcher-popover__wrapper:not(
428
- .#{$prefix}--content-switcher-popover--selected
429
- ):hover
430
- + .#{$prefix}--content-switcher-popover__wrapper
431
- .#{$prefix}--content-switcher-btn:focus,
432
- .#{$prefix}--content-switcher-popover__wrapper:hover
433
- + .#{$prefix}--content-switcher-popover__wrapper
434
- .#{$prefix}--content-switcher--selected,
435
- .#{$prefix}--content-switcher-popover--selected:has(
469
+ .#{$prefix}--content-switcher-btn:focus,
470
+ .#{$prefix}--content-switcher-popover__wrapper:hover
436
471
  + .#{$prefix}--content-switcher-popover__wrapper
437
- .#{$prefix}--content-switcher-btn:hover
438
- )
439
- .#{$prefix}--content-switcher-btn {
440
- &::before {
441
- z-index: 0;
442
- border-radius: 0;
443
- block-size: 100%;
444
- border-block-end: convert.to-rem(1px) solid $border-inverse;
445
- border-block-start: convert.to-rem(1px) solid $border-inverse;
446
- box-shadow: inset 0 0 0 convert.to-rem(1px) $layer-hover;
447
- content: '';
448
- inline-size: 100%;
449
- }
472
+ .#{$prefix}--content-switcher--selected,
473
+ .#{$prefix}--content-switcher-popover--selected:has(
474
+ + .#{$prefix}--content-switcher-popover__wrapper
475
+ .#{$prefix}--content-switcher-btn:hover
476
+ )
477
+ .#{$prefix}--content-switcher-btn {
478
+ &::before {
479
+ z-index: 0;
480
+ border-radius: 0;
481
+ block-size: 100%;
482
+ border-block-end: convert.to-rem(1px) solid $border-inverse;
483
+ border-block-start: convert.to-rem(1px) solid $border-inverse;
484
+ box-shadow: inset 0 0 0 convert.to-rem(1px) $layer-hover;
485
+ content: '';
486
+ inline-size: 100%;
487
+ }
450
488
 
451
- &:not(.#{$prefix}--content-switcher--selected)::after {
452
- background-color: $focus-inset;
453
- transform: scaleY(1);
489
+ &:not(.#{$prefix}--content-switcher--selected)::after {
490
+ background-color: $focus-inset;
491
+ transform: scaleY(1);
492
+ }
454
493
  }
455
494
  }
456
495
 
@@ -464,11 +503,16 @@
464
503
  .#{$prefix}--content-switcher-btn {
465
504
  border-color: $border-strong;
466
505
 
467
- &:hover,
468
506
  &:active {
469
507
  background-color: $content-switcher-background-hover;
470
508
  }
471
509
 
510
+ @media (any-hover: hover) {
511
+ &:hover {
512
+ background-color: $content-switcher-background-hover;
513
+ }
514
+ }
515
+
472
516
  &::before {
473
517
  background-color: $border-strong;
474
518
  }
@@ -482,8 +526,10 @@
482
526
  background-color: transparent;
483
527
  color: $text-disabled;
484
528
 
485
- &:hover {
486
- cursor: not-allowed;
529
+ @media (any-hover: hover) {
530
+ &:hover {
531
+ cursor: not-allowed;
532
+ }
487
533
  }
488
534
  }
489
535
  }
@@ -501,10 +547,12 @@
501
547
  box-shadow: inset 0 0 0 convert.to-rem(2px) $focus;
502
548
  }
503
549
 
504
- &:focus:hover::after {
505
- border-color: $border-strong;
506
- background-color: $content-switcher-background-hover;
507
- box-shadow: none;
550
+ @media (any-hover: hover) {
551
+ &:focus:hover::after {
552
+ border-color: $border-strong;
553
+ background-color: $content-switcher-background-hover;
554
+ box-shadow: none;
555
+ }
508
556
  }
509
557
  }
510
558
 
@@ -523,28 +571,30 @@
523
571
  }
524
572
 
525
573
  .#{$prefix}--content-switcher--low-contrast {
526
- .#{$prefix}--content-switcher-btn:focus:has(
527
- + .#{$prefix}--content-switcher-btn:not(
528
- .#{$prefix}--content-switcher--selected
529
- ):hover
530
- ),
531
- .#{$prefix}--content-switcher-btn:not(
532
- .#{$prefix}--content-switcher--selected
533
- ):hover
534
- + .#{$prefix}--content-switcher-btn:focus,
535
- .#{$prefix}--content-switcher-btn:hover
536
- + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected,
537
- .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:has(
538
- + .#{$prefix}--content-switcher-btn:hover
539
- ) {
540
- &::before {
541
- border-color: $border-strong;
542
- box-shadow: inset 0 0 0 convert.to-rem(1px)
543
- $content-switcher-background-hover;
544
- }
545
-
546
- &:not(.#{$prefix}--content-switcher--selected)::after {
547
- background-color: $content-switcher-background;
574
+ @media (any-hover: hover) {
575
+ .#{$prefix}--content-switcher-btn:focus:has(
576
+ + .#{$prefix}--content-switcher-btn:not(
577
+ .#{$prefix}--content-switcher--selected
578
+ ):hover
579
+ ),
580
+ .#{$prefix}--content-switcher-btn:not(
581
+ .#{$prefix}--content-switcher--selected
582
+ ):hover
583
+ + .#{$prefix}--content-switcher-btn:focus,
584
+ .#{$prefix}--content-switcher-btn:hover
585
+ + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected,
586
+ .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:has(
587
+ + .#{$prefix}--content-switcher-btn:hover
588
+ ) {
589
+ &::before {
590
+ border-color: $border-strong;
591
+ box-shadow: inset 0 0 0 convert.to-rem(1px)
592
+ $content-switcher-background-hover;
593
+ }
594
+
595
+ &:not(.#{$prefix}--content-switcher--selected)::after {
596
+ background-color: $content-switcher-background;
597
+ }
548
598
  }
549
599
  }
550
600
  }
@@ -555,8 +605,10 @@
555
605
 
556
606
  color: $text-primary;
557
607
 
558
- &:hover {
559
- background-color: transparent;
608
+ @media (any-hover: hover) {
609
+ &:hover {
610
+ background-color: transparent;
611
+ }
560
612
  }
561
613
 
562
614
  &::after {
@@ -586,11 +638,6 @@
586
638
  .#{$prefix}--content-switcher--low-contrast
587
639
  .#{$prefix}--content-switcher-btn:focus
588
640
  + .#{$prefix}--content-switcher-btn::before,
589
- .#{$prefix}--content-switcher--low-contrast
590
- .#{$prefix}--content-switcher-btn:hover::before,
591
- .#{$prefix}--content-switcher--low-contrast
592
- .#{$prefix}--content-switcher-btn:hover
593
- + .#{$prefix}--content-switcher-btn::before,
594
641
  .#{$prefix}--content-switcher--low-contrast
595
642
  .#{$prefix}--content-switcher--selected::before,
596
643
  .#{$prefix}--content-switcher--low-contrast
@@ -599,26 +646,46 @@
599
646
  background-color: transparent;
600
647
  }
601
648
 
649
+ @media (any-hover: hover) {
650
+ .#{$prefix}--content-switcher--low-contrast
651
+ .#{$prefix}--content-switcher-btn:hover::before,
652
+ .#{$prefix}--content-switcher--low-contrast
653
+ .#{$prefix}--content-switcher-btn:hover
654
+ + .#{$prefix}--content-switcher-btn::before {
655
+ background-color: transparent;
656
+ }
657
+ }
658
+
602
659
  .#{$prefix}--content-switcher--low-contrast
603
- .#{$prefix}--content-switcher-btn:disabled::before,
604
- .#{$prefix}--content-switcher--low-contrast
605
- .#{$prefix}--content-switcher-btn:disabled:hover
606
- + .#{$prefix}--content-switcher-btn:disabled::before {
660
+ .#{$prefix}--content-switcher-btn:disabled::before {
607
661
  background-color: $border-disabled;
608
662
  }
609
663
 
664
+ @media (any-hover: hover) {
665
+ .#{$prefix}--content-switcher--low-contrast
666
+ .#{$prefix}--content-switcher-btn:disabled:hover
667
+ + .#{$prefix}--content-switcher-btn:disabled::before {
668
+ background-color: $border-disabled;
669
+ }
670
+ }
671
+
610
672
  .#{$prefix}--content-switcher--low-contrast
611
673
  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled
612
- + .#{$prefix}--content-switcher-btn::before,
613
- .#{$prefix}--content-switcher--low-contrast
614
- .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled:hover
615
- + .#{$prefix}--content-switcher-btn::before,
616
- .#{$prefix}--content-switcher--low-contrast
617
- .#{$prefix}--content-switcher-btn:disabled:hover
618
- + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected::before {
674
+ + .#{$prefix}--content-switcher-btn::before {
619
675
  background-color: transparent;
620
676
  }
621
677
 
678
+ @media (any-hover: hover) {
679
+ .#{$prefix}--content-switcher--low-contrast
680
+ .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled:hover
681
+ + .#{$prefix}--content-switcher-btn::before,
682
+ .#{$prefix}--content-switcher--low-contrast
683
+ .#{$prefix}--content-switcher-btn:disabled:hover
684
+ + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected::before {
685
+ background-color: transparent;
686
+ }
687
+ }
688
+
622
689
  // low contrast icons
623
690
 
624
691
  .#{$prefix}--content-switcher--low-contrast.#{$prefix}--content-switcher--icon-only
@@ -639,10 +706,12 @@
639
706
  fill: $icon-secondary;
640
707
  }
641
708
 
642
- .#{$prefix}--content-switcher--low-contrast.#{$prefix}--content-switcher--icon-only
643
- .#{$prefix}--content-switcher-btn:hover
644
- svg {
645
- fill: $icon-primary;
709
+ @media (any-hover: hover) {
710
+ .#{$prefix}--content-switcher--low-contrast.#{$prefix}--content-switcher--icon-only
711
+ .#{$prefix}--content-switcher-btn:hover
712
+ svg {
713
+ fill: $icon-primary;
714
+ }
646
715
  }
647
716
 
648
717
  .#{$prefix}--content-switcher--low-contrast.#{$prefix}--content-switcher--icon-only
@@ -675,14 +744,6 @@
675
744
  .#{$prefix}--content-switcher-popover__wrapper:focus-within
676
745
  + .#{$prefix}--content-switcher-popover__wrapper
677
746
  .#{$prefix}--content-switcher-btn::before,
678
- .#{$prefix}--content-switcher--low-contrast
679
- .#{$prefix}--content-switcher-popover__wrapper:not(
680
- .#{$prefix}--content-switcher-popover--disabled
681
- ):hover
682
- + .#{$prefix}--content-switcher-popover__wrapper
683
- .#{$prefix}--content-switcher-btn:not(
684
- .#{$prefix}--content-switcher__selected-hovered
685
- )::before,
686
747
  .#{$prefix}--content-switcher--low-contrast
687
748
  .#{$prefix}--content-switcher--selected:not(
688
749
  .#{$prefix}--content-switcher__selected-hovered
@@ -694,35 +755,50 @@
694
755
  background-color: transparent;
695
756
  }
696
757
 
697
- .#{$prefix}--content-switcher--low-contrast {
698
- .#{$prefix}--content-switcher-popover__wrapper:has(
699
- + .#{$prefix}--content-switcher-popover__wrapper
700
- .#{$prefix}--content-switcher-btn:not(
701
- .#{$prefix}--content-switcher--selected
702
- ):hover
703
- )
704
- .#{$prefix}--content-switcher-btn:focus,
705
- .#{$prefix}--content-switcher-popover__wrapper:not(
706
- .#{$prefix}--content-switcher-popover--selected
758
+ @media (any-hover: hover) {
759
+ .#{$prefix}--content-switcher--low-contrast
760
+ .#{$prefix}--content-switcher-popover__wrapper:not(
761
+ .#{$prefix}--content-switcher-popover--disabled
707
762
  ):hover
708
763
  + .#{$prefix}--content-switcher-popover__wrapper
709
- .#{$prefix}--content-switcher-btn:focus,
710
- .#{$prefix}--content-switcher-popover__wrapper:hover
711
- + .#{$prefix}--content-switcher-popover__wrapper
712
- .#{$prefix}--content-switcher--selected,
713
- .#{$prefix}--content-switcher-popover--selected:has(
714
- + .#{$prefix}--content-switcher-popover__wrapper
715
- .#{$prefix}--content-switcher-btn:hover
716
- )
717
- .#{$prefix}--content-switcher-btn {
718
- &::before {
719
- border-color: $border-strong;
720
- box-shadow: inset 0 0 0 convert.to-rem(1px)
721
- $content-switcher-background-hover;
722
- }
764
+ .#{$prefix}--content-switcher-btn:not(
765
+ .#{$prefix}--content-switcher__selected-hovered
766
+ )::before {
767
+ background-color: transparent;
768
+ }
769
+ }
723
770
 
724
- &:not(.#{$prefix}--content-switcher--selected)::after {
725
- background-color: $content-switcher-background;
771
+ .#{$prefix}--content-switcher--low-contrast {
772
+ @media (any-hover: hover) {
773
+ .#{$prefix}--content-switcher-popover__wrapper:has(
774
+ + .#{$prefix}--content-switcher-popover__wrapper
775
+ .#{$prefix}--content-switcher-btn:not(
776
+ .#{$prefix}--content-switcher--selected
777
+ ):hover
778
+ )
779
+ .#{$prefix}--content-switcher-btn:focus,
780
+ .#{$prefix}--content-switcher-popover__wrapper:not(
781
+ .#{$prefix}--content-switcher-popover--selected
782
+ ):hover
783
+ + .#{$prefix}--content-switcher-popover__wrapper
784
+ .#{$prefix}--content-switcher-btn:focus,
785
+ .#{$prefix}--content-switcher-popover__wrapper:hover
786
+ + .#{$prefix}--content-switcher-popover__wrapper
787
+ .#{$prefix}--content-switcher--selected,
788
+ .#{$prefix}--content-switcher-popover--selected:has(
789
+ + .#{$prefix}--content-switcher-popover__wrapper
790
+ .#{$prefix}--content-switcher-btn:hover
791
+ )
792
+ .#{$prefix}--content-switcher-btn {
793
+ &::before {
794
+ border-color: $border-strong;
795
+ box-shadow: inset 0 0 0 convert.to-rem(1px)
796
+ $content-switcher-background-hover;
797
+ }
798
+
799
+ &:not(.#{$prefix}--content-switcher--selected)::after {
800
+ background-color: $content-switcher-background;
801
+ }
726
802
  }
727
803
  }
728
804
  }
package/scss/components/copy-button/_copy-button.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright IBM Corp. 2016, 2023
2
+ // Copyright IBM Corp. 2016, 2026
3
3
  //
4
4
  // This source code is licensed under the Apache-2.0 license found in the
5
5
  // LICENSE file in the root directory of this source tree.
@@ -30,8 +30,10 @@
30
30
  background-color: $layer;
31
31
  cursor: pointer;
32
32
 
33
- &:hover {
34
- background-color: $layer-hover;
33
+ @media (any-hover: hover) {
34
+ &:hover {
35
+ background-color: $layer-hover;
36
+ }
35
37
  }
36
38
 
37
39
  &:active {