@carbon/ibm-products 2.18.1 → 2.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/css/index-full-carbon.css +458 -86
  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 +111 -15
  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 +139 -15
  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 +125 -16
  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 +33 -15
@@ -2524,6 +2524,12 @@ p.c4p--about-modal__copyright-text:first-child {
2524
2524
  background-color: var(--cds-layer-01, #f4f4f4);
2525
2525
  /* stylelint-disable-next-line max-nesting-depth */
2526
2526
  }
2527
+ .c4p--side-panel__container .c4p--side-panel__title-container:has(.c4p--side-panel__navigation-back-button) {
2528
+ padding-top: 2rem;
2529
+ }
2530
+ .c4p--side-panel__container .c4p--side-panel__title-container:has(.c4p--side-panel__navigation-back-button.cds--btn--md) {
2531
+ padding-top: 2.5rem;
2532
+ }
2527
2533
  .c4p--side-panel__container .c4p--side-panel__title-container::before {
2528
2534
  position: absolute;
2529
2535
  bottom: 0;
@@ -2544,7 +2550,10 @@ p.c4p--about-modal__copyright-text:first-child {
2544
2550
  margin-bottom: 0;
2545
2551
  }
2546
2552
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
2547
- top: 3rem;
2553
+ top: 2rem;
2554
+ }
2555
+ .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 {
2556
+ top: 2.5rem;
2548
2557
  }
2549
2558
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title {
2550
2559
  padding: 0;
@@ -2697,27 +2706,30 @@ p.c4p--about-modal__copyright-text:first-child {
2697
2706
  margin-right: 0.5rem;
2698
2707
  }
2699
2708
  .c4p--side-panel__container .cds--btn.c4p--side-panel__navigation-back-button {
2700
- position: relative;
2709
+ position: fixed;
2701
2710
  z-index: 5;
2702
- top: calc(-1 * 0.5rem);
2703
- left: calc(-1 * 0.5rem);
2711
+ top: 0;
2712
+ left: 0;
2704
2713
  }
2705
2714
  .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
2715
  .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button {
2712
2716
  display: flex;
2717
+ width: 2rem;
2718
+ height: 2rem;
2713
2719
  align-items: center;
2714
2720
  justify-content: center;
2715
- margin: 0.5rem;
2716
- margin-bottom: 0;
2721
+ padding: 0;
2722
+ color: var(--cds-text-primary, #161616);
2717
2723
  }
2724
+ .c4p--side-panel__container .cds--btn.c4p--side-panel__navigation-back-button .cds--btn__icon,
2718
2725
  .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
2719
2726
  margin: 0;
2720
2727
  }
2728
+ .c4p--side-panel__container .cds--btn--md.c4p--side-panel__navigation-back-button,
2729
+ .c4p--side-panel__container .cds--btn--md.c4p--side-panel__close-button {
2730
+ width: 2.5rem;
2731
+ height: 2.5rem;
2732
+ }
2721
2733
  .c4p--side-panel__container .c4p--side-panel__slug-and-close {
2722
2734
  position: fixed;
2723
2735
  z-index: 5;
@@ -3446,6 +3458,16 @@ p.c4p--about-modal__copyright-text:first-child {
3446
3458
  transition: background-color 110ms;
3447
3459
  }
3448
3460
 
3461
+ .c4p--card__clickable:focus {
3462
+ outline: 2px solid var(--cds-focus, #0f62fe);
3463
+ outline-offset: -2px;
3464
+ }
3465
+ @media screen and (prefers-contrast) {
3466
+ .c4p--card__clickable:focus {
3467
+ outline-style: dotted;
3468
+ }
3469
+ }
3470
+
3449
3471
  .c4p--card__clickable:hover {
3450
3472
  background-color: var(--cds-layer-hover-01, #e8e8e8);
3451
3473
  }
@@ -3473,6 +3495,7 @@ p.c4p--about-modal__copyright-text:first-child {
3473
3495
 
3474
3496
  .c4p--card__header {
3475
3497
  padding: 1rem;
3498
+ padding-right: 0;
3476
3499
  }
3477
3500
 
3478
3501
  .c4p--card__header-label-only {
@@ -3549,6 +3572,83 @@ p.c4p--about-modal__copyright-text:first-child {
3549
3572
  padding-left: 1rem;
3550
3573
  }
3551
3574
 
3575
+ .c4p--card__header-container--has-actions {
3576
+ padding-right: 0.5rem;
3577
+ }
3578
+
3579
+ .c4p--card {
3580
+ position: relative;
3581
+ }
3582
+
3583
+ .c4p--card__media + .c4p--card__content-container {
3584
+ /* display relative to container when media displayed */
3585
+ position: relative;
3586
+ }
3587
+
3588
+ .c4p--card .cds--slug {
3589
+ 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);
3590
+ position: absolute;
3591
+ top: 1rem;
3592
+ right: 1rem;
3593
+ }
3594
+
3595
+ .c4p--card__header-container--has-slug {
3596
+ width: 100%;
3597
+ padding-right: 2rem;
3598
+ }
3599
+
3600
+ .c4p--card__header-container--has-slug.c4p--card__header-container--has-actions {
3601
+ padding-right: 2.5rem;
3602
+ }
3603
+
3604
+ .c4p--card__header-container--has-slug.c4p--card__header-container--large-tile-or-label {
3605
+ padding-right: 3rem;
3606
+ }
3607
+
3608
+ .c4p--card__clickable {
3609
+ position: relative;
3610
+ }
3611
+
3612
+ .c4p--card__clickable .cds--slug,
3613
+ .c4p--card__clickable .cds--slug-icon {
3614
+ pointer-events: none;
3615
+ }
3616
+
3617
+ .c4p--card--has-slug {
3618
+ 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);
3619
+ border: 1px solid var(--cds-border-tile);
3620
+ }
3621
+
3622
+ .c4p--card__clickable.c4p--card--has-slug::before {
3623
+ 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);
3624
+ position: absolute;
3625
+ display: block;
3626
+ block-size: 100%;
3627
+ content: "";
3628
+ inline-size: 100%;
3629
+ inset-block-start: 0;
3630
+ inset-inline-start: 0;
3631
+ opacity: 0;
3632
+ transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3633
+ }
3634
+
3635
+ .c4p--card__clickable.c4p--card--has-slug:hover::before {
3636
+ opacity: 1;
3637
+ }
3638
+
3639
+ .c4p--card__clickable .c4p--card__content-container {
3640
+ position: relative;
3641
+ z-index: 1;
3642
+ }
3643
+
3644
+ .c4p--card .cds--slug-icon rect {
3645
+ stroke: var(--cds-icon-primary, #161616);
3646
+ }
3647
+
3648
+ .c4p--card .cds--slug-icon path {
3649
+ fill: var(--cds-icon-primary, #161616);
3650
+ }
3651
+
3552
3652
  .c4p--card__title {
3553
3653
  font-size: var(--cds-heading-03-font-size, 1.25rem);
3554
3654
  font-weight: var(--cds-heading-03-font-weight, 400);
@@ -6986,9 +7086,6 @@ button.c4p--add-select__global-filter-toggle--open {
6986
7086
  z-index: 7999;
6987
7087
  }
6988
7088
 
6989
- .c4p--card__productive .c4p--card__header {
6990
- padding-right: 0;
6991
- }
6992
7089
  .c4p--card__productive .c4p--card__title {
6993
7090
  font-size: var(--cds-heading-compact-02-font-size, 1rem);
6994
7091
  font-weight: var(--cds-heading-compact-02-font-weight, 600);
@@ -7018,7 +7115,6 @@ button.c4p--add-select__global-filter-toggle--open {
7018
7115
  }
7019
7116
  .c4p--card__productive .c4p--card__actions-header {
7020
7117
  margin-top: calc(-1 * 0.25rem);
7021
- margin-right: 0.5rem;
7022
7118
  }
7023
7119
  .c4p--card__productive .c4p--card__actions-header-ghost-button {
7024
7120
  min-height: 2rem;
@@ -14968,6 +15064,26 @@ a.cds--side-nav__link--current::before {
14968
15064
  fill: #9b63ff;
14969
15065
  }
14970
15066
 
15067
+ .c4p--guidebanner__with-left-gutter .c4p--guidebanner__icon-idea {
15068
+ left: 2rem;
15069
+ }
15070
+
15071
+ .c4p--guidebanner__with-left-gutter .c4p--guidebanner__title {
15072
+ padding-left: 4.25rem;
15073
+ }
15074
+
15075
+ .c4p--guidebanner__with-left-gutter .c4p--guidebanner__navigation {
15076
+ padding-left: 1rem;
15077
+ }
15078
+
15079
+ .c4p--guidebanner__with-left-gutter .c4p--carousel__elements-container {
15080
+ padding-left: 1rem;
15081
+ }
15082
+
15083
+ .c4p--guidebanner__with-left-gutter .c4p--carousel__elements-container--scrolled {
15084
+ width: 4rem;
15085
+ }
15086
+
14971
15087
  /**
14972
15088
  * The InlineTip specifically is theme-agnostic, and so we have to
14973
15089
  * use color tokens to keep the colors static instead of theme tokens
@@ -15158,6 +15274,14 @@ a.cds--side-nav__link--current::before {
15158
15274
  flex-shrink: 0;
15159
15275
  }
15160
15276
 
15277
+ .c4p--inline-tip__wide.c4p--inline-tip__with-left-gutter {
15278
+ padding-left: 4rem;
15279
+ }
15280
+
15281
+ .c4p--inline-tip__wide.c4p--inline-tip__with-left-gutter .c4p--inline-tip__icon-idea {
15282
+ left: 2rem;
15283
+ }
15284
+
15161
15285
  /* stylelint-disable carbon/layout-token-use */
15162
15286
  /* stylelint-disable function-no-unknown */
15163
15287
  @keyframes fade {
@@ -17809,7 +17933,7 @@ li.cds--accordion__item--disabled:last-of-type {
17809
17933
  will-change: transform;
17810
17934
  }
17811
17935
 
17812
- .cds--popover--open > .cds--popover > .cds--popover-caret {
17936
+ .cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
17813
17937
  display: block;
17814
17938
  }
17815
17939
 
@@ -21603,6 +21727,19 @@ fieldset[disabled] .cds--form__helper-text {
21603
21727
  }
21604
21728
  }
21605
21729
 
21730
+ .cds--tag .cds--slug .cds--slug__button--inline {
21731
+ color: currentColor;
21732
+ margin-inline-start: 0.0625rem;
21733
+ }
21734
+
21735
+ .cds--tag .cds--slug .cds--slug__button--inline .cds--slug__text::before {
21736
+ background-color: currentColor;
21737
+ }
21738
+
21739
+ .cds--tag .cds--slug .cds--slug__button--inline:hover {
21740
+ border-color: currentColor;
21741
+ }
21742
+
21606
21743
  /* stylelint-disable */
21607
21744
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
21608
21745
  .cds--tag {
@@ -21937,7 +22074,7 @@ fieldset[disabled] .cds--form__helper-text {
21937
22074
 
21938
22075
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty,
21939
22076
  .cds--list-box--warning .cds--list-box__field .cds--text-input--empty {
21940
- padding-inline-end: carbon--mini-units(9);
22077
+ padding-inline-end: 4rem;
21941
22078
  }
21942
22079
 
21943
22080
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty + .cds--list-box__invalid-icon,
@@ -22456,15 +22593,26 @@ fieldset[disabled] .cds--form__helper-text {
22456
22593
  }
22457
22594
 
22458
22595
  .cds--list-box__wrapper--slug .cds--list-box__field,
22459
- .cds--list-box__wrapper--slug .cds--text-input {
22596
+ .cds--list-box__wrapper--slug .cds--text-input--empty {
22460
22597
  padding-inline-end: 4rem;
22461
22598
  }
22462
22599
 
22463
- .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field,
22600
+ .cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
22601
+ padding-inline-end: 6rem;
22602
+ }
22603
+
22604
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty,
22605
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__field,
22606
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input--empty,
22464
22607
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field {
22465
22608
  padding-inline-end: 6rem;
22466
22609
  }
22467
22610
 
22611
+ .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty),
22612
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
22613
+ padding-inline-end: 7.5rem;
22614
+ }
22615
+
22468
22616
  .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug,
22469
22617
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug {
22470
22618
  inset-inline-end: 4rem;
@@ -22573,6 +22721,7 @@ fieldset[disabled] .cds--form__helper-text {
22573
22721
  max-inline-size: 18rem;
22574
22722
  min-inline-size: 10rem;
22575
22723
  opacity: 0;
22724
+ overflow-y: auto;
22576
22725
  visibility: hidden;
22577
22726
  }
22578
22727
  .cds--menu *,
@@ -22613,7 +22762,7 @@ fieldset[disabled] .cds--form__helper-text {
22613
22762
  display: grid;
22614
22763
  align-items: center;
22615
22764
  block-size: 2rem;
22616
- color: var(--cds-text-primary, #161616);
22765
+ color: var(--cds-text-secondary, #525252);
22617
22766
  column-gap: 0.5rem;
22618
22767
  cursor: pointer;
22619
22768
  grid-template-columns: 1fr max-content;
@@ -22629,9 +22778,16 @@ fieldset[disabled] .cds--form__helper-text {
22629
22778
  outline-style: dotted;
22630
22779
  }
22631
22780
  }
22781
+ .cds--menu-item svg {
22782
+ color: var(--cds-icon-secondary, #525252);
22783
+ }
22632
22784
 
22633
22785
  .cds--menu-item:hover {
22634
22786
  background-color: var(--cds-layer-hover);
22787
+ color: var(--cds-text-primary, #161616);
22788
+ }
22789
+ .cds--menu-item:hover svg {
22790
+ color: var(--cds-icon-primary, #161616);
22635
22791
  }
22636
22792
 
22637
22793
  .cds--menu--xs .cds--menu-item {
@@ -23586,7 +23742,7 @@ fieldset[disabled] .cds--form__helper-text {
23586
23742
  }
23587
23743
 
23588
23744
  .cds--data-table-header {
23589
- background: var(--cds-layer);
23745
+ background-color: var(--cds-layer);
23590
23746
  padding-block-end: 1.5rem;
23591
23747
  padding-block-start: 1rem;
23592
23748
  padding-inline: 1rem;
@@ -23653,13 +23809,13 @@ fieldset[disabled] .cds--form__helper-text {
23653
23809
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
23654
23810
  }
23655
23811
 
23656
- .cds--data-table tbody tr:hover {
23657
- background: var(--cds-layer-hover);
23812
+ .cds--data-table tbody tr:not([data-child-row]):hover,
23813
+ .cds--data-table tbody tr[data-child-row]:hover > td {
23814
+ background-color: var(--cds-layer-hover);
23658
23815
  }
23659
23816
 
23660
23817
  .cds--data-table tbody tr:hover td,
23661
23818
  .cds--data-table tbody tr:hover th {
23662
- background: var(--cds-layer-hover);
23663
23819
  border-block-end: 1px solid var(--cds-layer-hover);
23664
23820
  border-block-start: 1px solid var(--cds-layer-hover);
23665
23821
  color: var(--cds-text-primary, #161616);
@@ -23735,7 +23891,6 @@ fieldset[disabled] .cds--form__helper-text {
23735
23891
 
23736
23892
  .cds--data-table td,
23737
23893
  .cds--data-table tbody th {
23738
- background: var(--cds-layer);
23739
23894
  border-block-end: 1px solid var(--cds-border-subtle);
23740
23895
  border-block-start: 1px solid var(--cds-layer);
23741
23896
  color: var(--cds-text-secondary, #525252);
@@ -23838,17 +23993,23 @@ fieldset[disabled] .cds--form__helper-text {
23838
23993
  }
23839
23994
 
23840
23995
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td {
23841
- background-color: var(--cds-layer-accent);
23842
23996
  border-block-end: 1px solid var(--cds-layer-accent);
23843
23997
  border-block-start: 1px solid var(--cds-layer-accent);
23844
23998
  }
23845
23999
 
24000
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):nth-child(even) {
24001
+ background-color: var(--cds-layer-accent);
24002
+ }
24003
+
23846
24004
  .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
23847
- background-color: var(--cds-layer-hover);
23848
24005
  border-block-end: 1px solid var(--cds-layer-hover);
23849
24006
  border-block-start: 1px solid var(--cds-layer-hover);
23850
24007
  }
23851
24008
 
24009
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover {
24010
+ background-color: var(--cds-layer-hover);
24011
+ }
24012
+
23852
24013
  .cds--table-column-checkbox .cds--checkbox-label {
23853
24014
  min-block-size: 1.5rem;
23854
24015
  padding-inline-start: 0;
@@ -23864,7 +24025,7 @@ fieldset[disabled] .cds--form__helper-text {
23864
24025
 
23865
24026
  .cds--data-table th.cds--table-column-checkbox {
23866
24027
  position: static;
23867
- background: var(--cds-layer-accent);
24028
+ background-color: var(--cds-layer-accent);
23868
24029
  inline-size: 2rem;
23869
24030
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
23870
24031
  }
@@ -23936,12 +24097,16 @@ fieldset[disabled] .cds--form__helper-text {
23936
24097
 
23937
24098
  .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td,
23938
24099
  tr.cds--data-table--selected td {
23939
- background-color: var(--cds-layer-selected);
23940
24100
  border-block-end: 1px solid var(--cds-layer-active);
23941
24101
  border-block-start: 1px solid var(--cds-layer-selected);
23942
24102
  color: var(--cds-text-primary, #161616);
23943
24103
  }
23944
24104
 
24105
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected,
24106
+ tr.cds--data-table--selected {
24107
+ background-color: var(--cds-layer-selected);
24108
+ }
24109
+
23945
24110
  .cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td,
23946
24111
  tr.cds--data-table--selected:first-of-type td {
23947
24112
  border-block-start: 1px solid var(--cds-border-subtle-selected);
@@ -23964,12 +24129,16 @@ tr.cds--data-table--selected:last-of-type td {
23964
24129
 
23965
24130
  .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
23966
24131
  .cds--data-table tbody .cds--data-table--selected:hover td {
23967
- background: var(--cds-layer-selected-hover);
23968
24132
  border-block-end: 1px solid var(--cds-layer-selected-hover);
23969
24133
  border-block-start: 1px solid var(--cds-layer-selected-hover);
23970
24134
  color: var(--cds-text-primary, #161616);
23971
24135
  }
23972
24136
 
24137
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover,
24138
+ .cds--data-table tbody .cds--data-table--selected:hover {
24139
+ background-color: var(--cds-layer-selected-hover);
24140
+ }
24141
+
23973
24142
  .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
23974
24143
  opacity: 1;
23975
24144
  }
@@ -24266,6 +24435,39 @@ tr.cds--data-table--selected:last-of-type td {
24266
24435
  margin: -0.1875rem 0;
24267
24436
  }
24268
24437
 
24438
+ .cds--data-table .cds--table-column-slug {
24439
+ inline-size: 1rem;
24440
+ padding-inline-end: 0;
24441
+ }
24442
+
24443
+ .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
24444
+ 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%);
24445
+ background-attachment: fixed;
24446
+ }
24447
+
24448
+ .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
24449
+ .cds--data-table thead th:has(> .cds--table-header-label--slug) {
24450
+ 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%);
24451
+ }
24452
+
24453
+ .cds--table-column-slug .cds--slug {
24454
+ position: absolute;
24455
+ transform: translateY(-50%);
24456
+ }
24457
+
24458
+ .cds--data-table--xl .cds--table-column-slug .cds--slug {
24459
+ transform: translateY(1px);
24460
+ }
24461
+
24462
+ th .cds--table-header-label.cds--table-header-label--slug {
24463
+ display: flex;
24464
+ align-items: center;
24465
+ }
24466
+
24467
+ th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
24468
+ margin-inline-start: 0.5rem;
24469
+ }
24470
+
24269
24471
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24270
24472
  .cds--data-table-content {
24271
24473
  outline: 1px solid transparent;
@@ -25289,7 +25491,7 @@ tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td {
25289
25491
  background-color: var(--cds-layer-hover);
25290
25492
  padding-block-end: 0;
25291
25493
  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);
25494
+ 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
25495
  }
25294
25496
 
25295
25497
  tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child-row-inner-container {
@@ -25298,13 +25500,22 @@ tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child
25298
25500
  }
25299
25501
 
25300
25502
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] {
25301
- transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25503
+ 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
25504
  }
25303
25505
 
25304
25506
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
25305
25507
  border-block-end: 1px solid var(--cds-border-subtle);
25306
25508
  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);
25509
+ transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25510
+ }
25511
+
25512
+ tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
25513
+ tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
25514
+ padding-inline-start: 5.5rem;
25515
+ }
25516
+
25517
+ tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
25518
+ padding-inline-start: 7.5rem;
25308
25519
  }
25309
25520
 
25310
25521
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
@@ -25328,7 +25539,7 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-i
25328
25539
  tr.cds--parent-row:not(.cds--expandable-row) td,
25329
25540
  tr.cds--parent-row.cds--expandable-row td,
25330
25541
  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);
25542
+ 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
25543
  }
25333
25544
 
25334
25545
  tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td {
@@ -25382,6 +25593,11 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
25382
25593
  padding-inline-start: 0.375rem;
25383
25594
  }
25384
25595
 
25596
+ .cds--data-table td.cds--table-expand[data-previous-value=collapsed] + .cds--table-column-checkbox {
25597
+ border-block-end: 1px solid transparent;
25598
+ box-shadow: none;
25599
+ }
25600
+
25385
25601
  .cds--data-table th.cds--table-expand + .cds--table-column-checkbox + th,
25386
25602
  .cds--data-table td.cds--table-expand + .cds--table-column-checkbox + td {
25387
25603
  padding-inline-start: 0.5rem;
@@ -25470,7 +25686,7 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
25470
25686
 
25471
25687
  tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
25472
25688
  position: absolute;
25473
- background: var(--cds-layer-accent);
25689
+ background-color: var(--cds-layer-accent);
25474
25690
  block-size: 0.0625rem;
25475
25691
  content: "";
25476
25692
  inline-size: 0.5rem;
@@ -25480,7 +25696,7 @@ tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
25480
25696
 
25481
25697
  tr.cds--parent-row.cds--expandable-row:hover td.cds--table-expand + td::after,
25482
25698
  tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td.cds--table-expand + td::after {
25483
- background: var(--cds-layer-hover);
25699
+ background-color: var(--cds-layer-hover);
25484
25700
  }
25485
25701
 
25486
25702
  tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
@@ -25501,7 +25717,7 @@ tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
25501
25717
 
25502
25718
  .cds--data-table--zebra tr.cds--parent-row td,
25503
25719
  .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);
25720
+ 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
25721
  }
25506
25722
 
25507
25723
  .cds--data-table--zebra tbody tr[data-parent-row]:hover td,
@@ -25513,33 +25729,33 @@ tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
25513
25729
  }
25514
25730
 
25515
25731
  .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td {
25516
- background: var(--cds-layer-hover);
25732
+ background-color: var(--cds-layer-hover);
25517
25733
  border-block-end: 1px solid var(--cds-layer-hover);
25518
25734
  border-block-start: 1px solid var(--cds-layer-hover);
25519
25735
  }
25520
25736
 
25737
+ tr.cds--parent-row.cds--data-table--selected {
25738
+ background-color: var(--cds-layer-selected);
25739
+ }
25740
+
25521
25741
  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
25742
  border-block-start: 1px solid var(--cds-layer-active);
25525
25743
  box-shadow: 0 1px var(--cds-layer-active);
25526
25744
  }
25527
25745
 
25528
25746
  tr.cds--parent-row.cds--data-table--selected td {
25529
- background: var(--cds-layer-selected);
25530
- border-block-end: 1px solid transparent;
25747
+ border-block-end: 1px solid var(--cds-layer-active);
25531
25748
  box-shadow: 0 1px var(--cds-layer-active);
25532
25749
  color: var(--cds-text-primary, #161616);
25533
25750
  }
25534
25751
 
25535
25752
  tr.cds--parent-row.cds--data-table--selected:last-of-type td {
25536
- background: var(--cds-layer-selected);
25537
25753
  border-block-end: 1px solid transparent;
25538
25754
  box-shadow: 0 1px var(--cds-border-subtle);
25539
25755
  }
25540
25756
 
25541
25757
  tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td {
25542
- background: var(--cds-layer-selected-hover);
25758
+ background-color: var(--cds-layer-selected-hover);
25543
25759
  border-block-end: 1px solid var(--cds-border-subtle);
25544
25760
  border-block-start: 1px solid var(--cds-layer-selected-hover);
25545
25761
  box-shadow: 0 1px var(--cds-layer-selected-hover);
@@ -25555,7 +25771,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
25555
25771
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
25556
25772
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td,
25557
25773
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first-of-type {
25558
- background: var(--cds-layer-selected-hover);
25774
+ background-color: var(--cds-layer-selected-hover);
25559
25775
  border-block-end: 1px solid transparent;
25560
25776
  border-block-start: 1px solid var(--cds-layer-selected-hover);
25561
25777
  box-shadow: 0 1px var(--cds-layer-selected-hover);
@@ -25576,7 +25792,22 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child
25576
25792
 
25577
25793
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td,
25578
25794
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[data-child-row] td {
25579
- background: var(--cds-layer-selected);
25795
+ background-color: var(--cds-layer-selected);
25796
+ }
25797
+
25798
+ .cds--parent-row .cds--table-column-slug,
25799
+ .cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
25800
+ box-shadow: none;
25801
+ }
25802
+
25803
+ .cds--parent-row.cds--expandable-row .cds--table-column-slug,
25804
+ .cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
25805
+ border-block-end: 1px solid transparent;
25806
+ }
25807
+
25808
+ .cds--parent-row--slug td,
25809
+ .cds--data-table tr.cds--parent-row--slug:hover td {
25810
+ border-block-start: 1px solid transparent;
25580
25811
  }
25581
25812
 
25582
25813
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -25922,6 +26153,11 @@ th .cds--table-sort__flex {
25922
26153
  margin-block-start: 0.8125rem;
25923
26154
  }
25924
26155
 
26156
+ .cds--table-sort__header--slug .cds--slug {
26157
+ margin-inline-end: auto;
26158
+ margin-inline-start: 0.5rem;
26159
+ }
26160
+
25925
26161
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25926
26162
  .cds--table-sort__icon,
25927
26163
  .cds--table-sort__icon-unsorted {
@@ -27927,7 +28163,7 @@ button.cds--dropdown-text:focus {
27927
28163
  }
27928
28164
 
27929
28165
  .cds--list-box__wrapper--fluid :not(.cds--list-box--up) .cds--list-box__menu {
27930
- inset-block-start: calc(100% + 0.1875rem);
28166
+ inset-block-start: calc(100% + 0.0625rem);
27931
28167
  }
27932
28168
 
27933
28169
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
@@ -28040,6 +28276,34 @@ button.cds--dropdown-text:focus {
28040
28276
  background: var(--cds-skeleton-element, #c6c6c6);
28041
28277
  }
28042
28278
 
28279
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--slug {
28280
+ inset-block-start: 2.625rem;
28281
+ }
28282
+
28283
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug,
28284
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug {
28285
+ inset-inline-end: 2.5rem;
28286
+ }
28287
+
28288
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning button.cds--list-box__field,
28289
+ .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 {
28290
+ padding-inline-end: 4rem;
28291
+ }
28292
+
28293
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty),
28294
+ .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) {
28295
+ padding-inline-end: 5.5rem;
28296
+ }
28297
+
28298
+ .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,
28299
+ .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 {
28300
+ inset-inline-end: 4rem;
28301
+ }
28302
+
28303
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
28304
+ padding-inline-end: 6rem;
28305
+ }
28306
+
28043
28307
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
28044
28308
  overflow: visible;
28045
28309
  padding: 0;
@@ -28047,7 +28311,8 @@ button.cds--dropdown-text:focus {
28047
28311
 
28048
28312
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input {
28049
28313
  overflow: hidden;
28050
- padding: 2.0625rem 4rem 0.8125rem 1rem;
28314
+ padding-block: 2.0625rem 0.8125rem;
28315
+ padding-inline: 1rem 4rem;
28051
28316
  text-overflow: ellipsis;
28052
28317
  transition: none;
28053
28318
  white-space: nowrap;
@@ -28350,6 +28615,12 @@ button.cds--dropdown-text:focus {
28350
28615
  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
28616
  }
28352
28617
 
28618
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
28619
+ .cds--date-picker--fluid--invalid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
28620
+ .cds--date-picker--fluid--warn .cds--date-picker-input__wrapper--slug .cds--date-picker__input {
28621
+ padding-inline-end: 4rem;
28622
+ }
28623
+
28353
28624
  .cds--multi-select .cds--list-box__field--wrapper {
28354
28625
  display: inline-flex;
28355
28626
  align-items: center;
@@ -28887,7 +29158,8 @@ button.cds--dropdown-text:focus {
28887
29158
  padding-inline-end: 9rem;
28888
29159
  }
28889
29160
 
28890
- .cds--number__input-wrapper--slug input[type=number] {
29161
+ .cds--number__input-wrapper--slug input[type=number],
29162
+ .cds--number__input-wrapper--slug input[type=number]:disabled {
28891
29163
  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
29164
  padding-inline-end: 7rem;
28893
29165
  }
@@ -29132,6 +29404,17 @@ button.cds--dropdown-text:focus {
29132
29404
  inset-block-start: 2.6875rem;
29133
29405
  }
29134
29406
 
29407
+ .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug .cds--slug,
29408
+ .cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug {
29409
+ inset-inline-end: 5.5rem;
29410
+ }
29411
+
29412
+ .cds--number-input--fluid .cds--number__input-wrapper--slug input,
29413
+ .cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug input[data-invalid],
29414
+ .cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input {
29415
+ padding-inline-end: 7.5rem;
29416
+ }
29417
+
29135
29418
  .cds--number-input--fluid .cds--number__input-wrapper--slug {
29136
29419
  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
29420
  }
@@ -29570,7 +29853,8 @@ optgroup.cds--select-optgroup:disabled,
29570
29853
 
29571
29854
  .cds--select--fluid .cds--select__arrow {
29572
29855
  block-size: 1rem;
29573
- inset-block-start: 2rem;
29856
+ inset-block-start: 2.125rem;
29857
+ inset-inline-end: 0.75rem;
29574
29858
  }
29575
29859
 
29576
29860
  .cds--select--fluid .cds--select__divider {
@@ -29671,6 +29955,15 @@ optgroup.cds--select-optgroup:disabled,
29671
29955
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
29672
29956
  }
29673
29957
 
29958
+ .cds--select--fluid .cds--select--slug .cds--slug {
29959
+ inset-block-start: 2.625rem;
29960
+ inset-inline-end: 2.5rem;
29961
+ }
29962
+
29963
+ .cds--select--fluid .cds--select--slug .cds--select-input {
29964
+ padding-inline-end: 4rem;
29965
+ }
29966
+
29674
29967
  .cds--text-area {
29675
29968
  box-sizing: border-box;
29676
29969
  padding: 0;
@@ -29878,7 +30171,7 @@ optgroup.cds--select-optgroup:disabled,
29878
30171
  align-items: center;
29879
30172
  margin: 0;
29880
30173
  block-size: 1rem;
29881
- inline-size: calc(100% - 2rem);
30174
+ inline-size: auto;
29882
30175
  inset-block-start: 0.8125rem;
29883
30176
  inset-inline-start: 1rem;
29884
30177
  }
@@ -30022,6 +30315,11 @@ optgroup.cds--select-optgroup:disabled,
30022
30315
  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
30316
  }
30024
30317
 
30318
+ .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
30319
+ .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--warn ~ .cds--slug {
30320
+ inset-inline-end: 1rem;
30321
+ }
30322
+
30025
30323
  .cds--text-input--fluid.cds--text-input-wrapper {
30026
30324
  position: relative;
30027
30325
  background: var(--cds-field);
@@ -30087,8 +30385,8 @@ optgroup.cds--select-optgroup:disabled,
30087
30385
  border-block-end: none;
30088
30386
  }
30089
30387
 
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 {
30388
+ .cds--text-input--fluid .cds--text-input--invalid ~ .cds--text-input__divider,
30389
+ .cds--text-input--fluid .cds--text-input--warning ~ .cds--text-input__divider {
30092
30390
  display: block;
30093
30391
  border-style: solid;
30094
30392
  border-color: var(--cds-border-subtle);
@@ -30176,7 +30474,18 @@ optgroup.cds--select-optgroup:disabled,
30176
30474
  }
30177
30475
 
30178
30476
  .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--slug {
30179
- inset-block-start: 2.6875rem;
30477
+ inset-block-start: 2.625rem;
30478
+ }
30479
+
30480
+ .cds--text-input--fluid .cds--text-input--invalid ~ .cds--slug,
30481
+ .cds--text-input--fluid .cds--text-input--warning ~ .cds--slug {
30482
+ inset-inline-end: 1rem;
30483
+ }
30484
+
30485
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input,
30486
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--invalid,
30487
+ .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--warning {
30488
+ padding-inline-end: 2.5rem;
30180
30489
  }
30181
30490
 
30182
30491
  .cds--time-picker--fluid {
@@ -30255,7 +30564,7 @@ optgroup.cds--select-optgroup:disabled,
30255
30564
  padding-block-start: 1.875rem;
30256
30565
  }
30257
30566
 
30258
- .cds--select--fluid:last-of-type .cds--select-input {
30567
+ .cds--time-picker--fluid .cds--select--fluid:last-of-type .cds--select-input {
30259
30568
  border-inline-end: 2px solid transparent;
30260
30569
  }
30261
30570
 
@@ -31856,6 +32165,10 @@ optgroup.cds--select-optgroup:disabled,
31856
32165
  padding: 0.9375rem 0;
31857
32166
  }
31858
32167
 
32168
+ .cds--actionable-notification__button-wrapper {
32169
+ display: flex;
32170
+ }
32171
+
31859
32172
  .cds--actionable-notification--toast .cds--actionable-notification__text-wrapper {
31860
32173
  padding: 0.9375rem 0 1.4375rem 0;
31861
32174
  }
@@ -33408,29 +33721,89 @@ span.cds--pagination__text.cds--pagination__items-count {
33408
33721
  transition: background 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
33409
33722
  }
33410
33723
 
33411
- .cds--slider__thumb {
33724
+ .cds--slider__thumb-wrapper {
33412
33725
  position: absolute;
33413
33726
  z-index: 3;
33727
+ block-size: 0.875rem;
33728
+ inline-size: 0.875rem;
33729
+ transform: translate(-50%, -50%);
33730
+ --cds-tooltip-padding-inline: 0.5rem;
33731
+ --cds-popover-offset: 0.5rem;
33732
+ }
33733
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper {
33734
+ transform: translate(50%, -50%);
33735
+ }
33736
+
33737
+ .cds--slider__thumb-wrapper--lower,
33738
+ .cds--slider__thumb-wrapper--upper {
33739
+ block-size: 24px;
33740
+ inline-size: 16px;
33741
+ --cds-popover-offset: var(--cds-popover-caret-height, 0.5rem);
33742
+ }
33743
+
33744
+ .cds--slider__thumb-wrapper--lower {
33745
+ transform: translate(-100%, -50%);
33746
+ }
33747
+ .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
33748
+ transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
33749
+ }
33750
+ .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
33751
+ inset-inline-end: 0;
33752
+ inset-inline-start: revert;
33753
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
33754
+ }
33755
+
33756
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower {
33757
+ transform: translate(100%, -50%);
33758
+ }
33759
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
33760
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
33761
+ }
33762
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
33763
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
33764
+ }
33765
+
33766
+ .cds--slider__thumb-wrapper--upper {
33767
+ transform: translate(0, -50%);
33768
+ }
33769
+ .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
33770
+ transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
33771
+ }
33772
+ .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
33773
+ inset-inline-start: 0;
33774
+ transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
33775
+ }
33776
+
33777
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper {
33778
+ transform: translate(0, -50%);
33779
+ }
33780
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
33781
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
33782
+ }
33783
+ .cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
33784
+ transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
33785
+ }
33786
+
33787
+ .cds--slider__thumb {
33788
+ position: absolute;
33414
33789
  border-radius: 50%;
33415
33790
  background: var(--cds-layer-selected-inverse, #161616);
33416
- block-size: 0.875rem;
33417
33791
  box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
33418
- inline-size: 0.875rem;
33792
+ inset: 0;
33419
33793
  outline: none;
33420
- transform: translate(-50%, -50%);
33421
33794
  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
33795
  }
33423
33796
  .cds--slider__thumb:hover {
33424
- transform: translate(-50%, -50%) scale(1.4286);
33797
+ transform: scale(1.4286);
33425
33798
  }
33426
33799
  .cds--slider__thumb:focus {
33427
33800
  background-color: var(--cds-interactive, #0f62fe);
33428
33801
  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);
33802
+ transform: scale(1.4286);
33430
33803
  }
33431
33804
  .cds--slider__thumb:active {
33432
33805
  box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe);
33433
- transform: translate(-50%, -50%) scale(1.4286);
33806
+ transform: scale(1.4286);
33434
33807
  }
33435
33808
 
33436
33809
  .cds--slider__thumb-icon {
@@ -33444,14 +33817,12 @@ span.cds--pagination__text.cds--pagination__items-count {
33444
33817
 
33445
33818
  .cds--slider__thumb--lower,
33446
33819
  .cds--slider__thumb--upper {
33447
- display: block;
33820
+ position: absolute;
33448
33821
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
33449
33822
  border-radius: unset;
33450
33823
  background-color: transparent;
33451
- block-size: 24px;
33452
33824
  box-shadow: none;
33453
- inline-size: 16px;
33454
- transform: translate(-100%, -50%);
33825
+ inset: 0;
33455
33826
  transition: none;
33456
33827
  }
33457
33828
  .cds--slider__thumb--lower::before,
@@ -33468,7 +33839,7 @@ span.cds--pagination__text.cds--pagination__items-count {
33468
33839
  }
33469
33840
  .cds--slider__thumb--lower:hover,
33470
33841
  .cds--slider__thumb--upper:hover {
33471
- transform: translate(-100%, -50%);
33842
+ transform: none;
33472
33843
  }
33473
33844
  .cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
33474
33845
  .cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
@@ -33477,13 +33848,13 @@ span.cds--pagination__text.cds--pagination__items-count {
33477
33848
  .cds--slider__thumb--lower:active,
33478
33849
  .cds--slider__thumb--upper:active {
33479
33850
  box-shadow: none;
33480
- transform: translate(-100%, -50%);
33851
+ transform: none;
33481
33852
  }
33482
33853
  .cds--slider__thumb--lower:focus,
33483
33854
  .cds--slider__thumb--upper:focus {
33484
33855
  background-color: transparent;
33485
33856
  box-shadow: none;
33486
- transform: translate(-100%, -50%);
33857
+ transform: none;
33487
33858
  }
33488
33859
  .cds--slider__thumb--lower:focus .cds--slider__thumb-icon,
33489
33860
  .cds--slider__thumb--upper:focus .cds--slider__thumb-icon {
@@ -33501,20 +33872,14 @@ span.cds--pagination__text.cds--pagination__items-count {
33501
33872
  }
33502
33873
 
33503
33874
  .cds--slider__thumb--upper {
33504
- transform: translate(0, -50%);
33875
+ transform: none;
33505
33876
  }
33506
33877
  .cds--slider__thumb--upper::before {
33507
33878
  inset-inline-end: auto;
33508
33879
  inset-inline-start: 0;
33509
33880
  }
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%);
33881
+ .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
33882
+ transform: none;
33518
33883
  }
33519
33884
 
33520
33885
  .cds--slider__input {
@@ -33525,6 +33890,10 @@ span.cds--pagination__text.cds--pagination__items-count {
33525
33890
  position: relative;
33526
33891
  }
33527
33892
 
33893
+ .cds--slider-text-input-wrapper--hidden {
33894
+ display: none;
33895
+ }
33896
+
33528
33897
  .cds--slider-text-input,
33529
33898
  .cds-slider-text-input {
33530
33899
  -moz-appearance: textfield;
@@ -33538,11 +33907,8 @@ span.cds--pagination__text.cds--pagination__items-count {
33538
33907
  display: none;
33539
33908
  }
33540
33909
 
33541
- .cds--slider-text-input--hidden {
33542
- display: none;
33543
- }
33544
-
33545
- .cds--slider__thumb:focus ~ .cds--slider__filled-track {
33910
+ .cds--slider__thumb:focus ~ .cds--slider__filled-track,
33911
+ .cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track {
33546
33912
  background-color: var(--cds-border-interactive, #0f62fe);
33547
33913
  }
33548
33914
 
@@ -33684,15 +34050,17 @@ span.cds--pagination__text.cds--pagination__items-count {
33684
34050
  pointer-events: none;
33685
34051
  }
33686
34052
 
34053
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper {
34054
+ inset-inline-start: 50%;
34055
+ }
33687
34056
  .cds--slider-container.cds--skeleton .cds--slider__thumb {
33688
34057
  cursor: default;
33689
- inset-inline-start: 50%;
33690
34058
  pointer-events: none;
33691
34059
  }
33692
- .cds--slider-container.cds--skeleton .cds--slider__thumb--lower {
34060
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower {
33693
34061
  inset-inline-start: 0;
33694
34062
  }
33695
- .cds--slider-container.cds--skeleton .cds--slider__thumb--upper {
34063
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper {
33696
34064
  inset-inline-start: 100%;
33697
34065
  }
33698
34066
 
@@ -35315,6 +35683,10 @@ span.cds--pagination__text.cds--pagination__items-count {
35315
35683
  border-radius: 1rem;
35316
35684
  }
35317
35685
 
35686
+ .cds--tile--slug-rounded .cds--tile__chevron {
35687
+ border-end-end-radius: 1rem;
35688
+ }
35689
+
35318
35690
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
35319
35691
  .cds--tile__chevron svg,
35320
35692
  .cds--tile__checkmark svg,