@carbon/ibm-products 2.69.0 → 2.70.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 (45) hide show
  1. package/css/carbon.css +471 -372
  2. package/css/carbon.css.map +1 -1
  3. package/css/index-full-carbon.css +527 -282
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +1 -1
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +50 -0
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +1 -1
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +146 -0
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +1 -1
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +159 -93
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +1 -1
  18. package/css/index.min.css.map +1 -1
  19. package/es/components/Card/Card.js +4 -3
  20. package/es/components/CreateFullPage/CreateFullPage.js +9 -15
  21. package/es/components/CreateTearsheet/CreateTearsheet.js +1 -1
  22. package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts +2 -0
  23. package/es/components/CreateTearsheet/CreateTearsheetStep.js +16 -4
  24. package/es/components/NotificationsPanel/NotificationsPanel.js +18 -1
  25. package/es/components/SidePanel/SidePanel.d.ts +4 -0
  26. package/es/components/SidePanel/SidePanel.js +7 -1
  27. package/es/components/Tearsheet/TearsheetShell.js +10 -4
  28. package/es/node_modules/@carbon/icons-react/es/Icon.js +1 -1
  29. package/lib/components/Card/Card.js +4 -3
  30. package/lib/components/CreateFullPage/CreateFullPage.js +8 -14
  31. package/lib/components/CreateTearsheet/CreateTearsheet.js +1 -1
  32. package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts +2 -0
  33. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +16 -4
  34. package/lib/components/NotificationsPanel/NotificationsPanel.js +18 -1
  35. package/lib/components/SidePanel/SidePanel.d.ts +4 -0
  36. package/lib/components/SidePanel/SidePanel.js +7 -1
  37. package/lib/components/Tearsheet/TearsheetShell.js +10 -4
  38. package/lib/node_modules/@carbon/icons-react/es/Icon.js +1 -1
  39. package/package.json +14 -16
  40. package/scss/components/SidePanel/_side-panel.scss +1 -1
  41. package/scss/components/Tearsheet/_tearsheet.scss +1 -0
  42. package/scss/global/styles/_display-box.scss +2 -2
  43. package/telemetry.yml +2 -0
  44. /package/es/node_modules/@carbon/{icon-helpers → icons-react/node_modules/@carbon/icon-helpers}/es/index.js +0 -0
  45. /package/lib/node_modules/@carbon/{icon-helpers → icons-react/node_modules/@carbon/icon-helpers}/es/index.js +0 -0
@@ -3550,6 +3550,7 @@ p.c4p--about-modal__copyright-text:first-child {
3550
3550
  position: absolute;
3551
3551
  z-index: 10; /* must be higher than title container border bottom */
3552
3552
  display: flex;
3553
+ block-size: 2rem;
3553
3554
  inset-block-start: 0;
3554
3555
  inset-inline-end: 0;
3555
3556
  /* stylelint-disable-next-line max-nesting-depth */
@@ -3954,6 +3955,7 @@ p.c4p--about-modal__copyright-text:first-child {
3954
3955
  background-color: var(--cds-layer);
3955
3956
  }
3956
3957
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
3958
+ background-color: var(--cds-layer);
3957
3959
  border-inline-end: none;
3958
3960
  border-inline-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3959
3961
  }
@@ -8949,6 +8951,30 @@ button.c4p--add-select__global-filter-toggle--open {
8949
8951
  inset-inline-end: 0;
8950
8952
  max-inline-size: 40rem;
8951
8953
  }
