@carbon/ibm-products 2.18.1 → 2.19.0

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 +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,