@carbon/ibm-products 2.43.2-canary.337 → 2.43.2-canary.338

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.
package/css/index.css CHANGED
@@ -306,8 +306,8 @@
306
306
  --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
307
307
  }
308
308
 
309
- .cds--popover--drop-shadow .cds--popover {
310
- --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
309
+ .cds--popover--drop-shadow .cds--popover > .cds--popover-content {
310
+ filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
311
311
  }
312
312
 
313
313
  .cds--popover--caret {
@@ -435,7 +435,7 @@
435
435
  .cds--popover--bottom-end > .cds--popover > .cds--popover-content::before {
436
436
  block-size: var(--cds-popover-offset, 0rem);
437
437
  inset-block-start: 0;
438
- inset-inline: 0 0;
438
+ inset-inline: 0;
439
439
  transform: translateY(-100%);
440
440
  }
441
441
 
@@ -512,7 +512,7 @@
512
512
  .cds--popover--top-end > .cds--popover > .cds--popover-content::before {
513
513
  block-size: var(--cds-popover-offset, 0rem);
514
514
  inset-block-end: 0;
515
- inset-inline: 0 0;
515
+ inset-inline: 0;
516
516
  transform: translateY(100%);
517
517
  }
518
518
 
@@ -582,7 +582,7 @@
582
582
  .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before,
583
583
  .cds--popover--right-end > .cds--popover > .cds--popover-content::before {
584
584
  inline-size: var(--cds-popover-offset, 0rem);
585
- inset-block: 0 0;
585
+ inset-block: 0;
586
586
  inset-inline-start: 0;
587
587
  transform: translateX(-100%);
588
588
  }
@@ -654,7 +654,7 @@
654
654
  .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before,
655
655
  .cds--popover--left-end > .cds--popover > .cds--popover-content::before {
656
656
  inline-size: var(--cds-popover-offset, 0rem);
657
- inset-block: 0 0;
657
+ inset-block: 0;
658
658
  inset-inline-end: 0;
659
659
  transform: translateX(100%);
660
660
  }
@@ -1239,6 +1239,7 @@
1239
1239
  block-size: 100%;
1240
1240
  content: "";
1241
1241
  inline-size: 100%;
1242
+ inset-inline-start: 0;
1242
1243
  will-change: transform-origin, transform, opacity;
1243
1244
  }
1244
1245
  @media (prefers-reduced-motion: reduce) {
@@ -2011,6 +2012,7 @@
2011
2012
  block-size: 100%;
2012
2013
  content: "";
2013
2014
  inline-size: 100%;
2015
+ inset-inline-start: 0;
2014
2016
  will-change: transform-origin, transform, opacity;
2015
2017
  }
2016
2018
  @media (prefers-reduced-motion: reduce) {
@@ -2032,7 +2034,6 @@
2032
2034
  padding-block-end: 0;
2033
2035
  }
2034
2036
 
2035
- /* stylelint-disable */
2036
2037
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
2037
2038
  .cds--snippet__icon {
2038
2039
  fill: ButtonText;
@@ -2053,7 +2054,6 @@
2053
2054
  }
2054
2055
  }
2055
2056
 
2056
- /* stylelint-enable */
2057
2057
  .cds--modal {
2058
2058
  position: fixed;
2059
2059
  z-index: 9000;
@@ -2434,7 +2434,6 @@
2434
2434
  display: none;
2435
2435
  }
2436
2436
 
2437
- /* stylelint-disable no-duplicate-selectors */
2438
2437
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
2439
2438
  .cds--modal-close__icon {
2440
2439
  fill: ButtonText;
@@ -2448,7 +2447,6 @@
2448
2447
  }
2449
2448
  }
2450
2449
 
2451
- /* stylelint-enable no-duplicate-selectors */
2452
2450
  input:-webkit-autofill,
2453
2451
  input:-webkit-autofill:hover,
2454
2452
  input:-webkit-autofill:focus,
@@ -2603,6 +2601,7 @@ textarea:-webkit-autofill:focus {
2603
2601
  block-size: 100%;
2604
2602
  content: "";
2605
2603
  inline-size: 100%;
2604
+ inset-inline-start: 0;
2606
2605
  will-change: transform-origin, transform, opacity;
2607
2606
  }