8954
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
8955
+ .c4p--web-terminal {
8956
+ --cds-icon-primary: ButtonText;
8957
+ --cds-icon-secondary: ButtonText;
8958
+ --cds-icon-interactive: ButtonText;
8959
+ --cds-icon-disabled: GrayText;
8960
+ --cds-icon-on-color-disabled: GrayText;
8961
+ --cds-icon-inverse: SelectedItemText;
8962
+ --cds-icon-on-color: SelectedItemText;
8963
+ --cds-button-disabled: GrayText;
8964
+ --cds-interactive: ButtonText;
8965
+ --cds-link-primary: LinkText;
8966
+ --cds-link-primary-hover: LinkText;
8967
+ --cds-link-secondary: LinkText;
8968
+ --cds-link-inverse: SelectedItemText;
8969
+ --cds-link-inverse-hover: SelectedItemText;
8970
+ --cds-link-inverse-visited: SelectedItemText;
8971
+ --cds-link-visited: VisitedText;
8972
+ --cds-background-selected: SelectedItem;
8973
+ --cds-background-selected-hover: SelectedItem;
8974
+ --cds-background-inverse: SelectedItem;
8975
+ --cds-layer-selected-inverse: SelectedItem;
8976
+ }
8977
+ }
8952
8978
  @media (prefers-reduced-motion) {
8953
8979
  .c4p--web-terminal {
8954
8980
  animation: none;
@@ -9380,6 +9406,30 @@ button.c4p--add-select__global-filter-toggle--open {
9380
9406
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
9381
9407
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
9382
9408
  }
9409
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9410
+ .c4p--web-terminal__documentation-overflow {
9411
+ --cds-icon-primary: ButtonText;
9412
+ --cds-icon-secondary: ButtonText;
9413
+ --cds-icon-interactive: ButtonText;
9414
+ --cds-icon-disabled: GrayText;
9415
+ --cds-icon-on-color-disabled: GrayText;
9416
+ --cds-icon-inverse: SelectedItemText;
9417
+ --cds-icon-on-color: SelectedItemText;
9418
+ --cds-button-disabled: GrayText;
9419
+ --cds-interactive: ButtonText;
9420
+ --cds-link-primary: LinkText;
9421
+ --cds-link-primary-hover: LinkText;
9422
+ --cds-link-secondary: LinkText;
9423
+ --cds-link-inverse: SelectedItemText;
9424
+ --cds-link-inverse-hover: SelectedItemText;
9425
+ --cds-link-inverse-visited: SelectedItemText;
9426
+ --cds-link-visited: VisitedText;
9427
+ --cds-background-selected: SelectedItem;
9428
+ --cds-background-selected-hover: SelectedItem;
9429
+ --cds-background-inverse: SelectedItem;
9430
+ --cds-layer-selected-inverse: SelectedItem;
9431
+ }
9432
+ }
9383
9433
 
9384
9434
  .c4p--web-terminal__documentation-overflow .cds--overflow-menu-options__btn {
9385
9435
  text-decoration: none;
@@ -13190,6 +13240,30 @@ th.c4p--datagrid__select-all-toggle-on.button {
13190
13240
  background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
13191
13241
  background-color: #001d6c;
13192
13242
  }
13243
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
13244
+ .c4p--guidebanner {
13245
+ --cds-icon-primary: ButtonText;
13246
+ --cds-icon-secondary: ButtonText;
13247
+ --cds-icon-interactive: ButtonText;
13248
+ --cds-icon-disabled: GrayText;
13249
+ --cds-icon-on-color-disabled: GrayText;
13250
+ --cds-icon-inverse: SelectedItemText;
13251
+ --cds-icon-on-color: SelectedItemText;
13252
+ --cds-button-disabled: GrayText;
13253
+ --cds-interactive: ButtonText;
13254
+ --cds-link-primary: LinkText;
13255
+ --cds-link-primary-hover: LinkText;
13256
+ --cds-link-secondary: LinkText;
13257
+ --cds-link-inverse: SelectedItemText;
13258
+ --cds-link-inverse-hover: SelectedItemText;
13259
+ --cds-link-inverse-visited: SelectedItemText;
13260
+ --cds-link-visited: VisitedText;
13261
+ --cds-background-selected: SelectedItem;
13262
+ --cds-background-selected-hover: SelectedItem;
13263
+ --cds-background-inverse: SelectedItem;
13264
+ --cds-layer-selected-inverse: SelectedItem;
13265
+ }
13266
+ }
13193
13267
 
13194
13268
  .c4p--guidebanner__icon-idea {
13195
13269
  position: absolute;
@@ -13996,6 +14070,30 @@ th.c4p--datagrid__select-all-toggle-on.button {
13996
14070
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
13997
14071
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
13998
14072
  }
14073
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
14074
+ .c4p--non-linear-reading__dark {
14075
+ --cds-icon-primary: ButtonText;
14076
+ --cds-icon-secondary: ButtonText;
14077
+ --cds-icon-interactive: ButtonText;
14078
+ --cds-icon-disabled: GrayText;
14079
+ --cds-icon-on-color-disabled: GrayText;
14080
+ --cds-icon-inverse: SelectedItemText;
14081
+ --cds-icon-on-color: SelectedItemText;
14082
+ --cds-button-disabled: GrayText;
14083
+ --cds-interactive: ButtonText;
14084
+ --cds-link-primary: LinkText;
14085
+ --cds-link-primary-hover: LinkText;
14086
+ --cds-link-secondary: LinkText;
14087
+ --cds-link-inverse: SelectedItemText;
14088
+ --cds-link-inverse-hover: SelectedItemText;
14089
+ --cds-link-inverse-visited: SelectedItemText;
14090
+ --cds-link-visited: VisitedText;
14091
+ --cds-background-selected: SelectedItem;
14092
+ --cds-background-selected-hover: SelectedItem;
14093
+ --cds-background-inverse: SelectedItem;
14094
+ --cds-layer-selected-inverse: SelectedItem;
14095
+ }
14096
+ }
13999
14097
 
14000
14098
  .c4p--non-linear-reading .c4p--non-linear-reading__keyword {
14001
14099
  border-width: 0.0625rem;
@@ -14811,6 +14909,30 @@ th.c4p--datagrid__select-all-toggle-on.button {
14811
14909
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14812
14910
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14813
14911
  }
14912
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
14913
+ .c4p--decorator--light {
14914
+ --cds-icon-primary: ButtonText;
14915
+ --cds-icon-secondary: ButtonText;
14916
+ --cds-icon-interactive: ButtonText;
14917
+ --cds-icon-disabled: GrayText;
14918
+ --cds-icon-on-color-disabled: GrayText;
14919
+ --cds-icon-inverse: SelectedItemText;
14920
+ --cds-icon-on-color: SelectedItemText;
14921
+ --cds-button-disabled: GrayText;
14922
+ --cds-interactive: ButtonText;
14923
+ --cds-link-primary: LinkText;
14924
+ --cds-link-primary-hover: LinkText;
14925
+ --cds-link-secondary: LinkText;
14926
+ --cds-link-inverse: SelectedItemText;
14927
+ --cds-link-inverse-hover: SelectedItemText;
14928
+ --cds-link-inverse-visited: SelectedItemText;
14929
+ --cds-link-visited: VisitedText;
14930
+ --cds-background-selected: SelectedItem;
14931
+ --cds-background-selected-hover: SelectedItem;
14932
+ --cds-background-inverse: SelectedItem;
14933
+ --cds-layer-selected-inverse: SelectedItem;
14934
+ }
14935
+ }
14814
14936
 
14815
14937
  .c4p--decorator--dark {
14816
14938
  --cds-ai-aura-end: rgba(0, 0, 0, 0);
@@ -15226,6 +15348,30 @@ th.c4p--datagrid__select-all-toggle-on.button {
15226
15348
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
15227
15349
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
15228
15350
  }
15351
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15352
+ .c4p--decorator--dark {
15353
+ --cds-icon-primary: ButtonText;
15354
+ --cds-icon-secondary: ButtonText;
15355
+ --cds-icon-interactive: ButtonText;
15356
+ --cds-icon-disabled: GrayText;
15357
+ --cds-icon-on-color-disabled: GrayText;
15358
+ --cds-icon-inverse: SelectedItemText;
15359
+ --cds-icon-on-color: SelectedItemText;
15360
+ --cds-button-disabled: GrayText;
15361
+ --cds-interactive: ButtonText;
15362
+ --cds-link-primary: LinkText;
15363
+ --cds-link-primary-hover: LinkText;
15364
+ --cds-link-secondary: LinkText;
15365
+ --cds-link-inverse: SelectedItemText;
15366
+ --cds-link-inverse-hover: SelectedItemText;
15367
+ --cds-link-inverse-visited: SelectedItemText;
15368
+ --cds-link-visited: VisitedText;
15369
+ --cds-background-selected: SelectedItem;
15370
+ --cds-background-selected-hover: SelectedItem;
15371
+ --cds-background-inverse: SelectedItem;
15372
+ --cds-layer-selected-inverse: SelectedItem;
15373
+ }
15374
+ }
15229
15375
 
15230
15376
  .c4p--decorator {
15231
15377
  display: inline-flex;
@@ -20452,13 +20598,6 @@ li.cds--accordion__item--disabled:last-of-type {
20452
20598
  margin-inline-start: 1rem;
20453
20599
  }
20454
20600
 
20455
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
20456
- .cds--accordion__arrow,
20457
- .cds--accordion__item--active .cds--accordion__arrow {
20458
- fill: ButtonText;
20459
- }
20460
- }
20461
-
20462
20601
  [dir=rtl] .cds--accordion--start .cds--accordion__heading {
20463
20602
  padding-inline: var(--cds-layout-density-padding-inline-local) 0;
20464
20603
  }
@@ -20518,13 +20657,13 @@ li.cds--accordion__item--disabled:last-of-type {
20518
20657
  max-inline-size: 23rem;
20519
20658
  pointer-events: auto;
20520
20659
  }
20521
- .cds--layout--size-sm .cds--popover-content {
20660
+ .cds--popover-content.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--popover-content) {
20522
20661
  --cds-layout-size-height: var(--cds-layout-size-height-sm);
20523
20662
  }
20524
- .cds--layout--size-md .cds--popover-content {
20663
+ .cds--popover-content.cds--layout--size-md, .cds--layout--size-md :where(.cds--popover-content) {
20525
20664
  --cds-layout-size-height: var(--cds-layout-size-height-md);
20526
20665
  }
20527
- .cds--layout--size-lg .cds--popover-content {
20666
+ .cds--popover-content.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--popover-content) {
20528
20667
  --cds-layout-size-height: var(--cds-layout-size-height-lg);
20529
20668
  }
20530
20669
  .cds--popover-content *,
@@ -21510,13 +21649,6 @@ li.cds--accordion__item--disabled:last-of-type {
21510
21649
  }
21511
21650
  }
21512
21651
 
21513
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
21514
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
21515
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
21516
- fill: ButtonText;
21517
- }
21518
- }
21519
-
21520
21652
  [dir=rtl] .cds--btn-set .cds--btn:not(:focus) {
21521
21653
  box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
21522
21654
  }
@@ -22892,12 +23024,6 @@ a.cds--overflow-menu-options__btn::before {
22892
23024
  }
22893
23025
  }
22894
23026
 
22895
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
22896
- .cds--overflow-menu svg {
22897
- fill: ButtonText;
22898
- }
22899
- }
22900
-
22901
23027
  /*stylelint-enable */
