@carbon/ibm-products 2.18.1 → 2.19.1

Sign up to get free protection for your applications and to get access to all the features.
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,