2608
2607
  @media (prefers-reduced-motion: reduce) {
@@ -3007,8 +3006,8 @@ fieldset[disabled] .cds--form__helper-text {
3007
3006
  inset-inline-start: 50%;
3008
3007
  }
3009
3008
  .cds--text-input--password__visibility::before {
3010
- border-width: 0 0.25rem 0.3125rem 0.25rem;
3011
- border-color: transparent transparent var(--cds-background-inverse, #393939) transparent;
3009
+ border-width: 0 0.25rem 0.3125rem;
3010
+ border-color: transparent transparent var(--cds-background-inverse, #393939);
3012
3011
  inset-block-end: -0.5rem;
3013
3012
  transform: translate(-50%, 100%);
3014
3013
  }
@@ -3184,6 +3183,7 @@ fieldset[disabled] .cds--form__helper-text {
3184
3183
  block-size: 100%;
3185
3184
  content: "";
3186
3185
  inline-size: 100%;
3186
+ inset-inline-start: 0;
3187
3187
  will-change: transform-origin, transform, opacity;
3188
3188
  }
3189
3189
  @media (prefers-reduced-motion: reduce) {
@@ -3815,6 +3815,12 @@ fieldset[disabled] .cds--form__helper-text {
3815
3815
  outline-style: dotted;
3816
3816
  }
3817
3817
  }
3818
+ .cds--tabs .cds--tab--overflow-nav-button:hover {
3819
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
3820
+ }
3821
+ .cds--tabs .cds--tab--overflow-nav-button:active {
3822
+ background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
3823
+ }
3818
3824
  .cds--tabs .cds--tab--overflow-nav-button--hidden {
3819
3825
  display: none;
3820
3826
  }
@@ -3823,13 +3829,22 @@ fieldset[disabled] .cds--form__helper-text {
3823
3829
  background-color: var(--cds-layer-accent);
3824
3830
  inline-size: 3rem;
3825
3831
  }
3832
+ .cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button:hover {
3833
+ background-color: var(--cds-layer-accent-hover);
3834
+ }
3835
+ .cds--tabs.cds--tabs--contained .cds--tab--overflow-nav-button:active {
3836
+ background-color: var(--cds-layer-accent-active);
3837
+ }
3826
3838
  .cds--tabs .cds--tab--overflow-nav-button svg {
3827
3839
  z-index: 2;
3828
3840
  fill: var(--cds-icon-primary, #161616);
3829
3841
  }
3842
+ .cds--tabs .cds--tab--overflow-nav-button svg:active, .cds--tabs .cds--tab--overflow-nav-button svg:hover {
3843
+ fill: var(--cds-icon-primary, #161616);
3844
+ }
3830
3845
  .cds--tabs .cds--tab--overflow-nav-button--next {
3831
- position: absolute;
3832
- inset-block: 0 0;
3846
+ position: relative;
3847
+ inset-block: 0;
3833
3848
  inset-inline-end: 0;
3834
3849
  }
3835
3850
  .cds--tabs .cds--tab--overflow-nav-button--next::before {
@@ -3847,9 +3862,9 @@ fieldset[disabled] .cds--form__helper-text {
3847
3862
  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--cds-background, #ffffff));
3848
3863
  }
3849
3864
  .cds--tabs .cds--tab--overflow-nav-button--previous {
3850
- position: absolute;
3865
+ position: relative;
3851
3866
  z-index: 1;
3852
- inset-block: 0 0;
3867
+ inset-block: 0;
3853
3868
  inset-inline-start: 0;
3854
3869
  }
3855
3870
  .cds--tabs .cds--tab--overflow-nav-button--previous::before {
@@ -4129,6 +4144,9 @@ fieldset[disabled] .cds--form__helper-text {
4129
4144
  .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
4130
4145
  overflow-x: visible;
4131
4146
  }
4147
+ .cds--tabs .cds--tabs__nav-item--icon-only {
4148
+ margin-inline-end: 0.0625rem;
4149
+ }
4132
4150
  .cds--tabs .cds--tabs__nav-item--icon-only, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only {
4133
4151
  display: flex;
4134
4152
  align-items: center;
@@ -4334,6 +4352,7 @@ fieldset[disabled] .cds--form__helper-text {
4334
4352
  block-size: 100%;
4335
4353
  content: "";
4336
4354
  inline-size: 100%;
4355
+ inset-inline-start: 0;
4337
4356
  will-change: transform-origin, transform, opacity;
4338
4357
  }
4339
4358
  @media (prefers-reduced-motion: reduce) {
@@ -5003,6 +5022,14 @@ a.cds--overflow-menu-options__btn::before {
5003
5022
  --cds-grid-column-hang: 0.96875rem;
5004
5023
  }
5005
5024
 
5025
+ .cds--css-grid--start {
5026
+ margin-inline-start: 0;
5027
+ }
5028
+
5029
+ .cds--css-grid--end {
5030
+ margin-inline-end: 0;
5031
+ }
5032
+
5006
5033
  .cds--subgrid {
5007
5034
  display: grid;
5008
5035
  grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
@@ -7033,6 +7060,7 @@ a.cds--overflow-menu-options__btn::before {
7033
7060
  block-size: 100%;
7034
7061
  content: "";
7035
7062
  inline-size: 100%;
7063
+ inset-inline-start: 0;
7036
7064
  will-change: transform-origin, transform, opacity;
7037
7065
  }
7038
7066
  @media (prefers-reduced-motion: reduce) {
@@ -7320,6 +7348,7 @@ a.cds--overflow-menu-options__btn::before {
7320
7348
  block-size: 100%;
7321
7349
  content: "";
7322
7350
  inline-size: 100%;
7351
+ inset-inline-start: 0;
7323
7352
  will-change: transform-origin, transform, opacity;
7324
7353
  }
7325
7354
  @media (prefers-reduced-motion: reduce) {
@@ -8938,6 +8967,7 @@ a.cds--overflow-menu-options__btn::before {
8938
8967
  block-size: 100%;
8939
8968
  content: "";
8940
8969
  inline-size: 100%;
8970
+ inset-inline-start: 0;
8941
8971
  will-change: transform-origin, transform, opacity;
8942
8972
  }
8943
8973
  @media (prefers-reduced-motion: reduce) {
@@ -9597,7 +9627,7 @@ a.cds--overflow-menu-options__btn::before {
9597
9627
  inline-size: -webkit-fill-available;
9598
9628
  padding-inline-start: 1rem;
9599
9629
  }
9600
- @-moz-document url-prefix() {
9630
+ @document url-prefix() {
9601
9631
  .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
9602
9632
  inline-size: -moz-available;
9603
9633
  }
@@ -9605,7 +9635,7 @@ a.cds--overflow-menu-options__btn::before {
9605
9635
  .cds--file__selected-file .cds--file-filename-tooltip {
9606
9636
  inline-size: -webkit-fill-available;
9607
9637
  }
9608
- @-moz-document url-prefix() {
9638
+ @document url-prefix() {
9609
9639
  .cds--file__selected-file .cds--file-filename-tooltip {
9610
9640
  inline-size: -moz-available;
9611
9641
  }
@@ -9627,7 +9657,7 @@ a.cds--overflow-menu-options__btn::before {
9627
9657
  text-overflow: ellipsis;
9628
9658
  white-space: nowrap;
9629
9659
  }
9630
- @-moz-document url-prefix() {
9660
+ @document url-prefix() {
9631
9661
  .cds--file__selected-file .cds--file-filename-button {
9632
9662
  inline-size: -moz-available;
9633
9663
  }
@@ -9845,7 +9875,6 @@ a.cds--overflow-menu-options__btn::before {
9845
9875
  outline-offset: -2px;
9846
9876
  }
9847
9877
 
9848
- /* stylelint-disable */
9849
9878
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9850
9879
  .cds--file__selected-file {
9851
9880
  outline: 1px solid transparent;
@@ -9858,7 +9887,6 @@ a.cds--overflow-menu-options__btn::before {
9858
9887
  }
9859
9888
  }
9860
9889
 
9861
- /* stylelint-enable */
9862
9890
  .c4p--import-modal .cds--modal-close {
9863
9891
  display: none;
9864
9892
  }
@@ -11179,6 +11207,7 @@ button.c4p--add-select__global-filter-toggle--open {
11179
11207
  block-size: 100%;
11180
11208
  content: "";
11181
11209
  inline-size: 100%;
11210
+ inset-inline-start: 0;
11182
11211
  will-change: transform-origin, transform, opacity;
11183
11212
  }
11184
11213
  @media (prefers-reduced-motion: reduce) {
@@ -11189,7 +11218,7 @@ button.c4p--add-select__global-filter-toggle--open {
11189
11218
 
11190
11219
  .cds--breadcrumb .cds--overflow-menu.cds--btn--icon-only {
11191
11220
  min-block-size: 1.125rem;
11192
- padding-inline: 0 0;
11221
+ padding-inline: 0;
11193
11222
  }
11194
11223
 
11195
11224
  @keyframes ai-skeleton-animation {
@@ -11223,6 +11252,7 @@ button.c4p--add-select__global-filter-toggle--open {
11223
11252
  block-size: 100%;
11224
11253
  content: "";
11225
11254
  inline-size: 100%;
11255
+ inset-inline-start: 0;
11226
11256
  will-change: transform-origin, transform, opacity;
11227
11257
  }
11228
11258
  @media (prefers-reduced-motion: reduce) {
@@ -11253,6 +11283,7 @@ button.c4p--add-select__global-filter-toggle--open {
11253
11283
  block-size: 100%;
11254
11284
  content: "";
11255
11285
  inline-size: 100%;
11286
+ inset-inline-start: 0;
11256
11287
  will-change: transform-origin, transform, opacity;
11257
11288
  }
11258
11289
  @media (prefers-reduced-motion: reduce) {
@@ -11284,6 +11315,7 @@ button.c4p--add-select__global-filter-toggle--open {
11284
11315
  block-size: 100%;
11285
11316
  content: "";
11286
11317
  inline-size: 100%;
11318
+ inset-inline-start: 0;
11287
11319
  will-change: transform-origin, transform, opacity;
11288
11320
  }
11289
11321
  @media (prefers-reduced-motion: reduce) {
@@ -11454,7 +11486,7 @@ button.c4p--add-select__global-filter-toggle--open {
11454
11486
 
11455
11487
  .cds--tag--red {
11456
11488
  background-color: var(--cds-tag-background-red, #ffd7d9);
11457
- color: var(--cds-tag-color-red, #750e13);
11489
+ color: var(--cds-tag-color-red, #a2191f);
11458
11490
  }
11459
11491
  .cds--tag--red.cds--tag--operational {
11460
11492
  border: 1px solid var(--cds-tag-border-red, #ff8389);
@@ -11468,7 +11500,7 @@ button.c4p--add-select__global-filter-toggle--open {
11468
11500
 
11469
11501
  .cds--tag--magenta {
11470
11502
  background-color: var(--cds-tag-background-magenta, #ffd6e8);
11471
- color: var(--cds-tag-color-magenta, #740937);
11503
+ color: var(--cds-tag-color-magenta, #9f1853);
11472
11504
  }
11473
11505
  .cds--tag--magenta.cds--tag--operational {
11474
11506
  border: 1px solid var(--cds-tag-border-magenta, #ff7eb6);
@@ -11482,7 +11514,7 @@ button.c4p--add-select__global-filter-toggle--open {
11482
11514
 
11483
11515
  .cds--tag--purple {
11484
11516
  background-color: var(--cds-tag-background-purple, #e8daff);
11485
- color: var(--cds-tag-color-purple, #491d8b);
11517
+ color: var(--cds-tag-color-purple, #6929c4);
11486
11518
  }
11487
11519
  .cds--tag--purple.cds--tag--operational {
11488
11520
  border: 1px solid var(--cds-tag-border-purple, #be95ff);
@@ -11496,7 +11528,7 @@ button.c4p--add-select__global-filter-toggle--open {
11496
11528
 
11497
11529
  .cds--tag--blue {
11498
11530
  background-color: var(--cds-tag-background-blue, #d0e2ff);
11499
- color: var(--cds-tag-color-blue, #002d9c);
11531
+ color: var(--cds-tag-color-blue, #0043ce);
11500
11532
  }
11501
11533
  .cds--tag--blue.cds--tag--operational {
11502
11534
  border: 1px solid var(--cds-tag-border-blue, #78a9ff);
@@ -11510,7 +11542,7 @@ button.c4p--add-select__global-filter-toggle--open {
11510
11542
 
11511
11543
  .cds--tag--cyan {
11512
11544
  background-color: var(--cds-tag-background-cyan, #bae6ff);
11513
- color: var(--cds-tag-color-cyan, #003a6d);
11545
+ color: var(--cds-tag-color-cyan, #00539a);
11514
11546
  }
11515
11547
  .cds--tag--cyan.cds--tag--operational {
11516
11548
  border: 1px solid var(--cds-tag-border-cyan, #33b1ff);
@@ -11524,7 +11556,7 @@ button.c4p--add-select__global-filter-toggle--open {
11524
11556
 
11525
11557
  .cds--tag--teal {
11526
11558
  background-color: var(--cds-tag-background-teal, #9ef0f0);
11527
- color: var(--cds-tag-color-teal, #004144);
11559
+ color: var(--cds-tag-color-teal, #005d5d);
11528
11560
  }
11529
11561
  .cds--tag--teal.cds--tag--operational {
11530
11562
  border: 1px solid var(--cds-tag-border-teal, #08bdba);
@@ -11538,7 +11570,7 @@ button.c4p--add-select__global-filter-toggle--open {
11538
11570
 
11539
11571
  .cds--tag--green {
11540
11572
  background-color: var(--cds-tag-background-green, #a7f0ba);
11541
- color: var(--cds-tag-color-green, #044317);
11573
+ color: var(--cds-tag-color-green, #0e6027);
11542
11574
  }
11543
11575
  .cds--tag--green.cds--tag--operational {
11544
11576
  border: 1px solid var(--cds-tag-border-green, #42be65);
@@ -11763,6 +11795,7 @@ button.c4p--add-select__global-filter-toggle--open {
11763
11795
  block-size: 100%;
11764
11796
  content: "";
11765
11797
  inline-size: 100%;
11798
+ inset-inline-start: 0;
11766
11799
  will-change: transform-origin, transform, opacity;
11767
11800
  }
11768
11801
  @media (prefers-reduced-motion: reduce) {
@@ -11800,7 +11833,10 @@ button.c4p--add-select__global-filter-toggle--open {
11800
11833
  border-color: currentColor;
11801
11834
  }
11802
11835
 
11803
- /* stylelint-disable */
11836
+ .cds--tag--filter .cds--slug {
11837
+ min-inline-size: 2.00875rem;
11838
+ }
11839
+
11804
11840
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
11805
11841
  .cds--tag {
11806
11842
  outline: 1px solid transparent;
@@ -11833,7 +11869,6 @@ button.c4p--add-select__global-filter-toggle--open {
11833
11869
  max-inline-size: 9.875rem;
11834
11870
  }
11835
11871
 
11836
- /* stylelint-enable */
11837
11872
  .cds--interactive--tag-children {
11838
11873
  display: inline-flex;
11839
11874
  max-inline-size: 12.5rem;
@@ -15123,6 +15158,7 @@ button.c4p--add-select__global-filter-toggle--open {
15123
15158
  block-size: 100%;
15124
15159
  content: "";
15125
15160
  inline-size: 100%;
15161
+ inset-inline-start: 0;
15126
15162
  will-change: transform-origin, transform, opacity;
15127
15163
  }
15128
15164
  @media (prefers-reduced-motion: reduce) {
@@ -20668,25 +20704,25 @@ th.c4p--datagrid__select-all-toggle-on.button {
20668
20704
  --cds-button-tertiary-hover: #0050e6;
20669
20705
  --cds-button-disabled: #c6c6c6;
20670
20706
  --cds-tag-background-red: #ffd7d9;
20671
- --cds-tag-color-red: #750e13;
20707
+ --cds-tag-color-red: #a2191f;
20672
20708
  --cds-tag-hover-red: #ffc2c5;
20673
20709
  --cds-tag-background-magenta: #ffd6e8;
20674
- --cds-tag-color-magenta: #740937;
20710
+ --cds-tag-color-magenta: #9f1853;
20675
20711
  --cds-tag-hover-magenta: #ffbdda;
20676
20712
  --cds-tag-background-purple: #e8daff;
20677
- --cds-tag-color-purple: #491d8b;
20713
+ --cds-tag-color-purple: #6929c4;
20678
20714
  --cds-tag-hover-purple: #dcc7ff;
20679
20715
  --cds-tag-background-blue: #d0e2ff;
20680
- --cds-tag-color-blue: #002d9c;
20716
+ --cds-tag-color-blue: #0043ce;
20681
20717
  --cds-tag-hover-blue: #b8d3ff;
20682
20718
  --cds-tag-background-cyan: #bae6ff;
20683
- --cds-tag-color-cyan: #003a6d;
20719
+ --cds-tag-color-cyan: #00539a;
20684
20720
  --cds-tag-hover-cyan: #99daff;
20685
20721
  --cds-tag-background-teal: #9ef0f0;
20686
- --cds-tag-color-teal: #004144;
20722
+ --cds-tag-color-teal: #005d5d;
20687
20723
  --cds-tag-hover-teal: #57e5e5;
20688
20724
  --cds-tag-background-green: #a7f0ba;
20689
- --cds-tag-color-green: #044317;
20725
+ --cds-tag-color-green: #0e6027;
20690
20726
  --cds-tag-hover-green: #74e792;
20691
20727
  --cds-tag-background-gray: #e0e0e0;
20692
20728
  --cds-tag-color-gray: #161616;
@@ -22637,7 +22673,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
22637
22673
  font-family: inherit;
22638
22674
  font-size: 100%;
22639
22675
  vertical-align: baseline;
22640
- /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
22641
22676
  }
22642
22677
  .cds--accordion *,
22643
22678
  .cds--accordion *::before,
@@ -22683,7 +22718,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
22683
22718
  cursor: pointer;
22684
22719
  text-align: start;
22685
22720
  inline-size: 100%;
22686
- /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
22687
22721
  }
22688
22722
  .cds--accordion__heading *,
22689
22723
  .cds--accordion__heading *::before,
@@ -22743,7 +22777,6 @@ li.cds--accordion__item--disabled:last-of-type {
22743
22777
  outline: 2px solid transparent;
22744
22778
  outline-offset: -2px;
22745
22779
  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
22746
- /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
22747
22780
  }
22748
22781
  .cds--accordion__arrow {
22749
22782
  flex: 0 0 1rem;
@@ -22758,7 +22791,6 @@ li.cds--accordion__item--disabled:last-of-type {
22758
22791
  font-weight: var(--cds-body-01-font-weight, 400);
22759
22792
  line-height: var(--cds-body-01-line-height, 1.42857);
22760
22793
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
22761
- /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
22762
22794
  }
22763
22795
  .cds--accordion__title {
22764
22796
  z-index: 1;
@@ -22768,11 +22800,12 @@ li.cds--accordion__item--disabled:last-of-type {
22768
22800
  }
22769
22801
 
22770
22802
  .cds--accordion__wrapper {
22803
+ display: none;
22771
22804
  overflow: hidden;
22772
22805
  padding: 0;
22773
22806
  max-block-size: 0;
22774
22807
  opacity: 0;
22775
- transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9);
22808
+ transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9) allow-discrete;
22776
22809
  writing-mode: horizontal-tb;
22777
22810
  }
22778
22811
 
@@ -22821,6 +22854,7 @@ li.cds--accordion__item--disabled:last-of-type {
22821
22854
  overflow: visible;
22822
22855
  }
22823
22856
  .cds--accordion__item--active > .cds--accordion__wrapper {
22857
+ display: block;
22824
22858
  overflow: visible;
22825
22859
  max-block-size: fit-content;
22826
22860
  opacity: 1;
@@ -22832,6 +22866,18 @@ li.cds--accordion__item--disabled:last-of-type {
22832
22866
  transform: rotate(-90deg) /*rtl:ignore*/;
22833
22867
  }
22834
22868
 
22869
+ /** starting style also not supported widely
22870
+ * https://caniuse.com/mdn-css_at-rules_starting-style
22871
+ */
22872
+ /* Needs to be after the previous accordion__item--active rule
22873
+ to take effect, as the specificity is the same */
22874
+ @starting-style {
22875
+ .cds--accordion__item--active > .cds--accordion__wrapper {
22876
+ padding: 0;
22877
+ max-block-size: 0;
22878
+ opacity: 0;
22879
+ }
22880
+ }
22835
22881
  .cds--accordion--flush .cds--accordion__item {
22836
22882
  position: relative;
22837
22883
  border-color: transparent;
@@ -23230,6 +23276,7 @@ li.cds--accordion__item--disabled:last-of-type {
23230
23276
  block-size: 100%;
23231
23277
  content: "";
23232
23278
  inline-size: 100%;
23279
+ inset-inline-start: 0;
23233
23280
  will-change: transform-origin, transform, opacity;
23234
23281
  }
23235
23282
  @media (prefers-reduced-motion: reduce) {
@@ -25150,7 +25197,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
25150
25197
  .c4p--condition-builder__add-button,
25151
25198
  .c4p--condition-builder__add-condition-sub-group) {
25152
25199
  background-color: var(--cds-tag-background-red, #ffd7d9);
25153
- color: var(--cds-tag-color-red, #750e13);
25200
+ color: var(--cds-tag-color-red, #a2191f);
25154
25201
  }
25155
25202
 
25156
25203
  .c4p--condition-builder__condition__deletion-preview .c4p--condition-builder__button:not(.c4p--condition-builder__statement-button,