@carbon/ibm-products 2.8.1 → 2.9.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.
@@ -369,31 +369,31 @@
369
369
  display: block;
370
370
  }
371
371
 
372
- .cds--popover--tab-tip > .cds--popover .cds--popover-caret {
372
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
373
373
  display: none;
374
374
  }
375
375
 
376
- .cds--popover--bottom > .cds--popover .cds--popover-content {
376
+ .cds--popover--bottom > .cds--popover > .cds--popover-content {
377
377
  bottom: 0;
378
378
  left: 50%;
379
379
  transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
380
380
  }
381
381
 
382
- .cds--popover--bottom-left > .cds--popover .cds--popover-content {
382
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
383
383
  bottom: 0;
384
384
  left: 0;
385
385
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
386
386
  }
387
387
 
388
- .cds--popover--bottom-right > .cds--popover .cds--popover-content {
388
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
389
389
  right: 0;
390
390
  bottom: 0;
391
391
  transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
392
392
  }
393
393
 
394
- .cds--popover--bottom > .cds--popover .cds--popover-content::before,
395
- .cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
396
- .cds--popover--bottom-right > .cds--popover .cds--popover-content::before {
394
+ .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
395
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
396
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
397
397
  top: 0;
398
398
  right: 0;
399
399
  left: 0;
@@ -401,9 +401,9 @@
401
401
  transform: translateY(-100%);
402
402
  }
403
403
 
404
- .cds--popover--bottom > .cds--popover .cds--popover-caret,
405
- .cds--popover--bottom-left > .cds--popover .cds--popover-caret,
406
- .cds--popover--bottom-right > .cds--popover .cds--popover-caret {
404
+ .cds--popover--bottom > .cds--popover > .cds--popover-caret,
405
+ .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
406
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
407
407
  bottom: 0;
408
408
  left: 50%;
409
409
  width: var(--cds-popover-caret-width, 0.75rem);
@@ -412,27 +412,27 @@
412
412
  transform: translate(-50%, var(--cds-popover-offset, 0rem));
413
413
  }
414
414
 
415
- .cds--popover--top > .cds--popover .cds--popover-content {
415
+ .cds--popover--top > .cds--popover > .cds--popover-content {
416
416
  top: 0;
417
417
  left: 50%;
418
418
  transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
419
419
  }
420
420
 
421
- .cds--popover--top-left > .cds--popover .cds--popover-content {
421
+ .cds--popover--top-left > .cds--popover > .cds--popover-content {
422
422
  top: 0;
423
423
  left: 0;
424
424
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
425
425
  }
426
426
 
427
- .cds--popover--top-right > .cds--popover .cds--popover-content {
427
+ .cds--popover--top-right > .cds--popover > .cds--popover-content {
428
428
  top: 0;
429
429
  right: 0;
430
430
  transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
431
431
  }
432
432
 
433
- .cds--popover--top > .cds--popover .cds--popover-content::before,
434
- .cds--popover--top-left > .cds--popover .cds--popover-content::before,
435
- .cds--popover--top-right > .cds--popover .cds--popover-content::before {
433
+ .cds--popover--top > .cds--popover > .cds--popover-content::before,
434
+ .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
435
+ .cds--popover--top-right > .cds--popover > .cds--popover-content::before {
436
436
  right: 0;
437
437
  bottom: 0;
438
438
  left: 0;
@@ -440,9 +440,9 @@
440
440
  transform: translateY(100%);
441
441
  }
442
442
 
443
- .cds--popover--top > .cds--popover .cds--popover-caret,
444
- .cds--popover--top-left > .cds--popover .cds--popover-caret,
445
- .cds--popover--top-right > .cds--popover .cds--popover-caret {
443
+ .cds--popover--top > .cds--popover > .cds--popover-caret,
444
+ .cds--popover--top-left > .cds--popover > .cds--popover-caret,
445
+ .cds--popover--top-right > .cds--popover > .cds--popover-caret {
446
446
  top: 0;
447
447
  left: 50%;
448
448
  width: var(--cds-popover-caret-width, 0.75rem);
@@ -451,27 +451,27 @@
451
451
  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
452
452
  }
453
453
 
454
- .cds--popover--right > .cds--popover .cds--popover-content {
454
+ .cds--popover--right > .cds--popover > .cds--popover-content {
455
455
  top: 50%;
456
456
  left: 100%;
457
457
  transform: translate(var(--cds-popover-offset, 0rem), -50%);
458
458
  }
459
459
 
460
- .cds--popover--right-top > .cds--popover .cds--popover-content {
460
+ .cds--popover--right-top > .cds--popover > .cds--popover-content {
461
461
  top: 50%;
462
462
  left: 100%;
463
463
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
464
464
  }
465
465
 
466
- .cds--popover--right-bottom > .cds--popover .cds--popover-content {
466
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content {
467
467
  bottom: 50%;
468
468
  left: 100%;
469
469
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
470
470
  }
471
471
 
472
- .cds--popover--right > .cds--popover .cds--popover-content::before,
473
- .cds--popover--right-top > .cds--popover .cds--popover-content::before,
474
- .cds--popover--right-bottom > .cds--popover .cds--popover-content::before {
472
+ .cds--popover--right > .cds--popover > .cds--popover-content::before,
473
+ .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
474
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
475
475
  top: 0;
476
476
  bottom: 0;
477
477
  left: 0;
@@ -479,9 +479,9 @@
479
479
  transform: translateX(-100%);
480
480
  }
481
481
 
482
- .cds--popover--right > .cds--popover .cds--popover-caret,
483
- .cds--popover--right-top > .cds--popover .cds--popover-caret,
484
- .cds--popover--right-bottom > .cds--popover .cds--popover-caret {
482
+ .cds--popover--right > .cds--popover > .cds--popover-caret,
483
+ .cds--popover--right-top > .cds--popover > .cds--popover-caret,
484
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
485
485
  top: 50%;
486
486
  left: 100%;
487
487
  width: var(--cds-popover-caret-height, 0.375rem);
@@ -490,27 +490,27 @@
490
490
  transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
491
491
  }
492
492
 
493
- .cds--popover--left > .cds--popover .cds--popover-content {
493
+ .cds--popover--left > .cds--popover > .cds--popover-content {
494
494
  top: 50%;
495
495
  right: 100%;
496
496
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
497
497
  }
498
498
 
499
- .cds--popover--left-top > .cds--popover .cds--popover-content {
499
+ .cds--popover--left-top > .cds--popover > .cds--popover-content {
500
500
  top: -50%;
501
501
  right: 100%;
502
502
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
503
503
  }
504
504
 
505
- .cds--popover--left-bottom > .cds--popover .cds--popover-content {
505
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
506
506
  right: 100%;
507
507
  bottom: -50%;
508
508
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
509
509
  }
510
510
 
511
- .cds--popover--left > .cds--popover .cds--popover-content::before,
512
- .cds--popover--left-top > .cds--popover .cds--popover-content::before,
513
- .cds--popover--left-bottom > .cds--popover .cds--popover-content::before {
511
+ .cds--popover--left > .cds--popover > .cds--popover-content::before,
512
+ .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
513
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
514
514
  top: 0;
515
515
  right: 0;
516
516
  bottom: 0;
@@ -518,9 +518,9 @@
518
518
  transform: translateX(100%);
519
519
  }
520
520
 
521
- .cds--popover--left > .cds--popover .cds--popover-caret,
522
- .cds--popover--left-top > .cds--popover .cds--popover-caret,
523
- .cds--popover--left-bottom > .cds--popover .cds--popover-caret {
521
+ .cds--popover--left > .cds--popover > .cds--popover-caret,
522
+ .cds--popover--left-top > .cds--popover > .cds--popover-caret,
523
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
524
524
  top: 50%;
525
525
  right: 100%;
526
526
  width: var(--cds-popover-caret-height, 0.375rem);
@@ -529,7 +529,7 @@
529
529
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
530
530
  }
531
531
 
532
- .cds--popover--tab-tip > .cds--popover .cds--popover-content {
532
+ .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
533
533
  border-radius: 0;
534
534
  }
535
535
 
@@ -848,14 +848,14 @@
848
848
  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
849
849
  }
850
850
  .cds--btn--ghost:hover {
851
- background-color: var(--cds-layer-hover);
851
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
852
852
  }
853
853
  .cds--btn--ghost:focus {
854
854
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
855
855
  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
856
856
  }
857
857
  .cds--btn--ghost:active {
858
- background-color: var(--cds-layer-active);
858
+ background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
859
859
  }
860
860
  .cds--btn--ghost .cds--btn__icon,
861
861
  .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
@@ -14532,71 +14532,71 @@ th.c4p--datagrid__select-all-toggle-on.button {
14532
14532
  }
14533
14533
  }
14534
14534
  :root {
14535
- --cds-layer:var(--cds-layer-01, #f4f4f4);
14536
- --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
14537
- --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
14538
- --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
14539
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
14540
- --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
14541
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
14542
- --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
14543
- --cds-field:var(--cds-field-01, #f4f4f4);
14544
- --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
14545
- --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
14546
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
14547
- --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
14548
- --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
14535
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
14536
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14537
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14538
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14539
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14540
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14541
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14542
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14543
+ --cds-field: var(--cds-field-01, #f4f4f4);
14544
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14545
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14546
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14547
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14548
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14549
14549
  }
14550
14550
 
14551
14551
  .cds--layer-one {
14552
- --cds-layer:var(--cds-layer-01, #f4f4f4);
14553
- --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
14554
- --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
14555
- --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
14556
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
14557
- --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
14558
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
14559
- --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
14560
- --cds-field:var(--cds-field-01, #f4f4f4);
14561
- --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
14562
- --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
14563
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
14564
- --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
14565
- --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
14552
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
14553
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14554
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14555
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14556
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14557
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14558
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14559
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14560
+ --cds-field: var(--cds-field-01, #f4f4f4);
14561
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14562
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14563
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14564
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14565
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14566
14566
  }
14567
14567
 
14568
14568
  .cds--layer-two {
14569
- --cds-layer:var(--cds-layer-02, #ffffff);
14570
- --cds-layer-active:var(--cds-layer-active-02, #c6c6c6);
14571
- --cds-layer-hover:var(--cds-layer-hover-02, #e8e8e8);
14572
- --cds-layer-selected:var(--cds-layer-selected-02, #e0e0e0);
14573
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-02, #d1d1d1);
14574
- --cds-layer-accent:var(--cds-layer-accent-02, #e0e0e0);
14575
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-02, #d1d1d1);
14576
- --cds-layer-accent-active:var(--cds-layer-accent-active-02, #a8a8a8);
14577
- --cds-field:var(--cds-field-02, #ffffff);
14578
- --cds-field-hover:var(--cds-field-hover-02, #e8e8e8);
14579
- --cds-border-subtle:var(--cds-border-subtle-01, #c6c6c6);
14580
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-02, #c6c6c6);
14581
- --cds-border-strong:var(--cds-border-strong-02, #8d8d8d);
14582
- --cds-border-tile:var(--cds-border-tile-02, #a8a8a8);
14569
+ --cds-layer: var(--cds-layer-02, #ffffff);
14570
+ --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
14571
+ --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
14572
+ --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
14573
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
14574
+ --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
14575
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
14576
+ --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
14577
+ --cds-field: var(--cds-field-02, #ffffff);
14578
+ --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
14579
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
14580
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
14581
+ --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
14582
+ --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
14583
14583
  }
14584
14584
 
14585
14585
  .cds--layer-three {
14586
- --cds-layer:var(--cds-layer-03, #f4f4f4);
14587
- --cds-layer-active:var(--cds-layer-active-03, #c6c6c6);
14588
- --cds-layer-hover:var(--cds-layer-hover-03, #e8e8e8);
14589
- --cds-layer-selected:var(--cds-layer-selected-03, #e0e0e0);
14590
- --cds-layer-selected-hover:var(--cds-layer-selected-hover-03, #d1d1d1);
14591
- --cds-layer-accent:var(--cds-layer-accent-03, #e0e0e0);
14592
- --cds-layer-accent-hover:var(--cds-layer-accent-hover-03, #d1d1d1);
14593
- --cds-layer-accent-active:var(--cds-layer-accent-active-03, #a8a8a8);
14594
- --cds-field:var(--cds-field-03, #f4f4f4);
14595
- --cds-field-hover:var(--cds-field-hover-03, #e8e8e8);
14596
- --cds-border-subtle:var(--cds-border-subtle-02, #e0e0e0);
14597
- --cds-border-subtle-selected:var(--cds-border-subtle-selected-03, #c6c6c6);
14598
- --cds-border-strong:var(--cds-border-strong-03, #8d8d8d);
14599
- --cds-border-tile:var(--cds-border-tile-03, #c6c6c6);
14586
+ --cds-layer: var(--cds-layer-03, #f4f4f4);
14587
+ --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
14588
+ --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
14589
+ --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
14590
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
14591
+ --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
14592
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
14593
+ --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
14594
+ --cds-field: var(--cds-field-03, #f4f4f4);
14595
+ --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
14596
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
14597
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
14598
+ --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
14599
+ --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
14600
14600
  }
14601
14601
 
14602
14602
  .cds--side-nav {
@@ -15107,154 +15107,154 @@ a.cds--side-nav__link--current::before {
15107
15107
  }
15108
15108
  }
15109
15109
  .cds--layout--size-xs {
15110
- --cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);
15111
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15110
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
15111
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15112
15112
  }
15113
15113
 
15114
15114
  .cds--layout-constraint--size__default-xs {
15115
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
15115
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
15116
15116
  }
15117
15117
 
15118
15118
  .cds--layout-constraint--size__min-xs {
15119
- --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
15119
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
15120
15120
  }
15121
15121
 
15122
15122
  .cds--layout-constraint--size__max-xs {
15123
- --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
15123
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
15124
15124
  }
15125
15125
 
15126
15126
  .cds--layout--size-sm {
15127
- --cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);
15128
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15127
+ --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
15128
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15129
15129
  }
15130
15130
 
15131
15131
  .cds--layout-constraint--size__default-sm {
15132
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
15132
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
15133
15133
  }
15134
15134
 
15135
15135
  .cds--layout-constraint--size__min-sm {
15136
- --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
15136
+ --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
15137
15137
  }
15138
15138
 
15139
15139
  .cds--layout-constraint--size__max-sm {
15140
- --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
15140
+ --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
15141
15141
  }
15142
15142
 
15143
15143
  .cds--layout--size-md {
15144
- --cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);
15145
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15144
+ --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
15145
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15146
15146
  }
15147
15147
 
15148
15148
  .cds--layout-constraint--size__default-md {
15149
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
15149
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
15150
15150
  }
15151
15151
 
15152
15152
  .cds--layout-constraint--size__min-md {
15153
- --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
15153
+ --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
15154
15154
  }
15155
15155
 
15156
15156
  .cds--layout-constraint--size__max-md {
15157
- --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
15157
+ --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
15158
15158
  }
15159
15159
 
15160
15160
  .cds--layout--size-lg {
15161
- --cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);
15162
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15161
+ --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
15162
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15163
15163
  }
15164
15164
 
15165
15165
  .cds--layout-constraint--size__default-lg {
15166
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
15166
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
15167
15167
  }
15168
15168
 
15169
15169
  .cds--layout-constraint--size__min-lg {
15170
- --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
15170
+ --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
15171
15171
  }
15172
15172
 
15173
15173
  .cds--layout-constraint--size__max-lg {
15174
- --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
15174
+ --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
15175
15175
  }
15176
15176
 
15177
15177
  .cds--layout--size-xl {
15178
- --cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);
15179
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15178
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
15179
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15180
15180
  }
15181
15181
 
15182
15182
  .cds--layout-constraint--size__default-xl {
15183
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
15183
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
15184
15184
  }
15185
15185
 
15186
15186
  .cds--layout-constraint--size__min-xl {
15187
- --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
15187
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
15188
15188
  }
15189
15189
 
15190
15190
  .cds--layout-constraint--size__max-xl {
15191
- --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
15191
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
15192
15192
  }
15193
15193
 
15194
15194
  .cds--layout--size-2xl {
15195
- --cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);
15196
- --cds-layout-size-height:var(--cds-layout-size-height-context);
15195
+ --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
15196
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
15197
15197
  }
15198
15198
 
15199
15199
  .cds--layout-constraint--size__default-2xl {
15200
- --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
15200
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
15201
15201
  }
15202
15202
 
15203
15203
  .cds--layout-constraint--size__min-2xl {
15204
- --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
15204
+ --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
15205
15205
  }
15206
15206
 
15207
15207
  .cds--layout-constraint--size__max-2xl {
15208
- --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
15208
+ --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
15209
15209
  }
15210
15210
 
15211
15211
  .cds--layout--density-condensed {
15212
- --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15213
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
15212
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15213
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
15214
15214
  }
15215
15215
 
15216
15216
  .cds--layout-constraint--density__default-condensed {
15217
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
15217
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
15218
15218
  }
15219
15219
 
15220
15220
  .cds--layout-constraint--density__min-condensed {
15221
- --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15221
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15222
15222
  }
15223
15223
 
15224
15224
  .cds--layout-constraint--density__max-condensed {
15225
- --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15225
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
15226
15226
  }
15227
15227
 
15228
15228
  .cds--layout--density-normal {
15229
- --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);
15230
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
15229
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
15230
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
15231
15231
  }
15232
15232
 
15233
15233
  .cds--layout-constraint--density__default-normal {
15234
- --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
15234
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
15235
15235
  }
15236
15236
 
15237
15237
  .cds--layout-constraint--density__min-normal {
15238
- --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
15238
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
15239
15239
  }
15240
15240
 
15241
15241
  .cds--layout-constraint--density__max-normal {
15242
- --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
15242
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
15243
15243
  }
15244
15244
 
15245
15245
  :root {
15246
- --cds-layout-size-height-xs:1.5rem;
15247
- --cds-layout-size-height-sm:2rem;
15248
- --cds-layout-size-height-md:2.5rem;
15249
- --cds-layout-size-height-lg:3rem;
15250
- --cds-layout-size-height-xl:4rem;
15251
- --cds-layout-size-height-2xl:5rem;
15252
- --cds-layout-size-height-min:0px;
15253
- --cds-layout-size-height-max:999999999px;
15254
- --cds-layout-density-padding-inline-condensed:0.5rem;
15255
- --cds-layout-density-padding-inline-normal:1rem;
15256
- --cds-layout-density-padding-inline-min:0px;
15257
- --cds-layout-density-padding-inline-max:999999999px;
15246
+ --cds-layout-size-height-xs: 1.5rem;
15247
+ --cds-layout-size-height-sm: 2rem;
15248
+ --cds-layout-size-height-md: 2.5rem;
15249
+ --cds-layout-size-height-lg: 3rem;
15250
+ --cds-layout-size-height-xl: 4rem;
15251
+ --cds-layout-size-height-2xl: 5rem;
15252
+ --cds-layout-size-height-min: 0px;
15253
+ --cds-layout-size-height-max: 999999999px;
15254
+ --cds-layout-density-padding-inline-condensed: 0.5rem;
15255
+ --cds-layout-density-padding-inline-normal: 1rem;
15256
+ --cds-layout-density-padding-inline-min: 0px;
15257
+ --cds-layout-density-padding-inline-max: 999999999px;
15258
15258
  }
15259
15259
 
15260
15260
  .c4p--action-set {
@@ -16907,7 +16907,7 @@ em {
16907
16907
  --cds-notification-background-success: #defbe6;
16908
16908
  --cds-notification-background-info: #edf5ff;
16909
16909
  --cds-notification-background-warning: #fdf6dd;
16910
- --cds-notification-action-hover: #edf5ff;
16910
+ --cds-notification-action-hover: #ffffff;
16911
16911
  --cds-notification-action-tertiary-inverse: #ffffff;
16912
16912
  --cds-notification-action-tertiary-inverse-active: #c6c6c6;
16913
16913
  --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
@@ -17081,7 +17081,7 @@ em {
17081
17081
  --cds-notification-background-success: #defbe6;
17082
17082
  --cds-notification-background-info: #edf5ff;
17083
17083
  --cds-notification-background-warning: #fdf6dd;
17084
- --cds-notification-action-hover: #edf5ff;
17084
+ --cds-notification-action-hover: #ffffff;
17085
17085
  --cds-notification-action-tertiary-inverse: #ffffff;
17086
17086
  --cds-notification-action-tertiary-inverse-active: #c6c6c6;
17087
17087
  --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
@@ -18949,12 +18949,13 @@ fieldset[disabled] .cds--form__helper-text {
18949
18949
  .cds--checkbox-group__validation-msg,
18950
18950
  .cds--checkbox__validation-msg {
18951
18951
  display: none;
18952
- align-items: flex-end;
18952
+ align-items: flex-start;
18953
18953
  margin-top: 0.25rem;
18954
18954
  }
18955
18955
 
18956
18956
  .cds--checkbox__invalid-icon {
18957
- margin: 0 0.0625rem 0 0.1875rem;
18957
+ min-width: 1rem;
18958
+ margin: 0.0625rem 0.0625rem 0 0.1875rem;
18958
18959
  fill: var(--cds-support-error, #da1e28);
18959
18960
  }
18960
18961
 
@@ -22468,7 +22469,7 @@ tr.cds--data-table--selected:last-of-type td {
22468
22469
  }
22469
22470
 
22470
22471
  .cds--data-table--sticky-header {
22471
- max-height: rem(300px);
22472
+ max-height: 18.75rem;
22472
22473
  }
22473
22474
 
22474
22475
  .cds--data-table .cds--form-item.cds--checkbox-wrapper:last-of-type {
@@ -23370,6 +23371,10 @@ tr.cds--data-table--selected:last-of-type td {
23370
23371
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
23371
23372
  }
23372
23373
 
23374
+ .cds--batch-summary__divider {
23375
+ padding-left: 0.5rem;
23376
+ }
23377
+
23373
23378
  .cds--table-toolbar--sm {
23374
23379
  height: 2rem;
23375
23380
  min-height: 2rem;
@@ -23460,8 +23465,8 @@ tr.cds--data-table--selected:last-of-type td {
23460
23465
  .cds--table-toolbar--sm .cds--btn--primary {
23461
23466
  height: 2rem;
23462
23467
  min-height: auto;
23463
- padding-top: calc(0.375rem - 3px);
23464
- padding-bottom: calc(0.375rem - 3px);
23468
+ padding-top: 0.375rem;
23469
+ padding-bottom: 0.375rem;
23465
23470
  }
23466
23471
 
23467
23472
  .cds--table-toolbar--sm .cds--btn--primary.cds--batch-summary__cancel::before {
@@ -26654,6 +26659,7 @@ button.cds--dropdown-text:focus {
26654
26659
  border: 0;
26655
26660
  border-bottom: 0.0625rem solid var(--cds-border-strong);
26656
26661
  -moz-appearance: textfield;
26662
+ appearance: textfield;
26657
26663
  background-color: var(--cds-field);
26658
26664
  border-radius: 0;
26659
26665
  color: var(--cds-text-primary, #161616);
@@ -28675,9 +28681,13 @@ optgroup.cds--select-optgroup:disabled,
28675
28681
  .cds--modal .cds--date-picker__input,
28676
28682
  .cds--modal .cds--multi-select,
28677
28683
  .cds--modal .cds--number__control-btn::before,
28678
- .cds--modal .cds--number__control-btn::after {
28684
+ .cds--modal .cds--number__control-btn::after,
28685
+ .cds--modal .cds--list-box input[role=combobox] {
28679
28686
  background-color: var(--cds-field-02, #ffffff);
28680
28687
  }
28688
+ .cds--modal .cds--list-box__menu {
28689
+ background-color: var(--cds-layer-02, #ffffff);
28690
+ }
28681
28691
  .cds--modal .cds--number__rule-divider {
28682
28692
  background-color: var(--cds-border-subtle-02, #e0e0e0);
28683
28693
  }
@@ -28685,10 +28695,10 @@ optgroup.cds--select-optgroup:disabled,
28685
28695
  border-top-color: var(--cds-border-subtle-02, #e0e0e0);
28686
28696
  }
28687
28697
  .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
28688
- border-top-color: var(--cds-layer-hover);
28698
+ border-top-color: var(--cds-layer-hover-02, #e8e8e8);
28689
28699
  }
28690
28700
  .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
28691
- border-top-color: var(--cds-layer-selected-hover);
28701
+ border-top-color: var(--cds-layer-selected-hover-02, #d1d1d1);
28692
28702
  }
28693
28703
  .cds--modal .cds--text-input--fluid .cds--text-input,
28694
28704
  .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
@@ -28704,6 +28714,18 @@ optgroup.cds--select-optgroup:disabled,
28704
28714
  .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
28705
28715
  background-color: var(--cds-field-01, #f4f4f4);
28706
28716
  }
28717
+ .cds--modal .cds--list-box__wrapper--fluid .cds--list-box__menu {
28718
+ background-color: var(--cds-layer-01, #f4f4f4);
28719
+ }
28720
+ .cds--modal .cds--list-box__menu-item:hover {
28721
+ background-color: var(--cds-layer-hover-02, #e8e8e8);
28722
+ }
28723
+ .cds--modal .cds--list-box__menu-item--active {
28724
+ background-color: var(--cds-layer-selected-02, #e0e0e0);
28725
+ }
28726
+ .cds--modal .cds--list-box__menu-item--active:hover {
28727
+ background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
28728
+ }
28707
28729
  .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
28708
28730
  .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
28709
28731
  background-color: var(--cds-field-hover);
@@ -29305,7 +29327,7 @@ optgroup.cds--select-optgroup:disabled,
29305
29327
 
29306
29328
  .cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:active,
29307
29329
  .cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:hover {
29308
- background-color: var(--cds-notification-action-hover, #edf5ff);
29330
+ background-color: var(--cds-notification-action-hover, #ffffff);
29309
29331
  }
29310
29332
 
29311
29333
  .cds--inline-notification__action-button.cds--btn--ghost:focus {
@@ -29984,7 +30006,7 @@ optgroup.cds--select-optgroup:disabled,
29984
30006
 
29985
30007
  .cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:active,
29986
30008
  .cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:hover {
29987
- background-color: var(--cds-notification-action-hover, #edf5ff);
30009
+ background-color: var(--cds-notification-action-hover, #ffffff);
29988
30010
  }
29989
30011
 
29990
30012
  .cds--actionable-notification__action-button.cds--btn--ghost:focus {
@@ -30007,7 +30029,9 @@ optgroup.cds--select-optgroup:disabled,
30007
30029
  padding-right: 1rem;
30008
30030
  padding-left: 1rem;
30009
30031
  margin-bottom: 1rem;
30010
- margin-left: calc(2rem + 1.25rem - 0.125rem);
30032
+ margin-left: calc(
30033
+ 2rem + 1.25rem - 0.125rem
30034
+ );
30011
30035
  }
30012
30036
 
30013
30037
  .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary {
@@ -31471,6 +31495,7 @@ span.cds--pagination__text.cds--pagination__items-count {
31471
31495
  width: 4rem;
31472
31496
  height: 2.5rem;
31473
31497
  -moz-appearance: textfield;
31498
+ appearance: textfield;
31474
31499
  }
31475
31500
  .cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button,
31476
31501
  .cds-slider-text-input::-webkit-outer-spin-button,
@@ -32569,8 +32594,8 @@ span.cds--pagination__text.cds--pagination__items-count {
32569
32594
  .cds--tile--clickable .cds--tile--icon,
32570
32595
  .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
32571
32596
  position: absolute;
32572
- right: var(--cds-layout-density-padding-inline-local);
32573
- bottom: var(--cds-layout-density-padding-inline-local);
32597
+ inset-block-end: var(--cds-layout-density-padding-inline-local);
32598
+ inset-inline-end: var(--cds-layout-density-padding-inline-local);
32574
32599
  }
32575
32600
 
32576
32601
  .cds--tile--clickable .cds--tile--icon {
@@ -32592,11 +32617,11 @@ span.cds--pagination__text.cds--pagination__items-count {
32592
32617
 
32593
32618
  .cds--tile__checkmark {
32594
32619
  position: absolute;
32595
- top: var(--cds-layout-density-padding-inline-local);
32596
- right: var(--cds-layout-density-padding-inline-local);
32597
32620
  height: 1rem;
32598
32621
  border: none;
32599
32622
  background: transparent;
32623
+ inset-block-start: var(--cds-layout-density-padding-inline-local);
32624
+ inset-inline-end: var(--cds-layout-density-padding-inline-local);
32600
32625
  opacity: 0;
32601
32626
  transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
32602
32627
  }
@@ -32620,13 +32645,13 @@ span.cds--pagination__text.cds--pagination__items-count {
32620
32645
 
32621
32646
  .cds--tile__chevron {
32622
32647
  position: absolute;
32623
- right: 0;
32624
- bottom: 0;
32625
32648
  display: flex;
32626
32649
  width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32627
32650
  height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32628
32651
  align-items: center;
32629
32652
  justify-content: center;
32653
+ inset-block-end: 0;
32654
+ inset-inline-end: 0;
32630
32655
  }
32631
32656
  .cds--tile__chevron svg {
32632
32657
  fill: var(--cds-icon-primary, #161616);
@@ -32661,13 +32686,13 @@ span.cds--pagination__text.cds--pagination__items-count {
32661
32686
  text-align: start;
32662
32687
  width: 100%;
32663
32688
  position: absolute;
32664
- right: 0;
32665
- bottom: 0;
32666
32689
  display: flex;
32667
32690
  width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32668
32691
  height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32669
32692
  align-items: center;
32670
32693
  justify-content: center;
32694
+ inset-block-end: 0;
32695
+ inset-inline-end: 0;
32671
32696
  }
32672
32697
  .cds--tile__chevron--interactive *,
32673
32698
  .cds--tile__chevron--interactive *::before,
@@ -32695,7 +32720,7 @@ span.cds--pagination__text.cds--pagination__items-count {
32695
32720
  cursor: pointer;
32696
32721
  font-family: inherit;
32697
32722
  font-size: inherit;
32698
- text-align: left;
32723
+ text-align: start;
32699
32724
  transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
32700
32725
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
32701
32726
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -32836,9 +32861,7 @@ span.cds--pagination__text.cds--pagination__items-count {
32836
32861
 
32837
32862
  .cds--time-picker__select {
32838
32863
  justify-content: center;
32839
- }
32840
- .cds--time-picker__select:not(:last-of-type) {
32841
- margin: 0 0.125rem;
32864
+ margin-left: 0.125rem;
32842
32865
  }
32843
32866
 
32844
32867
  .cds--time-picker__input {