@carbon/ibm-products 2.18.1 → 2.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/css/index-full-carbon.css +460 -120
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +113 -49
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +141 -49
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +127 -50
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  18. package/es/components/Card/Card.js +11 -2
  19. package/es/components/Card/CardHeader.js +41 -3
  20. package/es/components/CreateSidePanel/CreateSidePanel.js +4 -0
  21. package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -1
  22. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +98 -47
  23. package/es/components/Datagrid/Datagrid/DatagridRow.js +14 -4
  24. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +0 -3
  25. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +2 -2
  26. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -2
  27. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +55 -30
  28. package/es/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +1 -1
  29. package/es/components/Datagrid/useFiltering.js +2 -1
  30. package/es/components/EditSidePanel/EditSidePanel.js +4 -0
  31. package/es/components/ExpressiveCard/ExpressiveCard.js +5 -0
  32. package/es/components/Guidebanner/Guidebanner.js +12 -3
  33. package/es/components/InlineTip/InlineTip.js +17 -6
  34. package/es/components/InlineTip/InlineTipButton.js +2 -0
  35. package/es/components/InlineTip/InlineTipLink.js +2 -0
  36. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  37. package/es/components/SidePanel/SidePanel.js +7 -6
  38. package/es/components/index.js +4 -1
  39. package/es/global/js/package-settings.js +2 -0
  40. package/lib/components/APIKeyModal/APIKeyModal.js +1 -1
  41. package/lib/components/Card/Card.js +13 -4
  42. package/lib/components/Card/CardHeader.js +40 -2
  43. package/lib/components/CreateSidePanel/CreateSidePanel.js +4 -0
  44. package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -1
  45. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +105 -53
  46. package/lib/components/Datagrid/Datagrid/DatagridRow.js +14 -4
  47. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +0 -3
  48. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +2 -2
  49. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -2
  50. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +55 -30
  51. package/lib/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +1 -1
  52. package/lib/components/Datagrid/useFiltering.js +2 -1
  53. package/lib/components/EditSidePanel/EditSidePanel.js +4 -0
  54. package/lib/components/ExpressiveCard/ExpressiveCard.js +5 -0
  55. package/lib/components/Guidebanner/Guidebanner.js +12 -3
  56. package/lib/components/InlineTip/InlineTip.js +17 -6
  57. package/lib/components/InlineTip/InlineTipButton.js +2 -0
  58. package/lib/components/InlineTip/InlineTipLink.js +2 -0
  59. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  60. package/lib/components/SidePanel/SidePanel.js +7 -6
  61. package/lib/components/index.js +52 -1
  62. package/lib/global/js/package-settings.js +2 -0
  63. package/package.json +5 -5
  64. package/scss/components/Card/_card.scss +89 -0
  65. package/scss/components/Guidebanner/_guidebanner.scss +25 -0
  66. package/scss/components/InlineTip/_inline-tip.scss +12 -0
  67. package/scss/components/ProductiveCard/_productive-card.scss +0 -5
  68. package/scss/components/SidePanel/_side-panel.scss +41 -23
@@ -2410,14 +2410,6 @@ p.c4p--about-modal__copyright-text:first-child {
2410
2410
  width: 16rem;
2411
2411
  max-width: 100%;
2412
2412
  }
2413
- .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
2414
- right: 0;
2415
- border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2416
- }
2417
- .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
2418
- left: 0;
2419
- border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2420
- }
2421
2413
  .c4p--side-panel__container.c4p--side-panel__container--sm {
2422
2414
  width: 20rem;
2423
2415
  max-width: 100%;
@@ -2429,14 +2421,6 @@ p.c4p--about-modal__copyright-text:first-child {
2429
2421
  width: 20rem;
2430
2422
  max-width: 100%;
2431
2423
  }
2432
- .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
2433
- right: 0;
2434
- border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2435
- }
2436
- .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
2437
- left: 0;
2438
- border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2439
- }
2440
2424
  .c4p--side-panel__container.c4p--side-panel__container--md {
2441
2425
  width: 30rem;
2442
2426
  max-width: 100%;
@@ -2448,14 +2432,6 @@ p.c4p--about-modal__copyright-text:first-child {
2448
2432
  width: 30rem;
2449
2433
  max-width: 100%;
2450
2434
  }
2451
- .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
2452
- right: 0;
2453
- border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2454
- }
2455
- .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
2456
- left: 0;
2457
- border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2458
- }
2459
2435
  .c4p--side-panel__container.c4p--side-panel__container--lg {
2460
2436
  width: 40rem;
2461
2437
  max-width: 100%;
@@ -2467,14 +2443,6 @@ p.c4p--about-modal__copyright-text:first-child {
2467
2443
  width: 40rem;
2468
2444
  max-width: 100%;
2469
2445
  }
2470
- .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
2471
- right: 0;
2472
- border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2473
- }
2474
- .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
2475
- left: 0;
2476
- border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2477
- }
2478
2446
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
2479
2447
  width: 75%;
2480
2448
  max-width: 100%;
@@ -2486,11 +2454,11 @@ p.c4p--about-modal__copyright-text:first-child {
2486
2454
  width: 75%;
2487
2455
  max-width: 100%;
2488
2456
  }
2489
- .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
2457
+ .c4p--side-panel__container.c4p--side-panel__container-right-placement {
2490
2458
  right: 0;
2491
2459
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2492
2460
  }
2493
- .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
2461
+ .c4p--side-panel__container.c4p--side-panel__container-left-placement {
2494
2462
  left: 0;
2495
2463
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2496
2464
  }
