@carbon/ibm-products 2.78.0-rc.0 → 2.79.0-rc.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 (99) hide show
  1. package/css/carbon.css +1762 -1036
  2. package/css/carbon.css.map +1 -1
  3. package/css/index-full-carbon.css +2342 -1239
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +1 -1
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +450 -98
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +1 -1
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +624 -247
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +1 -1
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +1759 -873
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +1 -1
  18. package/css/index.min.css.map +1 -1
  19. package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +111 -108
  20. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +1 -1
  21. package/es/components/InterstitialScreen/InterstitialScreenBody.js +15 -8
  22. package/es/components/InterstitialScreen/InterstitialScreenFooter.js +6 -1
  23. package/es/components/InterstitialScreen/InterstitialScreenHeader.d.ts +1 -1
  24. package/es/components/InterstitialScreen/InterstitialScreenHeader.js +1 -1
  25. package/es/components/InterstitialScreen/{_story-assets/InterstitialScreenView/InterstitialScreenView.d.ts → InterstitialScreenView.d.ts} +2 -3
  26. package/es/components/InterstitialScreen/InterstitialScreenView.js +60 -0
  27. package/es/components/InterstitialScreen/index.d.ts +1 -0
  28. package/es/components/Tearsheet/next/Tearsheet.d.ts +85 -0
  29. package/es/components/Tearsheet/next/Tearsheet.js +129 -0
  30. package/es/components/Tearsheet/next/TearsheetBody.d.ts +67 -0
  31. package/es/components/Tearsheet/next/TearsheetBody.js +121 -0
  32. package/es/components/Tearsheet/next/TearsheetHeader.d.ts +65 -0
  33. package/es/components/Tearsheet/next/TearsheetHeader.js +121 -0
  34. package/es/components/Tearsheet/next/TearsheetHeaderActions.d.ts +54 -0
  35. package/es/components/Tearsheet/next/TearsheetHeaderActions.js +101 -0
  36. package/es/components/Tearsheet/next/TearsheetHeaderContent.d.ts +28 -0
  37. package/es/components/Tearsheet/next/TearsheetHeaderContent.js +67 -0
  38. package/es/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts +22 -0
  39. package/es/components/Tearsheet/next/context.d.ts +26 -0
  40. package/es/components/Tearsheet/next/context.js +26 -0
  41. package/es/components/Tearsheet/next/index.d.ts +12 -0
  42. package/es/components/Tearsheet/next/index.js +8 -0
  43. package/es/components/Toolbar/Toolbar.js +1 -5
  44. package/es/components/TruncatedText/TruncatedText.d.ts +2 -3
  45. package/es/components/TruncatedText/TruncatedText.js +1 -2
  46. package/es/components/TruncatedText/index.d.ts +1 -0
  47. package/es/components/index.d.ts +2 -1
  48. package/es/global/js/hooks/useCollapsible.d.ts +19 -0
  49. package/es/global/js/hooks/useCollapsible.js +68 -0
  50. package/es/global/js/hooks/useMatchMedia.d.ts +13 -0
  51. package/es/global/js/hooks/useMatchMedia.js +33 -0
  52. package/es/index.js +4 -1
  53. package/es/node_modules/@carbon/icons-react/es/generated/bucket-10.js +845 -805
  54. package/es/node_modules/@carbon/icons-react/es/generated/bucket-3.js +476 -476
  55. package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +111 -108
  56. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +1 -1
  57. package/lib/components/InterstitialScreen/InterstitialScreenBody.js +15 -8
  58. package/lib/components/InterstitialScreen/InterstitialScreenFooter.js +6 -1
  59. package/lib/components/InterstitialScreen/InterstitialScreenHeader.d.ts +1 -1
  60. package/lib/components/InterstitialScreen/InterstitialScreenHeader.js +1 -1
  61. package/lib/components/InterstitialScreen/{_story-assets/InterstitialScreenView/InterstitialScreenView.d.ts → InterstitialScreenView.d.ts} +2 -3
  62. package/lib/components/InterstitialScreen/InterstitialScreenView.js +62 -0
  63. package/lib/components/InterstitialScreen/index.d.ts +1 -0
  64. package/lib/components/Tearsheet/next/Tearsheet.d.ts +85 -0
  65. package/lib/components/Tearsheet/next/Tearsheet.js +131 -0
  66. package/lib/components/Tearsheet/next/TearsheetBody.d.ts +67 -0
  67. package/lib/components/Tearsheet/next/TearsheetBody.js +128 -0
  68. package/lib/components/Tearsheet/next/TearsheetHeader.d.ts +65 -0
  69. package/lib/components/Tearsheet/next/TearsheetHeader.js +127 -0
  70. package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts +54 -0
  71. package/lib/components/Tearsheet/next/TearsheetHeaderActions.js +104 -0
  72. package/lib/components/Tearsheet/next/TearsheetHeaderContent.d.ts +28 -0
  73. package/lib/components/Tearsheet/next/TearsheetHeaderContent.js +71 -0
  74. package/lib/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts +22 -0
  75. package/lib/components/Tearsheet/next/context.d.ts +26 -0
  76. package/lib/components/Tearsheet/next/context.js +29 -0
  77. package/lib/components/Tearsheet/next/index.d.ts +12 -0
  78. package/lib/components/Tearsheet/next/index.js +14 -0
  79. package/lib/components/Toolbar/Toolbar.js +1 -5
  80. package/lib/components/TruncatedText/TruncatedText.d.ts +2 -3
  81. package/lib/components/TruncatedText/TruncatedText.js +4 -3
  82. package/lib/components/TruncatedText/index.d.ts +1 -0
  83. package/lib/components/index.d.ts +2 -1
  84. package/lib/global/js/hooks/useCollapsible.d.ts +19 -0
  85. package/lib/global/js/hooks/useCollapsible.js +70 -0
  86. package/lib/global/js/hooks/useMatchMedia.d.ts +13 -0
  87. package/lib/global/js/hooks/useMatchMedia.js +35 -0
  88. package/lib/index.js +15 -14
  89. package/lib/node_modules/@carbon/icons-react/es/generated/bucket-10.js +863 -823
  90. package/lib/node_modules/@carbon/icons-react/es/generated/bucket-3.js +477 -477
  91. package/package.json +16 -15
  92. package/scss/components/FilterSummary/_filter-summary.scss +1 -1
  93. package/scss/components/PageHeader/_page-header.scss +4 -0
  94. package/scss/components/SidePanel/_side-panel.scss +5 -5
  95. package/scss/components/TagOverflow/_tag-overflow.scss +38 -38
  96. package/scss/components/TagSet/_tag-set.scss +28 -12
  97. package/scss/components/Tearsheet/_tearsheet.scss +8 -1
  98. package/scss/components/Tearsheet/_tearsheet_next.scss +408 -0
  99. package/telemetry.yml +32 -6
@@ -2748,7 +2748,6 @@ p.c4p--about-modal__copyright-text:first-child {
2748
2748
  -moz-user-select: none;
2749
2749
  -ms-user-select: none;
2750
2750
  user-select: none;
2751
- /* stylelint-disable-next-line max-nesting-depth */
2752
2751
  }
2753
2752
  .c4p--carousel__elements:focus {
2754
2753
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -2759,6 +2758,9 @@ p.c4p--about-modal__copyright-text:first-child {
2759
2758
  outline-style: dotted;
2760
2759
  }
2761
2760
  }
