@carbon/styles 1.82.0-rc.0 → 1.83.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 (50) hide show
  1. package/css/styles.css +686 -328
  2. package/css/styles.min.css +1 -1
  3. package/package.json +9 -9
  4. package/scss/__tests__/theme-test.js +4 -0
  5. package/scss/_layer.scss +7 -0
  6. package/scss/_reset.scss +2 -1
  7. package/scss/_theme.scss +49 -0
  8. package/scss/_zone.scss +3 -1
  9. package/scss/components/accordion/_accordion.scss +0 -7
  10. package/scss/components/breadcrumb/_breadcrumb.scss +1 -1
  11. package/scss/components/button/_button.scss +0 -9
  12. package/scss/components/checkbox/_checkbox.scss +17 -0
  13. package/scss/components/code-snippet/_code-snippet.scss +0 -5
  14. package/scss/components/content-switcher/_content-switcher.scss +424 -54
  15. package/scss/components/content-switcher/_index.scss +6 -1
  16. package/scss/components/content-switcher/_tokens.scss +110 -0
  17. package/scss/components/data-table/_data-table.scss +2 -1
  18. package/scss/components/data-table/expandable/_data-table-expandable.scss +0 -4
  19. package/scss/components/data-table/sort/_data-table-sort.scss +0 -7
  20. package/scss/components/date-picker/_date-picker.scss +0 -7
  21. package/scss/components/date-picker/_flatpickr.scss +0 -2
  22. package/scss/components/dialog/_dialog.scss +160 -13
  23. package/scss/components/dropdown/_dropdown.scss +0 -4
  24. package/scss/components/file-uploader/_file-uploader.scss +1 -5
  25. package/scss/components/fluid-number-input/_fluid-number-input.scss +103 -5
  26. package/scss/components/form/_form.scss +3 -1
  27. package/scss/components/list-box/_list-box.scss +0 -6
  28. package/scss/components/modal/_modal.scss +0 -5
  29. package/scss/components/notification/_actionable-notification.scss +0 -7
  30. package/scss/components/notification/_inline-notification.scss +0 -8
  31. package/scss/components/notification/_toast-notification.scss +0 -6
  32. package/scss/components/number-input/_number-input.scss +87 -18
  33. package/scss/components/overflow-menu/_overflow-menu.scss +0 -4
  34. package/scss/components/page-header/_page-header.scss +60 -19
  35. package/scss/components/pagination-nav/_pagination-nav.scss +0 -1
  36. package/scss/components/popover/_popover.scss +0 -1
  37. package/scss/components/radio-button/_radio-button.scss +1 -1
  38. package/scss/components/search/_search.scss +0 -7
  39. package/scss/components/select/_select.scss +0 -7
  40. package/scss/components/structured-list/_structured-list.scss +0 -8
  41. package/scss/components/tabs/_tabs.scss +6 -4
  42. package/scss/components/tag/_tag.scss +0 -5
  43. package/scss/components/text-input/_text-input.scss +0 -18
  44. package/scss/components/tile/_tile.scss +0 -22
  45. package/scss/components/ui-shell/side-nav/_side-nav.scss +0 -13
  46. package/scss/layer/_layer-sets.scss +5 -0
  47. package/scss/theme/_theme.scss +1 -0
  48. package/scss/utilities/_high-contrast-mode.scss +0 -4
  49. package/scss/utilities/_layout.scss +2 -1
  50. package/scss/utilities/_update_fields_on_layer.scss +1 -0