@@ -2524,6 +2492,12 @@ p.c4p--about-modal__copyright-text:first-child {
2524
2492
  background-color: var(--cds-layer-01, #f4f4f4);
2525
2493
  /* stylelint-disable-next-line max-nesting-depth */
2526
2494
  }
2495
+ .c4p--side-panel__container .c4p--side-panel__title-container:has(.c4p--side-panel__navigation-back-button) {
2496
+ padding-top: 2rem;
2497
+ }
2498
+ .c4p--side-panel__container .c4p--side-panel__title-container:has(.c4p--side-panel__navigation-back-button.cds--btn--md) {
2499
+ padding-top: 2.5rem;
2500
+ }
2527
2501
  .c4p--side-panel__container .c4p--side-panel__title-container::before {
2528
2502
  position: absolute;
2529
2503
  bottom: 0;
@@ -2544,7 +2518,10 @@ p.c4p--about-modal__copyright-text:first-child {
2544
2518
  margin-bottom: 0;
2545
2519
  }
2546
2520
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
2547
- top: 3rem;
2521
+ top: 2rem;
2522
+ }
2523
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__navigation-back-button.cds--btn--md ~ .c4p--side-panel__collapsed-title-text {
2524
+ top: 2.5rem;
2548
2525
  }
2549
2526
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title {
2550
2527
  padding: 0;
@@ -2697,27 +2674,30 @@ p.c4p--about-modal__copyright-text:first-child {
2697
2674
  margin-right: 0.5rem;
2698
2675
  }
2699
2676
  .c4p--side-panel__container .cds--btn.c4p--side-panel__navigation-back-button {
2700
- position: relative;
2677
+ position: fixed;
2701
2678
  z-index: 5;
2702
- top: calc(-1 * 0.5rem);
2703
- left: calc(-1 * 0.5rem);
2679
+ top: 0;
2680
+ left: 0;
2704
2681
  }
2705
2682
  .c4p--side-panel__container .cds--btn.c4p--side-panel__navigation-back-button,
2706
- .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button {
2707
- min-width: 2rem;
2708
- padding: 0;
2709
- color: var(--cds-text-primary, #161616);
2710
- }
2711
2683
  .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button {
2712
2684
  display: flex;
2685
+ width: 2rem;
2686
+ height: 2rem;
2713
2687
  align-items: center;
2714
2688
  justify-content: center;
2715
- margin: 0.5rem;
2716
- margin-bottom: 0;
2689
+ padding: 0;
2690
+ color: var(--cds-text-primary, #161616);
2717
2691
  }
2692
+ .c4p--side-panel__container .cds--btn.c4p--side-panel__navigation-back-button .cds--btn__icon,
2718
2693
  .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
2719
2694
  margin: 0;
2720
2695
  }
2696
+ .c4p--side-panel__container .cds--btn--md.c4p--side-panel__navigation-back-button,
2697
+ .c4p--side-panel__container .cds--btn--md.c4p--side-panel__close-button {
2698
+ width: 2.5rem;
2699
+ height: 2.5rem;
2700
+ }
2721
2701
  .c4p--side-panel__container .c4p--side-panel__slug-and-close {
2722
2702
  position: fixed;
2723
2703
  z-index: 5;
@@ -3446,6 +3426,16 @@ p.c4p--about-modal__copyright-text:first-child {
3446
3426
  transition: background-color 110ms;
3447
3427
  }
3448
3428
 
3429
+ .c4p--card__clickable:focus {
3430
+ outline: 2px solid var(--cds-focus, #0f62fe);
3431
+ outline-offset: -2px;
3432
+ }
3433
+ @media screen and (prefers-contrast) {
3434
+ .c4p--card__clickable:focus {
3435
+ outline-style: dotted;
3436
+ }
3437
+ }
3438
+
3449
3439
  .c4p--card__clickable:hover {
3450
3440
  background-color: var(--cds-layer-hover-01, #e8e8e8);
3451
3441
  }
@@ -3473,6 +3463,7 @@ p.c4p--about-modal__copyright-text:first-child {
3473
3463
 
3474
3464
  .c4p--card__header {
3475
3465
  padding: 1rem;
3466
+ padding-right: 0;
3476
3467
  }
3477
3468
 
3478
3469
  .c4p--card__header-label-only {
@@ -3549,6 +3540,83 @@ p.c4p--about-modal__copyright-text:first-child {
3549
3540
  padding-left: 1rem;
3550
3541
  }
3551
3542
 
3543
+ .c4p--card__header-container--has-actions {
3544
+ padding-right: 0.5rem;
3545
+ }
3546
+
3547
+ .c4p--card {
3548
+ position: relative;
3549
+ }
3550
+
3551
+ .c4p--card__media + .c4p--card__content-container {
3552
+ /* display relative to container when media displayed */
3553
+ position: relative;
3554
+ }
3555
+
3556
+ .c4p--card .cds--slug {
3557
+ background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
3558
+ position: absolute;
3559
+ top: 1rem;
3560
+ right: 1rem;
3561
+ }
3562
+
3563
+ .c4p--card__header-container--has-slug {
3564
+ width: 100%;
3565
+ padding-right: 2rem;
3566
+ }
3567
+
3568
+ .c4p--card__header-container--has-slug.c4p--card__header-container--has-actions {
3569
+ padding-right: 2.5rem;
3570
+ }
3571
+
3572
+ .c4p--card__header-container--has-slug.c4p--card__header-container--large-tile-or-label {
3573
+ padding-right: 3rem;
3574
+ }
3575
+
3576
+ .c4p--card__clickable {
3577
+ position: relative;
3578
+ }
3579
+
3580
+ .c4p--card__clickable .cds--slug,
3581
+ .c4p--card__clickable .cds--slug-icon {
3582
+ pointer-events: none;
3583
+ }
3584
+
3585
+ .c4p--card--has-slug {
3586
+ background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
3587
+ border: 1px solid var(--cds-border-tile);
3588
+ }
3589
+
3590
+ .c4p--card__clickable.c4p--card--has-slug::before {
3591
+ background: linear-gradient(0deg, var(--cds-slug-callout-aura-start-hover-01, rgba(255, 255, 255, 0.5)) 0%, var(--cds-slug-callout-aura-end-hover-01, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(0deg, var(--cds-slug-callout-aura-start-hover-02, rgba(208, 226, 255, 0.5)) 0%, var(--cds-slug-callout-aura-end-hover-02, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top-hover, rgba(224, 224, 224, 0.55)) 0%, var(--cds-slug-callout-gradient-bottom-hover, rgba(209, 209, 209, 0.55)) 100%) rgba(0, 0, 0, 0.01);
3592
+ position: absolute;
3593
+ display: block;
3594
+ block-size: 100%;
3595
+ content: "";
3596
+ inline-size: 100%;
3597
+ inset-block-start: 0;
3598
+ inset-inline-start: 0;
3599
+ opacity: 0;
3600
+ transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3601
+ }
3602
+
3603
+ .c4p--card__clickable.c4p--card--has-slug:hover::before {
3604
+ opacity: 1;
3605
+ }
3606
+
3607
+ .c4p--card__clickable .c4p--card__content-container {
3608
+ position: relative;
3609
+ z-index: 1;
3610
+ }
3611
+
3612
+ .c4p--card .cds--slug-icon rect {
3613
+ stroke: var(--cds-icon-primary, #161616);
3614
+ }
3615
+
3616
+ .c4p--card .cds--slug-icon path {
3617
+ fill: var(--cds-icon-primary, #161616);
3618
+ }
3619
+
3552
3620
  .c4p--card__title {
3553
3621
  font-size: var(--cds-heading-03-font-size, 1.25rem);
3554
3622
  font-weight: var(--cds-heading-03-font-weight, 400);
@@ -6986,9 +7054,6 @@ button.c4p--add-select__global-filter-toggle--open {
6986
7054
  z-index: 7999;
6987
7055
  }
6988
7056
 
6989
- .c4p--card__productive .c4p--card__header {
6990
- padding-right: 0;
6991
- }
6992
7057
  .c4p--card__productive .c4p--card__title {
6993
7058
  font-size: var(--cds-heading-compact-02-font-size, 1rem);
6994
7059
  font-weight: var(--cds-heading-compact-02-font-weight, 600);
@@ -7018,7 +7083,6 @@ button.c4p--add-select__global-filter-toggle--open {
7018
7083
  }
7019
7084
  .c4p--card__productive .c4p--card__actions-header {
7020
7085
  margin-top: calc(-1 * 0.25rem);
7021
- margin-right: 0.5rem;
7022
7086
  }
7023
7087
  .c4p--card__productive .c4p--card__actions-header-ghost-button {
7024
7088
  min-height: 2rem;
@@ -14968,6 +15032,26 @@ a.cds--side-nav__link--current::before {
14968
15032
  fill: #9b63ff;
14969
15033
  }
14970
15034
 
15035
+ .c4p--guidebanner__with-left-gutter .c4p--guidebanner__icon-idea {
15036
+ left: 2rem;
15037
+ }
15038
+
15039
+ .c4p--guidebanner__with-left-gutter .c4p--guidebanner__title {
15040
+ padding-left: 4.25rem;
15041
+ }
15042
+
15043
+ .c4p--guidebanner__with-left-gutter .c4p--guidebanner__navigation {
15044
+ padding-left: 1rem;
15045
+ }
15046
+
15047
+ .c4p--guidebanner__with-left-gutter .c4p--carousel__elements-container {
15048
+ padding-left: 1rem;
15049
+ }
15050
+
15051
+ .c4p--guidebanner__with-left-gutter .c4p--carousel__elements-container--scrolled {
15052
+ width: 4rem;
15053
+ }
15054
+
14971
15055
  /**
14972
15056
  * The InlineTip specifically is theme-agnostic, and so we have to
14973
15057
  * use color tokens to keep the colors static instead of theme tokens
@@ -15158,6 +15242,14 @@ a.cds--side-nav__link--current::before {
15158
15242
  flex-shrink: 0;
15159
15243
  }
15160
15244
 
15245
+ .c4p--inline-tip__wide.c4p--inline-tip__with-left-gutter {
15246
+ padding-left: 4rem;
15247
+ }
15248
+
15249
+ .c4p--inline-tip__wide.c4p--inline-tip__with-left-gutter .c4p--inline-tip__icon-idea {
15250
+ left: 2rem;
15251
+ }
15252
+
15161
15253
  /* stylelint-disable carbon/layout-token-use */
15162
15254
  /* stylelint-disable function-no-unknown */
15163
15255
  @keyframes fade {
@@ -17809,7 +17901,7 @@ li.cds--accordion__item--disabled:last-of-type {
17809
17901
  will-change: transform;
17810
17902
  }
17811
17903
 
17812
- .cds--popover--open > .cds--popover > .cds--popover-caret {
17904
+ .cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
17813
17905
  display: block;
17814
17906
  }
17815
17907
 
@@ -21603,6 +21695,19 @@ fieldset[disabled] .cds--form__helper-text {
21603
21695
  }
21604
21696
  }
21605
21697
 
21698
+ .cds--tag .cds--slug .cds--slug__button--inline {
21699
+ color: currentColor;
21700
+ margin-inline-start: 0.0625rem;
21701
+ }
21702
+
21703
+ .cds--tag .cds--slug .cds--slug__button--inline .cds--slug__text::before {
21704
+ background-color: currentColor;
21705
+ }
21706
+
21707
+ .cds--tag .cds--slug .cds--slug__button--inline:hover {
21708
+ border-color: currentColor;
21709
+ }
21710
+
21606
21711
  /* stylelint-disable */
21607
21712
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
21608
21713
  .cds--tag {
@@ -21937,7 +22042,7 @@ fieldset[disabled] .cds--form__helper-text {
21937
22042
 
21938
22043
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty,
21939
22044
  .cds--list-box--warning .cds--list-box__field .cds--text-input--empty {
21940
- padding-inline-end: carbon--mini-units(9);
22045
+ padding-inline-end: 4rem;
21941
22046
  }
21942
22047
 
21943
22048
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty + .cds--list-box__invalid-icon,
@@ -22456,15 +22561,26 @@ fieldset[disabled] .cds--form__helper-text {
22456
22561
  }
22457
22562
 
22458
22563
  .cds--list-box__wrapper--slug .cds--list-box__field,
22459
- .cds--list-box__wrapper--slug .cds--text-input {
22564
+ .cds--list-box__wrapper--slug .cds--text-input--empty {
22460
22565
  padding-inline-end: 4rem;
22461
22566
  }
22462
22567
 
22463
- .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field,
22568
+ .cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
22569
+ padding-inline-end: 6rem;
22570
+ }
22571
+
22572
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty,
22573
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__field,
22574
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input--empty,
22464
22575
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field {
22465
22576
  padding-inline-end: 6rem;
22466
22577
  }
22467
22578
 
22579
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty),
22580
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
22581
+ padding-inline-end: 7.5rem;
22582
+ }
22583
+
22468
22584
  .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug,
22469
22585
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug {
22470
22586
  inset-inline-end: 4rem;
@@ -22573,6 +22689,7 @@ fieldset[disabled] .cds--form__helper-text {
22573
22689
  max-inline-size: 18rem;
22574
22690
  min-inline-size: 10rem;
22575
22691
  opacity: 0;
22692
+ overflow-y: auto;
22576
22693
  visibility: hidden;
22577
22694
  }
22578
22695
  .cds--menu *,
@@ -22613,7 +22730,7 @@ fieldset[disabled] .cds--form__helper-text {
22613
22730
  display: grid;
22614
22731
  align-items: center;
22615
22732
  block-size: 2rem;
22616
- color: var(--cds-text-primary, #161616);
22733
+ color: var(--cds-text-secondary, #525252);
22617
22734
  column-gap: 0.5rem;
22618
22735
  cursor: pointer;
22619
22736
  grid-template-columns: 1fr max-content;
@@ -22629,9 +22746,16 @@ fieldset[disabled] .cds--form__helper-text {
22629
22746
  outline-style: dotted;
22630
22747
  }
22631
22748
  }
22749
+ .cds--menu-item svg {
22750
+ color: var(--cds-icon-secondary, #525252);
22751
+ }
22632
22752
 
22633
22753
  .cds--menu-item:hover {
22634
22754
  background-color: var(--cds-layer-hover);
22755
+ color: var(--cds-text-primary, #161616);
22756
+ }
22757
+ .cds--menu-item:hover svg {
22758
+ color: var(--cds-icon-primary, #161616);
22635
22759
  }
22636
22760
 
22637
22761
  .cds--menu--xs .cds--menu-item {
@@ -23586,7 +23710,7 @@ fieldset[disabled] .cds--form__helper-text {
23586
23710
  }
23587
23711
 
23588
23712
  .cds--data-table-header {
23589
- background: var(--cds-layer);
23713
+ background-color: var(--cds-layer);
23590
23714
  padding-block-end: 1.5rem;
23591
23715
  padding-block-start: 1rem;
23592
23716
  padding-inline: 1rem;
@@ -23653,13 +23777,13 @@ fieldset[disabled] .cds--form__helper-text {
23653
23777
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
23654
23778
  }
23655
23779
 
23656
- .cds--data-table tbody tr:hover {
23657
- background: var(--cds-layer-hover);
23780
+ .cds--data-table tbody tr:not([data-child-row]):hover,
23781
+ .cds--data-table tbody tr[data-child-row]:hover > td {
23782
+ background-color: var(--cds-layer-hover);
23658
23783
  }
23659
23784
 
23660
23785
  .cds--data-table tbody tr:hover td,
23661
23786
  .cds--data-table tbody tr:hover th {
23662
- background: var(--cds-layer-hover);
23663
23787
  border-block-end: 1px solid var(--cds-layer-hover);
23664
23788
  border-block-start: 1px solid var(--cds-layer-hover);
23665
23789
  color: var(--cds-text-primary, #161616);
@@ -23735,7 +23859,6 @@ fieldset[disabled] .cds--form__helper-text {
23735
23859
 
23736
23860
  .cds--data-table td,
23737
23861
  .cds--data-table tbody th {
23738
- background: var(--cds-layer);
23739
23862
  border-block-end: 1px solid var(--cds-border-subtle);
23740
23863
  border-block-start: 1px solid var(--cds-layer);
23741
23864
  color: var(--cds-text-secondary, #525252);
@@ -23838,17 +23961,23 @@ fieldset[disabled] .cds--form__helper-text {
23838
23961
  }
23839
23962
 
23840
23963
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td {
23841
- background-color: var(--cds-layer-accent);
23842
23964
  border-block-end: 1px solid var(--cds-layer-accent);
23843
23965
  border-block-start: 1px solid var(--cds-layer-accent);
23844
23966
  }
23845
23967
 
23968
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):nth-child(even) {
23969
+ background-color: var(--cds-layer-accent);
23970
+ }
23971
+
23846
23972
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
23847
- background-color: var(--cds-layer-hover);
23848
23973
  border-block-end: 1px solid var(--cds-layer-hover);
23849
23974
  border-block-start: 1px solid var(--cds-layer-hover);
23850
23975
  }
23851
23976
 
23977
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover {
23978
+ background-color: var(--cds-layer-hover);
23979
+ }
23980
+
23852
23981
  .cds--table-column-checkbox .cds--checkbox-label {
23853
23982
  min-block-size: 1.5rem;
23854
23983
  padding-inline-start: 0;
@@ -23864,7 +23993,7 @@ fieldset[disabled] .cds--form__helper-text {
23864
23993
 
23865
23994
  .cds--data-table th.cds--table-column-checkbox {
23866
23995
  position: static;
23867
- background: var(--cds-layer-accent);
23996
+ background-color: var(--cds-layer-accent);
23868
23997
  inline-size: 2rem;
23869
23998
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
23870
23999
  }
@@ -23936,12 +24065,16 @@ fieldset[disabled] .cds--form__helper-text {
23936
24065
 
23937
24066
  .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td,
23938
24067
  tr.cds--data-table--selected td {
23939
- background-color: var(--cds-layer-selected);
23940
24068
  border-block-end: 1px solid var(--cds-layer-active);
23941
24069
  border-block-start: 1px solid var(--cds-layer-selected);
23942
24070
  color: var(--cds-text-primary, #161616);
23943
24071
  }
23944
24072
 
24073
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected,
24074
+ tr.cds--data-table--selected {
24075
+ background-color: var(--cds-layer-selected);
24076
+ }
24077
+
23945
24078
  .cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td,
23946
24079
  tr.cds--data-table--selected:first-of-type td {
23947
24080
  border-block-start: 1px solid var(--cds-border-subtle-selected);
@@ -23964,12 +24097,16 @@ tr.cds--data-table--selected:last-of-type td {
23964
24097
 
23965
24098
  .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
23966
24099
  .cds--data-table tbody .cds--data-table--selected:hover td {
23967
- background: var(--cds-layer-selected-hover);
23968
24100
  border-block-end: 1px solid var(--cds-layer-selected-hover);
23969
24101
  border-block-start: 1px solid var(--cds-layer-selected-hover);
23970
24102
  color: var(--cds-text-primary, #161616);
23971
24103
  }
23972
24104
 
24105
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover,
24106
+ .cds--data-table tbody .cds--data-table--selected:hover {
24107
+ background-color: var(--cds-layer-selected-hover);
24108
+ }
24109
+
23973
24110
  .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
23974
24111
  opacity: 1;
23975
24112
  }
@@ -24266,6 +24403,39 @@ tr.cds--data-table--selected:last-of-type td {
24266
24403
  margin: -0.1875rem 0;
24267
24404
  }
24268
24405
 
24406
+ .cds--data-table .cds--table-column-slug {
24407
+ inline-size: 1rem;
24408
+ padding-inline-end: 0;
24409
+ }
24410
+
24411
+ .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
24412
+ background-image: linear-gradient(90deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%), linear-gradient(90deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
24413
+ background-attachment: fixed;
24414
+ }
24415
+
24416
+ .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
24417
+ .cds--data-table thead th:has(> .cds--table-header-label--slug) {
24418
+ background-image: linear-gradient(180deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%), linear-gradient(180deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
24419
+ }
24420
+
24421
+ .cds--table-column-slug .cds--slug {
24422
+ position: absolute;
24423
+ transform: translateY(-50%);
24424
+ }
24425
+
24426
+ .cds--data-table--xl .cds--table-column-slug .cds--slug {
24427
+ transform: translateY(1px);
24428
+ }
24429
+
24430
+ th .cds--table-header-label.cds--table-header-label--slug {
24431
+ display: flex;
24432
+ align-items: center;
24433
+ }
24434
+
24435
+ th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
24436
+ margin-inline-start: 0.5rem;
24437
+ }
24438
+
24269
24439
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24270
24440
  .cds--data-table-content {
24271
24441
  outline: 1px solid transparent;
@@ -25289,7 +25459,7 @@ tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td {
25289
25459
  background-color: var(--cds-layer-hover);
25290
25460
  padding-block-end: 0;
25291
25461
  padding-block-start: 0;
25292
- transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25462
+ transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25293
25463
  }
25294
25464
 
25295
25465
  tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child-row-inner-container {
@@ -25298,13 +25468,22 @@ tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child
25298
25468
  }
25299
25469
 
25300
25470
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] {
25301
- transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25471
+ transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25302
25472
  }
25303
25473
 
25304
25474
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
25305
25475
  border-block-end: 1px solid var(--cds-border-subtle);
25306
25476
  padding-inline-start: 3.5rem;
25307
- transition: padding-bottom 110ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
25477
+ transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25478
+ }
25479
+
25480
+ tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
25481
+ tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
25482
+ padding-inline-start: 5.5rem;
25483
+ }
25484
+
25485
+ tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
25486
+ padding-inline-start: 7.5rem;
25308
25487
  }
25309
25488
 
25310
25489
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
@@ -25328,7 +25507,7 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-i
25328
25507
  tr.cds--parent-row:not(.cds--expandable-row) td,
25329
25508
  tr.cds--parent-row.cds--expandable-row td,
25330
25509
  tr.cds--parent-row.cds--expandable-row {
25331
- transition: height 240ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
25510
+ transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25332
25511
  }
25333
25512
 
25334
25513
  tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td {
@@ -25382,6 +25561,11 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
25382
25561
  padding-inline-start: 0.375rem;
25383
25562
  }
25384
25563
 
25564
+ .cds--data-table td.cds--table-expand[data-previous-value=collapsed] + .cds--table-column-checkbox {
25565
+ border-block-end: 1px solid transparent;
25566
+ box-shadow: none;
25567
+ }
25568
+
25385
25569
  .cds--data-table th.cds--table-expand + .cds--table-column-checkbox + th,
25386
25570
  .cds--data-table td.cds--table-expand + .cds--table-column-checkbox + td {
25387
25571
  padding-inline-start: 0.5rem;
@@ -25470,7 +25654,7 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
25470
25654
 
25471
25655
  tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
25472
25656
  position: absolute;
25473
- background: var(--cds-layer-accent);
25657
+ background-color: var(--cds-layer-accent);
25474
25658
  block-size: 0.0625rem;
25475
25659
  content: "";
25476
25660
  inline-size: 0.5rem;
@@ -25480,7 +25664,7 @@ tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
25480
25664
 
25481
25665
  tr.cds--parent-row.cds--expandable-row:hover td.cds--table-expand + td::after,
25482
25666
  tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td.cds--table-expand + td::after {
25483
- background: var(--cds-layer-hover);
25667
+ background-color: var(--cds-layer-hover);
25484
25668
  }
25485
25669
 
25486
25670
  tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
@@ -25501,7 +25685,7 @@ tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
25501
25685
 
25502
25686
  .cds--data-table--zebra tr.cds--parent-row td,
25503
25687
  .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
25504
- transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25688
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25505
25689
  }
25506
25690
 
25507
25691
  .cds--data-table--zebra tbody tr[data-parent-row]:hover td,
@@ -25513,33 +25697,33 @@ tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
25513
25697
  }
25514
25698
 
25515
25699
  .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td {
25516
- background: var(--cds-layer-hover);
25700
+ background-color: var(--cds-layer-hover);
25517
25701
  border-block-end: 1px solid var(--cds-layer-hover);
25518
25702
  border-block-start: 1px solid var(--cds-layer-hover);
25519
25703
  }
25520
25704
 
25705
+ tr.cds--parent-row.cds--data-table--selected {
25706
+ background-color: var(--cds-layer-selected);
25707
+ }
25708
+
25521
25709
  tr.cds--parent-row.cds--data-table--selected:first-of-type td {
25522
- background: var(--cds-layer-selected);
25523
- border-block-end: 1px solid var(--cds-border-subtle);
25524
25710
  border-block-start: 1px solid var(--cds-layer-active);
25525
25711
  box-shadow: 0 1px var(--cds-layer-active);
25526
25712
  }
25527
25713
 
25528
25714
  tr.cds--parent-row.cds--data-table--selected td {
25529
- background: var(--cds-layer-selected);
25530
- border-block-end: 1px solid transparent;
25715
+ border-block-end: 1px solid var(--cds-layer-active);
25531
25716
  box-shadow: 0 1px var(--cds-layer-active);
25532
25717
  color: var(--cds-text-primary, #161616);
25533
25718
  }
25534
25719
 
25535
25720
  tr.cds--parent-row.cds--data-table--selected:last-of-type td {
25536
- background: var(--cds-layer-selected);
25537
25721
  border-block-end: 1px solid transparent;
25538
25722
  box-shadow: 0 1px var(--cds-border-subtle);
25539
25723
  }
25540
25724
 
25541
25725
  tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td {
25542
- background: var(--cds-layer-selected-hover);
25726
+ background-color: var(--cds-layer-selected-hover);
25543
25727
  border-block-end: 1px solid var(--cds-border-subtle);
25544
25728
  border-block-start: 1px solid var(--cds-layer-selected-hover);
25545
25729
  box-shadow: 0 1px var(--cds-layer-selected-hover);
@@ -25555,7 +25739,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
25555
25739
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
25556
25740
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td,
25557
25741
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first-of-type {
25558
- background: var(--cds-layer-selected-hover);
25742
+ background-color: var(--cds-layer-selected-hover);
25559
25743
  border-block-end: 1px solid transparent;
25560
25744
  border-block-start: 1px solid var(--cds-layer-selected-hover);
25561
25745
  box-shadow: 0 1px var(--cds-layer-selected-hover);
@@ -25576,7 +25760,22 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child
25576
25760
 
25577
25761
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td,
25578
25762
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[data-child-row] td {
25579
- background: var(--cds-layer-selected);
25763
+ background-color: var(--cds-layer-selected);
25764
+ }
25765
+
25766
+ .cds--parent-row .cds--table-column-slug,
25767
+ .cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
25768
+ box-shadow: none;
25769
+ }
25770
+
25771
+ .cds--parent-row.cds--expandable-row .cds--table-column-slug,
25772
+ .cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
25773
+ border-block-end: 1px solid transparent;
25774
+ }
25775
+
25776
+ .cds--parent-row--slug td,
25777
+ .cds--data-table tr.cds--parent-row--slug:hover td {
25778
+ border-block-start: 1px solid transparent;
25580
25779
  }
25581
25780
 
25582
25781
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -25922,6 +26121,11 @@ th .cds--table-sort__flex {
25922
26121
  margin-block-start: 0.8125rem;
25923
26122
  }
25924
26123
 
26124
+ .cds--table-sort__header--slug .cds--slug {
26125
+ margin-inline-end: auto;
26126
+ margin-inline-start: 0.5rem;
26127
+ }
26128
+
25925
26129
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25926
26130
  .cds--table-sort__icon,
25927
26131
  .cds--table-sort__icon-unsorted {
@@ -27927,7 +28131,7 @@ button.cds--dropdown-text:focus {
27927
28131
  }
27928
28132
 
27929
28133
  .cds--list-box__wrapper--fluid :not(.cds--list-box--up) .cds--list-box__menu {
27930
- inset-block-start: calc(100% + 0.1875rem);
28134
+ inset-block-start: calc(100% + 0.0625rem);
27931
28135
  }
27932
28136
 
27933
28137
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
@@ -28040,6 +28244,34 @@ button.cds--dropdown-text:focus {
28040
28244
  background: var(--cds-skeleton-element, #c6c6c6);
28041
28245
  }
28042
28246
 
28247
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--slug {
28248
+ inset-block-start: 2.625rem;
28249
+ }
28250
+
28251
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug,
28252
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug {
28253
+ inset-inline-end: 2.5rem;
28254
+ }
28255
+
28256
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning button.cds--list-box__field,
28257
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] button.cds--list-box__field {
28258
+ padding-inline-end: 4rem;
28259
+ }
28260
+
28261
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty),
28262
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug.cds--list-box__wrapper--fluid--invalid .cds--list-box--invalid .cds--text-input:not(.cds--text-input--empty) {
28263
+ padding-inline-end: 5.5rem;
28264
+ }
28265
+
28266
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug,
28267
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug {
28268
+ inset-inline-end: 4rem;
28269
+ }
28270
+
28271
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
28272
+ padding-inline-end: 6rem;
28273
+ }
28274
+
28043
28275
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
28044
28276
  overflow: visible;
28045
28277
  padding: 0;
@@ -28047,7 +28279,8 @@ button.cds--dropdown-text:focus {
28047
28279
 
28048
28280
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input {
28049
28281
  overflow: hidden;
28050
- padding: 2.0625rem 4rem 0.8125rem 1rem;
28282
+ padding-block: 2.0625rem 0.8125rem;
28283
+ padding-inline: 1rem 4rem;
28051
28284
  text-overflow: ellipsis;
28052
28285
  transition: none;
28053
28286
  white-space: nowrap;
@@ -28350,6 +28583,12 @@ button.cds--dropdown-text:focus {
28350
28583
  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
28351
28584
  }
28352
28585
 
28586
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
28587
+ .cds--date-picker--fluid--invalid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
28588
+ .cds--date-picker--fluid--warn .cds--date-picker-input__wrapper--slug .cds--date-picker__input {
28589
+ padding-inline-end: 4rem;
28590
+ }
28591
+
28353
28592
  .cds--multi-select .cds--list-box__field--wrapper {
28354
28593
  display: inline-flex;
28355
28594
  align-items: center;
@@ -28887,7 +29126,8 @@ button.cds--dropdown-text:focus {
28887
29126
  padding-inline-end: 9rem;
28888
29127
  }
28889
29128
 
28890
- .cds--number__input-wrapper--slug input[type=number] {
29129
+ .cds--number__input-wrapper--slug input[type=number],
29130
+ .cds--number__input-wrapper--slug input[type=number]:disabled {
28891
29131
  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
28892
29132
  padding-inline-end: 7rem;
28893
29133
  }
@@ -29132,6 +29372,17 @@ button.cds--dropdown-text:focus {
29132
29372
  inset-block-start: 2.6875rem;
29133
29373
  }
29134
29374
 
29375
+ .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug .cds--slug,
29376
+ .cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug {
29377
+ inset-inline-end: 5.5rem;
29378
+ }
29379
+
29380
+ .cds--number-input--fluid .cds--number__input-wrapper--slug input,
29381
+ .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug input[data-invalid],
29382
+ .cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input {
29383
+ padding-inline-end: 7.5rem;
29384
+ }
29385
+
29135
29386
  .cds--number-input--fluid .cds--number__input-wrapper--slug {
29136
29387
  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
29137
29388
  }
@@ -29570,7 +29821,8 @@ optgroup.cds--select-optgroup:disabled,
29570
29821
 
29571
29822
  .cds--select--fluid .cds--select__arrow {
29572
29823
  block-size: 1rem;
29573
- inset-block-start: 2rem;
29824
+ inset-block-start: 2.125rem;
29825
+ inset-inline-end: 0.75rem;
29574
29826
  }
29575
29827
 
29576
29828
  .cds--select--fluid .cds--select__divider {
@@ -29671,6 +29923,15 @@ optgroup.cds--select-optgroup:disabled,
29671
29923
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
29672
29924
  }
29673
29925
 
29926
+ .cds--select--fluid .cds--select--slug .cds--slug {
29927
+ inset-block-start: 2.625rem;
29928
+ inset-inline-end: 2.5rem;
29929
+ }
29930
+
29931
+ .cds--select--fluid .cds--select--slug .cds--select-input {
29932
+ padding-inline-end: 4rem;
29933
+ }
29934
+
29674
29935
  .cds--text-area {
29675
29936
  box-sizing: border-box;
29676
29937
  padding: 0;
@@ -29878,7 +30139,7 @@ optgroup.cds--select-optgroup:disabled,
29878
30139
  align-items: center;
29879
30140
  margin: 0;
29880
30141
  block-size: 1rem;
29881
- inline-size: calc(100% - 2rem);
30142
+ inline-size: auto;
29882
30143
  inset-block-start: 0.8125rem;
29883
30144
  inset-inline-start: 1rem;
29884
30145
  }
@@ -30022,6 +30283,11 @@ optgroup.cds--select-optgroup:disabled,
30022
30283
  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
30023
30284
  }
30024
30285
 
30286
+ .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
30287
+ .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--warn ~ .cds--slug {
30288
+ inset-inline-end: 1rem;
30289
+ }
30290
+
30025
30291
  .cds--text-input--fluid.cds--text-input-wrapper {
30026
30292
  position: relative;
30027
30293
  background: var(--cds-field);
@@ -30087,8 +30353,8 @@ optgroup.cds--select-optgroup:disabled,
30087
30353
  border-block-end: none;
30088
30354
  }
30089
30355
 
30090
- .cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
30091
- .cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
30356
+ .cds--text-input--fluid .cds--text-input--invalid ~ .cds--text-input__divider,
30357
+ .cds--text-input--fluid .cds--text-input--warning ~ .cds--text-input__divider {
30092
30358
  display: block;
30093
30359
  border-style: solid;
30094
30360
  border-color: var(--cds-border-subtle);
@@ -30176,7 +30442,18 @@ optgroup.cds--select-optgroup:disabled,
30176
30442
  }
30177
30443
 
30178
30444
  .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--slug {
30179
- inset-block-start: 2.6875rem;
30445
+ inset-block-start: 2.625rem;
30446
+ }
30447
+
30448
+ .cds--text-input--fluid .cds--text-input--invalid ~ .cds--slug,
30449
+ .cds--text-input--fluid .cds--text-input--warning ~ .cds--slug {
30450
+ inset-inline-end: 1rem;
30451
+ }
30452
+
30453
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input,
30454
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--invalid,
30455
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--warning {
30456
+ padding-inline-end: 2.5rem;
30180
30457
  }
30181
30458
 
30182
30459
  .cds--time-picker--fluid {
@@ -30255,7 +30532,7 @@ optgroup.cds--select-optgroup:disabled,
30255
30532
  padding-block-start: 1.875rem;
30256
30533
  }
30257
30534
 
30258
- .cds--select--fluid:last-of-type .cds--select-input {
30535
+ .cds--time-picker--fluid .cds--select--fluid:last-of-type .cds--select-input {
30259
30536
  border-inline-end: 2px solid transparent;
30260
30537
  }
30261
30538
 
@@ -31856,6 +32133,10 @@ optgroup.cds--select-optgroup:disabled,
31856
32133
  padding: 0.9375rem 0;
31857
32134
  }
31858
32135
 
32136
+ .cds--actionable-notification__button-wrapper {
32137
+ display: flex;
32138
+ }
32139
+
31859
32140
  .cds--actionable-notification--toast .cds--actionable-notification__text-wrapper {
31860
32141
  padding: 0.9375rem 0 1.4375rem 0;
31861
32142
  }
@@ -33408,29 +33689,89 @@ span.cds--pagination__text.cds--pagination__items-count {
33408
33689
  transition: background 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
33409
33690
  }
33410
33691
 
33411
- .cds--slider__thumb {
33692
+ .cds--slider__thumb-wrapper {
33412
33693
  position: absolute;
33413
33694
  z-index: 3;
33695
+ block-size: 0.875rem;
33696
+ inline-size: 0.875rem;
33697
+ transform: translate(-50%, -50%);
33698
+ --cds-tooltip-padding-inline: 0.5rem;
33699
+ --cds-popover-offset: 0.5rem;
33700
+ }
33701
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper {
33702
+ transform: translate(50%, -50%);
33703
+ }
33704
+
33705
+ .cds--slider__thumb-wrapper--lower,
33706
+ .cds--slider__thumb-wrapper--upper {
33707
+ block-size: 24px;
33708
+ inline-size: 16px;
33709
+ --cds-popover-offset: var(--cds-popover-caret-height, 0.5rem);
33710
+ }
33711
+
33712
+ .cds--slider__thumb-wrapper--lower {
33713
+ transform: translate(-100%, -50%);
33714
+ }
33715
+ .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
33716
+ transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
33717
+ }
33718
+ .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
33719
+ inset-inline-end: 0;
33720
+ inset-inline-start: revert;
33721
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
33722
+ }
33723
+
33724
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower {
33725
+ transform: translate(100%, -50%);
33726
+ }
33727
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
33728
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
33729
+ }
33730
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
33731
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
33732
+ }
33733
+
33734
+ .cds--slider__thumb-wrapper--upper {
33735
+ transform: translate(0, -50%);
33736
+ }
33737
+ .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
33738
+ transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
33739
+ }
33740
+ .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
33741
+ inset-inline-start: 0;
33742
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
33743
+ }
33744
+
33745
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper {
33746
+ transform: translate(0, -50%);
33747
+ }
33748
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
33749
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
33750
+ }
33751
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
33752
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
33753
+ }
33754
+
33755
+ .cds--slider__thumb {
33756
+ position: absolute;
33414
33757
  border-radius: 50%;
33415
33758
  background: var(--cds-layer-selected-inverse, #161616);
33416
- block-size: 0.875rem;
33417
33759
  box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
33418
- inline-size: 0.875rem;
33760
+ inset: 0;
33419
33761
  outline: none;
33420
- transform: translate(-50%, -50%);
33421
33762
  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background 110ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
33422
33763
  }
33423
33764
  .cds--slider__thumb:hover {
33424
- transform: translate(-50%, -50%) scale(1.4286);
33765
+ transform: scale(1.4286);
33425
33766
  }
33426
33767
  .cds--slider__thumb:focus {
33427
33768
  background-color: var(--cds-interactive, #0f62fe);
33428
33769
  box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe), inset 0 0 0 3px var(--cds-layer);
33429
- transform: translate(-50%, -50%) scale(1.4286);
33770
+ transform: scale(1.4286);
33430
33771
  }
33431
33772
  .cds--slider__thumb:active {
33432
33773
  box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe);
33433
- transform: translate(-50%, -50%) scale(1.4286);
33774
+ transform: scale(1.4286);
33434
33775
  }
33435
33776
 
33436
33777
  .cds--slider__thumb-icon {
@@ -33444,14 +33785,12 @@ span.cds--pagination__text.cds--pagination__items-count {
33444
33785
 
33445
33786
  .cds--slider__thumb--lower,
33446
33787
  .cds--slider__thumb--upper {
33447
- display: block;
33788
+ position: absolute;
33448
33789
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
33449
33790
  border-radius: unset;
33450
33791
  background-color: transparent;
33451
- block-size: 24px;
33452
33792
  box-shadow: none;
33453
- inline-size: 16px;
33454
- transform: translate(-100%, -50%);
33793
+ inset: 0;
33455
33794
  transition: none;
33456
33795
  }
33457
33796
  .cds--slider__thumb--lower::before,
@@ -33468,7 +33807,7 @@ span.cds--pagination__text.cds--pagination__items-count {
33468
33807
  }
33469
33808
  .cds--slider__thumb--lower:hover,
33470
33809
  .cds--slider__thumb--upper:hover {
33471
- transform: translate(-100%, -50%);
33810
+ transform: none;
33472
33811
  }
33473
33812
  .cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
33474
33813
  .cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
@@ -33477,13 +33816,13 @@ span.cds--pagination__text.cds--pagination__items-count {
33477
33816
  .cds--slider__thumb--lower:active,
33478
33817
  .cds--slider__thumb--upper:active {
33479
33818
  box-shadow: none;
33480
- transform: translate(-100%, -50%);
33819
+ transform: none;
33481
33820
  }
33482
33821
  .cds--slider__thumb--lower:focus,
33483
33822
  .cds--slider__thumb--upper:focus {
33484
33823
  background-color: transparent;
33485
33824
  box-shadow: none;
33486
- transform: translate(-100%, -50%);
33825
+ transform: none;
33487
33826
  }
33488
33827
  .cds--slider__thumb--lower:focus .cds--slider__thumb-icon,
33489
33828
  .cds--slider__thumb--upper:focus .cds--slider__thumb-icon {
@@ -33501,20 +33840,14 @@ span.cds--pagination__text.cds--pagination__items-count {
33501
33840
  }
33502
33841
 
33503
33842
  .cds--slider__thumb--upper {
33504
- transform: translate(0, -50%);
33843
+ transform: none;
33505
33844
  }
33506
33845
  .cds--slider__thumb--upper::before {
33507
33846
  inset-inline-end: auto;
33508
33847
  inset-inline-start: 0;
33509
33848
  }
33510
- .cds--slider__thumb--upper:hover {
33511
- transform: translate(0, -50%);
33512
- }
33513
- .cds--slider__thumb--upper:active {
33514
- transform: translate(0, -50%);
33515
- }
33516
- .cds--slider__thumb--upper:focus {
33517
- transform: translate(0, -50%);
33849
+ .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
33850
+ transform: none;
33518
33851
  }
33519
33852
 
33520
33853
  .cds--slider__input {
@@ -33525,6 +33858,10 @@ span.cds--pagination__text.cds--pagination__items-count {
33525
33858
  position: relative;
33526
33859
  }
33527
33860
 
33861
+ .cds--slider-text-input-wrapper--hidden {
33862
+ display: none;
33863
+ }
33864
+
33528
33865
  .cds--slider-text-input,
33529
33866
  .cds-slider-text-input {
33530
33867
  -moz-appearance: textfield;
@@ -33538,11 +33875,8 @@ span.cds--pagination__text.cds--pagination__items-count {
33538
33875
  display: none;
33539
33876
  }
33540
33877
 
33541
- .cds--slider-text-input--hidden {
33542
- display: none;
33543
- }
33544
-
33545
- .cds--slider__thumb:focus ~ .cds--slider__filled-track {
33878
+ .cds--slider__thumb:focus ~ .cds--slider__filled-track,
33879
+ .cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track {
33546
33880
  background-color: var(--cds-border-interactive, #0f62fe);
33547
33881
  }
33548
33882
 
@@ -33684,15 +34018,17 @@ span.cds--pagination__text.cds--pagination__items-count {
33684
34018
  pointer-events: none;
33685
34019
  }
33686
34020
 
34021
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper {
34022
+ inset-inline-start: 50%;
34023
+ }
33687
34024
  .cds--slider-container.cds--skeleton .cds--slider__thumb {
33688
34025
  cursor: default;
33689
- inset-inline-start: 50%;
33690
34026
  pointer-events: none;
33691
34027
  }
33692
- .cds--slider-container.cds--skeleton .cds--slider__thumb--lower {
34028
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower {
33693
34029
  inset-inline-start: 0;
33694
34030
  }
33695
- .cds--slider-container.cds--skeleton .cds--slider__thumb--upper {
34031
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper {
33696
34032
  inset-inline-start: 100%;
33697
34033
  }
33698
34034
 
@@ -35315,6 +35651,10 @@ span.cds--pagination__text.cds--pagination__items-count {
35315
35651
  border-radius: 1rem;
35316
35652
  }
35317
35653
 
35654
+ .cds--tile--slug-rounded .cds--tile__chevron {
35655
+ border-end-end-radius: 1rem;
35656
+ }
35657
+
35318
35658
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
35319
35659
  .cds--tile__chevron svg,
35320
35660
  .cds--tile__checkmark svg,