2761
+ .c4p--carousel__elements {
2762
+ /* stylelint-disable-next-line max-nesting-depth */
2763
+ }
2762
2764
  @media (prefers-reduced-motion) {
2763
2765
  .c4p--carousel__elements {
2764
2766
  scroll-behavior: auto;
@@ -2881,14 +2883,16 @@ p.c4p--about-modal__copyright-text:first-child {
2881
2883
  .c4p--combo-button__action {
2882
2884
  display: block;
2883
2885
  overflow-x: hidden;
2884
- text-overflow: ellipsis;
2885
- white-space: nowrap;
2886
2886
  }
2887
2887
  @supports (overflow-inline: hidden) {
2888
2888
  .c4p--combo-button__action {
2889
2889
  overflow-inline: hidden;
2890
2890
  }
2891
2891
  }
2892
+ .c4p--combo-button__action {
2893
+ text-overflow: ellipsis;
2894
+ white-space: nowrap;
2895
+ }
2892
2896
 
2893
2897
  .c4p--combo-button .c4p--combo-button__overflow-menu {
2894
2898
  background-color: var(--cds-background-brand, #0f62fe);
@@ -3126,13 +3130,15 @@ p.c4p--about-modal__copyright-text:first-child {
3126
3130
  background-color: var(--cds-background, #ffffff);
3127
3131
  color: var(--cds-text-primary, #161616);
3128
3132
  overflow-x: hidden;
3129
- padding-block-start: 1.5rem;
3130
3133
  }
3131
3134
  @supports (overflow-inline: hidden) {
3132
3135
  .c4p--create-full-page .c4p--create-full-page__content {
3133
3136
  overflow-inline: hidden;
3134
3137
  }
3135
3138
  }
3139
+ .c4p--create-full-page .c4p--create-full-page__content {
3140
+ padding-block-start: 1.5rem;
3141
+ }
3136
3142
 
3137
3143
  .c4p--create-full-page .c4p--create-full-page__step {
3138
3144
  position: relative;
@@ -3150,13 +3156,15 @@ p.c4p--about-modal__copyright-text:first-child {
3150
3156
  grid-row: 1;
3151
3157
  inset-block-start: 0;
3152
3158
  overflow-x: auto;
3153
- padding-block-start: 0;
3154
3159
  }
3155
3160
  @supports (overflow-inline: auto) {
3156
3161
  .c4p--create-full-page .cds--side-nav--ux {
3157
3162
  overflow-inline: auto;
3158
3163
  }
3159
3164
  }
3165
+ .c4p--create-full-page .cds--side-nav--ux {
3166
+ padding-block-start: 0;
3167
+ }
3160
3168
 
3161
3169
  .c4p--create-full-page .c4p--create-full-page__section-divider {
3162
3170
  position: relative;
@@ -3525,13 +3533,9 @@ p.c4p--about-modal__copyright-text:first-child {
3525
3533
  inline-size: 100%;
3526
3534
  }
3527
3535
  .c4p--side-panel.c4p--side-panel--right-placement {
3528
- border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3536
+ border-inline-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3529
3537
  inset-inline-end: 0;
3530
3538
  }
3531
- .c4p--side-panel.c4p--side-panel--left-placement {
3532
- border-inline-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3533
- inset-inline-start: 0;
3534
- }
3535
3539
  .c4p--side-panel.c4p--side-panel--left-placement .clabs__resizer {
3536
3540
  grid-column: 2;
3537
3541
  inset-inline-start: 0;
@@ -3547,6 +3551,10 @@ p.c4p--about-modal__copyright-text:first-child {
3547
3551
  transition: all 150ms linear;
3548
3552
  }
3549
3553
  }
3554
+ .c4p--side-panel.c4p--side-panel--left-placement {
3555
+ border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3556
+ inset-inline-start: 0;
3557
+ }
3550
3558
  .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-decorator {
3551
3559
  border-color: transparent;
3552
3560
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
@@ -3591,7 +3599,6 @@ p.c4p--about-modal__copyright-text:first-child {
3591
3599
  inset-block-start: calc(-1px * var(--c4p--side-panel--scroll-animation-distance));
3592
3600
  min-block-size: 2.5rem;
3593
3601
  padding-block-end: 0;
3594
- /* stylelint-disable-next-line max-nesting-depth */
3595
3602
  }
3596
3603
  .c4p--side-panel .c4p--side-panel__header.c4p--side-panel__header--has-title {
3597
3604
  min-block-size: auto;
@@ -3605,9 +3612,12 @@ p.c4p--about-modal__copyright-text:first-child {
3605
3612
  .c4p--side-panel .c4p--side-panel__header:has(.c4p--side-panel__navigation-back-button.cds--btn--md), .c4p--side-panel .c4p--side-panel__header.c4p--side-panel__header--has-navigation-back.cds--btn--md {
3606
3613
  padding-block-start: 2.5rem;
3607
3614
  }
3615
+ .c4p--side-panel .c4p--side-panel__header {
3616
+ /* stylelint-disable-next-line max-nesting-depth */
3617
+ }
3608
3618
  .c4p--side-panel .c4p--side-panel__header::before {
3609
3619
  position: absolute;
3610
- background-color: var(--cds-border-subtle-02, #e0e0e0);
3620
+ background-color: var(--cds-border-subtle-01, #c6c6c6);
3611
3621
  block-size: 1px;
3612
3622
  content: "";
3613
3623
  inline-size: 100%;
@@ -3625,7 +3635,7 @@ p.c4p--about-modal__copyright-text:first-child {
3625
3635
  }
3626
3636
  .c4p--side-panel .c4p--side-panel__header.c4p--side-panel__header--reduced-motion {
3627
3637
  z-index: 5;
3628
- border-block-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3638
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3629
3639
  margin-block-end: 1rem;
3630
3640
  }
3631
3641
  .c4p--side-panel .c4p--side-panel__header.c4p--side-panel__header--reduced-motion.c4p--side-panel__header--no-title-animation {
@@ -3798,12 +3808,9 @@ p.c4p--about-modal__copyright-text:first-child {
3798
3808
  .c4p--side-panel .c4p--side-panel__actions-container {
3799
3809
  position: sticky;
3800
3810
  background-color: var(--cds-layer-01, #f4f4f4);
3801
- border-block-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3811
+ border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3802
3812
  inset-block-end: 0;
3803
3813
  }
3804
- .c4p--side-panel .c4p--side-panel__actions-container.c4p--action-set--2xl {
3805
- flex-direction: column;
3806
- }
3807
3814
  .c4p--side-panel .c4p--side-panel__actions-container.c4p--action-set--2xl .c4p--action-set__action-button {
3808
3815
  inline-size: 100%;
3809
3816
  max-inline-size: 100%;
@@ -3816,6 +3823,9 @@ p.c4p--about-modal__copyright-text:first-child {
3816
3823
  inline-size: 25%;
3817
3824
  }
3818
3825
  }
3826
+ .c4p--side-panel .c4p--side-panel__actions-container.c4p--action-set--2xl {
3827
+ flex-direction: column;
3828
+ }
3819
3829
  .c4p--side-panel .c4p--side-panel__actions-container .c4p--action-set__action-button.c4p--action-set__action-button {
3820
3830
  block-size: var(--c4p--side-panel--actions-height);
3821
3831
  }
@@ -3909,15 +3919,323 @@ p.c4p--about-modal__copyright-text:first-child {
3909
3919
  color: var(--cds-text-secondary, #525252);
3910
3920
  }
3911
3921
 
3922
+ /**
3923
+ * Copyright IBM Corp. 2025
3924
+ *
3925
+ * This source code is licensed under the Apache-2.0 license found in the
3926
+ * LICENSE file in the root directory of this source tree.
3927
+ */
3928
+ .c4p--tearsheet__next .c4p--tearsheet__next__container {
3929
+ align-self: flex-end;
3930
+ block-size: 100%;
3931
+ inset-block-start: auto;
3932
+ max-block-size: calc(100% - 3rem);
3933
+ transform: translate3d(0, min(95vh, 500px), 0);
3934
+ }
3935
+ @media (max-width: 41.98rem) {
3936
+ .c4p--tearsheet__next .c4p--tearsheet__next__container {
3937
+ max-block-size: none;
3938
+ }
3939
+ }
3940
+ .c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container {
3941
+ border: 1px solid transparent;
3942
+ /* override carbon ai removing background gradient */
3943
+ background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
3944
+ border-block-end: 0;
3945
+ box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
3946
+ }
3947
+ .c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container {
3948
+ transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
3949
+ }
3950
+ @media (min-width: 42rem) {
3951
+ .c4p--tearsheet__next.c4p--tearsheet__next--wide .c4p--tearsheet__next__container {
3952
+ inline-size: calc(100% - 2 * 4rem);
3953
+ }
3954
+ }
3955
+ .c4p--tearsheet__next .c4p--tearsheet__next__header {
3956
+ display: flex;
3957
+ flex-wrap: wrap;
3958
+ align-content: space-between;
3959
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3960
+ margin-block: 0;
3961
+ max-block-size: 50vh;
3962
+ padding-block-end: 0;
3963
+ padding-block-start: 1.5rem;
3964
+ padding-inline: 2rem;
3965
+ }
3966
+ .c4p--tearsheet__next .c4p--tearsheet__next__header > * {
3967
+ flex-basis: 100%;
3968
+ }
3969
+ .c4p--tearsheet__next .c4p--tearsheet__next__header > *:not(.c4p--tearsheet__next__navigation-bar,
3970
+ .c4p--tearsheet__next__header-content-wrapper,
3971
+ .cds--modal-close-button) {
3972
+ margin-block-end: 1.5rem;
3973
+ }
3974
+ @media (max-width: 41.98rem) {
3975
+ .c4p--tearsheet__next .c4p--tearsheet__next__header {
3976
+ padding-inline: 1rem;
3977
+ }
3978
+ }
3979
+ .c4p--tearsheet__next .cds--modal-container--sm .cds--modal-header {
3980
+ padding-inline-end: 2rem;
3981
+ }
3982
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper {
3983
+ display: grid;
3984
+ flex-basis: unset;
3985
+ gap: 1rem;
3986
+ grid-template-columns: auto minmax(var(--tearsheet-header-title-grid-width, 0), 1fr);
3987
+ inline-size: calc(100% - var(--tearsheet-header-action-offset));
3988
+ }
3989
+ @media (max-width: 41.98rem) {
3990
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-content-wrapper {
3991
+ display: flex;
3992
+ flex-direction: column;
3993
+ }
3994
+ }
3995
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-content,
3996
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-actions {
3997
+ margin-block-end: 1.5rem;
3998
+ }
3999
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-label {
4000
+ font-size: var(--cds-label-01-font-size, 0.75rem);
4001
+ font-weight: var(--cds-label-01-font-weight, 400);
4002
+ line-height: var(--cds-label-01-line-height, 1.33333);
4003
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
4004
+ margin-block-end: 0.25rem;
4005
+ }
4006
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-title {
4007
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
4008
+ font-weight: var(--cds-heading-04-font-weight, 400);
4009
+ line-height: var(--cds-heading-04-line-height, 1.28572);
4010
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
4011
+ }
4012
+ @media (max-width: 41.98rem) {
4013
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-title {
4014
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
4015
+ font-weight: var(--cds-heading-03-font-weight, 400);
4016
+ line-height: var(--cds-heading-03-line-height, 1.4);
4017
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
4018
+ }
4019
+ }
4020
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-title {
4021
+ display: flex;
4022
+ align-items: flex-start;
4023
+ margin-block-end: 0.5rem;
4024
+ }
4025
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-title svg {
4026
+ flex-shrink: 0;
4027
+ }
4028
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__leading-icon {
4029
+ flex-direction: row;
4030
+ }
4031
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__leading-icon svg {
4032
+ margin-inline-end: 1rem;
4033
+ }
4034
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__trailing-icon {
4035
+ flex-direction: row-reverse;
4036
+ justify-content: flex-end;
4037
+ }
4038
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__trailing-icon svg {
4039
+ margin-inline-start: 1rem;
4040
+ }
4041
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-description {
4042
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
4043
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
4044
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
4045
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
4046
+ }
4047
+ .c4p--tearsheet__next .c4p--tearsheet__next__header--no-close-icon {
4048
+ display: none;
4049
+ }
4050
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-content {
4051
+ max-inline-size: 40rem;
4052
+ }
4053
+ .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar {
4054
+ position: relative;
4055
+ display: flex;
4056
+ align-items: center;
4057
+ justify-content: space-between;
4058
+ gap: 4rem;
4059
+ max-inline-size: 100%;
4060
+ min-block-size: 2.5rem;
4061
+ }
4062
+ .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar .c4p--tearsheet__next__scroller-container {
4063
+ position: absolute;
4064
+ inset-inline-end: -2rem;
4065
+ margin-inline-end: 1px;
4066
+ }
4067
+ @media (max-width: 41.98rem) {
4068
+ .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar .c4p--tearsheet__next__scroller-container {
4069
+ inset-inline-end: -1rem;
4070
+ }
4071
+ }
4072
+ .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar .c4p--tearsheet__next__scroller-container .c4p--tearsheet__next__scroller-button-icon-collapsed {
4073
+ transform: rotate(-180deg);
4074
+ }
4075
+ .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar .cds--tabs {
4076
+ margin-inline-start: -1rem;
4077
+ }
4078
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-actions {
4079
+ display: flex;
4080
+ justify-content: flex-end;
4081
+ }
4082
+ .c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions {
4083
+ display: flex;
4084
+ overflow: hidden;
4085
+ flex: 0 0 auto;
4086
+ align-items: center;
4087
+ justify-content: flex-end;
4088
+ block-size: 2rem;
4089
+ inline-size: 100%;
4090
+ margin-block-start: -14px;
4091
+ }
4092
+ .c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > *:not([hidden]) + *:not([hidden]) {
4093
+ padding-inline-start: 0.5rem;
4094
+ }
4095
+ .c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > * {
4096
+ flex-shrink: 0;
4097
+ }
4098
+ @media (max-width: 41.98rem) {
4099
+ .c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions {
4100
+ justify-content: flex-start;
4101
+ margin-inline-end: 0;
4102
+ }
4103
+ }
4104
+ .c4p--tearsheet__next .c4p--tearsheet__next__header {
4105
+ opacity: 1;
4106
+ }
4107
+ .c4p--tearsheet__next .c4p--tearsheet__next__header > *:not(.c4p--tearsheet__next__navigation-bar,
4108
+ .c4p--tearsheet__next__header-content-wrapper,
4109
+ .cds--modal-close-button),
4110
+ .c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper) {
4111
+ overflow: hidden;
4112
+ max-block-size: 50vh;
4113
+ opacity: 1;
4114
+ transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
4115
+ }
4116
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
4117
+ .c4p--tearsheet__next__header-content-wrapper,
4118
+ .cds--modal-close-button,
4119
+ .excludeFromCollapse),
4120
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions > *:not(.c4p--tearsheet__next__content__header-actions),
4121
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper),
4122
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
4123
+ .c4p--tearsheet__next__header-content-wrapper,
4124
+ .cds--modal-close-button,
4125
+ .excludeFromCollapse) * {
4126
+ overflow: hidden;
4127
+ padding: 0;
4128
+ margin: 0;
4129
+ max-block-size: 0;
4130
+ min-block-size: 0;
4131
+ opacity: 0;
4132
+ transition: all 240ms ease;
4133
+ visibility: hidden;
4134
+ }
4135
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,
4136
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,
4137
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,
4138
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions .c4p--tearsheet__next__header-title {
4139
+ margin-block: 0;
4140
+ transition: all 240ms ease;
4141
+ }
4142
+ .c4p--tearsheet__next .c4p--tearsheet__next__body-layout {
4143
+ display: grid;
4144
+ grid-template-areas: "influencer body" "influencer footer";
4145
+ grid-template-columns: var(--tearsheet-influencer-width, 16rem) 1fr;
4146
+ grid-template-rows: 1fr auto;
4147
+ padding-block: 0;
4148
+ padding-inline-end: 0;
4149
+ /* Redefine grid when influencer is absent */
4150
+ }
4151
+ .c4p--tearsheet__next .c4p--tearsheet__next__body-layout:not(:has(> .c4p--tearsheet__next__influencer)) {
4152
+ grid-template-areas: "body" "footer";
4153
+ grid-template-columns: 1fr;
4154
+ }
4155
+ .c4p--tearsheet__next {
4156
+ /* Assign components to their named grid areas */
4157
+ }
4158
+ .c4p--tearsheet__next .c4p--tearsheet__next__influencer {
4159
+ grid-area: influencer;
4160
+ }
4161
+ .c4p--tearsheet__next .c4p--tearsheet__next__body {
4162
+ position: relative;
4163
+ display: grid;
4164
+ overflow: hidden;
4165
+ grid-area: body;
4166
+ grid-template-columns: 1fr var(--tearsheet-summary-content-width, 16rem);
4167
+ }
4168
+ @media (max-width: 41.98rem) {
4169
+ .c4p--tearsheet__next .c4p--tearsheet__next__body {
4170
+ grid-template-columns: 1fr 0;
4171
+ }
4172
+ }
4173
+ .c4p--tearsheet__next .c4p--tearsheet__next__body > *:only-child {
4174
+ grid-column: 1/-1;
4175
+ }
4176
+ .c4p--tearsheet__next .c4p--tearsheet__next__footer {
4177
+ border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4178
+ grid-area: footer;
4179
+ }
4180
+ .c4p--tearsheet__next .c4p--tearsheet__next__influencer,
4181
+ .c4p--tearsheet__next .c4p--tearsheet__next__main-content,
4182
+ .c4p--tearsheet__next .c4p--tearsheet__next__summary-content {
4183
+ overflow: auto;
4184
+ padding-inline: 2rem;
4185
+ }
4186
+ @media (max-width: 41.98rem) {
4187
+ .c4p--tearsheet__next .c4p--tearsheet__next__influencer,
4188
+ .c4p--tearsheet__next .c4p--tearsheet__next__main-content,
4189
+ .c4p--tearsheet__next .c4p--tearsheet__next__summary-content {
4190
+ padding-inline: 1rem;
4191
+ }
4192
+ }
4193
+ .c4p--tearsheet__next .c4p--tearsheet__next__main-content {
4194
+ position: relative;
4195
+ background: linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, var(--cds-ai-popover-background, #ffffff))) border-box;
4196
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
4197
+ }
4198
+ .c4p--tearsheet__next .c4p--side-panel {
4199
+ position: absolute;
4200
+ z-index: 9999;
4201
+ block-size: 100%;
4202
+ inline-size: 100%;
4203
+ inset-block-start: 0;
4204
+ max-inline-size: none;
4205
+ }
4206
+ .c4p--tearsheet__next .c4p--side-panel .c4p--side-panel__header {
4207
+ min-block-size: 0;
4208
+ }
4209
+
4210
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__header {
4211
+ padding-inline: 1rem;
4212
+ }
4213
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-content-wrapper {
4214
+ display: flex;
4215
+ flex-direction: column;
4216
+ }
4217
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-title {
4218
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
4219
+ font-weight: var(--cds-heading-03-font-weight, 400);
4220
+ line-height: var(--cds-heading-03-line-height, 1.4);
4221
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
4222
+ }
4223
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions {
4224
+ justify-content: flex-start;
4225
+ margin-inline-end: 0;
4226
+ }
4227
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__body {
4228
+ grid-template-columns: 1fr 0;
4229
+ }
4230
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer,
4231
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content,
4232
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content {
4233
+ padding-inline: 1rem;
4234
+ }
4235
+
3912
4236
  .c4p--tearsheet.c4p--tearsheet {
3913
4237
  --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
3914
4238
  --overlay-opacity: 1;
3915
- z-index: 9001;
3916
- align-items: flex-end;
3917
- color: var(--cds-text-primary, #161616);
3918
- transition: visibility 0s linear 240ms, background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
3919
- --c4p--tearsheet--stacking-scale-factor-single: 0.95;
3920
- --c4p--tearsheet--stacking-scale-factor-double: 0.9;
3921
4239
  }
3922
4240
  .c4p--tearsheet.c4p--tearsheet::before {
3923
4241
  position: absolute;
@@ -3937,6 +4255,14 @@ p.c4p--about-modal__copyright-text:first-child {
3937
4255
  /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
3938
4256
  background: initial;
3939
4257
  }
4258
+ .c4p--tearsheet.c4p--tearsheet {
4259
+ z-index: 9001;
4260
+ align-items: flex-end;
4261
+ color: var(--cds-text-primary, #161616);
4262
+ transition: visibility 0s linear 240ms, background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
4263
+ --c4p--tearsheet--stacking-scale-factor-single: 0.95;
4264
+ --c4p--tearsheet--stacking-scale-factor-double: 0.9;
4265
+ }
3940
4266
  .c4p--tearsheet.is-visible {
3941
4267
  z-index: 9000;
3942
4268
  align-items: flex-end;
@@ -4010,8 +4336,10 @@ p.c4p--about-modal__copyright-text:first-child {
4010
4336
  .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3.is-visible .c4p--tearsheet__container {
4011
4337
  transform: scale(var(--c4p--tearsheet--stacking-scale-factor-double));
4012
4338
  }
4339
+ .c4p--tearsheet .c4p--tearsheet__header {
4340
+ min-block-size: fit-content;
4341
+ }
4013
4342
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
4014
- overflow: visible;
4015
4343
  padding: 1.5rem 2rem;
4016
4344
  margin: 0;
4017
4345
  background-color: var(--cds-layer);
@@ -4088,6 +4416,7 @@ p.c4p--about-modal__copyright-text:first-child {
4088
4416
  }
4089
4417
  .c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__body {
4090
4418
  display: flex;
4419
+ overflow: hidden;
4091
4420
  flex-direction: row;
4092
4421
  padding: 0;
4093
4422
  margin: 0;
@@ -4168,6 +4497,7 @@ p.c4p--about-modal__copyright-text:first-child {
4168
4497
  .c4p--tearsheet .c4p--tearsheet__button-container {
4169
4498
  grid-column: 1/-1;
4170
4499
  grid-row: -1/-1;
4500
+ min-block-size: fit-content;
4171
4501
  overflow-x: auto;
4172
4502
  }
4173
4503
  @supports (overflow-inline: auto) {
@@ -4241,13 +4571,15 @@ p.c4p--about-modal__copyright-text:first-child {
4241
4571
  .c4p--tearsheet-create .c4p--tearsheet-create__content {
4242
4572
  min-block-size: 100%;
4243
4573
  overflow-x: hidden;
4244
- padding-block: 1.5rem;
4245
4574
  }
4246
4575
  @supports (overflow-inline: hidden) {
4247
4576
  .c4p--tearsheet-create .c4p--tearsheet-create__content {
4248
4577
  overflow-inline: hidden;
4249
4578
  }
4250
4579
  }
4580
+ .c4p--tearsheet-create .c4p--tearsheet-create__content {
4581
+ padding-block: 1.5rem;
4582
+ }
4251
4583
 
4252
4584
  .c4p--tearsheet-create .c4p--tearsheet-create__content .cds--form {
4253
4585
  block-size: inherit;
@@ -4696,7 +5028,7 @@ p.c4p--about-modal__copyright-text:first-child {
4696
5028
  }
4697
5029
  .c4p--filter-summary {
4698
5030
  display: flex;
4699
- align-items: flex-start;
5031
+ align-items: center;
4700
5032
  padding: 0.5rem;
4701
5033
  background: var(--cds-layer-01, #f4f4f4);
4702
5034
  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
@@ -7265,6 +7597,10 @@ button.c4p--add-select__global-filter-toggle--open {
7265
7597
  max-inline-size: 0;
7266
7598
  visibility: hidden;
7267
7599
  }
7600
+ .c4p--tag-set .cds--tag {
7601
+ margin-block-end: 0.5rem;
7602
+ margin-inline-end: 0.5rem;
7603
+ }
7268
7604
 
7269
7605
  .c4p--tag-set-modal.c4p--tag-set-modal {
7270
7606
  text-align: initial;
@@ -7283,6 +7619,10 @@ button.c4p--add-select__global-filter-toggle--open {
7283
7619
  margin-inline-end: 1rem;
7284
7620
  padding-inline-end: 0;
7285
7621
  }
7622
+ .c4p--tag-set-modal .c4p--tag-set-modal__body .cds--tag {
7623
+ margin-block-end: 0.5rem;
7624
+ margin-inline-end: 0.5rem;
7625
+ }
7286
7626
 
7287
7627
  .c4p--tag-set-overflow__tagset-popover.c4p--tag-set-overflow__tagset-popover {
7288
7628
  min-inline-size: initial;
@@ -7301,7 +7641,7 @@ button.c4p--add-select__global-filter-toggle--open {
7301
7641
  color: var(--cds-link-inverse, #78a9ff);
7302
7642
  margin-block-start: 0.5rem;
7303
7643
  }
7304
- .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link:hover {
7644
+ .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link:hover, .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link:visited:hover {
7305
7645
  color: var(--cds-link-inverse-hover, #a6c8ff);
7306
7646
  }
7307
7647
  .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link:focus {
@@ -7312,6 +7652,7 @@ button.c4p--add-select__global-filter-toggle--open {
7312
7652
  }
7313
7653
  .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--tag .cds--tag {
7314
7654
  background-color: var(--cds-background-inverse-hover, #474747);
7655
+ margin-block-end: 0.125rem;
7315
7656
  }
7316
7657
  .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--default,
7317
7658
  .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--default .cds--tag {
@@ -7994,13 +8335,6 @@ button.c4p--add-select__global-filter-toggle--open {
7994
8335
  padding: 1.5rem 0;
7995
8336
  background-color: var(--cds-layer);
7996
8337
  }
7997
- .c4p--page-header__next .c4p--page-header__content__title-wrapper {
7998
- display: grid;
7999
- gap: 1rem;
8000
- grid-template-columns: auto minmax(var(--page-header-title-grid-width, 0), 1fr);
8001
- margin-block-end: 1rem;
8002
- min-block-size: 2.5rem;
8003
- }
8004
8338
  @media (max-width: 41.98rem) {
8005
8339
  .c4p--page-header__next .c4p--page-header__content__title-wrapper {
8006
8340
  display: flex;
@@ -8008,6 +8342,13 @@ button.c4p--add-select__global-filter-toggle--open {
8008
8342
  grid-gap: 1rem;
8009
8343
  }
8010
8344
  }
8345
+ .c4p--page-header__next .c4p--page-header__content__title-wrapper {
8346
+ display: grid;
8347
+ gap: 1rem;
8348
+ grid-template-columns: auto minmax(var(--page-header-title-grid-width, 0), 1fr);
8349
+ margin-block-end: 1rem;
8350
+ min-block-size: 2.5rem;
8351
+ }
8011
8352
  .c4p--page-header__next .c4p--page-header__content__start {
8012
8353
  display: flex;
8013
8354
  flex-wrap: wrap;
@@ -8152,6 +8493,9 @@ button.c4p--add-select__global-filter-toggle--open {
8152
8493
  transform: translateX(2.5rem);
8153
8494
  }
8154
8495
  }
8496
+ .c4p--page-header__next .c4p--page-header--tag-overflow-container .cds--tag {
8497
+ margin-inline-end: 0.5rem;
8498
+ }
8155
8499
  .c4p--page-header__next .c4p--page-header--tag-overflow-popover__hidden {
8156
8500
  visibility: hidden;
8157
8501
  }
@@ -8282,8 +8626,6 @@ button.c4p--add-select__global-filter-toggle--open {
8282
8626
  min-block-size: 2rem;
8283
8627
  padding-inline: 0.625rem;
8284
8628
  /* stylelint-disable-next-line max-nesting-depth */
8285
- /* stylelint-disable-next-line max-nesting-depth */
8286
- /* stylelint-disable-next-line max-nesting-depth */
8287
8629
  }
8288
8630
  .c4p--card__productive .c4p--card__actions-header-ghost-button::before {
8289
8631
  position: absolute;
@@ -8294,6 +8636,9 @@ button.c4p--add-select__global-filter-toggle--open {
8294
8636
  inset-inline-start: 0;
8295
8637
  opacity: 1;
8296
8638
  }
8639
+ .c4p--card__productive .c4p--card__actions-header-ghost-button {
8640
+ /* stylelint-disable-next-line max-nesting-depth */
8641
+ }
8297
8642
  .c4p--card__productive .c4p--card__actions-header-ghost-button:hover {
8298
8643
  /* stylelint-disable-next-line max-nesting-depth */
8299
8644
  }
@@ -8306,6 +8651,9 @@ button.c4p--add-select__global-filter-toggle--open {
8306
8651
  .c4p--card__productive .c4p--card__actions-header-ghost-button:hover + .c4p--card__actions-header-ghost-button::before {
8307
8652
  opacity: 0;
8308
8653
  }
8654
+ .c4p--card__productive .c4p--card__actions-header-ghost-button {
8655
+ /* stylelint-disable-next-line max-nesting-depth */
8656
+ }
8309
8657
  .c4p--card__productive .c4p--card__actions-header-ghost-button:first-child:not(:last-child) {
8310
8658
  /* stylelint-disable-next-line max-nesting-depth */
8311
8659
  }
@@ -8604,12 +8952,6 @@ button.c4p--add-select__global-filter-toggle--open {
8604
8952
  }
8605
8953
  }
8606
8954
 
8607
- .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-in-progress,
8608
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
8609
- .c4p--status-icon--light.c4p--status-icon--light-in-progress {
8610
- animation: rotating 8000ms infinite linear;
8611
- fill: #0f62fe;
8612
- }
8613
8955
  @media (prefers-reduced-motion: reduce) {
8614
8956
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-in-progress,
8615
8957
  .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
@@ -8617,13 +8959,13 @@ button.c4p--add-select__global-filter-toggle--open {
8617
8959
  animation: none;
8618
8960
  }
8619
8961
  }
8620
-
8621
- .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
8622
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
8623
- .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
8962
+ .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-in-progress,
8963
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
8964
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
8624
8965
  animation: rotating 8000ms infinite linear;
8625
8966
  fill: #0f62fe;
8626
8967
  }
8968
+
8627
8969
  @media (prefers-reduced-motion: reduce) {
8628
8970
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
8629
8971
  .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
@@ -8631,6 +8973,12 @@ button.c4p--add-select__global-filter-toggle--open {
8631
8973
  animation: none;
8632
8974
  }
8633
8975
  }
8976
+ .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
8977
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
8978
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
8979
+ animation: rotating 8000ms infinite linear;
8980
+ fill: #0f62fe;
8981
+ }
8634
8982
 
8635
8983
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--light.c4p--status-icon--light-running,
8636
8984
  .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-running,
@@ -8878,12 +9226,6 @@ button.c4p--add-select__global-filter-toggle--open {
8878
9226
  }
8879
9227
  }
8880
9228
 
8881
- .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
8882
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
8883
- .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
8884
- animation: rotating 8000ms infinite linear;
8885
- fill: #4589ff;
8886
- }
8887
9229
  @media (prefers-reduced-motion: reduce) {
8888
9230
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
8889
9231
  .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
@@ -8891,13 +9233,13 @@ button.c4p--add-select__global-filter-toggle--open {
8891
9233
  animation: none;
8892
9234
  }
8893
9235
  }
8894
-
8895
- .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
8896
- .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
8897
- .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
9236
+ .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
9237
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
9238
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
8898
9239
  animation: rotating 8000ms infinite linear;
8899
9240
  fill: #4589ff;
8900
9241
  }
9242
+
8901
9243
  @media (prefers-reduced-motion: reduce) {
8902
9244
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
8903
9245
  .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
@@ -8905,6 +9247,12 @@ button.c4p--add-select__global-filter-toggle--open {
8905
9247
  animation: none;
8906
9248
  }
8907
9249
  }
9250
+ .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
9251
+ .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
9252
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
9253
+ animation: rotating 8000ms infinite linear;
9254
+ fill: #4589ff;
9255
+ }
8908
9256
 
8909
9257
  .cds--btn--ghost:not([disabled]) .c4p--status-icon--dark.c4p--status-icon--light-running,
8910
9258
  .cds--btn.cds--btn--icon-only.cds--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-running,
@@ -8944,17 +9292,17 @@ button.c4p--add-select__global-filter-toggle--open {
8944
9292
  }
8945
9293
  }
8946
9294
 
9295
+ @media (min-width: 66rem) {
9296
+ .c4p--toolbar {
9297
+ justify-content: flex-end;
9298
+ }
9299
+ }
8947
9300
  .c4p--toolbar {
8948
9301
  display: flex;
8949
9302
  background-color: var(--cds-layer-01, #f4f4f4);
8950
9303
  min-block-size: 2.5rem;
8951
9304
  min-inline-size: 2.5rem;
8952
9305
  }
8953
- @media (min-width: 66rem) {
8954
- .c4p--toolbar {
8955
- justify-content: flex-end;
8956
- }
8957
- }
8958
9306
 
8959
9307
  .c4p--toolbar--vertical,
8960
9308
  .c4p--toolbar--vertical > .c4p--toolbar__group {
@@ -9441,29 +9789,6 @@ button.c4p--add-select__global-filter-toggle--open {
9441
9789
  --cds-fluid-display-04-font-weight: 300;
9442
9790
  --cds-fluid-display-04-line-height: 1.19;
9443
9791
  --cds-fluid-display-04-letter-spacing: 0;
9444
- --cds-layer: var(--cds-layer-01, #f4f4f4);
9445
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
9446
- --cds-layer-background: var(--cds-layer-background-01, #ffffff);
9447
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
9448
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
9449
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
9450
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
9451
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
9452
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
9453
- --cds-field: var(--cds-field-01, #f4f4f4);
9454
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
9455
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
9456
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
9457
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
9458
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
9459
- position: fixed;
9460
- block-size: calc(100vh - 3rem);
9461
- border-inline-start: 1px solid #262626;
9462
- color: var(--cds-text-primary, #161616);
9463
- inline-size: 100%;
9464
- inset-block-start: 3rem;
9465
- inset-inline-end: 0;
9466
- max-inline-size: 40rem;
9467
9792
  }
9468
9793
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9469
9794
  .c4p--web-terminal {
@@ -9489,6 +9814,31 @@ button.c4p--add-select__global-filter-toggle--open {
9489
9814
  --cds-layer-selected-inverse: SelectedItem;
9490
9815
  }
9491
9816
  }
9817
+ .c4p--web-terminal {
9818
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
9819
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
9820
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
9821
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
9822
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
9823
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
9824
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
9825
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
9826
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
9827
+ --cds-field: var(--cds-field-01, #f4f4f4);
9828
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
9829
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
9830
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
9831
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
9832
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
9833
+ position: fixed;
9834
+ block-size: calc(100vh - 3rem);
9835
+ border-inline-start: 1px solid #262626;
9836
+ color: var(--cds-text-primary, #161616);
9837
+ inline-size: 100%;
9838
+ inset-block-start: 3rem;
9839
+ inset-inline-end: 0;
9840
+ max-inline-size: 40rem;
9841
+ }
9492
9842
  @media (prefers-reduced-motion) {
9493
9843
  .c4p--web-terminal {
9494
9844
  animation: none;
@@ -9904,21 +10254,6 @@ button.c4p--add-select__global-filter-toggle--open {
9904
10254
  --cds-fluid-display-04-font-weight: 300;
9905
10255
  --cds-fluid-display-04-line-height: 1.19;
9906
10256
  --cds-fluid-display-04-letter-spacing: 0;
9907
- --cds-layer: var(--cds-layer-01, #f4f4f4);
9908
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
9909
- --cds-layer-background: var(--cds-layer-background-01, #ffffff);
9910
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
9911
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
9912
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
9913
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
9914
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
9915
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
9916
- --cds-field: var(--cds-field-01, #f4f4f4);
9917
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
9918
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
9919
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
9920
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
9921
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
9922
10257
  }
9923
10258
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9924
10259
  .c4p--web-terminal__documentation-overflow {
@@ -9944,6 +10279,23 @@ button.c4p--add-select__global-filter-toggle--open {
9944
10279
  --cds-layer-selected-inverse: SelectedItem;
9945
10280
  }
9946
10281
  }
10282
+ .c4p--web-terminal__documentation-overflow {
10283
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
10284
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
10285
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
10286
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
10287
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
10288
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
10289
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
10290
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
10291
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
10292
+ --cds-field: var(--cds-field-01, #f4f4f4);
10293
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
10294
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
10295
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
10296
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
10297
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
10298
+ }
9947
10299
 
9948
10300
  .c4p--web-terminal__documentation-overflow .cds--overflow-menu-options__btn {
9949
10301
  text-decoration: none;
@@ -10545,7 +10897,6 @@ button.c4p--add-select__global-filter-toggle--open {
10545
10897
  --c4p--data-spreadsheet--total-width: 0;
10546
10898
  display: inline-block;
10547
10899
  border-spacing: 0;
10548
- /* stylelint-disable-next-line max-nesting-depth */
10549
10900
  }
10550
10901
  .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10551
10902
  outline: 2px solid var(--cds-link-inverse, #78a9ff);
@@ -10573,6 +10924,9 @@ button.c4p--add-select__global-filter-toggle--open {
10573
10924
  .c4p--data-spreadsheet .c4p--data-spreadsheet__body--td {
10574
10925
  color: var(--cds-text-secondary, #525252);
10575
10926
  }
10927
+ .c4p--data-spreadsheet {
10928
+ /* stylelint-disable-next-line max-nesting-depth */
10929
+ }
10576
10930
  .c4p--data-spreadsheet [role="'columnheader'"]:last-child,
10577
10931
  .c4p--data-spreadsheet [role="'gridcell'"]:last-child {
10578
10932
  border-inline-end: 1px solid var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
@@ -10697,12 +11051,14 @@ button.c4p--add-select__global-filter-toggle--open {
10697
11051
  padding-inline: 0.375rem calc(0.5rem - 1px);
10698
11052
  text-align: start;
10699
11053
  /* stylelint-disable-next-line max-nesting-depth */
10700
- /* stylelint-disable-next-line max-nesting-depth */
10701
11054
  }
10702
11055
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-row-index=header], .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-column-index=header] {
10703
11056
  z-index: 4;
10704
11057
  background-color: transparent;
10705
11058
  }
11059
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight {
11060
+ /* stylelint-disable-next-line max-nesting-depth */
11061
+ }
10706
11062
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight:focus {
10707
11063
  border: 0.125rem solid var(--cds-background-brand, #0f62fe);
10708
11064
  outline: 0;
@@ -11752,17 +12108,17 @@ button.c4p--add-select__global-filter-toggle--open {
11752
12108
  inline-size: calc(100% + 2rem);
11753
12109
  }
11754
12110
 
11755
- .c4p--datagrid__sortableColumn:hover,
11756
- .c4p--datagrid__sortableColumn:focus-within,
11757
- .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted {
11758
- background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11759
- }
11760
12111
  .c4p--datagrid__sortableColumn:hover .cds--table-header-label .c4p--datagrid__sortable-icon,
11761
12112
  .c4p--datagrid__sortableColumn:focus-within .cds--table-header-label .c4p--datagrid__sortable-icon,
11762
12113
  .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .cds--table-header-label .c4p--datagrid__sortable-icon {
11763
12114
  opacity: 1;
11764
12115
  visibility: visible;
11765
12116
  }
12117
+ .c4p--datagrid__sortableColumn:hover,
12118
+ .c4p--datagrid__sortableColumn:focus-within,
12119
+ .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted {
12120
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
12121
+ }
11766
12122
 
11767
12123
  /**
11768
12124
  * Copyright IBM Corp. 2024
@@ -12672,7 +13028,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
12672
13028
  inline-size: 100%;
12673
13029
  outline: 0;
12674
13030
  padding-inline-start: 1rem;
12675
- /* stylelint-disable-next-line */
12676
13031
  }
12677
13032
  .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
12678
13033
  block-size: 1rem;
@@ -12695,6 +13050,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
12695
13050
  .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
12696
13051
  display: none;
12697
13052
  }
13053
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
13054
+ /* stylelint-disable-next-line */
13055
+ }
12698
13056
  .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:hover .c4p--datagrid__inline-edit-button-icon, .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active .c4p--datagrid__inline-edit-button-icon {
12699
13057
  display: block;
12700
13058
  }
@@ -12994,7 +13352,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
12994
13352
  .c4p--tearsheet-edit .c4p--tearsheet-edit__content {
12995
13353
  block-size: 100%;
12996
13354
  overflow-x: hidden;
12997
- padding-block: 1.5rem;
12998
13355
  }
12999
13356
  @supports (overflow-inline: hidden) {
13000
13357
  .c4p--tearsheet-edit .c4p--tearsheet-edit__content {
@@ -13002,6 +13359,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
13002
13359
  overflow-inline: hidden;
13003
13360
  }
13004
13361
  }
13362
+ .c4p--tearsheet-edit .c4p--tearsheet-edit__content {
13363
+ padding-block: 1.5rem;
13364
+ }
13005
13365
 
13006
13366
  .c4p--tearsheet-edit .c4p--tearsheet-edit__content .cds--css-grid {
13007
13367
  margin-inline-start: 0;
@@ -13722,40 +14082,22 @@ th.c4p--datagrid__select-all-toggle-on.button {
13722
14082
  --cds-fluid-quotation-02-line-height: 1.25;
13723
14083
  --cds-fluid-quotation-02-letter-spacing: 0;
13724
14084
  --cds-fluid-display-01-font-size: 2.625rem;
13725
- --cds-fluid-display-01-font-weight: 300;
13726
- --cds-fluid-display-01-line-height: 1.19;
13727
- --cds-fluid-display-01-letter-spacing: 0;
13728
- --cds-fluid-display-02-font-size: 2.625rem;
13729
- --cds-fluid-display-02-font-weight: 600;
13730
- --cds-fluid-display-02-line-height: 1.19;
13731
- --cds-fluid-display-02-letter-spacing: 0;
13732
- --cds-fluid-display-03-font-size: 2.625rem;
13733
- --cds-fluid-display-03-font-weight: 300;
13734
- --cds-fluid-display-03-line-height: 1.19;
13735
- --cds-fluid-display-03-letter-spacing: 0;
13736
- --cds-fluid-display-04-font-size: 2.625rem;
13737
- --cds-fluid-display-04-font-weight: 300;
13738
- --cds-fluid-display-04-line-height: 1.19;
13739
- --cds-fluid-display-04-letter-spacing: 0;
13740
- --cds-true: ;
13741
- --cds-layer: var(--cds-layer-01, #f4f4f4);
13742
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
13743
- --cds-layer-background: var(--cds-layer-background-01, #ffffff);
13744
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
13745
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
13746
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
13747
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
13748
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
13749
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
13750
- --cds-field: var(--cds-field-01, #f4f4f4);
13751
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
13752
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
13753
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
13754
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
13755
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
13756
- position: relative;
13757
- background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
13758
- background-color: #001d6c;
14085
+ --cds-fluid-display-01-font-weight: 300;
14086
+ --cds-fluid-display-01-line-height: 1.19;
14087
+ --cds-fluid-display-01-letter-spacing: 0;
14088
+ --cds-fluid-display-02-font-size: 2.625rem;
14089
+ --cds-fluid-display-02-font-weight: 600;
14090
+ --cds-fluid-display-02-line-height: 1.19;
14091
+ --cds-fluid-display-02-letter-spacing: 0;
14092
+ --cds-fluid-display-03-font-size: 2.625rem;
14093
+ --cds-fluid-display-03-font-weight: 300;
14094
+ --cds-fluid-display-03-line-height: 1.19;
14095
+ --cds-fluid-display-03-letter-spacing: 0;
14096
+ --cds-fluid-display-04-font-size: 2.625rem;
14097
+ --cds-fluid-display-04-font-weight: 300;
14098
+ --cds-fluid-display-04-line-height: 1.19;
14099
+ --cds-fluid-display-04-letter-spacing: 0;
14100
+ --cds-true: ;
13759
14101
  }
13760
14102
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
13761
14103
  .c4p--guidebanner {
@@ -13781,6 +14123,26 @@ th.c4p--datagrid__select-all-toggle-on.button {
13781
14123
  --cds-layer-selected-inverse: SelectedItem;
13782
14124
  }
13783
14125
  }
14126
+ .c4p--guidebanner {
14127
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
14128
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14129
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
14130
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14131
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14132
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14133
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14134
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14135
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14136
+ --cds-field: var(--cds-field-01, #f4f4f4);
14137
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14138
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14139
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14140
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14141
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14142
+ position: relative;
14143
+ background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
14144
+ background-color: #001d6c;
14145
+ }
13784
14146
 
13785
14147
  .c4p--guidebanner__icon-idea {
13786
14148
  position: absolute;
@@ -14571,21 +14933,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
14571
14933
  --cds-fluid-display-04-line-height: 1.19;
14572
14934
  --cds-fluid-display-04-letter-spacing: 0;
14573
14935
  --cds-true: ;
14574
- --cds-layer: var(--cds-layer-01, #f4f4f4);
14575
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14576
- --cds-layer-background: var(--cds-layer-background-01, #ffffff);
14577
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14578
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14579
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14580
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14581
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14582
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14583
- --cds-field: var(--cds-field-01, #f4f4f4);
14584
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14585
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14586
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14587
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14588
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14589
14936
  }
14590
14937
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
14591
14938
  .c4p--non-linear-reading__dark {
@@ -14611,6 +14958,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
14611
14958
  --cds-layer-selected-inverse: SelectedItem;
14612
14959
  }
14613
14960
  }
14961
+ .c4p--non-linear-reading__dark {
14962
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
14963
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
14964
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
14965
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
14966
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
14967
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
14968
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
14969
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
14970
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14971
+ --cds-field: var(--cds-field-01, #f4f4f4);
14972
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14973
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
14974
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14975
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14976
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14977
+ }
14614
14978
 
14615
14979
  .c4p--non-linear-reading .c4p--non-linear-reading__keyword {
14616
14980
  border-width: 0.0625rem;
@@ -15418,21 +15782,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
15418
15782
  --cds-fluid-display-04-line-height: 1.19;
15419
15783
  --cds-fluid-display-04-letter-spacing: 0;
15420
15784
  --cds-true: ;
15421
- --cds-layer: var(--cds-layer-01, #f4f4f4);
15422
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
15423
- --cds-layer-background: var(--cds-layer-background-01, #ffffff);
15424
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
15425
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
15426
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
15427
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
15428
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
15429
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
15430
- --cds-field: var(--cds-field-01, #f4f4f4);
15431
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
15432
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
15433
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
15434
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
15435
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
15436
15785
  }
15437
15786
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15438
15787
  .c4p--decorator--light {
@@ -15458,6 +15807,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
15458
15807
  --cds-layer-selected-inverse: SelectedItem;
15459
15808
  }
15460
15809
  }
15810
+ .c4p--decorator--light {
15811
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
15812
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
15813
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
15814
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
15815
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
15816
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
15817
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
15818
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
15819
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
15820
+ --cds-field: var(--cds-field-01, #f4f4f4);
15821
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
15822
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
15823
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
15824
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
15825
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
15826
+ }
15461
15827
 
15462
15828
  .c4p--decorator--dark {
15463
15829
  --cds-ai-aura-end: rgba(0, 0, 0, 0);
@@ -15857,21 +16223,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
15857
16223
  --cds-fluid-display-04-line-height: 1.19;
15858
16224
  --cds-fluid-display-04-letter-spacing: 0;
15859
16225
  --cds-true: ;
15860
- --cds-layer: var(--cds-layer-01, #f4f4f4);
15861
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
15862
- --cds-layer-background: var(--cds-layer-background-01, #ffffff);
15863
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
15864
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
15865
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
15866
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
15867
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
15868
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
15869
- --cds-field: var(--cds-field-01, #f4f4f4);
15870
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
15871
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
15872
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
15873
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
15874
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
15875
16226
  }
15876
16227
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15877
16228
  .c4p--decorator--dark {
@@ -15897,6 +16248,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
15897
16248
  --cds-layer-selected-inverse: SelectedItem;
15898
16249
  }
15899
16250
  }
16251
+ .c4p--decorator--dark {
16252
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
16253
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
16254
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
16255
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
16256
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
16257
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
16258
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
16259
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
16260
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
16261
+ --cds-field: var(--cds-field-01, #f4f4f4);
16262
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
16263
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
16264
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
16265
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
16266
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
16267
+ }
15900
16268
 
15901
16269
  .c4p--decorator {
15902
16270
  display: inline-flex;
@@ -16027,10 +16395,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16027
16395
  background-color: var(--cds-layer-02, #ffffff);
16028
16396
  }
16029
16397
 
16030
- .c4p--decorator--link .c4p--decorator__value {
16031
- background-color: var(--cds-layer-02, #ffffff);
16032
- color: var(--cds-link-primary, #0f62fe);
16033
- }
16034
16398
  .c4p--decorator--link .c4p--decorator__value::after {
16035
16399
  position: absolute;
16036
16400
  border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
@@ -16038,6 +16402,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
16038
16402
  inset-block: 0 0;
16039
16403
  inset-inline-start: 0;
16040
16404
  }
16405
+ .c4p--decorator--link .c4p--decorator__value {
16406
+ background-color: var(--cds-layer-02, #ffffff);
16407
+ color: var(--cds-link-primary, #0f62fe);
16408
+ }
16041
16409
 
16042
16410
  .c4p--decorator--link:hover .c4p--decorator__value {
16043
16411
  color: var(--cds-link-primary-hover, #0043ce);
@@ -16048,9 +16416,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16048
16416
  text-decoration: none;
16049
16417
  }
16050
16418
 
16051
- .c4p--decorator--link:focus .c4p--decorator__value {
16052
- border-color: var(--cds-focus, #0f62fe);
16053
- }
16054
16419
  .c4p--decorator--link:focus .c4p--decorator__value::after {
16055
16420
  position: absolute;
16056
16421
  border-inline-start: 1px solid var(--cds-focus, #0f62fe);
@@ -16058,6 +16423,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
16058
16423
  inset-block: 0 0;
16059
16424
  inset-inline-start: 0;
16060
16425
  }
16426
+ .c4p--decorator--link:focus .c4p--decorator__value {
16427
+ border-color: var(--cds-focus, #0f62fe);
16428
+ }
16061
16429
 
16062
16430
  .c4p--decorator--link:active .c4p--decorator__value {
16063
16431
  color: var(--cds-text-primary, #161616);
@@ -16076,9 +16444,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16076
16444
  background-color: var(--cds-layer-02, #ffffff);
16077
16445
  }
16078
16446
 
16079
- .c4p--decorator--single-button:not(.c4p--decorator-disabled) .c4p--decorator__value {
16080
- background-color: var(--cds-layer-02, #ffffff);
16081
- }
16082
16447
  .c4p--decorator--single-button:not(.c4p--decorator-disabled) .c4p--decorator__value::after {
16083
16448
  position: absolute;
16084
16449
  border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
@@ -16086,16 +16451,15 @@ th.c4p--datagrid__select-all-toggle-on.button {
16086
16451
  inset-block: 0 0;
16087
16452
  inset-inline-start: 0;
16088
16453
  }
16454
+ .c4p--decorator--single-button:not(.c4p--decorator-disabled) .c4p--decorator__value {
16455
+ background-color: var(--cds-layer-02, #ffffff);
16456
+ }
16089
16457
 
16090
16458
  .c4p--decorator--single-button:not(.c4p--decorator-disabled):hover .c4p--decorator__label {
16091
16459
  border-color: var(--cds-border-strong);
16092
16460
  background-color: var(--cds-layer-hover-02, #e8e8e8);
16093
16461
  }
16094
16462
 
16095
- .c4p--decorator--single-button:not(.c4p--decorator-disabled):hover .c4p--decorator__value {
16096
- border-color: var(--cds-border-strong);
16097
- background-color: var(--cds-layer-hover-02, #e8e8e8);
16098
- }
16099
16463
  .c4p--decorator--single-button:not(.c4p--decorator-disabled):hover .c4p--decorator__value::after {
16100
16464
  position: absolute;
16101
16465
  border-inline-start: 1px solid var(--cds-border-strong);
@@ -16103,6 +16467,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
16103
16467
  inset-block: 0 0;
16104
16468
  inset-inline-start: 0;
16105
16469
  }
16470
+ .c4p--decorator--single-button:not(.c4p--decorator-disabled):hover .c4p--decorator__value {
16471
+ border-color: var(--cds-border-strong);
16472
+ background-color: var(--cds-layer-hover-02, #e8e8e8);
16473
+ }
16106
16474
 
16107
16475
  .c4p--decorator--single-button:not(.c4p--decorator-disabled):focus {
16108
16476
  outline: none;
@@ -16113,10 +16481,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16113
16481
  background-color: var(--cds-layer-02, #ffffff);
16114
16482
  }
16115
16483
 
16116
- .c4p--decorator--single-button:not(.c4p--decorator-disabled):focus .c4p--decorator__value {
16117
- border-color: var(--cds-focus, #0f62fe);
16118
- background-color: var(--cds-layer-02, #ffffff);
16119
- }
16120
16484
  .c4p--decorator--single-button:not(.c4p--decorator-disabled):focus .c4p--decorator__value::after {
16121
16485
  position: absolute;
16122
16486
  border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
@@ -16124,14 +16488,15 @@ th.c4p--datagrid__select-all-toggle-on.button {
16124
16488
  inset-block: 0 0;
16125
16489
  inset-inline-start: 0;
16126
16490
  }
16491
+ .c4p--decorator--single-button:not(.c4p--decorator-disabled):focus .c4p--decorator__value {
16492
+ border-color: var(--cds-focus, #0f62fe);
16493
+ background-color: var(--cds-layer-02, #ffffff);
16494
+ }
16127
16495
 
16128
16496
  .c4p--decorator--single-button:not(.c4p--decorator-disabled):active .c4p--decorator__label {
16129
16497
  background-color: var(--cds-layer-selected-02, #e0e0e0);
16130
16498
  }
16131
16499
 
16132
- .c4p--decorator--single-button:not(.c4p--decorator-disabled):active .c4p--decorator__value {
16133
- background-color: var(--cds-layer-selected-02, #e0e0e0);
16134
- }
16135
16500
  .c4p--decorator--single-button:not(.c4p--decorator-disabled):active .c4p--decorator__value::after {
16136
16501
  position: absolute;
16137
16502
  border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
@@ -16139,6 +16504,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
16139
16504
  inset-block: 0 0;
16140
16505
  inset-inline-start: 0;
16141
16506
  }
16507
+ .c4p--decorator--single-button:not(.c4p--decorator-disabled):active .c4p--decorator__value {
16508
+ background-color: var(--cds-layer-selected-02, #e0e0e0);
16509
+ }
16142
16510
 
16143
16511
  .c4p--decorator--single-button.c4p--decorator-disabled {
16144
16512
  padding: 0;
@@ -16151,10 +16519,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16151
16519
  color: var(--cds-icon-on-color-disabled, #8d8d8d);
16152
16520
  }
16153
16521
 
16154
- .c4p--decorator--single-button.c4p--decorator-disabled .c4p--decorator__value {
16155
- background-color: var(--cds-layer-02, #ffffff);
16156
- color: var(--cds-icon-on-color-disabled, #8d8d8d);
16157
- }
16158
16522
  .c4p--decorator--single-button.c4p--decorator-disabled .c4p--decorator__value::after {
16159
16523
  position: absolute;
16160
16524
  border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
@@ -16162,6 +16526,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
16162
16526
  inset-block: 0 0;
16163
16527
  inset-inline-start: 0;
16164
16528
  }
16529
+ .c4p--decorator--single-button.c4p--decorator-disabled .c4p--decorator__value {
16530
+ background-color: var(--cds-layer-02, #ffffff);
16531
+ color: var(--cds-icon-on-color-disabled, #8d8d8d);
16532
+ }
16165
16533
 
16166
16534
  .c4p--decorator--light.c4p--decorator--single-button:not(.c4p--decorator-disabled):hover .c4p--decorator-icon__magnitude-low, .c4p--decorator--light.c4p--decorator--single-button:not(.c4p--decorator-disabled):active .c4p--decorator-icon__magnitude-low {
16167
16535
  stroke: #8e6a00;
@@ -16199,10 +16567,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16199
16567
  cursor: pointer;
16200
16568
  }
16201
16569
 
16202
- .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:hover {
16203
- border-color: var(--cds-border-strong);
16204
- background-color: var(--cds-layer-hover-02, #e8e8e8);
16205
- }
16206
16570
  .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:hover::after {
16207
16571
  position: absolute;
16208
16572
  z-index: 1;
@@ -16211,11 +16575,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
16211
16575
  inset-block: -1px -1px;
16212
16576
  inset-inline-end: -1px;
16213
16577
  }
16214
-
16215
- .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__value:hover {
16578
+ .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:hover {
16216
16579
  border-color: var(--cds-border-strong);
16217
16580
  background-color: var(--cds-layer-hover-02, #e8e8e8);
16218
16581
  }
16582
+
16219
16583
  .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__value:hover::after {
16220
16584
  position: absolute;
16221
16585
  border-inline-start: 1px solid var(--cds-border-strong);
@@ -16223,11 +16587,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
16223
16587
  inset-block: 0 0;
16224
16588
  inset-inline-start: 0;
16225
16589
  }
16226
-
16227
- .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:focus {
16228
- border-color: var(--cds-focus, #0f62fe);
16229
- outline: none;
16590
+ .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__value:hover {
16591
+ border-color: var(--cds-border-strong);
16592
+ background-color: var(--cds-layer-hover-02, #e8e8e8);
16230
16593
  }
16594
+
16231
16595
  .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:focus::after {
16232
16596
  position: absolute;
16233
16597
  z-index: 1;
@@ -16236,11 +16600,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
16236
16600
  inset-block: -1px -1px;
16237
16601
  inset-inline-end: -1px;
16238
16602
  }
16239
-
16240
- .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__value:focus {
16603
+ .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:focus {
16241
16604
  border-color: var(--cds-focus, #0f62fe);
16242
16605
  outline: none;
16243
16606
  }
16607
+
16244
16608
  .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__value:focus::after {
16245
16609
  position: absolute;
16246
16610
  border-inline-start: 1px solid var(--cds-focus, #0f62fe);
@@ -16248,6 +16612,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
16248
16612
  inset-block: 0 0;
16249
16613
  inset-inline-start: 0;
16250
16614
  }
16615
+ .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__value:focus {
16616
+ border-color: var(--cds-focus, #0f62fe);
16617
+ outline: none;
16618
+ }
16251
16619
 
16252
16620
  .c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:active {
16253
16621
  background-color: var(--cds-layer-hover-02, #e8e8e8);
@@ -16262,10 +16630,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16262
16630
  color: var(--cds-icon-on-color-disabled, #8d8d8d);
16263
16631
  }
16264
16632
 
16265
- .c4p--decorator--dual-button.c4p--decorator-disabled .c4p--decorator__value {
16266
- background-color: var(--cds-layer-02, #ffffff);
16267
- color: var(--cds-icon-on-color-disabled, #8d8d8d);
16268
- }
16269
16633
  .c4p--decorator--dual-button.c4p--decorator-disabled .c4p--decorator__value::after {
16270
16634
  position: absolute;
16271
16635
  border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
@@ -16273,6 +16637,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
16273
16637
  inset-block: 0 0;
16274
16638
  inset-inline-start: 0;
16275
16639
  }
16640
+ .c4p--decorator--dual-button.c4p--decorator-disabled .c4p--decorator__value {
16641
+ background-color: var(--cds-layer-02, #ffffff);
16642
+ color: var(--cds-icon-on-color-disabled, #8d8d8d);
16643
+ }
16276
16644
 
16277
16645
  .c4p--decorator--light.c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:hover .c4p--decorator-icon__magnitude-low, .c4p--decorator--light.c4p--decorator--dual-button:not(.c4p--decorator-disabled) .c4p--decorator__label:active .c4p--decorator-icon__magnitude-low {
16278
16646
  stroke: #8e6a00;
@@ -17189,12 +17557,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
17189
17557
  flex-wrap: wrap;
17190
17558
  }
17191
17559
 
17192
- .c4p--tag-overflow__item {
17193
- margin: 0.125rem;
17194
- }
17195
-
17196
17560
  .c4p--tag-overflow__item--tag {
17197
17561
  border: none;
17562
+ margin-block-end: 0.5rem;
17563
+ margin-inline-end: 0.5rem;
17198
17564
  }
17199
17565
 
17200
17566
  .c4p--tag-overflow__item--tag span {
@@ -17251,9 +17617,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
17251
17617
  }
17252
17618
  .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link {
17253
17619
  color: var(--cds-link-inverse, #78a9ff);
17254
- margin-block-start: 0.5rem;
17255
17620
  }
17256
- .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link:hover {
17621
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link:hover, .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link:visited:hover {
17257
17622
  color: var(--cds-link-inverse-hover, #a6c8ff);
17258
17623
  }
17259
17624
  .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link:focus {
@@ -17312,6 +17677,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
17312
17677
  margin-inline-end: 1rem;
17313
17678
  padding-inline-end: 0;
17314
17679
  }
17680
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__body .cds--tag {
17681
+ margin-block-end: 0.5rem;
17682
+ margin-inline-end: 0.5rem;
17683
+ }
17315
17684
 
17316
17685
  /* stylelint-disable max-nesting-depth */
17317
17686
  .c4p--filter-panel__title {
@@ -17614,6 +17983,13 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
17614
17983
  font-family: inherit;
17615
17984
  font-size: 100%;
17616
17985
  vertical-align: baseline;
17986
+ }
17987
+ .c4p--condition-builder__button *,
17988
+ .c4p--condition-builder__button *::before,
17989
+ .c4p--condition-builder__button *::after {
17990
+ box-sizing: inherit;
17991
+ }
17992
+ .c4p--condition-builder__button {
17617
17993
  display: inline-block;
17618
17994
  padding: 0;
17619
17995
  border: 0;
@@ -17622,6 +17998,11 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
17622
17998
  cursor: pointer;
17623
17999
  text-align: start;
17624
18000
  inline-size: 100%;
18001
+ }
18002
+ .c4p--condition-builder__button::-moz-focus-inner {
18003
+ border: 0;
18004
+ }
18005
+ .c4p--condition-builder__button {
17625
18006
  display: inline-flex;
17626
18007
  align-items: center;
17627
18008
  background-color: var(--cds-layer);
@@ -17632,14 +18013,6 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
17632
18013
  padding-inline: 0.5rem;
17633
18014
  white-space: nowrap;
17634
18015
  }
17635
- .c4p--condition-builder__button *,
17636
- .c4p--condition-builder__button *::before,
17637
- .c4p--condition-builder__button *::after {
17638
- box-sizing: inherit;
17639
- }
17640
- .c4p--condition-builder__button::-moz-focus-inner {
17641
- border: 0;
17642
- }
17643
18016
 
17644
18017
  .c4p--condition-builder__button:hover {
17645
18018
  background-color: var(--cds-layer-hover);
@@ -17652,14 +18025,16 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
17652
18025
  .c4p--condition-builder__button:focus {
17653
18026
  outline: 2px solid var(--cds-focus, #0f62fe);
17654
18027
  outline-offset: -2px;
17655
- content: "";
17656
- inset: 0;
17657
18028
  }
17658
18029
  @media screen and (prefers-contrast) {
17659
18030
  .c4p--condition-builder__button:focus {
17660
18031
  outline-style: dotted;
17661
18032
  }
17662
18033
  }
18034
+ .c4p--condition-builder__button:focus {
18035
+ content: "";
18036
+ inset: 0;
18037
+ }
17663
18038
 
17664
18039
  .c4p--condition-builder__statement-button,
17665
18040
  .c4p--condition-builder__connector-button {
@@ -18617,15 +18992,17 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
18617
18992
  .c4p--condition-builder [role=row]:focus::after {
18618
18993
  outline: 2px solid var(--cds-focus, #0f62fe);
18619
18994
  outline-offset: -2px;
18620
- position: absolute;
18621
- content: "";
18622
- inset: 0;
18623
18995
  }
18624
18996
  @media screen and (prefers-contrast) {
18625
18997
  .c4p--condition-builder [role=row]:focus::after {
18626
18998
  outline-style: dotted;
18627
18999
  }
18628
19000
  }
19001
+ .c4p--condition-builder [role=row]:focus::after {
19002
+ position: absolute;
19003
+ content: "";
19004
+ inset: 0;
19005
+ }
18629
19006
 
18630
19007
  .c4p--condition-builder__condition__deletion-preview .c4p--condition-builder__button:not(.c4p--condition-builder__statement-button,
18631
19008
  .c4p--condition-builder__connector-button,