package/css/styles.css CHANGED
@@ -2548,6 +2548,7 @@ em {
2548
2548
  :root {
2549
2549
  --cds-layer: var(--cds-layer-01, #f4f4f4);
2550
2550
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
2551
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
2551
2552
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
2552
2553
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
2553
2554
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2565,6 +2566,7 @@ em {
2565
2566
  .cds--layer-one {
2566
2567
  --cds-layer: var(--cds-layer-01, #f4f4f4);
2567
2568
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
2569
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
2568
2570
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
2569
2571
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
2570
2572
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2582,6 +2584,7 @@ em {
2582
2584
  .cds--layer-two {
2583
2585
  --cds-layer: var(--cds-layer-02, #ffffff);
2584
2586
  --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
2587
+ --cds-layer-background: var(--cds-layer-background-02, #f4f4f4);
2585
2588
  --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
2586
2589
  --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
2587
2590
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
@@ -2599,6 +2602,7 @@ em {
2599
2602
  .cds--layer-three {
2600
2603
  --cds-layer: var(--cds-layer-03, #f4f4f4);
2601
2604
  --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
2605
+ --cds-layer-background: var(--cds-layer-background-03, #ffffff);
2602
2606
  --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
2603
2607
  --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
2604
2608
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
@@ -2613,6 +2617,18 @@ em {
2613
2617
  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
2614
2618
  }
2615
2619
 
2620
+ .cds--layer-one.cds--layer__with-background {
2621
+ background-color: var(--cds-layer-background);
2622
+ }
2623
+
2624
+ .cds--layer-two.cds--layer__with-background {
2625
+ background-color: var(--cds-layer-background);
2626
+ }
2627
+
2628
+ .cds--layer-three.cds--layer__with-background {
2629
+ background-color: var(--cds-layer-background);
2630
+ }
2631
+
2616
2632
  .cds--layout--size-xs {
2617
2633
  --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
2618
2634
  --cds-layout-size-height: var(--cds-layout-size-height-context);
@@ -2862,6 +2878,9 @@ em {
2862
2878
  --cds-layer-active-01: #c6c6c6;
2863
2879
  --cds-layer-active-02: #c6c6c6;
2864
2880
  --cds-layer-active-03: #c6c6c6;
2881
+ --cds-layer-background-01: #ffffff;
2882
+ --cds-layer-background-02: #f4f4f4;
2883
+ --cds-layer-background-03: #ffffff;
2865
2884
  --cds-layer-hover-01: #e8e8e8;
2866
2885
  --cds-layer-hover-02: #e8e8e8;
2867
2886
  --cds-layer-hover-03: #e8e8e8;
@@ -2908,6 +2927,7 @@ em {
2908
2927
  --cds-toggle-off: #8d8d8d;
2909
2928
  --cds-layer: var(--cds-layer-01, #f4f4f4);
2910
2929
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
2930
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
2911
2931
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
2912
2932
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
2913
2933
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2994,6 +3014,9 @@ em {
2994
3014
  --cds-status-blue: #0043ce;
2995
3015
  --cds-status-purple: #8a3ffc;
2996
3016
  --cds-status-gray: #6f6f6f;
3017
+ --cds-content-switcher-background: #e0e0e0;
3018
+ --cds-content-switcher-background-hover: #d1d1d1;
3019
+ --cds-content-switcher-selected: #ffffff;
2997
3020
  }
2998
3021
 
2999
3022
  .cds--g10 {
@@ -3094,6 +3117,9 @@ em {
3094
3117
  --cds-layer-active-01: #c6c6c6;
3095
3118
  --cds-layer-active-02: #c6c6c6;
3096
3119
  --cds-layer-active-03: #c6c6c6;
3120
+ --cds-layer-background-01: #f4f4f4;
3121
+ --cds-layer-background-02: #ffffff;
3122
+ --cds-layer-background-03: #f4f4f4;
3097
3123
  --cds-layer-hover-01: #e8e8e8;
3098
3124
  --cds-layer-hover-02: #e8e8e8;
3099
3125
  --cds-layer-hover-03: #e8e8e8;
@@ -3140,6 +3166,7 @@ em {
3140
3166
  --cds-toggle-off: #8d8d8d;
3141
3167
  --cds-layer: var(--cds-layer-01, #f4f4f4);
3142
3168
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
3169
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
3143
3170
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
3144
3171
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
3145
3172
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3226,6 +3253,9 @@ em {
3226
3253
  --cds-status-blue: #0043ce;
3227
3254
  --cds-status-purple: #8a3ffc;
3228
3255
  --cds-status-gray: #6f6f6f;
3256
+ --cds-content-switcher-background: #e0e0e0;
3257
+ --cds-content-switcher-background-hover: #d1d1d1;
3258
+ --cds-content-switcher-selected: #ffffff;
3229
3259
  }
3230
3260
 
3231
3261
  .cds--g90 {
@@ -3326,6 +3356,9 @@ em {
3326
3356
  --cds-layer-active-01: #6f6f6f;
3327
3357
  --cds-layer-active-02: #8d8d8d;
3328
3358
  --cds-layer-active-03: #393939;
3359
+ --cds-layer-background-01: #262626;
3360
+ --cds-layer-background-02: #393939;
3361
+ --cds-layer-background-03: #525252;
3329
3362
  --cds-layer-hover-01: #474747;
3330
3363
  --cds-layer-hover-02: #636363;
3331
3364
  --cds-layer-hover-03: #5e5e5e;
@@ -3372,6 +3405,7 @@ em {
3372
3405
  --cds-toggle-off: #8d8d8d;
3373
3406
  --cds-layer: var(--cds-layer-01, #f4f4f4);
3374
3407
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
3408
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
3375
3409
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
3376
3410
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
3377
3411
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3457,6 +3491,9 @@ em {
3457
3491
  --cds-status-blue: #4589ff;
3458
3492
  --cds-status-purple: #a56eff;
3459
3493
  --cds-status-gray: #8d8d8d;
3494
+ --cds-content-switcher-background: rgba(0, 0, 0, 0);
3495
+ --cds-content-switcher-background-hover: rgba(141, 141, 141, 0.12);
3496
+ --cds-content-switcher-selected: rgba(141, 141, 141, 0.24);
3460
3497
  }
3461
3498
 
3462
3499
  .cds--g100 {
@@ -3557,6 +3594,9 @@ em {
3557
3594
  --cds-layer-active-01: #525252;
3558
3595
  --cds-layer-active-02: #6f6f6f;
3559
3596
  --cds-layer-active-03: #8d8d8d;
3597
+ --cds-layer-background-01: #161616;
3598
+ --cds-layer-background-02: #262626;
3599
+ --cds-layer-background-03: #393939;
3560
3600
  --cds-layer-hover-01: #333333;
3561
3601
  --cds-layer-hover-02: #474747;
3562
3602
  --cds-layer-hover-03: #636363;
@@ -3603,6 +3643,7 @@ em {
3603
3643
  --cds-toggle-off: #6f6f6f;
3604
3644
  --cds-layer: var(--cds-layer-01, #f4f4f4);
3605
3645
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
3646
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
3606
3647
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
3607
3648
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
3608
3649
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3688,6 +3729,9 @@ em {
3688
3729
  --cds-status-blue: #4589ff;
3689
3730
  --cds-status-purple: #a56eff;
3690
3731
  --cds-status-gray: #8d8d8d;
3732
+ --cds-content-switcher-background: rgba(0, 0, 0, 0);
3733
+ --cds-content-switcher-background-hover: rgba(141, 141, 141, 0.12);
3734
+ --cds-content-switcher-selected: rgba(141, 141, 141, 0.24);
3691
3735
  }
3692
3736
 
3693
3737
  .cds--accordion {
@@ -4006,13 +4050,6 @@ li.cds--accordion__item--disabled:last-of-type {
4006
4050
  margin-inline-start: 1rem;
4007
4051
  }
4008
4052
 
4009
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
4010
- .cds--accordion__arrow,
4011
- .cds--accordion__item--active .cds--accordion__arrow {
4012
- fill: ButtonText;
4013
- }
4014
- }
4015
-
4016
4053
  [dir=rtl] .cds--accordion--start .cds--accordion__heading {
4017
4054
  padding-inline: var(--cds-layout-density-padding-inline-local) 0;
4018
4055
  }
@@ -4148,13 +4185,13 @@ li.cds--accordion__item--disabled:last-of-type {
4148
4185
  max-inline-size: 23rem;
4149
4186
  pointer-events: auto;
4150
4187
  }
4151
- .cds--layout--size-sm .cds--popover-content {
4188
+ .cds--popover-content.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--popover-content) {
4152
4189
  --cds-layout-size-height: var(--cds-layout-size-height-sm);
4153
4190
  }
4154
- .cds--layout--size-md .cds--popover-content {
4191
+ .cds--popover-content.cds--layout--size-md, .cds--layout--size-md :where(.cds--popover-content) {
4155
4192
  --cds-layout-size-height: var(--cds-layout-size-height-md);
4156
4193
  }
4157
- .cds--layout--size-lg .cds--popover-content {
4194
+ .cds--popover-content.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--popover-content) {
4158
4195
  --cds-layout-size-height: var(--cds-layout-size-height-lg);
4159
4196
  }
4160
4197
  .cds--popover-content *,
@@ -5145,13 +5182,6 @@ li.cds--accordion__item--disabled:last-of-type {
5145
5182
  }
5146
5183
  }
5147
5184
 
5148
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5149
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
5150
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
5151
- fill: ButtonText;
5152
- }
5153
- }
5154
-
5155
5185
  [dir=rtl] .cds--btn-set .cds--btn:not(:focus) {
5156
5186
  box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
5157
5187
  }
@@ -6534,12 +6564,6 @@ a.cds--overflow-menu-options__btn::before {
6534
6564
  }
6535
6565
  }
6536
6566
 
6537
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
6538
- .cds--overflow-menu svg {
6539
- fill: ButtonText;
6540
- }
6541
- }
6542
-
6543
6567
  /*stylelint-enable */
6544
6568
  .cds--overflow-menu__top-start {
6545
6569
  transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
@@ -6702,7 +6726,7 @@ a.cds--overflow-menu-options__btn::before {
6702
6726
  }
6703
6727
 
6704
6728
  .cds--breadcrumb-item .cds--overflow-menu:active .cds--overflow-menu__icon {
6705
- fill: var(--cds-text-primary, #161616);
6729
+ fill: var(--cds-icon-primary, #161616);
6706
6730
  }
6707
6731
 
6708
6732
  .cds--breadcrumb-menu-options:focus {
@@ -7124,12 +7148,14 @@ textarea:-webkit-autofill:focus {
7124
7148
  }
7125
7149
  }
7126
7150
 
7127
- input[type=number] {
7151
+ input[type=number],
7152
+ input[type=text].cds--number {
7128
7153
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
7129
7154
  }
7130
7155
 
7131
7156
  input[data-invalid]:not(:focus),
7132
7157
  .cds--number[data-invalid] input[type=number]:not(:focus),
7158
+ .cds--number[data-invalid] input[type=text]:not(:focus),
7133
7159
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
7134
7160
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
7135
7161
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
@@ -7142,6 +7168,7 @@ input[data-invalid]:not(:focus),
7142
7168
  @media screen and (prefers-contrast) {
7143
7169
  input[data-invalid]:not(:focus),
7144
7170
  .cds--number[data-invalid] input[type=number]:not(:focus),
7171
+ .cds--number[data-invalid] input[type=text]:not(:focus),
7145
7172
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
7146
7173
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
7147
7174
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
@@ -7367,6 +7394,11 @@ fieldset[disabled] .cds--form__helper-text {
7367
7394
  margin-block: 0.0625rem 0.125rem;
7368
7395
  margin-inline: 0.1875rem 0;
7369
7396
  }
7397
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7398
+ .cds--checkbox-label::before {
7399
+ border: 1px solid ButtonBorder;
7400
+ }
7401
+ }
7370
7402
 
7371
7403
  .cds--checkbox-label::after {
7372
7404
  position: absolute;
@@ -7390,6 +7422,14 @@ fieldset[disabled] .cds--form__helper-text {
7390
7422
  border-width: 1px;
7391
7423
  background-color: var(--cds-icon-primary, #161616);
7392
7424
  }
7425
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7426
+ .cds--checkbox:checked + .cds--checkbox-label::before,
7427
+ .cds--checkbox:indeterminate + .cds--checkbox-label::before,
7428
+ .cds--checkbox-label[data-contained-checkbox-state=true]::before {
7429
+ border: 1px solid ButtonBorder;
7430
+ background-color: SelectedItem;
7431
+ }
7432
+ }
7393
7433
 
7394
7434
  .cds--checkbox:checked + .cds--checkbox-label::after,
7395
7435
  .cds--checkbox-label[data-contained-checkbox-state=true]::after {
@@ -7520,6 +7560,12 @@ fieldset[disabled] .cds--form__helper-text {
7520
7560
  .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
7521
7561
  border-color: var(--cds-text-primary, #161616);
7522
7562
  }
7563
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7564
+ .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
7565
+ .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
7566
+ fill: SelectedItemText;
7567
+ }
7568
+ }
7523
7569
 
7524
7570
  .cds--checkbox-skeleton .cds--checkbox-label {
7525
7571
  cursor: default;
@@ -8345,12 +8391,6 @@ fieldset[disabled] .cds--form__helper-text {
8345
8391
  padding-block-end: 0;
8346
8392
  }
8347
8393
 
8348
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
8349
- .cds--snippet__icon {
8350
- fill: ButtonText;
8351
- }
8352
- }
8353
-
8354
8394
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
8355
8395
  .cds--snippet--inline:focus {
8356
8396
  color: Highlight;
@@ -8682,11 +8722,6 @@ fieldset[disabled] .cds--form__helper-text {
8682
8722
  fill: var(--cds-icon-secondary, #525252);
8683
8723
  transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
8684
8724
  }
8685
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
8686
- .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
8687
- fill: ButtonText;
8688
- }
8689
- }
8690
8725
 
8691
8726
  .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus {
8692
8727
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -8702,12 +8737,6 @@ fieldset[disabled] .cds--form__helper-text {
8702
8737
  .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
8703
8738
  fill: var(--cds-icon-primary, #161616);
8704
8739
  }
8705
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
8706
- .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg,
8707
- .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
8708
- fill: ButtonText;
8709
- }
8710
- }
8711
8740
 
8712
8741
  .cds--text-input--invalid,
8713
8742
  .cds--text-input--warning {
@@ -9019,13 +9048,6 @@ fieldset[disabled] .cds--form__helper-text {
9019
9048
  block-size: 1rem;
9020
9049
  }
9021
9050
 
9022
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9023
- .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,
9024
- .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg {
9025
- fill: ButtonText;
9026
- }
9027
- }
9028
-
9029
9051
  .cds--text-input__label-wrapper {
9030
9052
  display: flex;
9031
9053
  justify-content: space-between;
@@ -9057,16 +9079,16 @@ fieldset[disabled] .cds--form__helper-text {
9057
9079
  vertical-align: middle;
9058
9080
  word-break: break-word;
9059
9081
  }
9060
- .cds--layout--size-xs .cds--tag {
9082
+ .cds--tag.cds--layout--size-xs, .cds--layout--size-xs :where(.cds--tag) {
9061
9083
  --cds-layout-size-height: var(--cds-layout-size-height-xs);
9062
9084
  }
9063
- .cds--layout--size-sm .cds--tag {
9085
+ .cds--tag.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--tag) {
9064
9086
  --cds-layout-size-height: var(--cds-layout-size-height-sm);
9065
9087
  }
9066
- .cds--layout--size-md .cds--tag {
9088
+ .cds--tag.cds--layout--size-md, .cds--layout--size-md :where(.cds--tag) {
9067
9089
  --cds-layout-size-height: var(--cds-layout-size-height-md);
9068
9090
  }
9069
- .cds--layout--size-lg .cds--tag {
9091
+ .cds--tag.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--tag) {
9070
9092
  --cds-layout-size-height: var(--cds-layout-size-height-lg);
9071
9093
  }
9072
9094
  .cds--tag.cds--tag--operational {
@@ -9577,13 +9599,6 @@ fieldset[disabled] .cds--form__helper-text {
9577
9599
  }
9578
9600
  }
9579
9601
 
9580
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9581
- .cds--tag__close-icon svg,
9582
- .cds--tag__custom-icon svg {
9583
- fill: ButtonText;
9584
- }
9585
- }
9586
-
9587
9602
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9588
9603
  .cds--tag__close-icon:focus {
9589
9604
  color: Highlight;
@@ -10613,14 +10628,6 @@ fieldset[disabled] .cds--form__helper-text {
10613
10628
  }
10614
10629
  }
10615
10630
 
10616
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
10617
- .cds--list-box__menu-icon > svg,
10618
- .cds--list-box__selection > svg,
10619
- .cds--list-box__selection--multi > svg {
10620
- fill: ButtonText;
10621
- }
10622
- }
10623
-
10624
10631
  .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::after {
10625
10632
  position: absolute;
10626
10633
  background-color: var(--cds-border-subtle-01, #c6c6c6);
@@ -10966,19 +10973,19 @@ fieldset[disabled] .cds--form__helper-text {
10966
10973
  --cds-layout-size-height-xl: 1.5rem;
10967
10974
  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
10968
10975
  }
10969
- .cds--layout--size-xs .cds--contained-list .cds--tag {
10976
+ .cds--contained-list .cds--tag.cds--layout--size-xs, .cds--layout--size-xs :where(.cds--contained-list .cds--tag) {
10970
10977
  --cds-layout-size-height: var(--cds-layout-size-height-xs);
10971
10978
  }
10972
- .cds--layout--size-sm .cds--contained-list .cds--tag {
10979
+ .cds--contained-list .cds--tag.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--contained-list .cds--tag) {
10973
10980
  --cds-layout-size-height: var(--cds-layout-size-height-sm);
10974
10981
  }
10975
- .cds--layout--size-md .cds--contained-list .cds--tag {
10982
+ .cds--contained-list .cds--tag.cds--layout--size-md, .cds--layout--size-md :where(.cds--contained-list .cds--tag) {
10976
10983
  --cds-layout-size-height: var(--cds-layout-size-height-md);
10977
10984
  }
10978
- .cds--layout--size-lg .cds--contained-list .cds--tag {
10985
+ .cds--contained-list .cds--tag.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--contained-list .cds--tag) {
10979
10986
  --cds-layout-size-height: var(--cds-layout-size-height-lg);
10980
10987
  }
10981
- .cds--layout--size-xl .cds--contained-list .cds--tag {
10988
+ .cds--contained-list .cds--tag.cds--layout--size-xl, .cds--layout--size-xl :where(.cds--contained-list .cds--tag) {
10982
10989
  --cds-layout-size-height: var(--cds-layout-size-height-xl);
10983
10990
  }
10984
10991
 
@@ -11212,8 +11219,15 @@ fieldset[disabled] .cds--form__helper-text {
11212
11219
  --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
11213
11220
  display: flex;
11214
11221
  justify-content: space-evenly;
11222
+ border-radius: 0.25rem;
11215
11223
  block-size: var(--cds-layout-size-height-local);
11216
11224
  inline-size: 100%;
11225
+ outline: 0.0625rem solid var(--cds-border-inverse, #161616);
11226
+ outline-offset: -0.0625rem;
11227
+ }
11228
+
11229
+ .cds--content-switcher:has(.cds--content-switcher-btn:disabled) {
11230
+ outline-color: var(--cds-border-disabled, #c6c6c6);
11217
11231
  }
11218
11232
 
11219
11233
  .cds--content-switcher-btn {
@@ -11235,7 +11249,6 @@ fieldset[disabled] .cds--form__helper-text {
11235
11249
  color: var(--cds-text-secondary, #525252);
11236
11250
  text-align: start;
11237
11251
  text-decoration: none;
11238
- transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11239
11252
  white-space: nowrap;
11240
11253
  }
11241
11254
  .cds--content-switcher-btn html {
@@ -11257,6 +11270,7 @@ fieldset[disabled] .cds--form__helper-text {
11257
11270
  .cds--content-switcher-btn::after {
11258
11271
  position: absolute;
11259
11272
  display: block;
11273
+ border-radius: 0.25rem;
11260
11274
  background-color: var(--cds-layer-selected-inverse, #161616);
11261
11275
  block-size: 100%;
11262
11276
  content: "";
@@ -11265,23 +11279,16 @@ fieldset[disabled] .cds--form__helper-text {
11265
11279
  inset-inline-start: 0;
11266
11280
  transform: scaleY(0);
11267
11281
  transform-origin: bottom;
11268
- transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11269
- }
11270
- @media (prefers-reduced-motion: reduce) {
11271
- .cds--content-switcher-btn::after {
11272
- transition: none;
11273
- }
11274
11282
  }
11275
11283
  .cds--content-switcher-btn:disabled::after {
11276
11284
  display: none;
11277
11285
  }
11278
11286
  .cds--content-switcher-btn:focus {
11279
- z-index: 3;
11280
- border-color: var(--cds-focus, #0f62fe);
11281
- box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
11287
+ border: 0;
11282
11288
  }
11283
11289
  .cds--content-switcher-btn:focus::after {
11284
- clip-path: inset(3px 3px 3px 3px);
11290
+ border-radius: 0.25rem;
11291
+ box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
11285
11292
  }
11286
11293
  .cds--content-switcher-btn:hover {
11287
11294
  color: var(--cds-text-primary, #161616);
@@ -11300,8 +11307,25 @@ fieldset[disabled] .cds--form__helper-text {
11300
11307
  .cds--content-switcher-btn:disabled:hover {
11301
11308
  cursor: not-allowed;
11302
11309
  }
11303
- .cds--content-switcher-btn:disabled:first-child, .cds--content-switcher-btn:disabled:last-child {
11304
- border-color: var(--cds-border-disabled, #c6c6c6);
11310
+
11311
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
11312
+ display: block;
11313
+ border-radius: 0.25rem;
11314
+ block-size: 100%;
11315
+ box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
11316
+ content: "";
11317
+ inline-size: 100%;
11318
+ }
11319
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::after {
11320
+ background-color: var(--cds-focus-inset, #ffffff);
11321
+ transform: scaleY(1);
11322
+ }
11323
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
11324
+ border-radius: 0;
11325
+ background-color: var(--cds-layer-hover);
11326
+ border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11327
+ border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11328
+ box-shadow: none;
11305
11329
  }
11306
11330
 
11307
11331
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
@@ -11312,22 +11336,20 @@ fieldset[disabled] .cds--form__helper-text {
11312
11336
 
11313
11337
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
11314
11338
  border-end-start-radius: 0.25rem;
11315
- border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11316
11339
  border-start-start-radius: 0.25rem;
11340
+ box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
11317
11341
  }
11318
11342
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled {
11319
- border-color: var(--cds-border-disabled, #c6c6c6);
11320
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11343
+ box-shadow: none;
11321
11344
  }
11322
11345
 
11323
11346
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
11324
11347
  border-end-end-radius: 0.25rem;
11325
- border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11326
11348
  border-start-end-radius: 0.25rem;
11349
+ box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
11327
11350
  }
11328
11351
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled {
11329
- border-color: var(--cds-border-disabled, #c6c6c6);
11330
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11352
+ box-shadow: none;
11331
11353
  }
11332
11354
 
11333
11355
  .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected,
@@ -11335,6 +11357,11 @@ fieldset[disabled] .cds--form__helper-text {
11335
11357
  .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child {
11336
11358
  border: 0;
11337
11359
  }
11360
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:disabled::before,
11361
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child:disabled::before,
11362
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child:disabled::before {
11363
+ display: none;
11364
+ }
11338
11365
 
11339
11366
  .cds--content-switcher-btn::before {
11340
11367
  position: absolute;
@@ -11348,7 +11375,7 @@ fieldset[disabled] .cds--form__helper-text {
11348
11375
  }
11349
11376
 
11350
11377
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before {
11351
- display: none;
11378
+ background-color: transparent;
11352
11379
  }
11353
11380
 
11354
11381
  .cds--content-switcher-btn:focus::before,
@@ -11372,7 +11399,6 @@ fieldset[disabled] .cds--form__helper-text {
11372
11399
 
11373
11400
  .cds--content-switcher__icon {
11374
11401
  fill: var(--cds-icon-secondary, #525252);
11375
- transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
11376
11402
  }
11377
11403
 
11378
11404
  .cds--content-switcher__icon + span {
@@ -11392,13 +11418,36 @@ fieldset[disabled] .cds--form__helper-text {
11392
11418
  fill: var(--cds-icon-primary, #161616);
11393
11419
  }
11394
11420
 
11421
+ .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
11422
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
11423
+ .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
11424
+ .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
11425
+ z-index: 0;
11426
+ border-radius: 0;
11427
+ block-size: 100%;
11428
+ border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11429
+ border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11430
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
11431
+ content: "";
11432
+ inline-size: 100%;
11433
+ }
11434
+ .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
11435
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11436
+ .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
11437
+ .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
11438
+ background-color: var(--cds-focus-inset, #ffffff);
11439
+ transform: scaleY(1);
11440
+ }
11441
+
11395
11442
  .cds--content-switcher-btn.cds--content-switcher--selected {
11396
11443
  z-index: 3;
11397
- background-color: var(--cds-layer-selected-inverse, #161616);
11398
11444
  color: var(--cds-text-inverse, #ffffff);
11399
11445
  }
11446
+ .cds--content-switcher-btn.cds--content-switcher--selected:hover {
11447
+ background-color: transparent;
11448
+ }
11400
11449
  .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
11401
- background-color: var(--cds-layer-selected-disabled, #8d8d8d);
11450
+ background-color: var(--cds-button-disabled, #c6c6c6);
11402
11451
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11403
11452
  }
11404
11453
  .cds--content-switcher-btn.cds--content-switcher--selected::after {
@@ -11418,28 +11467,38 @@ fieldset[disabled] .cds--form__helper-text {
11418
11467
 
11419
11468
  .cds--content-switcher--icon-only {
11420
11469
  justify-content: flex-start;
11470
+ inline-size: -moz-fit-content;
11471
+ inline-size: fit-content;
11472
+ }
11473
+
11474
+ .cds--content-switcher--icon-only .cds--content-switcher-btn {
11475
+ align-items: center;
11476
+ padding: 0;
11477
+ transition: none;
11478
+ }
11479
+ .cds--content-switcher--icon-only .cds--content-switcher-btn:focus {
11480
+ box-shadow: none;
11481
+ }
11482
+
11483
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:first-of-type::before {
11484
+ background-color: transparent;
11421
11485
  }
11422
11486
 
11423
11487
  .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
11424
11488
  border-end-start-radius: 0.25rem;
11425
- border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11426
11489
  border-start-start-radius: 0.25rem;
11427
- }
11428
-
11429
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled],
11430
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] {
11431
- border-color: var(--cds-layer-selected-disabled, #8d8d8d);
11490
+ box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
11432
11491
  }
11433
11492
 
11434
11493
  .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
11435
11494
  border-end-end-radius: 0.25rem;
11436
- border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11437
11495
  border-start-end-radius: 0.25rem;
11496
+ box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
11438
11497
  }
11439
11498
 
11440
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn.cds--content-switcher--selected,
11441
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn.cds--content-switcher--selected {
11442
- border-color: var(--cds-background, #ffffff);
11499
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn[disabled],
11500
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn[disabled] {
11501
+ box-shadow: none;
11443
11502
  }
11444
11503
 
11445
11504
  .cds--content-switcher--lg .cds--content-switcher-btn {
@@ -11452,6 +11511,7 @@ fieldset[disabled] .cds--form__helper-text {
11452
11511
  }
11453
11512
 
11454
11513
  .cds--content-switcher--icon-only .cds--content-switcher-btn svg {
11514
+ z-index: 1;
11455
11515
  fill: var(--cds-icon-primary, #161616);
11456
11516
  }
11457
11517
 
@@ -11464,23 +11524,14 @@ fieldset[disabled] .cds--form__helper-text {
11464
11524
  block-size: 2rem;
11465
11525
  }
11466
11526
 
11467
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before {
11468
- display: none;
11469
- }
11470
-
11471
11527
  .cds--content-switcher-btn:focus::before,
11472
11528
  .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
11473
- .cds--content-switcher-btn:hover::before,
11474
- .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
11529
+ .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):not(:focus)::before,
11475
11530
  .cds--content-switcher--selected::before,
11476
11531
  .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
11477
11532
  background-color: transparent;
11478
11533
  }
11479
11534
 
11480
- .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] {
11481
- border-color: var(--cds-border-inverse, #161616);
11482
- }
11483
-
11484
11535
  .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
11485
11536
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11486
11537
  }
@@ -11494,6 +11545,190 @@ fieldset[disabled] .cds--form__helper-text {
11494
11545
  background-color: var(--cds-border-subtle);
11495
11546
  }
11496
11547
 
11548
+ .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus::before,
11549
+ .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
11550
+ .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
11551
+ .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
11552
+ z-index: 0;
11553
+ border-radius: 0;
11554
+ block-size: 100%;
11555
+ border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11556
+ border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11557
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
11558
+ content: "";
11559
+ inline-size: 100%;
11560
+ }
11561
+ .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11562
+ .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11563
+ .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
11564
+ .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn:not(.cds--content-switcher--selected)::after {
11565
+ background-color: var(--cds-focus-inset, #ffffff);
11566
+ transform: scaleY(1);
11567
+ }
11568
+
11569
+ .cds--content-switcher--low-contrast {
11570
+ background-color: var(--cds-content-switcher-background, #e0e0e0);
11571
+ outline-color: var(--cds-border-strong);
11572
+ }
11573
+
11574
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn {
11575
+ border-color: var(--cds-border-strong);
11576
+ }
11577
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover, .cds--content-switcher--low-contrast .cds--content-switcher-btn:active {
11578
+ background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
11579
+ }
11580
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn::before {
11581
+ background-color: var(--cds-border-strong);
11582
+ }
11583
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn::after {
11584
+ background-color: var(--cds-content-switcher-selected, #ffffff);
11585
+ }
11586
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled {
11587
+ border-color: var(--cds-border-disabled, #c6c6c6);
11588
+ background-color: transparent;
11589
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11590
+ }
11591
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover {
11592
+ cursor: not-allowed;
11593
+ }
11594
+
11595
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
11596
+ background: transparent;
11597
+ }
11598
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::after {
11599
+ background-color: var(--cds-content-switcher-background, #e0e0e0);
11600
+ box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
11601
+ }
11602
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
11603
+ border-color: var(--cds-border-strong);
11604
+ background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
11605
+ box-shadow: none;
11606
+ }
11607
+
11608
+ .cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
11609
+ box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
11610
+ }
11611
+
11612
+ .cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
11613
+ box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
11614
+ }
11615
+
11616
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
11617
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
11618
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
11619
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
11620
+ border-color: var(--cds-border-strong);
11621
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
11622
+ }
11623
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
11624
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11625
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
11626
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
11627
+ background-color: var(--cds-content-switcher-background, #e0e0e0);
11628
+ }
11629
+
11630
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected {
11631
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
11632
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
11633
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
11634
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
11635
+ color: var(--cds-text-primary, #161616);
11636
+ }
11637
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:hover {
11638
+ background-color: transparent;
11639
+ }
11640
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected::after {
11641
+ border-radius: 0.25rem;
11642
+ background-color: var(--cds-content-switcher-selected, #ffffff);
11643
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-border-inverse, #161616);
11644
+ }
11645
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:focus::after {
11646
+ box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
11647
+ }
11648
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
11649
+ border: 0.0625rem solid var(--cds-border-disabled, #c6c6c6);
11650
+ border-radius: 0.25rem;
11651
+ background-color: var(--cds-content-switcher-selected, #ffffff);
11652
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11653
+ }
11654
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled::before {
11655
+ background-color: transparent;
11656
+ }
11657
+
11658
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:focus::before,
11659
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:focus + .cds--content-switcher-btn::before,
11660
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover::before,
11661
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn::before,
11662
+ .cds--content-switcher--low-contrast .cds--content-switcher--selected::before,
11663
+ .cds--content-switcher--low-contrast .cds--content-switcher--selected + .cds--content-switcher-btn::before {
11664
+ background-color: transparent;
11665
+ }
11666
+
11667
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled::before,
11668
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn:disabled::before {
11669
+ background-color: var(--cds-border-disabled, #c6c6c6);
11670
+ }
11671
+
11672
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled + .cds--content-switcher-btn::before,
11673
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled:hover + .cds--content-switcher-btn::before,
11674
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before {
11675
+ background-color: transparent;
11676
+ }
11677
+
11678
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:not([disabled]) {
11679
+ box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
11680
+ }
11681
+
11682
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn:not([disabled]) {
11683
+ box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
11684
+ }
11685
+
11686
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn svg {
11687
+ fill: var(--cds-icon-secondary, #525252);
11688
+ }
11689
+
11690
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn:hover svg {
11691
+ fill: var(--cds-icon-primary, #161616);
11692
+ }
11693
+
11694
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
11695
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11696
+ }
11697
+
11698
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg {
11699
+ fill: var(--cds-icon-primary, #161616);
11700
+ }
11701
+
11702
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected[disabled] svg {
11703
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11704
+ }
11705
+
11706
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
11707
+ border-color: var(--cds-border-disabled, #c6c6c6);
11708
+ }
11709
+
11710
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered):focus::before,
11711
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
11712
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered)::before,
11713
+ .cds--content-switcher--low-contrast .cds--content-switcher--selected:not(.cds--content-switcher__selected-hovered)::before,
11714
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
11715
+ background-color: transparent;
11716
+ }
11717
+
11718
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus::before,
11719
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
11720
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
11721
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
11722
+ border-color: var(--cds-border-strong);
11723
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
11724
+ }
11725
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11726
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11727
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
11728
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn:not(.cds--content-switcher--selected)::after {
11729
+ background-color: var(--cds-content-switcher-background, #e0e0e0);
11730
+ }
11731
+
11497
11732
  .cds--radio-button-group {
11498
11733
  box-sizing: border-box;
11499
11734
  padding: 0;
@@ -11606,7 +11841,6 @@ fieldset[disabled] .cds--form__helper-text {
11606
11841
  }
11607
11842
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
11608
11843
  .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
11609
- fill: ButtonText;
11610
11844
  background-color: ButtonText;
11611
11845
  }
11612
11846
  }
@@ -11985,6 +12219,7 @@ fieldset[disabled] .cds--form__helper-text {
11985
12219
  .cds--data-table .cds--dropdown,
11986
12220
  .cds--data-table .cds--list-box,
11987
12221
  .cds--data-table .cds--number input[type=number],
12222
+ .cds--data-table .cds--number input[type=text],
11988
12223
  .cds--data-table .cds--number__control-btn::before,
11989
12224
  .cds--data-table .cds--number__control-btn::after,
11990
12225
  .cds--data-table .cds--text-input,
@@ -13071,13 +13306,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13071
13306
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
13072
13307
  }
13073
13308
 
13074
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
13075
- .cds--search-close svg,
13076
- .cds--search-magnifier-icon {
13077
- fill: ButtonText;
13078
- }
13079
- }
13080
-
13081
13309
  .cds--table-toolbar {
13082
13310
  position: relative;
13083
13311
  z-index: 1;
@@ -14011,12 +14239,6 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14011
14239
  }
14012
14240
  }
14013
14241
 
14014
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
14015
- .cds--table-expand__svg {
14016
- fill: ButtonText;
14017
- }
14018
- }
14019
-
14020
14242
  .cds--data-table.cds--skeleton th {
14021
14243
  padding-inline-start: 1rem;
14022
14244
  vertical-align: middle;
@@ -14369,13 +14591,6 @@ th .cds--table-sort__flex {
14369
14591
  margin-inline-end: 0.5rem;
14370
14592
  }
14371
14593
 
14372
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
14373
- .cds--table-sort__icon,
14374
- .cds--table-sort__icon-unsorted {
14375
- fill: ButtonText;
14376
- }
14377
- }
14378
-
14379
14594
  @keyframes fp-fade-in-down {
14380
14595
  from {
14381
14596
  opacity: 0;
@@ -14589,12 +14804,6 @@ th .cds--table-sort__flex {
14589
14804
  -moz-user-select: none;
14590
14805
  user-select: none;
14591
14806
  }
14592
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
14593
- .flatpickr-prev-month,
14594
- .flatpickr-next-month {
14595
- fill: ButtonText;
14596
- }
14597
- }
14598
14807
  @media screen and (prefers-reduced-motion: reduce) {
14599
14808
  .flatpickr-prev-month,
14600
14809
  .flatpickr-next-month {
@@ -15209,22 +15418,16 @@ th .cds--table-sort__flex {
15209
15418
  }
15210
15419
  }
15211
15420
 
15212
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15213
- .cds--date-picker__icon {
15214
- fill: ButtonText;
15215
- }
15216
- }
15217
-
15218
15421
  .cds--dialog {
15422
+ position: fixed;
15219
15423
  padding: 0;
15220
15424
  border: none;
15425
+ margin: auto;
15221
15426
  background-color: var(--cds-layer);
15222
- block-size: -moz-fit-content;
15223
- block-size: fit-content;
15224
15427
  color: var(--cds-text-primary, #161616);
15225
15428
  inline-size: 48rem;
15226
- max-block-size: 50%;
15227
- max-inline-size: 100%;
15429
+ inset: 0;
15430
+ max-block-size: 100%;
15228
15431
  opacity: 0;
15229
15432
  transform: translateY(calc(-1 * 1.5rem));
15230
15433
  /** opening and closing is used in as allow-discrete is not currently supported wide enough
@@ -15250,17 +15453,12 @@ th .cds--table-sort__flex {
15250
15453
  }
15251
15454
  @media (min-width: 66rem) {
15252
15455
  .cds--dialog {
15253
- max-inline-size: 72%;
15254
- }
15255
- }
15256
- @media (min-width: 82rem) {
15257
- .cds--dialog {
15258
- max-inline-size: 64%;
15456
+ max-inline-size: 60%;
15259
15457
  }
15260
15458
  }
15261
15459
  @media (min-width: 82rem) {
15262
15460
  .cds--dialog {
15263
- max-inline-size: 60%;
15461
+ max-inline-size: 48%;
15264
15462
  }
15265
15463
  }
15266
15464
  .cds--dialog[open] {
@@ -15282,9 +15480,12 @@ th .cds--table-sort__flex {
15282
15480
 
15283
15481
  .cds--dialog__header {
15284
15482
  position: relative;
15285
- overflow: visible;
15483
+ grid-area: header;
15286
15484
  inline-size: 100%;
15485
+ margin-block-end: 0.5rem;
15287
15486
  min-block-size: 3rem;
15487
+ padding-block-start: 1rem;
15488
+ padding-inline: 1rem 3rem;
15288
15489
  }
15289
15490
 
15290
15491
  /* Transition the :backdrop when the dialog modal is promoted to the top layer */
@@ -15328,6 +15529,159 @@ because the nesting selector cannot represent pseudo-elements. */
15328
15529
  inset-inline-end: 0;
15329
15530
  }
15330
15531
 
15532
+ .cds--dialog-header__label {
15533
+ box-sizing: border-box;
15534
+ padding: 0;
15535
+ border: 0;
15536
+ margin: 0;
15537
+ font-family: inherit;
15538
+ font-size: 100%;
15539
+ vertical-align: baseline;
15540
+ font-size: var(--cds-label-01-font-size, 0.75rem);
15541
+ font-weight: var(--cds-label-01-font-weight, 400);
15542
+ line-height: var(--cds-label-01-line-height, 1.33333);
15543
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
15544
+ color: var(--cds-text-secondary, #525252);
15545
+ margin-block-end: 0.25rem;
15546
+ }
15547
+ .cds--dialog-header__label *,
15548
+ .cds--dialog-header__label *::before,
15549
+ .cds--dialog-header__label *::after {
15550
+ box-sizing: inherit;
15551
+ }
15552
+
15553
+ .cds--dialog-header__heading {
15554
+ box-sizing: border-box;
15555
+ padding: 0;
15556
+ border: 0;
15557
+ margin: 0;
15558
+ font-family: inherit;
15559
+ font-size: 100%;
15560
+ vertical-align: baseline;
15561
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
15562
+ font-weight: var(--cds-heading-03-font-weight, 400);
15563
+ line-height: var(--cds-heading-03-line-height, 1.4);
15564
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
15565
+ margin: 0;
15566
+ color: var(--cds-text-primary, #161616);
15567
+ padding-inline-end: calc(20% - 3rem);
15568
+ }
15569
+ .cds--dialog-header__heading *,
15570
+ .cds--dialog-header__heading *::before,
15571
+ .cds--dialog-header__heading *::after {
15572
+ box-sizing: inherit;
15573
+ }
15574
+
15575
+ .cds--dialog-container {
15576
+ display: grid;
15577
+ background-color: var(--cds-layer);
15578
+ grid-template-areas: "header" "content" "footer";
15579
+ grid-template-columns: 100%;
15580
+ grid-template-rows: auto minmax(0, 1fr) auto;
15581
+ inline-size: 100%;
15582
+ }
15583
+ @media (min-width: 42rem) {
15584
+ .cds--dialog-container {
15585
+ max-block-size: 90vh;
15586
+ }
15587
+ }
15588
+ @media (min-width: 66rem) {
15589
+ .cds--dialog-container {
15590
+ max-block-size: 84vh;
15591
+ }
15592
+ }
15593
+
15594
+ .cds--dialog-content {
15595
+ position: relative;
15596
+ grid-area: content;
15597
+ overflow-y: auto;
15598
+ padding-block: 0.5rem 3rem;
15599
+ padding-inline: 1rem 1rem;
15600
+ }
15601
+ .cds--dialog-content:focus {
15602
+ outline: 2px solid var(--cds-focus, #0f62fe);
15603
+ outline-offset: -2px;
15604
+ }
15605
+ @media screen and (prefers-contrast) {
15606
+ .cds--dialog-content:focus {
15607
+ outline-style: dotted;
15608
+ }
15609
+ }
15610
+
15611
+ .cds--dialog-scroll-content {
15612
+ border-block-end: 0.125rem solid transparent;
15613
+ -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 5rem), transparent calc(100% - 3rem), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 1rem, transparent 1rem), linear-gradient(to right, var(--cds-layer) 0, 0.125rem, transparent 0.125rem), linear-gradient(to top, var(--cds-layer) 0, 0.125rem, transparent 0.125rem);
15614
+ mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 5rem), transparent calc(100% - 3rem), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 1rem, transparent 1rem), linear-gradient(to right, var(--cds-layer) 0, 0.125rem, transparent 0.125rem), linear-gradient(to top, var(--cds-layer) 0, 0.125rem, transparent 0.125rem);
15615
+ }
15616
+
15617
+ .cds--dialog-scroll-content > *:last-child {
15618
+ margin-block-end: 1.5rem;
15619
+ }
15620
+
15621
+ .cds--dialog-scroll-content:has(.cds--autoalign) {
15622
+ -webkit-mask-image: none;
15623
+ mask-image: none;
15624
+ }
15625
+
15626
+ .cds--dialog-footer {
15627
+ display: flex;
15628
+ align-items: center;
15629
+ justify-content: flex-end;
15630
+ block-size: 4rem;
15631
+ grid-area: footer;
15632
+ }
15633
+
15634
+ .cds--dialog-footer .cds--btn {
15635
+ flex: 0 1 50%;
15636
+ align-items: baseline;
15637
+ margin: 0;
15638
+ block-size: 4rem;
15639
+ max-inline-size: none;
15640
+ }
15641
+
15642
+ .cds--dialog-footer--three-button .cds--btn {
15643
+ flex: 0 1 25%;
15644
+ align-items: flex-start;
15645
+ }
15646
+
15647
+ .cds--dialog--danger {
15648
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
15649
+ }
15650
+
15651
+ .cds--dialog--danger .cds--dialog-container {
15652
+ background: linear-gradient(to top, var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
15653
+ border: 1px solid transparent;
15654
+ background-color: var(--cds-layer);
15655
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
15656
+ }
15657
+
15658
+ .cds--dialog--danger .cds--dialog-container:has(.cds--dialog-footer) {
15659
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 4rem), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 4rem), 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, 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-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
15660
+ box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
15661
+ }
15662
+
15663
+ .cds--dialog--danger .cds--dialog-content.cds--dialog-scroll-content {
15664
+ -webkit-mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 5rem), transparent calc(100% - 3rem), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 1rem, transparent 1rem), linear-gradient(to right, var(--cds-layer) 0, 0.125rem, transparent 0.125rem), linear-gradient(to top, var(--cds-layer) 0, 0.125rem, transparent 0.125rem);
15665
+ mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 5rem), transparent calc(100% - 3rem), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 1rem, transparent 1rem), linear-gradient(to right, var(--cds-layer) 0, 0.125rem, transparent 0.125rem), linear-gradient(to top, var(--cds-layer) 0, 0.125rem, transparent 0.125rem);
15666
+ }
15667
+
15668
+ .cds--dialog__close {
15669
+ padding: 0.75rem;
15670
+ border: 2px solid transparent;
15671
+ background-color: transparent;
15672
+ block-size: 3rem;
15673
+ cursor: pointer;
15674
+ inline-size: 3rem;
15675
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
15676
+ }
15677
+ .cds--dialog__close:hover {
15678
+ background-color: var(--cds-layer-hover);
15679
+ }
15680
+ .cds--dialog__close:focus {
15681
+ border-color: var(--cds-focus, #0f62fe);
15682
+ outline: none;
15683
+ }
15684
+
15331
15685
  .cds--dropdown__wrapper--inline {
15332
15686
  display: inline-grid;
15333
15687
  align-items: center;
@@ -15820,12 +16174,6 @@ button.cds--dropdown-text:focus {
15820
16174
  }
15821
16175
  }
15822
16176
 
15823
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15824
- .cds--list-box__menu-item__selected-icon {
15825
- fill: ButtonText;
15826
- }
15827
- }
15828
-
15829
16177
  .cds--dropdown--readonly,
15830
16178
  .cds--dropdown--readonly:hover {
15831
16179
  background-color: transparent;
@@ -16446,12 +16794,6 @@ button.cds--dropdown-text:focus {
16446
16794
  }
16447
16795
  }
16448
16796
 
16449
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
16450
- .cds--file__state-container .cds--file-close svg path {
16451
- fill: ButtonText;
16452
- }
16453
- }
16454
-
16455
16797
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper {
16456
16798
  position: relative;
16457
16799
  background: var(--cds-field);
@@ -17334,11 +17676,13 @@ button.cds--dropdown-text:focus {
17334
17676
  font-weight: 600;
17335
17677
  }
17336
17678
 
17337
- .cds--number .cds--number__input-wrapper--warning input[type=number] {
17679
+ .cds--number .cds--number__input-wrapper--warning input[type=number],
17680
+ .cds--number .cds--number__input-wrapper--warning input[type=text] {
17338
17681
  padding-inline-end: 8rem;
17339
17682
  }
17340
17683
 
17341
- .cds--number input[type=number] {
17684
+ .cds--number input[type=number],
17685
+ .cds--number input[type=text] {
17342
17686
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
17343
17687
  font-weight: var(--cds-body-compact-01-font-weight, 400);
17344
17688
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -17363,54 +17707,68 @@ button.cds--dropdown-text:focus {
17363
17707
  padding-inline: 1rem 6rem;
17364
17708
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
17365
17709
  }
17366
- .cds--number input[type=number]:focus {
17710
+ .cds--number input[type=number]:focus,
17711
+ .cds--number input[type=text]:focus {
17367
17712
  outline: 2px solid var(--cds-focus, #0f62fe);
17368
17713
  outline-offset: -2px;
17369
17714
  }
17370
17715
  @media screen and (prefers-contrast) {
17371
- .cds--number input[type=number]:focus {
17716
+ .cds--number input[type=number]:focus,
17717
+ .cds--number input[type=text]:focus {
17372
17718
  outline-style: dotted;
17373
17719
  }
17374
17720
  }
17375
- .cds--number input[type=number]:disabled ~ .cds--number__controls {
17721
+ .cds--number input[type=number]:disabled ~ .cds--number__controls,
17722
+ .cds--number input[type=text]:disabled ~ .cds--number__controls {
17376
17723
  cursor: not-allowed;
17377
17724
  pointer-events: none;
17378
17725
  }
17379
- .cds--number input[type=number]:disabled ~ .cds--number__controls svg {
17726
+ .cds--number input[type=number]:disabled ~ .cds--number__controls svg,
17727
+ .cds--number input[type=text]:disabled ~ .cds--number__controls svg {
17380
17728
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
17381
17729
  }
17382
- .cds--number input[type=number]::-ms-clear {
17730
+ .cds--number input[type=number]::-ms-clear,
17731
+ .cds--number input[type=text]::-ms-clear {
17383
17732
  display: none;
17384
17733
  }
17385
- .cds--number input[type=number]::-webkit-inner-spin-button {
17734
+ .cds--number input[type=number]::-webkit-inner-spin-button,
17735
+ .cds--number input[type=text]::-webkit-inner-spin-button {
17386
17736
  -webkit-appearance: none;
17387
17737
  appearance: none;
17388
17738
  }
17389
- .cds--number input[type=number][data-invalid] {
17739
+ .cds--number input[type=number][data-invalid],
17740
+ .cds--number input[type=text][data-invalid] {
17390
17741
  padding-inline-end: 8rem;
17391
17742
  }
17392
17743
 
17393
- .cds--number--lg.cds--number input[type=number] {
17744
+ .cds--number--lg.cds--number input[type=number],
17745
+ .cds--number--lg.cds--number input[type=text] {
17394
17746
  padding-inline-end: 7rem;
17395
17747
  }
17396
- .cds--number--lg.cds--number input[type=number][data-invalid] {
17748
+ .cds--number--lg.cds--number input[type=number][data-invalid],
17749
+ .cds--number--lg.cds--number input[type=text][data-invalid] {
17397
17750
  padding-inline-end: 9rem;
17398
17751
  }
17399
- .cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=number] {
17752
+ .cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=number],
17753
+ .cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=text] {
17400
17754
  padding-inline-end: 9rem;
17401
17755
  }
17402
17756
 
17403
- .cds--number--sm.cds--number input[type=number] {
17757
+ .cds--number--sm.cds--number input[type=number],
17758
+ .cds--number--sm.cds--number input[type=text] {
17404
17759
  padding-inline-end: 5rem;
17405
17760
  }
17406
- .cds--number--sm.cds--number input[type=number][data-invalid] {
17761
+ .cds--number--sm.cds--number input[type=number][data-invalid],
17762
+ .cds--number--sm.cds--number input[type=text][data-invalid] {
17407
17763
  padding-inline-end: 7rem;
17408
17764
  }
17409
- .cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=number] {
17765
+ .cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=number],
17766
+ .cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=text] {
17410
17767
  padding-inline-end: 7rem;
17411
17768
  }
17412
17769
 
17413
- .cds--number input[type=number]:disabled {
17770
+ .cds--number input[type=number]:disabled,
17771
+ .cds--number input[type=text]:disabled {
17414
17772
  background-color: var(--cds-field);
17415
17773
  border-block-end-color: transparent;
17416
17774
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -17519,11 +17877,13 @@ button.cds--dropdown-text:focus {
17519
17877
  order: 2;
17520
17878
  }
17521
17879
 
17522
- .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
17880
+ .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn,
17881
+ .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
17523
17882
  border-block-end-color: var(--cds-support-error, #da1e28);
17524
17883
  }
17525
17884
 
17526
- .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
17885
+ .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
17886
+ .cds--number input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn {
17527
17887
  border-width: 2px 0;
17528
17888
  border-style: solid;
17529
17889
  border-color: var(--cds-focus, #0f62fe);
@@ -17531,15 +17891,18 @@ button.cds--dropdown-text:focus {
17531
17891
  outline-offset: -2px;
17532
17892
  }
17533
17893
 
17534
- .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
17894
+ .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover,
17895
+ .cds--number input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
17535
17896
  box-shadow: -4px 0 0 -2px var(--cds-focus, #0f62fe) inset;
17536
17897
  }
17537
17898
 
17538
- .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
17899
+ .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover,
17900
+ .cds--number input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
17539
17901
  box-shadow: -4px 0 0 -2px var(--cds-support-error, #da1e28) inset;
17540
17902
  }
17541
17903
 
17542
- .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
17904
+ .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover,
17905
+ .cds--number input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
17543
17906
  border-width: 2px 0;
17544
17907
  border-style: solid;
17545
17908
  border-color: var(--cds-support-error, #da1e28);
@@ -17547,12 +17910,14 @@ button.cds--dropdown-text:focus {
17547
17910
  outline-offset: -2px;
17548
17911
  }
17549
17912
 
17550
- .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
17913
+ .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover,
17914
+ .cds--number input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
17551
17915
  outline: 2px solid var(--cds-focus, #0f62fe);
17552
17916
  outline-offset: -2px;
17553
17917
  }
17554
17918
  @media screen and (prefers-contrast) {
17555
- .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
17919
+ .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover,
17920
+ .cds--number input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
17556
17921
  outline-style: dotted;
17557
17922
  }
17558
17923
  }
@@ -17582,11 +17947,13 @@ button.cds--dropdown-text:focus {
17582
17947
  background-color: var(--cds-border-subtle-02, #e0e0e0);
17583
17948
  }
17584
17949
 
17585
- .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider:first-of-type {
17950
+ .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider:first-of-type,
17951
+ .cds--number input[type=text]:disabled + .cds--number__controls .cds--number__rule-divider:first-of-type {
17586
17952
  background-color: transparent;
17587
17953
  }
17588
17954
 
17589
- .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider {
17955
+ .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider,
17956
+ .cds--number input[type=text]:disabled + .cds--number__controls .cds--number__rule-divider {
17590
17957
  background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
17591
17958
  }
17592
17959
 
@@ -17637,7 +18004,8 @@ button.cds--dropdown-text:focus {
17637
18004
  opacity: 1;
17638
18005
  }
17639
18006
 
17640
- .cds--number--lg input[type=number] {
18007
+ .cds--number--lg input[type=number],
18008
+ .cds--number--lg input[type=text] {
17641
18009
  block-size: 3rem;
17642
18010
  }
17643
18011
 
@@ -17649,7 +18017,8 @@ button.cds--dropdown-text:focus {
17649
18017
  inline-size: 3rem;
17650
18018
  }
17651
18019
 
17652
- .cds--number--sm input[type=number] {
18020
+ .cds--number--sm input[type=number],
18021
+ .cds--number--sm input[type=text] {
17653
18022
  block-size: 2rem;
17654
18023
  }
17655
18024
 
@@ -17665,12 +18034,15 @@ button.cds--dropdown-text:focus {
17665
18034
  margin-block-start: 0;
17666
18035
  }
17667
18036
 
17668
- .cds--number--nosteppers input[type=number] {
18037
+ .cds--number--nosteppers input[type=number],
18038
+ .cds--number--nosteppers input[type=text] {
17669
18039
  padding-inline-end: 0;
17670
18040
  }
17671
18041
 
17672
18042
  .cds--number--nosteppers input[type=number][data-invalid],
17673
- .cds--number--nosteppers .cds--number__input-wrapper--warning input[type=number] {
18043
+ .cds--number--nosteppers input[type=text][data-invalid],
18044
+ .cds--number--nosteppers .cds--number__input-wrapper--warning input[type=number],
18045
+ .cds--number--nosteppers .cds--number__input-wrapper--warning input[type=text] {
17674
18046
  padding-inline-end: 3rem;
17675
18047
  }
17676
18048
 
@@ -17678,7 +18050,8 @@ button.cds--dropdown-text:focus {
17678
18050
  inset-inline-end: 1rem;
17679
18051
  }
17680
18052
 
17681
- .cds--number--readonly input[type=number] {
18053
+ .cds--number--readonly input[type=number],
18054
+ .cds--number--readonly input[type=text] {
17682
18055
  background: transparent;
17683
18056
  border-block-end-color: var(--cds-border-subtle);
17684
18057
  }
@@ -17692,7 +18065,8 @@ button.cds--dropdown-text:focus {
17692
18065
  cursor: pointer;
17693
18066
  }
17694
18067
 
17695
- .cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
18068
+ .cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
18069
+ .cds--number--readonly input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
17696
18070
  outline: none;
17697
18071
  }
17698
18072
 
@@ -17788,7 +18162,11 @@ button.cds--dropdown-text:focus {
17788
18162
  .cds--number__input-wrapper--decorator input[type=number]:has(~ .cds--number__input-inner-wrapper--decorator .cds--ai-label):not(:has(~ .cds--number__input-inner-wrapper--decorator .cds--ai-label--revert)),
17789
18163
  .cds--number__input-wrapper--slug input[type=number]:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
17790
18164
  .cds--number__input-wrapper--slug input[type=number]:has(~ .cds--slug):not(:has(~ .cds--slug--revert)),
17791
- .cds--number__input-wrapper--slug input[type=number]:disabled {
18165
+ .cds--number__input-wrapper--slug input[type=number]:disabled,
18166
+ .cds--number__input-wrapper--decorator input[type=text]:has(~ .cds--number__input-inner-wrapper--decorator .cds--ai-label):not(:has(~ .cds--number__input-inner-wrapper--decorator .cds--ai-label--revert)),
18167
+ .cds--number__input-wrapper--slug input[type=text]:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
18168
+ .cds--number__input-wrapper--slug input[type=text]:has(~ .cds--slug):not(:has(~ .cds--slug--revert)),
18169
+ .cds--number__input-wrapper--slug input[type=text]:disabled {
17792
18170
  background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
17793
18171
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
17794
18172
  padding-inline-end: 9.0625rem;
@@ -17823,7 +18201,8 @@ button.cds--dropdown-text:focus {
17823
18201
  animation: none;
17824
18202
  }
17825
18203
  }
17826
- .cds--number.cds--skeleton input[type=number] {
18204
+ .cds--number.cds--skeleton input[type=number],
18205
+ .cds--number.cds--skeleton input[type=text] {
17827
18206
  display: none;
17828
18207
  }
17829
18208
 
@@ -17853,12 +18232,6 @@ button.cds--dropdown-text:focus {
17853
18232
  }
17854
18233
  }
17855
18234
 
17856
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
17857
- .cds--number__control-btn svg {
17858
- fill: ButtonText;
17859
- }
17860
- }
17861
-
17862
18235
  .cds--number-input--fluid {
17863
18236
  position: relative;
17864
18237
  background: var(--cds-field);
@@ -17894,7 +18267,8 @@ button.cds--dropdown-text:focus {
17894
18267
  position: initial;
17895
18268
  }
17896
18269
 
17897
- .cds--number-input--fluid input[type=number] {
18270
+ .cds--number-input--fluid input[type=number],
18271
+ .cds--number-input--fluid input[type=text] {
17898
18272
  padding: 2rem 5rem 0.8125rem 1rem;
17899
18273
  background: transparent;
17900
18274
  min-block-size: 4rem;
@@ -17907,31 +18281,39 @@ button.cds--dropdown-text:focus {
17907
18281
  transform: translate(0);
17908
18282
  }
17909
18283
 
17910
- .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
18284
+ .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
18285
+ .cds--number-input--fluid input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn {
17911
18286
  border-block-end-color: var(--cds-focus, #0f62fe);
17912
18287
  box-shadow: inset 0 -1px var(--cds-focus, #0f62fe);
17913
18288
  }
17914
18289
 
17915
- .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
18290
+ .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
18291
+ .cds--number-input--fluid input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
17916
18292
  box-shadow: inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe);
17917
18293
  }
17918
18294
 
17919
18295
  .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
17920
- .cds--number-input--fluid--invalid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
18296
+ .cds--number-input--fluid--invalid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
18297
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn,
18298
+ .cds--number-input--fluid--invalid input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn {
17921
18299
  border-block-end-color: transparent;
17922
18300
  box-shadow: none;
17923
18301
  }
17924
18302
 
17925
18303
  .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
17926
- .cds--number-input--fluid--invalid input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
18304
+ .cds--number-input--fluid--invalid input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
18305
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
18306
+ .cds--number-input--fluid--invalid input[type=text][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
17927
18307
  box-shadow: inset -2px 0 var(--cds-focus, #0f62fe);
17928
18308
  }
17929
18309
 
17930
- .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
18310
+ .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover,
18311
+ .cds--number-input--fluid--invalid input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
17931
18312
  box-shadow: inset -2px 0 var(--cds-support-error, #da1e28);
17932
18313
  }
17933
18314
 
17934
- .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
18315
+ .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover,
18316
+ .cds--number-input--fluid--invalid input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
17935
18317
  box-shadow: none;
17936
18318
  }
17937
18319
 
@@ -17945,19 +18327,24 @@ button.cds--dropdown-text:focus {
17945
18327
  }
17946
18328
  }
17947
18329
 
17948
- .cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
18330
+ .cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
18331
+ .cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
17949
18332
  border-block-end: 1px solid var(--cds-focus, #0f62fe);
17950
18333
  outline: none;
17951
18334
  }
17952
18335
 
17953
18336
  .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
17954
- .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
18337
+ .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover,
18338
+ .cds--number-input--fluid--invalid input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
18339
+ .cds--number-input--fluid--invalid .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
17955
18340
  outline: 2px solid var(--cds-focus, #0f62fe);
17956
18341
  outline-offset: -2px;
17957
18342
  }
17958
18343
  @media screen and (prefers-contrast) {
17959
18344
  .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
17960
- .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
18345
+ .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover,
18346
+ .cds--number-input--fluid--invalid input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
18347
+ .cds--number-input--fluid--invalid .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
17961
18348
  outline-style: dotted;
17962
18349
  }
17963
18350
  }
@@ -17976,11 +18363,13 @@ button.cds--dropdown-text:focus {
17976
18363
  display: none;
17977
18364
  }
17978
18365
 
17979
- .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] {
18366
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number],
18367
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text] {
17980
18368
  border-block-end: 1px solid transparent;
17981
18369
  }
17982
18370
 
17983
- .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus {
18371
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus,
18372
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text]:focus {
17984
18373
  outline: none;
17985
18374
  }
17986
18375
 
@@ -18011,23 +18400,31 @@ button.cds--dropdown-text:focus {
18011
18400
  }
18012
18401
  }
18013
18402
 
18014
- .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number] {
18403
+ .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number],
18404
+ .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=text] {
18015
18405
  border-block-end: 1px solid transparent;
18016
18406
  }
18017
18407
 
18018
18408
  .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number],
18019
18409
  .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:hover,
18020
- .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn:hover:not(:focus) {
18410
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn:hover:not(:focus),
18411
+ .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=text],
18412
+ .cds--number-input--fluid--invalid .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:hover,
18413
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text] ~ .cds--number__controls .cds--number__control-btn:hover:not(:focus) {
18021
18414
  outline: none;
18022
18415
  }
18023
18416
 
18024
18417
  .cds--number-input--fluid.cds--number-input--invalid .cds--number__input-wrapper input[type=number] ~ .cds--number__controls .cds--number__control-btn,
18025
- .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn {
18418
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn,
18419
+ .cds--number-input--fluid.cds--number-input--invalid .cds--number__input-wrapper input[type=text] ~ .cds--number__controls .cds--number__control-btn,
18420
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text] ~ .cds--number__controls .cds--number__control-btn {
18026
18421
  border-block-end: none;
18027
18422
  }
18028
18423
 
18029
18424
  .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn,
18030
- .cds--number-input--fluid .cds--number input[type=number] ~ .cds--number__controls .cds--number__control-btn {
18425
+ .cds--number-input--fluid .cds--number input[type=number] ~ .cds--number__controls .cds--number__control-btn,
18426
+ .cds--number-input--fluid--invalid .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn,
18427
+ .cds--number-input--fluid .cds--number input[type=text] ~ .cds--number__controls .cds--number__control-btn {
18031
18428
  border: initial;
18032
18429
  border-block-end-width: 0.0625rem;
18033
18430
  }
@@ -18036,7 +18433,8 @@ button.cds--dropdown-text:focus {
18036
18433
  border-block-end: 1px solid var(--cds-border-subtle);
18037
18434
  }
18038
18435
 
18039
- .cds--number-input--fluid--disabled.cds--number-input--fluid--invalid .cds--number input[type=number]:disabled {
18436
+ .cds--number-input--fluid--disabled.cds--number-input--fluid--invalid .cds--number input[type=number]:disabled,
18437
+ .cds--number-input--fluid--disabled.cds--number-input--fluid--invalid .cds--number input[type=text]:disabled {
18040
18438
  background-color: transparent;
18041
18439
  }
18042
18440
 
@@ -18517,12 +18915,6 @@ optgroup.cds--select-optgroup:disabled,
18517
18915
  inset-inline-end: 5rem;
18518
18916
  }
18519
18917
 
18520
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
18521
- .cds--select__arrow {
18522
- fill: ButtonText;
18523
- }
18524
- }
18525
-
18526
18918
  .cds--select--fluid .cds--select {
18527
18919
  position: relative;
18528
18920
  background: var(--cds-field);
@@ -19804,6 +20196,7 @@ optgroup.cds--select-optgroup:disabled,
19804
20196
  .cds--modal .cds--list-box__wrapper--fluid .cds--list-box,
19805
20197
  .cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
19806
20198
  .cds--modal .cds--number-input--fluid input[type=number],
20199
+ .cds--modal .cds--number-input--fluid input[type=text],
19807
20200
  .cds--modal .cds--number-input--fluid .cds--number__control-btn::before,
19808
20201
  .cds--modal .cds--number-input--fluid .cds--number__control-btn::after,
19809
20202
  .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
@@ -20175,12 +20568,6 @@ optgroup.cds--select-optgroup:disabled,
20175
20568
  display: none;
20176
20569
  }
20177
20570
 
20178
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
20179
- .cds--modal-close__icon {
20180
- fill: ButtonText;
20181
- }
20182
- }
20183
-
20184
20571
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
20185
20572
  .cds--modal-close:focus {
20186
20573
  color: Highlight;
@@ -20530,18 +20917,6 @@ optgroup.cds--select-optgroup:disabled,
20530
20917
  }
20531
20918
  }
20532
20919
 
20533
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
20534
- .cds--inline-notification .cds--inline-notification__icon {
20535
- fill: ButtonText;
20536
- }
20537
- }
20538
-
20539
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
20540
- .cds--inline-notification .cds--inline-notification__close-icon {
20541
- fill: ButtonText;
20542
- }
20543
- }
20544
-
20545
20920
  .cds--toast-notification {
20546
20921
  display: flex;
20547
20922
  block-size: auto;
@@ -20804,18 +21179,6 @@ optgroup.cds--select-optgroup:disabled,
20804
21179
  }
20805
21180
  }
20806
21181
 
20807
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
20808
- .cds--toast-notification .cds--toast-notification__close-icon {
20809
- fill: ButtonText;
20810
- }
20811
- }
20812
-
20813
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
20814
- .cds--toast-notification .cds--toast-notification__icon {
20815
- fill: ButtonText;
20816
- }
20817
- }
20818
-
20819
21182
  .cds--actionable-notification {
20820
21183
  position: relative;
20821
21184
  display: flex;
@@ -21281,25 +21644,55 @@ optgroup.cds--select-optgroup:disabled,
21281
21644
  }
21282
21645
  }
21283
21646
 
21284
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
21285
- .cds--actionable-notification .cds--inline-notification__icon,
21286
- .cds--actionable-notification .cds--toast-notification__icon,
21287
- .cds--actionable-notification .cds--actionable-notification__close-icon {
21288
- fill: ButtonText;
21289
- }
21290
- }
21291
-
21292
21647
  .cds--page-header {
21293
- border: 1px solid rebeccapurple; /* stylelint-disable-line */
21648
+ background-color: var(--cds-layer-01, #f4f4f4);
21294
21649
  }
21295
21650
 
21296
21651
  .cds--page-header__breadcrumb-bar {
21297
- border: 1px solid blue; /* stylelint-disable-line */
21652
+ block-size: 2.5rem;
21653
+ }
21654
+
21655
+ .cds--page-header__breadcrumb-bar .cds--subgrid {
21656
+ block-size: 100%;
21657
+ }
21658
+
21659
+ .cds--page-header__breadcrumb-container {
21660
+ display: inline-flex;
21661
+ align-items: center;
21662
+ justify-content: space-between;
21663
+ block-size: 100%;
21664
+ inline-size: 100%;
21665
+ }
21666
+
21667
+ .cds--page-header__breadcrumb__actions-flush .cds--css-grid {
21668
+ padding-inline-end: 0;
21669
+ }
21670
+ .cds--page-header__breadcrumb__actions-flush .cds--css-grid-column {
21671
+ margin-inline-end: 0;
21672
+ }
21673
+
21674
+ .cds--page-header__breadcrumb-bar-border {
21675
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
21676
+ }
21677
+
21678
+ .cds--page-header__breadcrumb__icon {
21679
+ margin-inline-end: 0.5rem;
21680
+ }
21681
+
21682
+ .cds--page-header__breadcrumb__actions {
21683
+ display: inline-flex;
21684
+ }
21685
+
21686
+ .cds--page-header__breadcrumb__content-actions {
21687
+ margin-inline-end: 0.75rem;
21688
+ }
21689
+
21690
+ .cds--page-header__breadcrumb-wrapper {
21691
+ display: inline-flex;
21298
21692
  }
21299
21693
 
21300
21694
  .cds--page-header__content {
21301
- margin: 1.5rem 0;
21302
- border: 1px solid red; /* stylelint-disable-line */
21695
+ padding: 1.5rem 0;
21303
21696
  }
21304
21697
 
21305
21698
  .cds--page-header__content__title-wrapper {
@@ -21401,14 +21794,20 @@ optgroup.cds--select-optgroup:disabled,
21401
21794
  display: flex;
21402
21795
  overflow: hidden;
21403
21796
  align-items: center;
21404
- justify-content: end;
21797
+ justify-content: flex-end;
21405
21798
  block-size: 100%;
21406
21799
  }
21407
21800
 
21408
- .cds--page-header__tab-bar {
21409
- display: grid;
21410
- padding: 0 1rem;
21411
- border: 1px solid green; /* stylelint-disable-line */
21801
+ .cds--page-header__tablist-wrapper {
21802
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
21803
+ }
21804
+
21805
+ .cds--page-header__tab-bar .cds--tabs {
21806
+ margin-inline-start: -1rem;
21807
+ }
21808
+
21809
+ .cds--tab-content {
21810
+ background: var(--cds-background, #ffffff);
21412
21811
  }
21413
21812
 
21414
21813
  .cds--data-table-container + .cds--pagination {
@@ -23549,12 +23948,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23549
23948
  display: none;
23550
23949
  }
23551
23950
 
23552
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
23553
- .cds--structured-list-input:checked + .cds--structured-list-td .cds--structured-list-svg {
23554
- fill: ButtonText;
23555
- }
23556
- }
23557
-
23558
23951
  .cds--structured-list__icon {
23559
23952
  margin-block-start: 0.125rem;
23560
23953
  vertical-align: top;
@@ -23943,7 +24336,7 @@ span.cds--pagination__text.cds--pagination__items-count {
23943
24336
  inline-size: 1rem;
23944
24337
  }
23945
24338
  .cds--tabs .cds--tabs__nav-item--close-icon svg:hover {
23946
- fill: var(--cds-text-primary, #161616);
24339
+ fill: var(--cds-icon-primary, #161616);
23947
24340
  }
23948
24341
  .cds--tabs .cds--tabs__nav-item--close-icon:hover {
23949
24342
  background-color: var(--cds-layer-hover);
@@ -23958,10 +24351,10 @@ span.cds--pagination__text.cds--pagination__items-count {
23958
24351
  }
23959
24352
  }
23960
24353
  .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon svg {
23961
- fill: var(--cds-text-primary, #161616);
24354
+ fill: var(--cds-icon-primary, #161616);
23962
24355
  }
23963
24356
  .cds--tabs .cds--tabs__nav-item--close-icon--selected svg {
23964
- fill: var(--cds-text-primary, #161616);
24357
+ fill: var(--cds-icon-primary, #161616);
23965
24358
  }
23966
24359
  .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled,
23967
24360
  .cds--tabs .cds--tabs__nav-item--close-icon--disabled,
@@ -23972,7 +24365,7 @@ span.cds--pagination__text.cds--pagination__items-count {
23972
24365
  .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled svg,
23973
24366
  .cds--tabs .cds--tabs__nav-item--close-icon--disabled svg,
23974
24367
  .cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover svg {
23975
- fill: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
24368
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
23976
24369
  }
23977
24370
  .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:focus, .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled:active,
23978
24371
  .cds--tabs .cds--tabs__nav-item--close-icon--disabled:focus,
@@ -24203,6 +24596,7 @@ span.cds--pagination__text.cds--pagination__items-count {
24203
24596
  .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid .cds--list-box,
24204
24597
  .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
24205
24598
  .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid input[type=number],
24599
+ .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid input[type=text],
24206
24600
  .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::before,
24207
24601
  .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::after,
24208
24602
  .cds--tabs--vertical ~ .cds--tab-content .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
@@ -24490,11 +24884,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24490
24884
  transition: none;
24491
24885
  }
24492
24886
  }
24493
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
24494
- .cds--tile__chevron svg {
24495
- fill: ButtonText;
24496
- }
24497
- }
24498
24887
 
24499
24888
  .cds--tile__chevron--interactive {
24500
24889
  box-sizing: border-box;
@@ -24620,11 +25009,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24620
25009
  .cds--tile--is-selected .cds--tile__checkmark svg {
24621
25010
  fill: var(--cds-icon-primary, #161616);
24622
25011
  }
24623
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
24624
- .cds--tile--is-selected .cds--tile__checkmark svg {
24625
- fill: ButtonText;
24626
- }
24627
- }
24628
25012
 
24629
25013
  .cds--tile-content {
24630
25014
  block-size: 100%;
@@ -24848,14 +25232,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24848
25232
  border-end-end-radius: 0.5rem;
24849
25233
  }
24850
25234
 
24851
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24852
- .cds--tile__chevron svg,
24853
- .cds--tile__checkmark svg,
24854
- .cds--tile--is-selected .cds--tile__checkmark svg {
24855
- fill: ButtonText;
24856
- }
24857
- }
24858
-
24859
25235
  .cds--time-picker {
24860
25236
  display: flex;
24861
25237
  align-items: flex-end;
@@ -26385,15 +26761,6 @@ a.cds--side-nav__link--current::before {
26385
26761
  fill: var(--cds-icon-secondary, #525252);
26386
26762
  }
26387
26763
 
26388
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
26389
- .cds--side-nav__icon > svg,
26390
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
26391
- .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
26392
- .cds--side-nav .cds--header__menu-arrow {
26393
- fill: ButtonText;
26394
- }
26395
- }
26396
-
26397
26764
  .cds--switcher {
26398
26765
  box-sizing: border-box;
26399
26766
  padding: 0;
@@ -27410,15 +27777,6 @@ a.cds--side-nav__link--current::before {
27410
27777
  fill: var(--cds-icon-secondary, #525252);
27411
27778
  }
27412
27779
 
27413
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27414
- .cds--side-nav__icon > svg,
27415
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
27416
- .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
27417
- .cds--side-nav .cds--header__menu-arrow {
27418
- fill: ButtonText;
27419
- }
27420
- }
27421
-
27422
27780
  .cds--switcher {
27423
27781
  box-sizing: border-box;
27424
27782
  padding: 0;