22902
23028
  .cds--overflow-menu__top-start {
22903
23029
  transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
@@ -23060,7 +23186,7 @@ a.cds--overflow-menu-options__btn::before {
23060
23186
  }
23061
23187
 
23062
23188
  .cds--breadcrumb-item .cds--overflow-menu:active .cds--overflow-menu__icon {
23063
- fill: var(--cds-text-primary, #161616);
23189
+ fill: var(--cds-icon-primary, #161616);
23064
23190
  }
23065
23191
 
23066
23192
  .cds--breadcrumb-menu-options:focus {
@@ -23480,12 +23606,14 @@ textarea:-webkit-autofill:focus {
23480
23606
  }
23481
23607
  }
23482
23608
 
23483
- input[type=number] {
23609
+ input[type=number],
23610
+ input[type=text].cds--number {
23484
23611
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
23485
23612
  }
23486
23613
 
23487
23614
  input[data-invalid]:not(:focus),
23488
23615
  .cds--number[data-invalid] input[type=number]:not(:focus),
23616
+ .cds--number[data-invalid] input[type=text]:not(:focus),
23489
23617
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
23490
23618
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
23491
23619
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
@@ -23498,6 +23626,7 @@ input[data-invalid]:not(:focus),
23498
23626
  @media screen and (prefers-contrast) {
23499
23627
  input[data-invalid]:not(:focus),
23500
23628
  .cds--number[data-invalid] input[type=number]:not(:focus),
23629
+ .cds--number[data-invalid] input[type=text]:not(:focus),
23501
23630
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
23502
23631
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
23503
23632
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
@@ -23720,6 +23849,11 @@ fieldset[disabled] .cds--form__helper-text {
23720
23849
  margin-block: 0.0625rem 0.125rem;
23721
23850
  margin-inline: 0.1875rem 0;
23722
23851
  }
23852
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
23853
+ .cds--checkbox-label::before {
23854
+ border: 1px solid ButtonBorder;
23855
+ }
23856
+ }
23723
23857
 
23724
23858
  .cds--checkbox-label::after {
23725
23859
  position: absolute;
@@ -23743,6 +23877,14 @@ fieldset[disabled] .cds--form__helper-text {
23743
23877
  border-width: 1px;
23744
23878
  background-color: var(--cds-icon-primary, #161616);
23745
23879
  }
23880
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
23881
+ .cds--checkbox:checked + .cds--checkbox-label::before,
23882
+ .cds--checkbox:indeterminate + .cds--checkbox-label::before,
23883
+ .cds--checkbox-label[data-contained-checkbox-state=true]::before {
23884
+ border: 1px solid ButtonBorder;
23885
+ background-color: SelectedItem;
23886
+ }
23887
+ }
23746
23888
 
23747
23889
  .cds--checkbox:checked + .cds--checkbox-label::after,
23748
23890
  .cds--checkbox-label[data-contained-checkbox-state=true]::after {
@@ -23871,6 +24013,12 @@ fieldset[disabled] .cds--form__helper-text {
23871
24013
  .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
23872
24014
  border-color: var(--cds-text-primary, #161616);
23873
24015
  }
24016
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24017
+ .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
24018
+ .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
24019
+ fill: SelectedItemText;
24020
+ }
24021
+ }
23874
24022
 
23875
24023
  .cds--checkbox-skeleton .cds--checkbox-label {
23876
24024
  cursor: default;
@@ -24694,12 +24842,6 @@ fieldset[disabled] .cds--form__helper-text {
24694
24842
  padding-block-end: 0;
24695
24843
  }
24696
24844
 
24697
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24698
- .cds--snippet__icon {
24699
- fill: ButtonText;
24700
- }
24701
- }
24702
-
24703
24845
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24704
24846
  .cds--snippet--inline:focus {
24705
24847
  color: Highlight;
@@ -25025,11 +25167,6 @@ fieldset[disabled] .cds--form__helper-text {
25025
25167
  fill: var(--cds-icon-secondary, #525252);
25026
25168
  transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25027
25169
  }
25028
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
25029
- .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
25030
- fill: ButtonText;
25031
- }
25032
- }
25033
25170
 
25034
25171
  .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus {
25035
25172
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -25045,12 +25182,6 @@ fieldset[disabled] .cds--form__helper-text {
25045
25182
  .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
25046
25183
  fill: var(--cds-icon-primary, #161616);
25047
25184
  }
25048
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25049
- .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg,
25050
- .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
25051
- fill: ButtonText;
25052
- }
25053
- }
25054
25185
 
25055
25186
  .cds--text-input--invalid,
25056
25187
  .cds--text-input--warning {
@@ -25357,13 +25488,6 @@ fieldset[disabled] .cds--form__helper-text {
25357
25488
  block-size: 1rem;
25358
25489
  }
25359
25490
 
25360
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25361
- .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,
25362
- .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg {
25363
- fill: ButtonText;
25364
- }
25365
- }
25366
-
25367
25491
  .cds--text-input__label-wrapper {
25368
25492
  display: flex;
25369
25493
  justify-content: space-between;
@@ -25395,16 +25519,16 @@ fieldset[disabled] .cds--form__helper-text {
25395
25519
  vertical-align: middle;
25396
25520
  word-break: break-word;
25397
25521
  }
25398
- .cds--layout--size-xs .cds--tag {
25522
+ .cds--tag.cds--layout--size-xs, .cds--layout--size-xs :where(.cds--tag) {
25399
25523
  --cds-layout-size-height: var(--cds-layout-size-height-xs);
25400
25524
  }
25401
- .cds--layout--size-sm .cds--tag {
25525
+ .cds--tag.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--tag) {
25402
25526
  --cds-layout-size-height: var(--cds-layout-size-height-sm);
25403
25527
  }
25404
- .cds--layout--size-md .cds--tag {
25528
+ .cds--tag.cds--layout--size-md, .cds--layout--size-md :where(.cds--tag) {
25405
25529
  --cds-layout-size-height: var(--cds-layout-size-height-md);
25406
25530
  }
25407
- .cds--layout--size-lg .cds--tag {
25531
+ .cds--tag.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--tag) {
25408
25532
  --cds-layout-size-height: var(--cds-layout-size-height-lg);
25409
25533
  }
25410
25534
  .cds--tag.cds--tag--operational {
@@ -25915,13 +26039,6 @@ fieldset[disabled] .cds--form__helper-text {
25915
26039
  }
25916
26040
  }
25917
26041
 
25918
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25919
- .cds--tag__close-icon svg,
25920
- .cds--tag__custom-icon svg {
25921
- fill: ButtonText;
25922
- }
25923
- }
25924
-
25925
26042
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25926
26043
  .cds--tag__close-icon:focus {
25927
26044
  color: Highlight;
@@ -26940,14 +27057,6 @@ fieldset[disabled] .cds--form__helper-text {
26940
27057
  }
26941
27058
  }
26942
27059
 
26943
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
26944
- .cds--list-box__menu-icon > svg,
26945
- .cds--list-box__selection > svg,
26946
- .cds--list-box__selection--multi > svg {
26947
- fill: ButtonText;
26948
- }
26949
- }
26950
-
26951
27060
  .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::after {
26952
27061
  position: absolute;
26953
27062
  background-color: var(--cds-border-subtle-01, #c6c6c6);
@@ -27291,19 +27400,19 @@ fieldset[disabled] .cds--form__helper-text {
27291
27400
  --cds-layout-size-height-xl: 1.5rem;
27292
27401
  --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)));
27293
27402
  }
27294
- .cds--layout--size-xs .cds--contained-list .cds--tag {
27403
+ .cds--contained-list .cds--tag.cds--layout--size-xs, .cds--layout--size-xs :where(.cds--contained-list .cds--tag) {
27295
27404
  --cds-layout-size-height: var(--cds-layout-size-height-xs);
27296
27405
  }
27297
- .cds--layout--size-sm .cds--contained-list .cds--tag {
27406
+ .cds--contained-list .cds--tag.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--contained-list .cds--tag) {
27298
27407
  --cds-layout-size-height: var(--cds-layout-size-height-sm);
27299
27408
  }
27300
- .cds--layout--size-md .cds--contained-list .cds--tag {
27409
+ .cds--contained-list .cds--tag.cds--layout--size-md, .cds--layout--size-md :where(.cds--contained-list .cds--tag) {
27301
27410
  --cds-layout-size-height: var(--cds-layout-size-height-md);
27302
27411
  }
27303
- .cds--layout--size-lg .cds--contained-list .cds--tag {
27412
+ .cds--contained-list .cds--tag.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--contained-list .cds--tag) {
27304
27413
  --cds-layout-size-height: var(--cds-layout-size-height-lg);
27305
27414
  }
27306
- .cds--layout--size-xl .cds--contained-list .cds--tag {
27415
+ .cds--contained-list .cds--tag.cds--layout--size-xl, .cds--layout--size-xl :where(.cds--contained-list .cds--tag) {
27307
27416
  --cds-layout-size-height: var(--cds-layout-size-height-xl);
27308
27417
  }
27309
27418
 
@@ -28155,7 +28264,6 @@ fieldset[disabled] .cds--form__helper-text {
28155
28264
  }
28156
28265
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28157
28266
  .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
28158
- fill: ButtonText;
28159
28267
  background-color: ButtonText;
28160
28268
  }
28161
28269
  }
@@ -28531,6 +28639,7 @@ fieldset[disabled] .cds--form__helper-text {
28531
28639
  .cds--data-table .cds--dropdown,
28532
28640
  .cds--data-table .cds--list-box,
28533
28641
  .cds--data-table .cds--number input[type=number],
28642
+ .cds--data-table .cds--number input[type=text],
28534
28643
  .cds--data-table .cds--number__control-btn::before,
28535
28644
  .cds--data-table .cds--number__control-btn::after,
28536
28645
  .cds--data-table .cds--text-input,
@@ -29580,13 +29689,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
29580
29689
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
29581
29690
  }
29582
29691
 
29583
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
29584
- .cds--search-close svg,
29585
- .cds--search-magnifier-icon {
29586
- fill: ButtonText;
29587
- }
29588
- }
29589
-
29590
29692
  .cds--table-toolbar {
29591
29693
  position: relative;
29592
29694
  z-index: 1;
@@ -30502,12 +30604,6 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
30502
30604
  }
30503
30605
  }
30504
30606
 
30505
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
30506
- .cds--table-expand__svg {
30507
- fill: ButtonText;
30508
- }
30509
- }
30510
-
30511
30607
  .cds--data-table.cds--skeleton th {
30512
30608
  padding-inline-start: 1rem;
30513
30609
  vertical-align: middle;
@@ -30858,13 +30954,6 @@ th .cds--table-sort__flex {
30858
30954
  margin-inline-end: 0.5rem;
30859
30955
  }
30860
30956
 
30861
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
30862
- .cds--table-sort__icon,
30863
- .cds--table-sort__icon-unsorted {
30864
- fill: ButtonText;
30865
- }
30866
- }
30867
-
30868
30957
  @keyframes fp-fade-in-down {
30869
30958
  from {
30870
30959
  opacity: 0;
@@ -31076,12 +31165,6 @@ th .cds--table-sort__flex {
31076
31165
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
31077
31166
  user-select: none;
31078
31167
  }
31079
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
31080
- .flatpickr-prev-month,
31081
- .flatpickr-next-month {
31082
- fill: ButtonText;
31083
- }
31084
- }
31085
31168
  @media screen and (prefers-reduced-motion: reduce) {
31086
31169
  .flatpickr-prev-month,
31087
31170
  .flatpickr-next-month {
@@ -31686,21 +31769,16 @@ th .cds--table-sort__flex {
31686
31769
  }
31687
31770
  }
31688
31771
 
31689
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
31690
- .cds--date-picker__icon {
31691
- fill: ButtonText;
31692
- }
31693
- }
31694
-
31695
31772
  .cds--dialog {
31773
+ position: fixed;
31696
31774
  padding: 0;
31697
31775
  border: none;
31776
+ margin: auto;
31698
31777
  background-color: var(--cds-layer);
31699
- block-size: fit-content;
31700
31778
  color: var(--cds-text-primary, #161616);
31701
31779
  inline-size: 48rem;
31702
- max-block-size: 50%;
31703
- max-inline-size: 100%;
31780
+ inset: 0;
31781
+ max-block-size: 100%;
31704
31782
  opacity: 0;
31705
31783
  transform: translateY(calc(-1 * 1.5rem));
31706
31784
  /** opening and closing is used in as allow-discrete is not currently supported wide enough
@@ -31726,17 +31804,12 @@ th .cds--table-sort__flex {
31726
31804
  }
31727
31805
  @media (min-width: 66rem) {
31728
31806
  .cds--dialog {
31729
- max-inline-size: 72%;
31730
- }
31731
- }
31732
- @media (min-width: 82rem) {
31733
- .cds--dialog {
31734
- max-inline-size: 64%;
31807
+ max-inline-size: 60%;
31735
31808
  }
31736
31809
  }
31737
31810
  @media (min-width: 82rem) {
31738
31811
  .cds--dialog {
31739
- max-inline-size: 60%;
31812
+ max-inline-size: 48%;
31740
31813
  }
31741
31814
  }
31742
31815
  .cds--dialog[open] {
@@ -31758,9 +31831,12 @@ th .cds--table-sort__flex {
31758
31831
 
31759
31832
  .cds--dialog__header {
31760
31833
  position: relative;
31761
- overflow: visible;
31834
+ grid-area: header;
31762
31835
  inline-size: 100%;
31836
+ margin-block-end: 0.5rem;
31763
31837
  min-block-size: 3rem;
31838
+ padding-block-start: 1rem;
31839
+ padding-inline: 1rem 3rem;
31764
31840
  }
31765
31841
 
31766
31842
  /* Transition the :backdrop when the dialog modal is promoted to the top layer */
@@ -31804,6 +31880,156 @@ because the nesting selector cannot represent pseudo-elements. */
31804
31880
  inset-inline-end: 0;
31805
31881
  }
31806
31882
 
31883
+ .cds--dialog-header__label {
31884
+ box-sizing: border-box;
31885
+ padding: 0;
31886
+ border: 0;
31887
+ margin: 0;
31888
+ font-family: inherit;
31889
+ font-size: 100%;
31890
+ vertical-align: baseline;
31891
+ font-size: var(--cds-label-01-font-size, 0.75rem);
31892
+ font-weight: var(--cds-label-01-font-weight, 400);
31893
+ line-height: var(--cds-label-01-line-height, 1.33333);
31894
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
31895
+ color: var(--cds-text-secondary, #525252);
31896
+ margin-block-end: 0.25rem;
31897
+ }
31898
+ .cds--dialog-header__label *,
31899
+ .cds--dialog-header__label *::before,
31900
+ .cds--dialog-header__label *::after {
31901
+ box-sizing: inherit;
31902
+ }
31903
+
31904
+ .cds--dialog-header__heading {
31905
+ box-sizing: border-box;
31906
+ padding: 0;
31907
+ border: 0;
31908
+ margin: 0;
31909
+ font-family: inherit;
31910
+ font-size: 100%;
31911
+ vertical-align: baseline;
31912
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
31913
+ font-weight: var(--cds-heading-03-font-weight, 400);
31914
+ line-height: var(--cds-heading-03-line-height, 1.4);
31915
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
31916
+ margin: 0;
31917
+ color: var(--cds-text-primary, #161616);
31918
+ padding-inline-end: calc(20% - 3rem);
31919
+ }
31920
+ .cds--dialog-header__heading *,
31921
+ .cds--dialog-header__heading *::before,
31922
+ .cds--dialog-header__heading *::after {
31923
+ box-sizing: inherit;
31924
+ }
31925
+
31926
+ .cds--dialog-container {
31927
+ display: grid;
31928
+ background-color: var(--cds-layer);
31929
+ grid-template-areas: "header" "content" "footer";
31930
+ grid-template-columns: 100%;
31931
+ grid-template-rows: auto minmax(0, 1fr) auto;
31932
+ inline-size: 100%;
31933
+ }
31934
+ @media (min-width: 42rem) {
31935
+ .cds--dialog-container {
31936
+ max-block-size: 90vh;
31937
+ }
31938
+ }
31939
+ @media (min-width: 66rem) {
31940
+ .cds--dialog-container {
31941
+ max-block-size: 84vh;
31942
+ }
31943
+ }
31944
+
31945
+ .cds--dialog-content {
31946
+ position: relative;
31947
+ grid-area: content;
31948
+ overflow-y: auto;
31949
+ padding-block: 0.5rem 3rem;
31950
+ padding-inline: 1rem 1rem;
31951
+ }
31952
+ .cds--dialog-content:focus {
31953
+ outline: 2px solid var(--cds-focus, #0f62fe);
31954
+ outline-offset: -2px;
31955
+ }
31956
+ @media screen and (prefers-contrast) {
31957
+ .cds--dialog-content:focus {
31958
+ outline-style: dotted;
31959
+ }
31960
+ }
31961
+
31962
+ .cds--dialog-scroll-content {
31963
+ border-block-end: 0.125rem solid transparent;
31964
+ 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);
31965
+ }
31966
+
31967
+ .cds--dialog-scroll-content > *:last-child {
31968
+ margin-block-end: 1.5rem;
31969
+ }
31970
+
31971
+ .cds--dialog-scroll-content:has(.cds--autoalign) {
31972
+ mask-image: none;
31973
+ }
31974
+
31975
+ .cds--dialog-footer {
31976
+ display: flex;
31977
+ align-items: center;
31978
+ justify-content: flex-end;
31979
+ block-size: 4rem;
31980
+ grid-area: footer;
31981
+ }
31982
+
31983
+ .cds--dialog-footer .cds--btn {
31984
+ flex: 0 1 50%;
31985
+ align-items: baseline;
31986
+ margin: 0;
31987
+ block-size: 4rem;
31988
+ max-inline-size: none;
31989
+ }
31990
+
31991
+ .cds--dialog-footer--three-button .cds--btn {
31992
+ flex: 0 1 25%;
31993
+ align-items: flex-start;
31994
+ }
31995
+
31996
+ .cds--dialog--danger {
31997
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
31998
+ }
31999
+
32000
+ .cds--dialog--danger .cds--dialog-container {
32001
+ 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;
32002
+ border: 1px solid transparent;
32003
+ background-color: var(--cds-layer);
32004
+ 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));
32005
+ }
32006
+
32007
+ .cds--dialog--danger .cds--dialog-container:has(.cds--dialog-footer) {
32008
+ 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;
32009
+ 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));
32010
+ }
32011
+
32012
+ .cds--dialog--danger .cds--dialog-content.cds--dialog-scroll-content {
32013
+ 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);
32014
+ }
32015
+
32016
+ .cds--dialog__close {
32017
+ padding: 0.75rem;
32018
+ border: 2px solid transparent;
32019
+ background-color: transparent;
32020
+ block-size: 3rem;
32021
+ cursor: pointer;
32022
+ inline-size: 3rem;
32023
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
32024
+ }
32025
+ .cds--dialog__close:hover {
32026
+ background-color: var(--cds-layer-hover);
32027
+ }
32028
+ .cds--dialog__close:focus {
32029
+ border-color: var(--cds-focus, #0f62fe);
32030
+ outline: none;
32031
+ }
32032
+
31807
32033
  .cds--dropdown__wrapper--inline {
31808
32034
  display: inline-grid;
31809
32035
  align-items: center;
@@ -32296,12 +32522,6 @@ button.cds--dropdown-text:focus {
32296
32522
  }
32297
32523
  }
32298
32524
 
32299
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
32300
- .cds--list-box__menu-item__selected-icon {
32301
- fill: ButtonText;
32302
- }
32303
- }
32304
-
32305
32525
  .cds--dropdown--readonly,
32306
32526
  .cds--dropdown--readonly:hover {
32307
32527
  background-color: transparent;
@@ -32920,12 +33140,6 @@ button.cds--dropdown-text:focus {
32920
33140
  }
32921
33141
  }
32922
33142
 
32923
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
32924
- .cds--file__state-container .cds--file-close svg path {
32925
- fill: ButtonText;
32926
- }
32927
- }
32928
-
32929
33143
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper {
32930
33144
  position: relative;
32931
33145
  background: var(--cds-field);
@@ -33808,11 +34022,13 @@ button.cds--dropdown-text:focus {
33808
34022
  font-weight: 600;
33809
34023
  }
33810
34024
 
33811
- .cds--number .cds--number__input-wrapper--warning input[type=number] {
34025
+ .cds--number .cds--number__input-wrapper--warning input[type=number],
34026
+ .cds--number .cds--number__input-wrapper--warning input[type=text] {
33812
34027
  padding-inline-end: 8rem;
33813
34028
  }
33814
34029
 
33815
- .cds--number input[type=number] {
34030
+ .cds--number input[type=number],
34031
+ .cds--number input[type=text] {
33816
34032
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
33817
34033
  font-weight: var(--cds-body-compact-01-font-weight, 400);
33818
34034
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -33836,53 +34052,67 @@ button.cds--dropdown-text:focus {
33836
34052
  padding-inline: 1rem 6rem;
33837
34053
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
33838
34054
  }
33839
- .cds--number input[type=number]:focus {
34055
+ .cds--number input[type=number]:focus,
34056
+ .cds--number input[type=text]:focus {
33840
34057
  outline: 2px solid var(--cds-focus, #0f62fe);
33841
34058
  outline-offset: -2px;
33842
34059
  }
33843
34060
  @media screen and (prefers-contrast) {
33844
- .cds--number input[type=number]:focus {
34061
+ .cds--number input[type=number]:focus,
34062
+ .cds--number input[type=text]:focus {
33845
34063
  outline-style: dotted;
33846
34064
  }
33847
34065
  }
33848
- .cds--number input[type=number]:disabled ~ .cds--number__controls {
34066
+ .cds--number input[type=number]:disabled ~ .cds--number__controls,
34067
+ .cds--number input[type=text]:disabled ~ .cds--number__controls {
33849
34068
  cursor: not-allowed;
33850
34069
  pointer-events: none;
33851
34070
  }
33852
- .cds--number input[type=number]:disabled ~ .cds--number__controls svg {
34071
+ .cds--number input[type=number]:disabled ~ .cds--number__controls svg,
34072
+ .cds--number input[type=text]:disabled ~ .cds--number__controls svg {
33853
34073
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
33854
34074
  }
33855
- .cds--number input[type=number]::-ms-clear {
34075
+ .cds--number input[type=number]::-ms-clear,
34076
+ .cds--number input[type=text]::-ms-clear {
33856
34077
  display: none;
33857
34078
  }
33858
- .cds--number input[type=number]::-webkit-inner-spin-button {
34079
+ .cds--number input[type=number]::-webkit-inner-spin-button,
34080
+ .cds--number input[type=text]::-webkit-inner-spin-button {
33859
34081
  appearance: none;
33860
34082
  }
33861
- .cds--number input[type=number][data-invalid] {
34083
+ .cds--number input[type=number][data-invalid],
34084
+ .cds--number input[type=text][data-invalid] {
33862
34085
  padding-inline-end: 8rem;
33863
34086
  }
33864
34087
 
33865
- .cds--number--lg.cds--number input[type=number] {
34088
+ .cds--number--lg.cds--number input[type=number],
34089
+ .cds--number--lg.cds--number input[type=text] {
33866
34090
  padding-inline-end: 7rem;
33867
34091
  }
33868
- .cds--number--lg.cds--number input[type=number][data-invalid] {
34092
+ .cds--number--lg.cds--number input[type=number][data-invalid],
34093
+ .cds--number--lg.cds--number input[type=text][data-invalid] {
33869
34094
  padding-inline-end: 9rem;
33870
34095
  }
33871
- .cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=number] {
34096
+ .cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=number],
34097
+ .cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=text] {
33872
34098
  padding-inline-end: 9rem;
33873
34099
  }
33874
34100
 
33875
- .cds--number--sm.cds--number input[type=number] {
34101
+ .cds--number--sm.cds--number input[type=number],
34102
+ .cds--number--sm.cds--number input[type=text] {
33876
34103
  padding-inline-end: 5rem;
33877
34104
  }
33878
- .cds--number--sm.cds--number input[type=number][data-invalid] {
34105
+ .cds--number--sm.cds--number input[type=number][data-invalid],
34106
+ .cds--number--sm.cds--number input[type=text][data-invalid] {
33879
34107
  padding-inline-end: 7rem;
33880
34108
  }
33881
- .cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=number] {
34109
+ .cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=number],
34110
+ .cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=text] {
33882
34111
  padding-inline-end: 7rem;
33883
34112
  }
33884
34113
 
33885
- .cds--number input[type=number]:disabled {
34114
+ .cds--number input[type=number]:disabled,
34115
+ .cds--number input[type=text]:disabled {
33886
34116
  background-color: var(--cds-field);
33887
34117
  border-block-end-color: transparent;
33888
34118
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -33989,11 +34219,13 @@ button.cds--dropdown-text:focus {
33989
34219
  order: 2;
33990
34220
  }
33991
34221
 
33992
- .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
34222
+ .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn,
34223
+ .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
33993
34224
  border-block-end-color: var(--cds-support-error, #da1e28);
33994
34225
  }
33995
34226
 
33996
- .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
34227
+ .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
34228
+ .cds--number input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn {
33997
34229
  border-width: 2px 0;
33998
34230
  border-style: solid;
33999
34231
  border-color: var(--cds-focus, #0f62fe);
@@ -34001,15 +34233,18 @@ button.cds--dropdown-text:focus {
34001
34233
  outline-offset: -2px;
34002
34234
  }
34003
34235
 
34004
- .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
34236
+ .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover,
34237
+ .cds--number input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
34005
34238
  box-shadow: -4px 0 0 -2px var(--cds-focus, #0f62fe) inset;
34006
34239
  }
34007
34240
 
34008
- .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
34241
+ .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover,
34242
+ .cds--number input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
34009
34243
  box-shadow: -4px 0 0 -2px var(--cds-support-error, #da1e28) inset;
34010
34244
  }
34011
34245
 
34012
- .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
34246
+ .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover,
34247
+ .cds--number input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
34013
34248
  border-width: 2px 0;
34014
34249
  border-style: solid;
34015
34250
  border-color: var(--cds-support-error, #da1e28);
@@ -34017,12 +34252,14 @@ button.cds--dropdown-text:focus {
34017
34252
  outline-offset: -2px;
34018
34253
  }
34019
34254
 
34020
- .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
34255
+ .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover,
34256
+ .cds--number input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
34021
34257
  outline: 2px solid var(--cds-focus, #0f62fe);
34022
34258
  outline-offset: -2px;
34023
34259
  }
34024
34260
  @media screen and (prefers-contrast) {
34025
- .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
34261
+ .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover,
34262
+ .cds--number input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
34026
34263
  outline-style: dotted;
34027
34264
  }
34028
34265
  }
@@ -34052,11 +34289,13 @@ button.cds--dropdown-text:focus {
34052
34289
  background-color: var(--cds-border-subtle-02, #e0e0e0);
34053
34290
  }
34054
34291
 
34055
- .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider:first-of-type {
34292
+ .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider:first-of-type,
34293
+ .cds--number input[type=text]:disabled + .cds--number__controls .cds--number__rule-divider:first-of-type {
34056
34294
  background-color: transparent;
34057
34295
  }
34058
34296
 
34059
- .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider {
34297
+ .cds--number input[type=number]:disabled + .cds--number__controls .cds--number__rule-divider,
34298
+ .cds--number input[type=text]:disabled + .cds--number__controls .cds--number__rule-divider {
34060
34299
  background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
34061
34300
  }
34062
34301
 
@@ -34107,7 +34346,8 @@ button.cds--dropdown-text:focus {
34107
34346
  opacity: 1;
34108
34347
  }
34109
34348
 
34110
- .cds--number--lg input[type=number] {
34349
+ .cds--number--lg input[type=number],
34350
+ .cds--number--lg input[type=text] {
34111
34351
  block-size: 3rem;
34112
34352
  }
34113
34353
 
@@ -34119,7 +34359,8 @@ button.cds--dropdown-text:focus {
34119
34359
  inline-size: 3rem;
34120
34360
  }
34121
34361
 
34122
- .cds--number--sm input[type=number] {
34362
+ .cds--number--sm input[type=number],
34363
+ .cds--number--sm input[type=text] {
34123
34364
  block-size: 2rem;
34124
34365
  }
34125
34366
 
@@ -34135,12 +34376,15 @@ button.cds--dropdown-text:focus {
34135
34376
  margin-block-start: 0;
34136
34377
  }
34137
34378
 
34138
- .cds--number--nosteppers input[type=number] {
34379
+ .cds--number--nosteppers input[type=number],
34380
+ .cds--number--nosteppers input[type=text] {
34139
34381
  padding-inline-end: 0;
34140
34382
  }
34141
34383
 
34142
34384
  .cds--number--nosteppers input[type=number][data-invalid],
34143
- .cds--number--nosteppers .cds--number__input-wrapper--warning input[type=number] {
34385
+ .cds--number--nosteppers input[type=text][data-invalid],
34386
+ .cds--number--nosteppers .cds--number__input-wrapper--warning input[type=number],
34387
+ .cds--number--nosteppers .cds--number__input-wrapper--warning input[type=text] {
34144
34388
  padding-inline-end: 3rem;
34145
34389
  }
34146
34390
 
@@ -34148,7 +34392,8 @@ button.cds--dropdown-text:focus {
34148
34392
  inset-inline-end: 1rem;
34149
34393
  }
34150
34394
 
34151
- .cds--number--readonly input[type=number] {
34395
+ .cds--number--readonly input[type=number],
34396
+ .cds--number--readonly input[type=text] {
34152
34397
  background: transparent;
34153
34398
  border-block-end-color: var(--cds-border-subtle);
34154
34399
  }
@@ -34162,7 +34407,8 @@ button.cds--dropdown-text:focus {
34162
34407
  cursor: pointer;
34163
34408
  }
34164
34409
 
34165
- .cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
34410
+ .cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
34411
+ .cds--number--readonly input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
34166
34412
  outline: none;
34167
34413
  }
34168
34414
 
@@ -34258,7 +34504,11 @@ button.cds--dropdown-text:focus {
34258
34504
  .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)),
34259
34505
  .cds--number__input-wrapper--slug input[type=number]:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
34260
34506
  .cds--number__input-wrapper--slug input[type=number]:has(~ .cds--slug):not(:has(~ .cds--slug--revert)),
34261
- .cds--number__input-wrapper--slug input[type=number]:disabled {
34507
+ .cds--number__input-wrapper--slug input[type=number]:disabled,
34508
+ .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)),
34509
+ .cds--number__input-wrapper--slug input[type=text]:has(~ .cds--ai-label):not(:has(~ .cds--ai-label--revert)),
34510
+ .cds--number__input-wrapper--slug input[type=text]:has(~ .cds--slug):not(:has(~ .cds--slug--revert)),
34511
+ .cds--number__input-wrapper--slug input[type=text]:disabled {
34262
34512
  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%);
34263
34513
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
34264
34514
  padding-inline-end: 9.0625rem;
@@ -34293,7 +34543,8 @@ button.cds--dropdown-text:focus {
34293
34543
  animation: none;
34294
34544
  }
34295
34545
  }
34296
- .cds--number.cds--skeleton input[type=number] {
34546
+ .cds--number.cds--skeleton input[type=number],
34547
+ .cds--number.cds--skeleton input[type=text] {
34297
34548
  display: none;
34298
34549
  }
34299
34550
 
@@ -34323,12 +34574,6 @@ button.cds--dropdown-text:focus {
34323
34574
  }
34324
34575
  }
34325
34576
 
34326
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
34327
- .cds--number__control-btn svg {
34328
- fill: ButtonText;
34329
- }
34330
- }
34331
-
34332
34577
  .cds--number-input--fluid {
34333
34578
  position: relative;
34334
34579
  background: var(--cds-field);
@@ -34364,7 +34609,8 @@ button.cds--dropdown-text:focus {
34364
34609
  position: initial;
34365
34610
  }
34366
34611
 
34367
- .cds--number-input--fluid input[type=number] {
34612
+ .cds--number-input--fluid input[type=number],
34613
+ .cds--number-input--fluid input[type=text] {
34368
34614
  padding: 2rem 5rem 0.8125rem 1rem;
34369
34615
  background: transparent;
34370
34616
  min-block-size: 4rem;
@@ -34377,31 +34623,39 @@ button.cds--dropdown-text:focus {
34377
34623
  transform: translate(0);
34378
34624
  }
34379
34625
 
34380
- .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
34626
+ .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
34627
+ .cds--number-input--fluid input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn {
34381
34628
  border-block-end-color: var(--cds-focus, #0f62fe);
34382
34629
  box-shadow: inset 0 -1px var(--cds-focus, #0f62fe);
34383
34630
  }
34384
34631
 
34385
- .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
34632
+ .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
34633
+ .cds--number-input--fluid input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
34386
34634
  box-shadow: inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe);
34387
34635
  }
34388
34636
 
34389
34637
  .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
34390
- .cds--number-input--fluid--invalid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
34638
+ .cds--number-input--fluid--invalid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
34639
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn,
34640
+ .cds--number-input--fluid--invalid input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn {
34391
34641
  border-block-end-color: transparent;
34392
34642
  box-shadow: none;
34393
34643
  }
34394
34644
 
34395
34645
  .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
34396
- .cds--number-input--fluid--invalid input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
34646
+ .cds--number-input--fluid--invalid input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
34647
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
34648
+ .cds--number-input--fluid--invalid input[type=text][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
34397
34649
  box-shadow: inset -2px 0 var(--cds-focus, #0f62fe);
34398
34650
  }
34399
34651
 
34400
- .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
34652
+ .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover,
34653
+ .cds--number-input--fluid--invalid input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
34401
34654
  box-shadow: inset -2px 0 var(--cds-support-error, #da1e28);
34402
34655
  }
34403
34656
 
34404
- .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
34657
+ .cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover,
34658
+ .cds--number-input--fluid--invalid input[type=text][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
34405
34659
  box-shadow: none;
34406
34660
  }
34407
34661
 
@@ -34415,19 +34669,24 @@ button.cds--dropdown-text:focus {
34415
34669
  }
34416
34670
  }
34417
34671
 
34418
- .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 {
34672
+ .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,
34673
+ .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 {
34419
34674
  border-block-end: 1px solid var(--cds-focus, #0f62fe);
34420
34675
  outline: none;
34421
34676
  }
34422
34677
 
34423
34678
  .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
34424
- .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
34679
+ .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover,
34680
+ .cds--number-input--fluid--invalid input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
34681
+ .cds--number-input--fluid--invalid .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
34425
34682
  outline: 2px solid var(--cds-focus, #0f62fe);
34426
34683
  outline-offset: -2px;
34427
34684
  }
34428
34685
  @media screen and (prefers-contrast) {
34429
34686
  .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
34430
- .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
34687
+ .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover,
34688
+ .cds--number-input--fluid--invalid input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
34689
+ .cds--number-input--fluid--invalid .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus:hover {
34431
34690
  outline-style: dotted;
34432
34691
  }
34433
34692
  }
@@ -34446,11 +34705,13 @@ button.cds--dropdown-text:focus {
34446
34705
  display: none;
34447
34706
  }
34448
34707
 
34449
- .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] {
34708
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number],
34709
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text] {
34450
34710
  border-block-end: 1px solid transparent;
34451
34711
  }
34452
34712
 
34453
- .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus {
34713
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus,
34714
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text]:focus {
34454
34715
  outline: none;
34455
34716
  }
34456
34717
 
@@ -34481,23 +34742,31 @@ button.cds--dropdown-text:focus {
34481
34742
  }
34482
34743
  }
34483
34744
 
34484
- .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number] {
34745
+ .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number],
34746
+ .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=text] {
34485
34747
  border-block-end: 1px solid transparent;
34486
34748
  }
34487
34749
 
34488
34750
  .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=number],
34489
34751
  .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:hover,
34490
- .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn:hover:not(:focus) {
34752
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn:hover:not(:focus),
34753
+ .cds--number-input--fluid--invalid .cds--number[data-invalid] input[type=text],
34754
+ .cds--number-input--fluid--invalid .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn:hover,
34755
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text] ~ .cds--number__controls .cds--number__control-btn:hover:not(:focus) {
34491
34756
  outline: none;
34492
34757
  }
34493
34758
 
34494
34759
  .cds--number-input--fluid.cds--number-input--invalid .cds--number__input-wrapper input[type=number] ~ .cds--number__controls .cds--number__control-btn,
34495
- .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn {
34760
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number] ~ .cds--number__controls .cds--number__control-btn,
34761
+ .cds--number-input--fluid.cds--number-input--invalid .cds--number__input-wrapper input[type=text] ~ .cds--number__controls .cds--number__control-btn,
34762
+ .cds--number-input--fluid .cds--number__input-wrapper--warning input[type=text] ~ .cds--number__controls .cds--number__control-btn {
34496
34763
  border-block-end: none;
34497
34764
  }
34498
34765
 
34499
34766
  .cds--number-input--fluid--invalid .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn,
34500
- .cds--number-input--fluid .cds--number input[type=number] ~ .cds--number__controls .cds--number__control-btn {
34767
+ .cds--number-input--fluid .cds--number input[type=number] ~ .cds--number__controls .cds--number__control-btn,
34768
+ .cds--number-input--fluid--invalid .cds--number input[type=text][data-invalid] ~ .cds--number__controls .cds--number__control-btn,
34769
+ .cds--number-input--fluid .cds--number input[type=text] ~ .cds--number__controls .cds--number__control-btn {
34501
34770
  border: initial;
34502
34771
  border-block-end-width: 0.0625rem;
34503
34772
  }
@@ -34506,7 +34775,8 @@ button.cds--dropdown-text:focus {
34506
34775
  border-block-end: 1px solid var(--cds-border-subtle);
34507
34776
  }
34508
34777
 
34509
- .cds--number-input--fluid--disabled.cds--number-input--fluid--invalid .cds--number input[type=number]:disabled {
34778
+ .cds--number-input--fluid--disabled.cds--number-input--fluid--invalid .cds--number input[type=number]:disabled,
34779
+ .cds--number-input--fluid--disabled.cds--number-input--fluid--invalid .cds--number input[type=text]:disabled {
34510
34780
  background-color: transparent;
34511
34781
  }
34512
34782
 
@@ -34985,12 +35255,6 @@ optgroup.cds--select-optgroup:disabled,
34985
35255
  inset-inline-end: 5rem;
34986
35256
  }
34987
35257
 
34988
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
34989
- .cds--select__arrow {
34990
- fill: ButtonText;
34991
- }
34992
- }
34993
-
34994
35258
  .cds--select--fluid .cds--select {
34995
35259
  position: relative;
34996
35260
  background: var(--cds-field);
@@ -36255,6 +36519,7 @@ optgroup.cds--select-optgroup:disabled,
36255
36519
  .cds--modal .cds--list-box__wrapper--fluid .cds--list-box,
36256
36520
  .cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
36257
36521
  .cds--modal .cds--number-input--fluid input[type=number],
36522
+ .cds--modal .cds--number-input--fluid input[type=text],
36258
36523
  .cds--modal .cds--number-input--fluid .cds--number__control-btn::before,
36259
36524
  .cds--modal .cds--number-input--fluid .cds--number__control-btn::after,
36260
36525
  .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
@@ -36623,12 +36888,6 @@ optgroup.cds--select-optgroup:disabled,
36623
36888
  display: none;
36624
36889
  }
36625
36890
 
36626
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
36627
- .cds--modal-close__icon {
36628
- fill: ButtonText;
36629
- }
36630
- }
36631
-
36632
36891
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
36633
36892
  .cds--modal-close:focus {
36634
36893
  color: Highlight;
@@ -36978,18 +37237,6 @@ optgroup.cds--select-optgroup:disabled,
36978
37237
  }
36979
37238
  }
36980
37239
 
36981
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
36982
- .cds--inline-notification .cds--inline-notification__icon {
36983
- fill: ButtonText;
36984
- }
36985
- }
36986
-
36987
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
36988
- .cds--inline-notification .cds--inline-notification__close-icon {
36989
- fill: ButtonText;
36990
- }
36991
- }
36992
-
36993
37240
  .cds--toast-notification {
36994
37241
  display: flex;
36995
37242
  block-size: auto;
@@ -37252,18 +37499,6 @@ optgroup.cds--select-optgroup:disabled,
37252
37499
  }
37253
37500
  }
37254
37501
 
37255
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
37256
- .cds--toast-notification .cds--toast-notification__close-icon {
37257
- fill: ButtonText;
37258
- }
37259
- }
37260
-
37261
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
37262
- .cds--toast-notification .cds--toast-notification__icon {
37263
- fill: ButtonText;
37264
- }
37265
- }
37266
-
37267
37502
  .cds--actionable-notification {
37268
37503
  position: relative;
37269
37504
  display: flex;
@@ -37729,25 +37964,56 @@ optgroup.cds--select-optgroup:disabled,
37729
37964
  }
37730
37965
  }
37731
37966
 
37732
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
37733
- .cds--actionable-notification .cds--inline-notification__icon,
37734
- .cds--actionable-notification .cds--toast-notification__icon,
37735
- .cds--actionable-notification .cds--actionable-notification__close-icon {
37736
- fill: ButtonText;
37737
- }
37738
- }
37739
-
37740
37967
  .cds--page-header {
37741
- border: 1px solid rebeccapurple; /* stylelint-disable-line */
37968
+ background-color: var(--cds-layer-01, #f4f4f4);
37969
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
37742
37970
  }
37743
37971
 
37744
37972
  .cds--page-header__breadcrumb-bar {
37745
- border: 1px solid blue; /* stylelint-disable-line */
37973
+ block-size: 2.5rem;
37974
+ }
37975
+
37976
+ .cds--page-header__breadcrumb-bar .cds--subgrid {
37977
+ block-size: 100%;
37978
+ }
37979
+
37980
+ .cds--page-header__breadcrumb-container {
37981
+ display: inline-flex;
37982
+ align-items: center;
37983
+ justify-content: space-between;
37984
+ block-size: 100%;
37985
+ inline-size: 100%;
37986
+ }
37987
+
37988
+ .cds--page-header__breadcrumb__actions-flush .cds--css-grid {
37989
+ padding-inline-end: 0;
37990
+ }
37991
+ .cds--page-header__breadcrumb__actions-flush .cds--css-grid-column {
37992
+ margin-inline-end: 0;
37993
+ }
37994
+
37995
+ .cds--page-header__breadcrumb-bar-border {
37996
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
37997
+ }
37998
+
37999
+ .cds--page-header__breadcrumb__icon {
38000
+ margin-inline-end: 0.5rem;
38001
+ }
38002
+
38003
+ .cds--page-header__breadcrumb__actions {
38004
+ display: inline-flex;
38005
+ }
38006
+
38007
+ .cds--page-header__breadcrumb__content-actions {
38008
+ margin-inline-end: 0.75rem;
38009
+ }
38010
+
38011
+ .cds--page-header__breadcrumb-wrapper {
38012
+ display: inline-flex;
37746
38013
  }
37747
38014
 
37748
38015
  .cds--page-header__content {
37749
- margin: 1.5rem 0;
37750
- border: 1px solid red; /* stylelint-disable-line */
38016
+ padding: 1.5rem 0;
37751
38017
  }
37752
38018
 
37753
38019
  .cds--page-header__content__title-wrapper {
@@ -37849,14 +38115,34 @@ optgroup.cds--select-optgroup:disabled,
37849
38115
  display: flex;
37850
38116
  overflow: hidden;
37851
38117
  align-items: center;
37852
- justify-content: end;
38118
+ justify-content: flex-end;
37853
38119
  block-size: 100%;
37854
38120
  }
37855
38121
 
37856
38122
  .cds--page-header__tab-bar {
38123
+ margin-inline-start: -1rem;
38124
+ }
38125
+
38126
+ .cds--page-header__tab-bar--tablist {
37857
38127
  display: grid;
37858
- padding: 0 1rem;
37859
- border: 1px solid green; /* stylelint-disable-line */
38128
+ grid-gap: 4rem;
38129
+ grid-template-columns: auto minmax(0, 1fr);
38130
+ }
38131
+
38132
+ .cds--page-header__tags {
38133
+ display: flex;
38134
+ align-items: center;
38135
+ justify-content: right;
38136
+ }
38137
+
38138
+ .cds--page-header__tags-popover-list {
38139
+ display: flex;
38140
+ flex-direction: column;
38141
+ padding: 1rem;
38142
+ }
38143
+
38144
+ .cds--page-header__tag-item {
38145
+ flex-shrink: 0;
37860
38146
  }
37861
38147
 
37862
38148
  .cds--data-table-container + .cds--pagination {
@@ -39985,12 +40271,6 @@ span.cds--pagination__text.cds--pagination__items-count {
39985
40271
  display: none;
39986
40272
  }
39987
40273
 
39988
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
39989
- .cds--structured-list-input:checked + .cds--structured-list-td .cds--structured-list-svg {
39990
- fill: ButtonText;
39991
- }
39992
- }
39993
-
39994
40274
  .cds--structured-list__icon {
39995
40275
  margin-block-start: 0.125rem;
39996
40276
  vertical-align: top;
@@ -40375,7 +40655,7 @@ span.cds--pagination__text.cds--pagination__items-count {
40375
40655
  inline-size: 1rem;
40376
40656
  }
40377
40657
  .cds--tabs .cds--tabs__nav-item--close-icon svg:hover {
40378
- fill: var(--cds-text-primary, #161616);
40658
+ fill: var(--cds-icon-primary, #161616);
40379
40659
  }
40380
40660
  .cds--tabs .cds--tabs__nav-item--close-icon:hover {
40381
40661
  background-color: var(--cds-layer-hover);
@@ -40390,10 +40670,10 @@ span.cds--pagination__text.cds--pagination__items-count {
40390
40670
  }
40391
40671
  }
40392
40672
  .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon svg {
40393
- fill: var(--cds-text-primary, #161616);
40673
+ fill: var(--cds-icon-primary, #161616);
40394
40674
  }
40395
40675
  .cds--tabs .cds--tabs__nav-item--close-icon--selected svg {
40396
- fill: var(--cds-text-primary, #161616);
40676
+ fill: var(--cds-icon-primary, #161616);
40397
40677
  }
40398
40678
  .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled,
40399
40679
  .cds--tabs .cds--tabs__nav-item--close-icon--disabled,
@@ -40404,7 +40684,7 @@ span.cds--pagination__text.cds--pagination__items-count {
40404
40684
  .cds--tabs .cds--tabs__nav-item:hover + .cds--tabs__nav-item--close .cds--tabs__nav-item--close-icon--disabled svg,
40405
40685
  .cds--tabs .cds--tabs__nav-item--close-icon--disabled svg,
40406
40686
  .cds--tabs .cds--tabs__nav-item--close-icon--disabled:hover svg {
40407
- fill: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
40687
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
40408
40688
  }
40409
40689
  .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,
40410
40690
  .cds--tabs .cds--tabs__nav-item--close-icon--disabled:focus,
@@ -40633,6 +40913,7 @@ span.cds--pagination__text.cds--pagination__items-count {
40633
40913
  .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid .cds--list-box,
40634
40914
  .cds--tabs--vertical ~ .cds--tab-content .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
40635
40915
  .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid input[type=number],
40916
+ .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid input[type=text],
40636
40917
  .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::before,
40637
40918
  .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn::after,
40638
40919
  .cds--tabs--vertical ~ .cds--tab-content .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
@@ -40920,11 +41201,6 @@ span.cds--pagination__text.cds--pagination__items-count {
40920
41201
  transition: none;
40921
41202
  }
40922
41203
  }
40923
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
40924
- .cds--tile__chevron svg {
40925
- fill: ButtonText;
40926
- }
40927
- }
40928
41204
 
40929
41205
  .cds--tile__chevron--interactive {
40930
41206
  box-sizing: border-box;
@@ -41048,11 +41324,6 @@ span.cds--pagination__text.cds--pagination__items-count {
41048
41324
  .cds--tile--is-selected .cds--tile__checkmark svg {
41049
41325
  fill: var(--cds-icon-primary, #161616);
41050
41326
  }
41051
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
41052
- .cds--tile--is-selected .cds--tile__checkmark svg {
41053
- fill: ButtonText;
41054
- }
41055
- }
41056
41327
 
41057
41328
  .cds--tile-content {
41058
41329
  block-size: 100%;
@@ -41276,14 +41547,6 @@ span.cds--pagination__text.cds--pagination__items-count {
41276
41547
  border-end-end-radius: 0.5rem;
41277
41548
  }
41278
41549
 
41279
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
41280
- .cds--tile__chevron svg,
41281
- .cds--tile__checkmark svg,
41282
- .cds--tile--is-selected .cds--tile__checkmark svg {
41283
- fill: ButtonText;
41284
- }
41285
- }
41286
-
41287
41550
  .cds--time-picker {
41288
41551
  display: flex;
41289
41552
  align-items: flex-end;
@@ -42792,15 +43055,6 @@ a.cds--side-nav__link--current::before {
42792
43055
  fill: var(--cds-icon-secondary, #525252);
42793
43056
  }
42794
43057
 
42795
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
42796
- .cds--side-nav__icon > svg,
42797
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
42798
- .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
42799
- .cds--side-nav .cds--header__menu-arrow {
42800
- fill: ButtonText;
42801
- }
42802
- }
42803
-
42804
43058
  .cds--switcher {
42805
43059
  box-sizing: border-box;
42806
43060
  padding: 0;
@@ -43805,15 +44059,6 @@ a.cds--side-nav__link--current::before {
43805
44059
  fill: var(--cds-icon-secondary, #525252);
43806
44060
  }
43807
44061
 
43808
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
43809
- .cds--side-nav__icon > svg,
43810
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
43811
- .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
43812
- .cds--side-nav .cds--header__menu-arrow {
43813
- fill: ButtonText;
43814
- }
43815
- }
43816
-
43817
44062
  .cds--switcher {
43818
44063
  box-sizing: border-box;
43819
44064
  padding: 0;