carbon-components-angular 5.10.0 → 5.10.2

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 (73) hide show
  1. package/docs/documentation/components/Radio.html +6 -16
  2. package/docs/documentation/components/RadioGroup.html +460 -98
  3. package/docs/documentation/coverage.html +3 -3
  4. package/docs/documentation/graph/dependencies.svg +2138 -2132
  5. package/docs/documentation/js/menu-wc.js +3 -3
  6. package/docs/documentation/js/menu-wc_es5.js +1 -1
  7. package/docs/documentation/js/search/search_index.js +2 -2
  8. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  9. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  10. package/docs/documentation/modules/DatePickerModule/dependencies.svg +39 -39
  11. package/docs/documentation/modules/DatePickerModule.html +39 -39
  12. package/docs/documentation/modules/FileUploaderModule/dependencies.svg +34 -34
  13. package/docs/documentation/modules/FileUploaderModule.html +34 -34
  14. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  15. package/docs/documentation/modules/LoadingModule.html +4 -4
  16. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  17. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  18. package/docs/documentation/modules/RadioModule/dependencies.svg +54 -38
  19. package/docs/documentation/modules/RadioModule.html +67 -39
  20. package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
  21. package/docs/documentation/modules/SearchModule.html +4 -4
  22. package/docs/documentation/modules/SelectModule/dependencies.svg +4 -4
  23. package/docs/documentation/modules/SelectModule.html +4 -4
  24. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  25. package/docs/documentation/modules/SliderModule.html +4 -4
  26. package/docs/documentation/modules/TableModule/dependencies.svg +4 -4
  27. package/docs/documentation/modules/TableModule.html +4 -4
  28. package/docs/documentation/modules/TabsModule/dependencies.svg +68 -68
  29. package/docs/documentation/modules/TabsModule.html +68 -68
  30. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  31. package/docs/documentation/modules/ThemeModule.html +13 -13
  32. package/docs/documentation/modules/TimePickerModule/dependencies.svg +26 -26
  33. package/docs/documentation/modules/TimePickerModule.html +26 -26
  34. package/docs/documentation/modules/ToggleModule/dependencies.svg +20 -20
  35. package/docs/documentation/modules/ToggleModule.html +20 -20
  36. package/docs/documentation/modules/TooltipModule/dependencies.svg +29 -29
  37. package/docs/documentation/modules/TooltipModule.html +29 -29
  38. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  39. package/docs/documentation/modules/UIShellModule.html +4 -4
  40. package/docs/documentation/overview.html +2138 -2132
  41. package/docs/documentation.json +157 -64
  42. package/docs/storybook/1895.69e2c275.iframe.bundle.js +1 -0
  43. package/docs/storybook/{795.2461bc53.iframe.bundle.js → 795.c2864771.iframe.bundle.js} +3 -3
  44. package/docs/storybook/{795.2461bc53.iframe.bundle.js.map → 795.c2864771.iframe.bundle.js.map} +1 -1
  45. package/docs/storybook/9115.e3ed2f59.iframe.bundle.js +1 -0
  46. package/docs/storybook/iframe.html +3 -3
  47. package/docs/storybook/main.css +892 -248
  48. package/docs/storybook/{main.5099962e.iframe.bundle.js → main.e1ee5785.iframe.bundle.js} +1 -1
  49. package/docs/storybook/project.json +1 -1
  50. package/docs/storybook/radio-radio-stories.b67e94b9.iframe.bundle.js +1 -0
  51. package/docs/storybook/{runtime~main.593529e2.iframe.bundle.js → runtime~main.cd9ec3bb.iframe.bundle.js} +1 -1
  52. package/esm2020/i18n/en.mjs +8 -69
  53. package/esm2020/radio/radio-group.component.mjs +121 -21
  54. package/esm2020/radio/radio.component.mjs +3 -11
  55. package/esm2020/radio/radio.module.mjs +8 -4
  56. package/fesm2015/carbon-components-angular-i18n.mjs +7 -68
  57. package/fesm2015/carbon-components-angular-i18n.mjs.map +1 -1
  58. package/fesm2015/carbon-components-angular-radio.mjs +129 -33
  59. package/fesm2015/carbon-components-angular-radio.mjs.map +1 -1
  60. package/fesm2020/carbon-components-angular-i18n.mjs +7 -68
  61. package/fesm2020/carbon-components-angular-i18n.mjs.map +1 -1
  62. package/fesm2020/carbon-components-angular-radio.mjs +129 -33
  63. package/fesm2020/carbon-components-angular-radio.mjs.map +1 -1
  64. package/i18n/en.d.ts +0 -47
  65. package/i18n/i18n.service.d.ts +1 -54
  66. package/package.json +1 -1
  67. package/radio/radio-group.component.d.ts +46 -24
  68. package/radio/radio.component.d.ts +1 -1
  69. package/radio/radio.module.d.ts +2 -1
  70. package/docs/storybook/1895.d4241266.iframe.bundle.js +0 -1
  71. package/docs/storybook/9115.e6e0100b.iframe.bundle.js +0 -1
  72. package/docs/storybook/radio-radio-stories.6838bad5.iframe.bundle.js +0 -1
  73. /package/docs/storybook/{795.2461bc53.iframe.bundle.js.LICENSE.txt → 795.c2864771.iframe.bundle.js.LICENSE.txt} +0 -0
@@ -87,6 +87,13 @@ video {
87
87
  font-size: 100%;
88
88
  vertical-align: baseline;
89
89
  }
90
+ button,
91
+ select,
92
+ input,
93
+ textarea {
94
+ border-radius: 0;
95
+ font-family: inherit;
96
+ }
90
97
  /* HTML5 display-role reset for older browsers */
91
98
  article,
92
99
  aside,
@@ -2309,7 +2316,7 @@ em {
2309
2316
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2310
2317
  --cds-field: var(--cds-field-01, #f4f4f4);
2311
2318
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2312
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2319
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2313
2320
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2314
2321
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2315
2322
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2325,7 +2332,7 @@ em {
2325
2332
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2326
2333
  --cds-field: var(--cds-field-01, #f4f4f4);
2327
2334
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2328
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2335
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2329
2336
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2330
2337
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2331
2338
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2341,7 +2348,7 @@ em {
2341
2348
  --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
2342
2349
  --cds-field: var(--cds-field-02, #ffffff);
2343
2350
  --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
2344
- --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
2351
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2345
2352
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
2346
2353
  --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
2347
2354
  --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
@@ -2357,11 +2364,129 @@ em {
2357
2364
  --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
2358
2365
  --cds-field: var(--cds-field-03, #f4f4f4);
2359
2366
  --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
2360
- --cds-border-subtle: var(--cds-border-subtle-03, #c6c6c6);
2367
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
2361
2368
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
2362
2369
  --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
2363
2370
  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
2364
2371
  }
2372
+ :root {
2373
+ --cds-layout-size-height-xs: 1.5rem;
2374
+ --cds-layout-size-height-sm: 2rem;
2375
+ --cds-layout-size-height-md: 2.5rem;
2376
+ --cds-layout-size-height-lg: 3rem;
2377
+ --cds-layout-size-height-xl: 4rem;
2378
+ --cds-layout-size-height-2xl: 5rem;
2379
+ --cds-layout-size-height-min: 0px;
2380
+ --cds-layout-size-height-max: 999999999px;
2381
+ --cds-layout-density-padding-inline-condensed: 0.5rem;
2382
+ --cds-layout-density-padding-inline-normal: 1rem;
2383
+ --cds-layout-density-padding-inline-min: 0px;
2384
+ --cds-layout-density-padding-inline-max: 999999999px;
2385
+ }
2386
+ .cds--layout--size-xs {
2387
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
2388
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2389
+ }
2390
+ .cds--layout-constraint--size\:default-xs {
2391
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
2392
+ }
2393
+ .cds--layout-constraint--size\:min-xs {
2394
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
2395
+ }
2396
+ .cds--layout-constraint--size\:max-xs {
2397
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
2398
+ }
2399
+ .cds--layout--size-sm {
2400
+ --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
2401
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2402
+ }
2403
+ .cds--layout-constraint--size\:default-sm {
2404
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
2405
+ }
2406
+ .cds--layout-constraint--size\:min-sm {
2407
+ --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
2408
+ }
2409
+ .cds--layout-constraint--size\:max-sm {
2410
+ --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
2411
+ }
2412
+ .cds--layout--size-md {
2413
+ --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
2414
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2415
+ }
2416
+ .cds--layout-constraint--size\:default-md {
2417
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
2418
+ }
2419
+ .cds--layout-constraint--size\:min-md {
2420
+ --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
2421
+ }
2422
+ .cds--layout-constraint--size\:max-md {
2423
+ --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
2424
+ }
2425
+ .cds--layout--size-lg {
2426
+ --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
2427
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2428
+ }
2429
+ .cds--layout-constraint--size\:default-lg {
2430
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
2431
+ }
2432
+ .cds--layout-constraint--size\:min-lg {
2433
+ --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
2434
+ }
2435
+ .cds--layout-constraint--size\:max-lg {
2436
+ --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
2437
+ }
2438
+ .cds--layout--size-xl {
2439
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
2440
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2441
+ }
2442
+ .cds--layout-constraint--size\:default-xl {
2443
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
2444
+ }
2445
+ .cds--layout-constraint--size\:min-xl {
2446
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
2447
+ }
2448
+ .cds--layout-constraint--size\:max-xl {
2449
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
2450
+ }
2451
+ .cds--layout--size-2xl {
2452
+ --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
2453
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2454
+ }
2455
+ .cds--layout-constraint--size\:default-2xl {
2456
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
2457
+ }
2458
+ .cds--layout-constraint--size\:min-2xl {
2459
+ --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
2460
+ }
2461
+ .cds--layout-constraint--size\:max-2xl {
2462
+ --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
2463
+ }
2464
+ .cds--layout--density-condensed {
2465
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
2466
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
2467
+ }
2468
+ .cds--layout-constraint--density\:default-condensed {
2469
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
2470
+ }
2471
+ .cds--layout-constraint--density\:min-condensed {
2472
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
2473
+ }
2474
+ .cds--layout-constraint--density\:max-condensed {
2475
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
2476
+ }
2477
+ .cds--layout--density-normal {
2478
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
2479
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
2480
+ }
2481
+ .cds--layout-constraint--density\:default-normal {
2482
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
2483
+ }
2484
+ .cds--layout-constraint--density\:min-normal {
2485
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
2486
+ }
2487
+ .cds--layout-constraint--density\:max-normal {
2488
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
2489
+ }
2365
2490
  .cds--white {
2366
2491
  background: var(--cds-background);
2367
2492
  color: var(--cds-text-primary);
@@ -2475,7 +2600,7 @@ em {
2475
2600
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2476
2601
  --cds-field: var(--cds-field-01, #f4f4f4);
2477
2602
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2478
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2603
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2479
2604
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2480
2605
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2481
2606
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2648,7 +2773,7 @@ em {
2648
2773
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2649
2774
  --cds-field: var(--cds-field-01, #f4f4f4);
2650
2775
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2651
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2776
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2652
2777
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2653
2778
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2654
2779
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2821,7 +2946,7 @@ em {
2821
2946
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2822
2947
  --cds-field: var(--cds-field-01, #f4f4f4);
2823
2948
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2824
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
2949
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2825
2950
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2826
2951
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2827
2952
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2993,7 +3118,7 @@ em {
2993
3118
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
2994
3119
  --cds-field: var(--cds-field-01, #f4f4f4);
2995
3120
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
2996
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
3121
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
2997
3122
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
2998
3123
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
2999
3124
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3067,6 +3192,8 @@ em {
3067
3192
  width: calc(100% + 32px);
3068
3193
  }
3069
3194
  .cds--accordion {
3195
+ --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-lg)));
3196
+ --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));
3070
3197
  box-sizing: border-box;
3071
3198
  padding: 0;
3072
3199
  border: 0;
@@ -3111,11 +3238,10 @@ em {
3111
3238
  position: relative;
3112
3239
  display: flex;
3113
3240
  width: 100%;
3114
- min-height: 2.5rem;
3241
+ min-height: var(--cds-layout-size-height-local);
3115
3242
  flex-direction: row-reverse;
3116
- align-items: flex-start;
3243
+ align-items: center;
3117
3244
  justify-content: flex-start;
3118
- padding: 0.625rem 0;
3119
3245
  margin: 0;
3120
3246
  color: var(--cds-text-primary, #161616);
3121
3247
  cursor: pointer;
@@ -3152,14 +3278,6 @@ em {
3152
3278
  border-style: dotted;
3153
3279
  }
3154
3280
  }
3155
- .cds--accordion--lg .cds--accordion__heading {
3156
- min-height: 3rem;
3157
- align-items: center;
3158
- }
3159
- .cds--accordion--sm .cds--accordion__heading {
3160
- min-height: 2rem;
3161
- padding: 0.3125rem 0;
3162
- }
3163
3281
  .cds--accordion__heading[disabled] {
3164
3282
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
3165
3283
  cursor: not-allowed;
@@ -3183,7 +3301,7 @@ li.cds--accordion__item--disabled:last-of-type {
3183
3301
  width: 1rem;
3184
3302
  height: 1rem;
3185
3303
  flex: 0 0 1rem;
3186
- margin: 2px 1rem 0 0;
3304
+ margin: 0 var(--cds-layout-density-padding-inline-local) 0 0;
3187
3305
  fill: var(--cds-icon-primary, #161616);
3188
3306
  transform: rotate(-270deg) /*rtl:ignore*/;
3189
3307
  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -3196,13 +3314,12 @@ li.cds--accordion__item--disabled:last-of-type {
3196
3314
  z-index: 1;
3197
3315
  width: 100%;
3198
3316
  padding-right: 1rem;
3199
- margin: 0 0 0 1rem;
3317
+ margin: 0 0 0 var(--cds-layout-density-padding-inline-local);
3200
3318
  text-align: left;
3201
3319
  }
3202
3320
  .cds--accordion__content {
3203
3321
  display: none;
3204
- padding-right: 1rem;
3205
- padding-left: 1rem;
3322
+ padding-inline: var(--cds-layout-density-padding-inline-local);
3206
3323
  transition: padding cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
3207
3324
  }
3208
3325
  @media (min-width: 480px) {
@@ -3225,13 +3342,13 @@ li.cds--accordion__item--disabled:last-of-type {
3225
3342
  flex-direction: row;
3226
3343
  }
3227
3344
  .cds--accordion--start .cds--accordion__arrow {
3228
- margin: 2px 0 0 1rem;
3345
+ margin: 2px 0 0 var(--cds-layout-density-padding-inline-local);
3229
3346
  }
3230
3347
  .cds--accordion--start .cds--accordion__title {
3231
3348
  margin-right: 1rem;
3232
3349
  }
3233
3350
  .cds--accordion--start .cds--accordion__content {
3234
- margin-left: 2rem;
3351
+ margin-left: calc(var(--cds-layout-density-padding-inline-local) + 1rem);
3235
3352
  }
3236
3353
  .cds--accordion__item--collapsing .cds--accordion__content,
3237
3354
  .cds--accordion__item--expanding .cds--accordion__content {
@@ -3691,6 +3808,15 @@ li.cds--accordion__item--disabled:last-of-type {
3691
3808
  white-space: nowrap;
3692
3809
  }
3693
3810
  .cds--btn {
3811
+ --cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
3812
+ --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));
3813
+ --temp-1lh: (
3814
+ var(--cds-body-compact-01-line-height, 1.28572) * 1em
3815
+ );
3816
+ --temp-padding-block-max: calc(
3817
+ (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
3818
+ 0.0625rem
3819
+ );
3694
3820
  box-sizing: border-box;
3695
3821
  padding: 0;
3696
3822
  border: 0;
@@ -3706,15 +3832,16 @@ li.cds--accordion__item--disabled:last-of-type {
3706
3832
  display: inline-flex;
3707
3833
  width: max-content;
3708
3834
  max-width: 20rem;
3709
- min-height: 3rem;
3835
+ height: var(--cds-layout-size-height-local);
3710
3836
  flex-shrink: 0;
3711
- align-items: center;
3712
3837
  justify-content: space-between;
3713
- padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px;
3714
3838
  margin: 0;
3715
3839
  border-radius: 0;
3716
3840
  cursor: pointer;
3717
3841
  outline: none;
3842
+ padding-block-start: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
3843
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
3844
+ padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
3718
3845
  text-align: left;
3719
3846
  text-decoration: none;
3720
3847
  transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
@@ -3734,10 +3861,12 @@ li.cds--accordion__item--disabled:last-of-type {
3734
3861
  }
3735
3862
  .cds--btn .cds--btn__icon {
3736
3863
  position: absolute;
3737
- right: 1rem;
3864
+ top: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
3865
+ right: var(--cds-layout-density-padding-inline-local);
3738
3866
  width: 1rem;
3739
3867
  height: 1rem;
3740
3868
  flex-shrink: 0;
3869
+ margin-block-start: 0.0625rem;
3741
3870
  }
3742
3871
  .cds--btn::-moz-focus-inner {
3743
3872
  padding: 0;
@@ -3835,7 +3964,7 @@ li.cds--accordion__item--disabled:last-of-type {
3835
3964
  border-color: transparent;
3836
3965
  background-color: transparent;
3837
3966
  color: var(--cds-link-primary, #0f62fe);
3838
- padding: calc(0.875rem - 3px) 16px;
3967
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
3839
3968
  }
3840
3969
  .cds--btn--ghost:hover {
3841
3970
  background-color: var(--cds-layer-hover);
@@ -3867,18 +3996,18 @@ li.cds--accordion__item--disabled:last-of-type {
3867
3996
  color: var(--cds-text-on-color-disabled, #8d8d8d);
3868
3997
  outline: none;
3869
3998
  }
3870
- .cds--btn--ghost.cds--btn--sm {
3871
- padding: calc(0.375rem - 3px) 16px;
3872
- }
3873
- .cds--btn--ghost.cds--btn--field, .cds--btn--ghost.cds--btn--md {
3874
- padding: calc(0.675rem - 3px) 16px;
3875
- }
3876
3999
  .cds--btn--ghost:not([disabled]) svg {
3877
4000
  fill: var(--cds-icon-primary, #161616);
3878
4001
  }
3879
4002
  .cds--btn--icon-only {
3880
- padding-right: 0.9375rem;
3881
- padding-left: 0.9375rem;
4003
+ width: var(--cds-layout-size-height-local);
4004
+ height: var(--cds-layout-size-height-local);
4005
+ justify-content: center;
4006
+ padding: 0;
4007
+ padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
4008
+ }
4009
+ .cds--btn--icon-only > :first-child {
4010
+ margin-block-start: 0.0625rem;
3882
4011
  }
3883
4012
  .cds--btn--icon-only .cds--btn__icon {
3884
4013
  position: static;
@@ -3904,14 +4033,11 @@ li.cds--accordion__item--disabled:last-of-type {
3904
4033
  .cds--btn--ghost.cds--btn--icon-only[disabled] {
3905
4034
  cursor: not-allowed;
3906
4035
  }
3907
- .cds--btn--field.cds--btn--icon-only,
3908
- .cds--btn--md.cds--btn--icon-only {
3909
- padding-right: 0.6875rem;
3910
- padding-left: 0.6875rem;
4036
+ .cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
4037
+ cursor: not-allowed;
3911
4038
  }
3912
- .cds--btn--sm.cds--btn--icon-only {
3913
- padding-right: 0.4375rem;
3914
- padding-left: 0.4375rem;
4039
+ .cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
4040
+ pointer-events: none;
3915
4041
  }
3916
4042
  .cds--btn--danger {
3917
4043
  border-width: 1px;
@@ -3982,7 +4108,7 @@ li.cds--accordion__item--disabled:last-of-type {
3982
4108
  border-color: transparent;
3983
4109
  background-color: transparent;
3984
4110
  color: var(--cds-button-danger-secondary, #da1e28);
3985
- padding: calc(0.875rem - 3px) 16px;
4111
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
3986
4112
  }
3987
4113
  .cds--btn--danger--ghost:hover {
3988
4114
  background-color: var(--cds-button-danger-hover, #b81921);
@@ -4011,41 +4137,11 @@ li.cds--accordion__item--disabled:last-of-type {
4011
4137
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
4012
4138
  outline: none;
4013
4139
  }
4014
- .cds--btn--danger--ghost.cds--btn--sm {
4015
- padding: calc(0.375rem - 3px) 16px;
4016
- }
4017
- .cds--btn--danger--ghost.cds--btn--field, .cds--btn--danger--ghost.cds--btn--md {
4018
- padding: calc(0.675rem - 3px) 16px;
4019
- }
4020
- .cds--btn--sm {
4021
- min-height: 2rem;
4022
- padding: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px;
4023
- }
4024
- .cds--btn--2xl:not(.cds--btn--icon-only) {
4025
- align-items: baseline;
4026
- padding-top: 1rem;
4027
- padding-right: 4rem;
4028
- padding-left: 1rem;
4029
- min-height: 5rem;
4030
- }
4031
- .cds--btn--xl:not(.cds--btn--icon-only) {
4032
- align-items: baseline;
4033
- padding-top: 1rem;
4034
- padding-right: 4rem;
4035
- padding-left: 1rem;
4036
- min-height: 4rem;
4037
- }
4038
- .cds--btn--field,
4039
- .cds--btn--md {
4040
- min-height: 2.5rem;
4041
- padding: calc(0.675rem - 3px) 60px calc(0.675rem - 3px) 12px;
4042
- }
4043
4140
  .cds--btn--expressive {
4044
4141
  font-size: var(--cds-body-compact-02-font-size, 1rem);
4045
4142
  font-weight: var(--cds-body-compact-02-font-weight, 400);
4046
4143
  line-height: var(--cds-body-compact-02-line-height, 1.375);
4047
4144
  letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
4048
- min-height: 3rem;
4049
4145
  }
4050
4146
  .cds--btn--icon-only.cds--btn--expressive {
4051
4147
  padding: 12px 13px;
@@ -4317,6 +4413,7 @@ input[data-invalid] ~ .cds--form-requirement,
4317
4413
  .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
4318
4414
  .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
4319
4415
  .cds--time-picker--invalid ~ .cds--form-requirement,
4416
+ .cds--time-picker--warning ~ .cds--form-requirement,
4320
4417
  .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
4321
4418
  .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
4322
4419
  .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
@@ -4405,6 +4502,22 @@ fieldset[disabled] .cds--label,
4405
4502
  fieldset[disabled] .cds--form__helper-text {
4406
4503
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
4407
4504
  }
4505
+ .cds--checkbox-group html {
4506
+ font-size: 100%;
4507
+ }
4508
+ .cds--checkbox-group body {
4509
+ font-weight: 400;
4510
+ font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
4511
+ -moz-osx-font-smoothing: grayscale;
4512
+ -webkit-font-smoothing: antialiased;
4513
+ text-rendering: optimizeLegibility;
4514
+ }
4515
+ .cds--checkbox-group code {
4516
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
4517
+ }
4518
+ .cds--checkbox-group strong {
4519
+ font-weight: 600;
4520
+ }
4408
4521
  .cds--form-item.cds--checkbox-wrapper {
4409
4522
  position: relative;
4410
4523
  margin-bottom: 0.25rem;
@@ -4478,17 +4591,17 @@ fieldset[disabled] .cds--form__helper-text {
4478
4591
  border: 1px solid var(--cds-icon-primary, #161616);
4479
4592
  margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
4480
4593
  background-color: transparent;
4481
- border-radius: 1px;
4594
+ border-radius: 2px;
4482
4595
  content: "";
4483
4596
  }
4484
4597
  .cds--checkbox-label::after {
4485
4598
  position: absolute;
4486
- top: 0.5rem;
4599
+ top: 0.46875rem;
4487
4600
  left: 0.4375rem;
4488
4601
  width: 0.5625rem;
4489
4602
  height: 0.3125rem;
4490
- border-bottom: 2px solid var(--cds-icon-inverse, #ffffff);
4491
- border-left: 2px solid var(--cds-icon-inverse, #ffffff);
4603
+ border-bottom: 1.5px solid var(--cds-icon-inverse, #ffffff);
4604
+ border-left: 1.5px solid var(--cds-icon-inverse, #ffffff);
4492
4605
  margin-top: -0.1875rem /*rtl:0rem*/;
4493
4606
  background: none;
4494
4607
  content: "";
@@ -4535,21 +4648,76 @@ fieldset[disabled] .cds--form__helper-text {
4535
4648
  .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before {
4536
4649
  background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
4537
4650
  }
4651
+ .cds--checkbox-group[data-invalid] .cds--checkbox-label::before,
4652
+ .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
4653
+ .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
4654
+ border: 1px solid var(--cds-support-error, #da1e28);
4655
+ }
4656
+ .cds--checkbox-group .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
4657
+ .cds--checkbox-group .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg,
4658
+ .cds--checkbox-group .cds--checkbox-wrapper > .cds--form__helper-text {
4659
+ display: none;
4660
+ }
4661
+ .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
4662
+ .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
4663
+ border: 1px solid var(--cds-icon-primary, #161616);
4664
+ }
4665
+ .cds--checkbox-group__validation-msg,
4666
+ .cds--checkbox__validation-msg {
4667
+ display: none;
4668
+ align-items: flex-end;
4669
+ margin-top: 0.25rem;
4670
+ }
4671
+ .cds--checkbox__invalid-icon {
4672
+ margin: 0 0.0625rem 0 0.1875rem;
4673
+ fill: var(--cds-support-error, #da1e28);
4674
+ }
4675
+ .cds--checkbox__invalid-icon--warning {
4676
+ fill: var(--cds-support-warning, #f1c21b);
4677
+ }
4678
+ .cds--checkbox__invalid-icon--warning path:first-of-type {
4679
+ fill: #000000;
4680
+ }
4681
+ .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg,
4682
+ .cds--checkbox-group--warning .cds--checkbox-group__validation-msg,
4683
+ .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
4684
+ .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg {
4685
+ display: flex;
4686
+ }
4687
+ .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
4688
+ .cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement,
4689
+ .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement,
4690
+ .cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement {
4691
+ display: block;
4692
+ overflow: visible;
4693
+ max-height: 100%;
4694
+ margin-top: 0;
4695
+ margin-left: 0.5rem;
4696
+ }
4697
+ .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
4698
+ .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement {
4699
+ color: var(--cds-text-error, #da1e28);
4700
+ }
4701
+ .cds--checkbox-group--readonly .cds--checkbox-label,
4538
4702
  .cds--checkbox-wrapper--readonly .cds--checkbox-label {
4539
4703
  cursor: default;
4540
4704
  }
4705
+ .cds--checkbox-group--readonly .cds--checkbox-label-text,
4541
4706
  .cds--checkbox-wrapper--readonly .cds--checkbox-label-text {
4542
4707
  cursor: text;
4543
4708
  -webkit-user-select: text;
4544
4709
  user-select: text;
4545
4710
  }
4711
+ .cds--checkbox-group--readonly .cds--checkbox + .cds--checkbox-label::before,
4546
4712
  .cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before {
4547
4713
  border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
4548
4714
  }
4715
+ .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::before,
4549
4716
  .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before {
4550
4717
  border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
4551
4718
  background: transparent;
4552
4719
  }
4720
+ .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
4553
4721
  .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
4554
4722
  border-color: var(--cds-text-primary, #161616);
4555
4723
  }
@@ -4592,8 +4760,6 @@ fieldset[disabled] .cds--form__helper-text {
4592
4760
  .cds--copy-btn {
4593
4761
  position: relative;
4594
4762
  display: flex;
4595
- width: 2.5rem;
4596
- height: 2.5rem;
4597
4763
  align-items: center;
4598
4764
  justify-content: center;
4599
4765
  padding: 0;
@@ -4974,11 +5140,12 @@ fieldset[disabled] .cds--form__helper-text {
4974
5140
  fill: var(--cds-icon-primary, #161616);
4975
5141
  transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
4976
5142
  }
5143
+ .cds--btn > .cds--snippet__icon {
5144
+ margin-block-start: 0;
5145
+ }
4977
5146
  .cds--copy-btn {
4978
5147
  display: flex;
4979
5148
  overflow: visible;
4980
- width: 2.5rem;
4981
- height: 2.5rem;
4982
5149
  align-items: center;
4983
5150
  justify-content: center;
4984
5151
  padding: 0;
@@ -5019,26 +5186,20 @@ fieldset[disabled] .cds--form__helper-text {
5019
5186
  top: 0;
5020
5187
  right: 0;
5021
5188
  }
5022
- .cds--snippet--inline.cds--btn--md.cds--btn--icon-only {
5023
- padding-right: 0;
5024
- padding-left: 0;
5025
- }
5026
- .cds--snippet--inline.cds--btn--md {
5027
- min-height: 1.25rem;
5189
+ .cds--snippet--inline.cds--btn {
5190
+ width: initial;
5191
+ height: 1.25rem;
5192
+ padding-inline: 0;
5028
5193
  }
5029
- .cds--snippet--inline.cds--btn--primary:hover {
5194
+ .cds--snippet--inline.cds--btn.cds--btn--primary:hover {
5030
5195
  color: var(--cds-text-primary, #161616);
5031
5196
  }
5032
5197
  .cds--snippet.cds--snippet--multi .cds--popover-container {
5033
5198
  top: 0.5rem;
5034
5199
  right: 0.5rem;
5035
5200
  }
5036
- .cds--snippet--multi .cds--copy-btn.cds--btn--md {
5201
+ .cds--snippet--multi .cds--copy-btn {
5037
5202
  z-index: 10;
5038
- width: 2rem;
5039
- height: 2rem;
5040
- min-height: 2rem;
5041
- padding: 0;
5042
5203
  }
5043
5204
  .cds--snippet-btn--expand {
5044
5205
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -5255,6 +5416,8 @@ fieldset[disabled] .cds--form__helper-text {
5255
5416
  }
5256
5417
  /* stylelint-enable */
5257
5418
  .cds--text-input {
5419
+ --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-lg)));
5420
+ --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));
5258
5421
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
5259
5422
  font-weight: var(--cds-body-compact-01-font-weight, 400);
5260
5423
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -5262,8 +5425,8 @@ fieldset[disabled] .cds--form__helper-text {
5262
5425
  outline: 2px solid transparent;
5263
5426
  outline-offset: -2px;
5264
5427
  width: 100%;
5265
- height: 2.5rem;
5266
- padding: 0 1rem;
5428
+ height: var(--cds-layout-size-height-local);
5429
+ padding: 0 var(--cds-layout-density-padding-inline-local);
5267
5430
  border: none;
5268
5431
  border-bottom: 1px solid var(--cds-border-strong);
5269
5432
  background-color: var(--cds-field);
@@ -5299,12 +5462,6 @@ fieldset[disabled] .cds--form__helper-text {
5299
5462
  .cds--text-input-wrapper svg[hidden] {
5300
5463
  display: none;
5301
5464
  }
5302
- .cds--text-input--lg {
5303
- height: 3rem;
5304
- }
5305
- .cds--text-input--sm {
5306
- height: 2rem;
5307
- }
5308
5465
  .cds--password-input {
5309
5466
  padding-right: 2.5rem;
5310
5467
  }
@@ -5776,6 +5933,7 @@ fieldset[disabled] .cds--form__helper-text {
5776
5933
  }
5777
5934
  .cds--form--fluid .cds--text-input-wrapper--readonly,
5778
5935
  .cds--text-input-wrapper--readonly .cds--text-input {
5936
+ border-bottom-color: var(--cds-border-subtle);
5779
5937
  background: transparent;
5780
5938
  }
5781
5939
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -5793,6 +5951,10 @@ fieldset[disabled] .cds--form__helper-text {
5793
5951
  align-self: end;
5794
5952
  }
5795
5953
  .cds--tag {
5954
+ --cds-layout-size-height-xs: 1.125rem;
5955
+ --cds-layout-size-height-sm: 1.125rem;
5956
+ --cds-layout-size-height-md: 1.5rem;
5957
+ --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-md)));
5796
5958
  font-size: var(--cds-label-01-font-size, 0.75rem);
5797
5959
  font-weight: var(--cds-label-01-font-weight, 400);
5798
5960
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -5802,16 +5964,25 @@ fieldset[disabled] .cds--form__helper-text {
5802
5964
  display: inline-flex;
5803
5965
  min-width: 2rem;
5804
5966
  max-width: 100%;
5805
- min-height: 1.5rem;
5967
+ min-height: var(--cds-layout-size-height-local);
5806
5968
  align-items: center;
5807
5969
  justify-content: center;
5808
- padding: 0.25rem 0.5rem;
5809
5970
  margin: 0.25rem;
5810
5971
  border-radius: 0.9375rem;
5811
5972
  cursor: default;
5973
+ padding-inline: 0.5rem;
5812
5974
  vertical-align: middle;
5813
5975
  word-break: break-word;
5814
5976
  }
5977
+ .cds--layout--size-xs .cds--tag {
5978
+ --cds-layout-size-height: var(--cds-layout-size-height-xs);
5979
+ }
5980
+ .cds--layout--size-sm .cds--tag {
5981
+ --cds-layout-size-height: var(--cds-layout-size-height-sm);
5982
+ }
5983
+ .cds--layout--size-md .cds--tag {
5984
+ --cds-layout-size-height: var(--cds-layout-size-height-md);
5985
+ }
5815
5986
  .cds--tag.cds--tag--interactive:hover,
5816
5987
  .cds--tag .cds--tag__close-icon:hover {
5817
5988
  background-color: var(--cds-tag-hover-gray, #c6c6c6);
@@ -5963,8 +6134,8 @@ fieldset[disabled] .cds--form__helper-text {
5963
6134
  }
5964
6135
  .cds--tag__close-icon {
5965
6136
  display: flex;
5966
- width: 1.5rem;
5967
- height: 1.5rem;
6137
+ width: var(--cds-layout-size-height-local);
6138
+ height: var(--cds-layout-size-height-local);
5968
6139
  flex-shrink: 0;
5969
6140
  align-items: center;
5970
6141
  justify-content: center;
@@ -6011,16 +6182,10 @@ fieldset[disabled] .cds--form__helper-text {
6011
6182
  .cds--tag--filter.cds--tag--disabled svg {
6012
6183
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
6013
6184
  }
6014
- .cds--tag--sm {
6015
- min-height: 1.125rem;
6016
- padding: 0 0.5rem;
6017
- }
6018
6185
  .cds--tag--sm.cds--tag--filter {
6019
6186
  padding-right: 0;
6020
6187
  }
6021
6188
  .cds--tag--sm .cds--tag__close-icon {
6022
- width: 1.125rem;
6023
- height: 1.125rem;
6024
6189
  margin-left: 0.3125rem;
6025
6190
  }
6026
6191
  .cds--tag.cds--skeleton {
@@ -6510,9 +6675,11 @@ fieldset[disabled] .cds--form__helper-text {
6510
6675
  }
6511
6676
  }
6512
6677
  .cds--list-box .cds--list-box__field[aria-expanded=false] + .cds--list-box__menu {
6678
+ display: none;
6513
6679
  max-height: 0;
6514
6680
  }
6515
6681
  .cds--list-box--expanded .cds--list-box__menu {
6682
+ display: block;
6516
6683
  max-height: 13.75rem;
6517
6684
  }
6518
6685
  .cds--list-box--expanded.cds--list-box--lg .cds--list-box__menu {
@@ -6774,6 +6941,9 @@ fieldset[disabled] .cds--form__helper-text {
6774
6941
  .cds--combo-box--readonly:hover {
6775
6942
  background-color: transparent;
6776
6943
  }
6944
+ .cds--combo-box--readonly .cds--text-input {
6945
+ border-bottom-color: var(--cds-border-subtle);
6946
+ }
6777
6947
  .cds--combo-box--readonly .cds--list-box__menu-icon,
6778
6948
  .cds--combo-box--readonly .cds--list-box__selection {
6779
6949
  cursor: default;
@@ -6804,48 +6974,60 @@ fieldset[disabled] .cds--form__helper-text {
6804
6974
  .cds--combo-button__container--open .cds--combo-button__trigger svg {
6805
6975
  transform: rotate(180deg);
6806
6976
  }
6977
+ .cds--contained-list {
6978
+ --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-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
6979
+ --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));
6980
+ }
6981
+ .cds--contained-list > ul {
6982
+ padding: 0;
6983
+ margin: 0;
6984
+ }
6807
6985
  .cds--contained-list__header {
6808
6986
  position: sticky;
6809
6987
  z-index: 1;
6810
6988
  top: 0;
6811
6989
  display: flex;
6812
6990
  align-items: center;
6813
- padding-inline: 1rem;
6991
+ padding-inline: var(--cds-layout-density-padding-inline-local);
6814
6992
  }
6815
6993
  .cds--contained-list__label {
6816
6994
  width: 100%;
6817
6995
  }
6818
- .cds--contained-list--on-page.cds--contained-list--sm .cds--contained-list__header {
6819
- height: 2rem;
6996
+ .cds--contained-list .cds--search {
6997
+ position: sticky;
6998
+ z-index: 1;
6999
+ top: var(--cds-layout-size-height-local);
6820
7000
  }
6821
- .cds--contained-list--sm .cds--contained-list-item__content,
6822
- .cds--contained-list--sm .cds--contained-list-item--clickable .cds--contained-list-item__content {
6823
- min-height: 2rem;
6824
- padding: calc(0.5rem - 0.125rem) 1rem;
7001
+ .cds--contained-list .cds--search.cds--search--expandable .cds--search-input {
7002
+ background-color: var(--cds-field);
6825
7003
  }
6826
- .cds--contained-list--on-page.cds--contained-list--md .cds--contained-list__header {
6827
- height: 2.5rem;
7004
+ .cds--contained-list .cds--search .cds--search-input {
7005
+ border-bottom: 1px solid var(--cds-border-subtle);
7006
+ background-color: var(--cds-background, #ffffff);
6828
7007
  }
6829
- .cds--contained-list--md .cds--contained-list-item__content,
6830
- .cds--contained-list--md .cds--contained-list-item--clickable .cds--contained-list-item__content {
6831
- min-height: 2.5rem;
6832
- padding: calc(0.75rem - 0.125rem) 1rem;
7008
+ .cds--contained-list .cds--search .cds--search-close::before {
7009
+ display: none;
6833
7010
  }
6834
- .cds--contained-list--on-page.cds--contained-list--lg .cds--contained-list__header {
6835
- height: 3rem;
7011
+ .cds--contained-list .cds--search .cds--search-close {
7012
+ border-right: 2px solid transparent;
7013
+ outline: none;
6836
7014
  }
6837
- .cds--contained-list--lg .cds--contained-list-item__content,
6838
- .cds--contained-list--lg .cds--contained-list-item--clickable .cds--contained-list-item__content {
6839
- min-height: 3rem;
6840
- padding: calc(1rem - 0.125rem) 1rem;
7015
+ .cds--contained-list .cds--search .cds--search-close:focus {
7016
+ outline: 2px solid var(--cds-focus, #0f62fe);
7017
+ outline-offset: -2px;
6841
7018
  }
6842
- .cds--contained-list--on-page.cds--contained-list--xl .cds--contained-list__header {
6843
- height: 4rem;
7019
+ @media screen and (prefers-contrast) {
7020
+ .cds--contained-list .cds--search .cds--search-close:focus {
7021
+ outline-style: dotted;
7022
+ }
6844
7023
  }
6845
- .cds--contained-list--xl .cds--contained-list-item__content,
6846
- .cds--contained-list--xl .cds--contained-list-item--clickable .cds--contained-list-item__content {
6847
- min-height: 4rem;
6848
- padding: calc(1.5rem - 0.125rem) 1rem;
7024
+ .cds--contained-list .cds--search .cds--search-input ~ .cds--search-close:hover {
7025
+ border-bottom: 1px solid transparent;
7026
+ }
7027
+ .cds--contained-list .cds--search .cds--search-input:focus ~ .cds--search-close:hover {
7028
+ border: 2px solid var(--cds-focus, #0f62fe);
7029
+ border-left: 0;
7030
+ outline: none;
6849
7031
  }
6850
7032
  .cds--contained-list--on-page + .cds--contained-list--on-page {
6851
7033
  margin-block-start: 1rem;
@@ -6855,6 +7037,7 @@ fieldset[disabled] .cds--form__helper-text {
6855
7037
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
6856
7038
  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
6857
7039
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
7040
+ height: var(--cds-layout-size-height-local);
6858
7041
  border-bottom: 1px solid var(--cds-border-subtle);
6859
7042
  background-color: var(--cds-background, #ffffff);
6860
7043
  color: var(--cds-text-primary, #161616);
@@ -6876,10 +7059,14 @@ fieldset[disabled] .cds--form__helper-text {
6876
7059
  }
6877
7060
  .cds--contained-list-item {
6878
7061
  position: relative;
7062
+ list-style: none;
6879
7063
  }
6880
7064
  .cds--contained-list-item:not(:first-of-type) {
6881
7065
  margin-top: -1px;
6882
7066
  }
7067
+ .cds--contained-list-item__content {
7068
+ box-sizing: border-box;
7069
+ }
6883
7070
  .cds--contained-list-item--clickable .cds--contained-list-item__content {
6884
7071
  box-sizing: border-box;
6885
7072
  padding: 0;
@@ -6910,10 +7097,15 @@ fieldset[disabled] .cds--form__helper-text {
6910
7097
  }
6911
7098
  .cds--contained-list-item__content,
6912
7099
  .cds--contained-list-item--clickable .cds--contained-list-item__content {
7100
+ --temp-1lh: (
7101
+ var(--cds-body-01-line-height, 1.42857) * 1em
7102
+ );
6913
7103
  font-size: var(--cds-body-01-font-size, 0.875rem);
6914
7104
  font-weight: var(--cds-body-01-font-weight, 400);
6915
7105
  line-height: var(--cds-body-01-line-height, 1.42857);
6916
7106
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
7107
+ min-height: var(--cds-layout-size-height-local);
7108
+ padding: calc((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2) var(--cds-layout-density-padding-inline-local);
6917
7109
  color: var(--cds-text-primary, #161616);
6918
7110
  }
6919
7111
  .cds--contained-list-item:not(:last-of-type)::before {
@@ -6926,8 +7118,8 @@ fieldset[disabled] .cds--form__helper-text {
6926
7118
  content: "";
6927
7119
  }
6928
7120
  .cds--contained-list--inset-rulers .cds--contained-list-item:not(:last-of-type)::before {
6929
- right: 1rem;
6930
- left: 1rem;
7121
+ right: var(--cds-layout-density-padding-inline-local);
7122
+ left: var(--cds-layout-density-padding-inline-local);
6931
7123
  }
6932
7124
  .cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):hover {
6933
7125
  background-color: var(--cds-layer-hover);
@@ -6984,17 +7176,13 @@ fieldset[disabled] .cds--form__helper-text {
6984
7176
  padding-top: 0.125rem;
6985
7177
  }
6986
7178
  .cds--content-switcher {
7179
+ --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-lg)));
7180
+ --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));
6987
7181
  display: flex;
6988
7182
  width: 100%;
6989
- height: 2.5rem;
7183
+ height: var(--cds-layout-size-height-local);
6990
7184
  justify-content: space-evenly;
6991
7185
  }
6992
- .cds--content-switcher--sm {
6993
- height: 2rem;
6994
- }
6995
- .cds--content-switcher--lg {
6996
- height: 3rem;
6997
- }
6998
7186
  .cds--content-switcher-btn {
6999
7187
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
7000
7188
  outline: 2px solid transparent;
@@ -7006,9 +7194,6 @@ fieldset[disabled] .cds--form__helper-text {
7006
7194
  position: relative;
7007
7195
  display: inline-flex;
7008
7196
  overflow: hidden;
7009
- width: 100%;
7010
- align-items: center;
7011
- padding: 0.5rem 1rem;
7012
7197
  border: none;
7013
7198
  border-top: 0.0625rem solid var(--cds-border-inverse, #161616);
7014
7199
  border-bottom: 0.0625rem solid var(--cds-border-inverse, #161616);
@@ -7085,19 +7270,32 @@ fieldset[disabled] .cds--form__helper-text {
7085
7270
  .cds--content-switcher-btn:disabled:first-child, .cds--content-switcher-btn:disabled:last-child {
7086
7271
  border-color: var(--cds-border-disabled, #c6c6c6);
7087
7272
  }
7088
- .cds--content-switcher-btn:first-child {
7273
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
7274
+ width: 100%;
7275
+ align-items: center;
7276
+ padding: 0.5rem var(--cds-layout-density-padding-inline-local);
7277
+ }
7278
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
7089
7279
  border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
7090
7280
  border-bottom-left-radius: 0.25rem;
7091
7281
  border-top-left-radius: 0.25rem;
7092
7282
  }
7093
- .cds--content-switcher-btn:last-child {
7283
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled {
7284
+ border-color: var(--cds-border-disabled, #c6c6c6);
7285
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7286
+ }
7287
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
7094
7288
  border-right: 0.0625rem solid var(--cds-border-inverse, #161616);
7095
7289
  border-bottom-right-radius: 0.25rem;
7096
7290
  border-top-right-radius: 0.25rem;
7097
7291
  }
7098
- .cds--content-switcher--selected,
7099
- .cds--content-switcher--selected:first-child,
7100
- .cds--content-switcher--selected:last-child {
7292
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled {
7293
+ border-color: var(--cds-border-disabled, #c6c6c6);
7294
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7295
+ }
7296
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected,
7297
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child,
7298
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child {
7101
7299
  border: 0;
7102
7300
  }
7103
7301
  .cds--content-switcher-btn::before {
@@ -7110,7 +7308,7 @@ fieldset[disabled] .cds--form__helper-text {
7110
7308
  background-color: var(--cds-border-subtle);
7111
7309
  content: "";
7112
7310
  }
7113
- .cds--content-switcher-btn:first-of-type::before {
7311
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before {
7114
7312
  display: none;
7115
7313
  }
7116
7314
  .cds--content-switcher-btn:focus::before,
@@ -7168,6 +7366,69 @@ fieldset[disabled] .cds--form__helper-text {
7168
7366
  outline: 1px solid Highlight;
7169
7367
  }
7170
7368
  }
7369
+ .cds--content-switcher--icon-only {
7370
+ justify-content: flex-start;
7371
+ }
7372
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
7373
+ border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
7374
+ border-bottom-left-radius: 0.25rem;
7375
+ border-top-left-radius: 0.25rem;
7376
+ }
7377
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled],
7378
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] {
7379
+ border-color: var(--cds-layer-selected-disabled, #8d8d8d);
7380
+ }
7381
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
7382
+ border-right: 0.0625rem solid var(--cds-border-inverse, #161616);
7383
+ border-bottom-right-radius: 0.25rem;
7384
+ border-top-right-radius: 0.25rem;
7385
+ }
7386
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn.cds--content-switcher--selected,
7387
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn.cds--content-switcher--selected {
7388
+ border-color: var(--cds-background, #ffffff);
7389
+ }
7390
+ .cds--content-switcher--lg .cds--content-switcher-btn {
7391
+ padding-right: 0.875rem;
7392
+ padding-left: 0.875rem;
7393
+ }
7394
+ .cds--content-switcher--lg .cds--content-switcher-btn svg {
7395
+ width: 20px;
7396
+ height: 20px;
7397
+ }
7398
+ .cds--content-switcher--icon-only .cds--content-switcher-btn svg {
7399
+ fill: var(--cds-icon-primary, #161616);
7400
+ }
7401
+ .cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg {
7402
+ z-index: 1;
7403
+ fill: var(--cds-icon-inverse, #ffffff);
7404
+ }
7405
+ .cds--content-switcher--icon-only.cds--content-switcher--sm .cds--btn--sm {
7406
+ height: 2rem;
7407
+ }
7408
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before {
7409
+ display: none;
7410
+ }
7411
+ .cds--content-switcher-btn:focus::before,
7412
+ .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
7413
+ .cds--content-switcher-btn:hover::before,
7414
+ .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
7415
+ .cds--content-switcher--selected::before,
7416
+ .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
7417
+ background-color: transparent;
7418
+ }
7419
+ .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] {
7420
+ border-color: var(--cds-border-inverse, #161616);
7421
+ }
7422
+ .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
7423
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
7424
+ }
7425
+ .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:not(.cds--content-switcher--selected):hover,
7426
+ .cds--content-switcher--icon-only .cds--content-switcher-popover--selected + .cds--content-switcher-popover--disabled .cds--content-switcher-btn[disabled]:hover::before {
7427
+ background-color: transparent;
7428
+ }
7429
+ .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:hover::before {
7430
+ background-color: var(--cds-border-subtle);
7431
+ }
7171
7432
  .cds--data-table-container {
7172
7433
  position: relative;
7173
7434
  padding-top: 0.125rem;
@@ -7255,6 +7516,32 @@ fieldset[disabled] .cds--form__helper-text {
7255
7516
  text-align: left;
7256
7517
  vertical-align: middle;
7257
7518
  }
7519
+ .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) {
7520
+ padding-top: 1rem;
7521
+ padding-bottom: 1rem;
7522
+ }
7523
+ .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-menu {
7524
+ padding-top: 0.5rem;
7525
+ }
7526
+ .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-checkbox:not(.cds--table-column-radio) {
7527
+ padding-top: 0.8125rem;
7528
+ }
7529
+ .cds--data-table.cds--data-table--top-aligned-body td {
7530
+ vertical-align: top;
7531
+ }
7532
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) {
7533
+ padding-top: 1rem;
7534
+ padding-bottom: 1rem;
7535
+ }
7536
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-menu {
7537
+ padding-top: 0.5rem;
7538
+ }
7539
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-checkbox {
7540
+ padding-top: 0.8125rem;
7541
+ }
7542
+ .cds--data-table.cds--data-table--top-aligned-header th {
7543
+ vertical-align: top;
7544
+ }
7258
7545
  .cds--data-table th[align=right],
7259
7546
  .cds--data-table td[align=right] {
7260
7547
  text-align: right;
@@ -7489,7 +7776,8 @@ tr.cds--data-table--selected:last-of-type td {
7489
7776
  width: 2rem;
7490
7777
  height: calc(100% + 1px);
7491
7778
  }
7492
- .cds--data-table.cds--data-table--xs .cds--table-column-checkbox {
7779
+ .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
7780
+ .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
7493
7781
  padding-top: 0;
7494
7782
  padding-bottom: 0;
7495
7783
  }
@@ -7507,11 +7795,13 @@ tr.cds--data-table--selected:last-of-type td {
7507
7795
  padding-bottom: 0.4375rem;
7508
7796
  }
7509
7797
  .cds--data-table--sm td,
7510
- .cds--data-table--sm tbody tr th {
7798
+ .cds--data-table--sm tbody tr th,
7799
+ .cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
7511
7800
  padding-top: 0.4375rem;
7512
7801
  padding-bottom: 0.375rem;
7513
7802
  }
7514
- .cds--data-table.cds--data-table--sm .cds--table-column-checkbox {
7803
+ .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
7804
+ .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
7515
7805
  padding-top: 0.1875rem;
7516
7806
  padding-bottom: 0.1875rem;
7517
7807
  }
@@ -7523,7 +7813,8 @@ tr.cds--data-table--selected:last-of-type td {
7523
7813
  .cds--data-table--md tbody tr th {
7524
7814
  height: 2.5rem;
7525
7815
  }
7526
- .cds--data-table--md .cds--table-header-label {
7816
+ .cds--data-table--md .cds--table-header-label,
7817
+ .cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
7527
7818
  padding-top: 0.4375rem;
7528
7819
  padding-bottom: 0.4375rem;
7529
7820
  }
@@ -7532,7 +7823,8 @@ tr.cds--data-table--selected:last-of-type td {
7532
7823
  padding-top: 0.4375rem;
7533
7824
  padding-bottom: 0.375rem;
7534
7825
  }
7535
- .cds--data-table.cds--data-table--md .cds--table-column-checkbox {
7826
+ .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
7827
+ .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
7536
7828
  padding-top: 0.1875rem;
7537
7829
  padding-bottom: 0.1875rem;
7538
7830
  }
@@ -7552,6 +7844,7 @@ tr.cds--data-table--selected:last-of-type td {
7552
7844
  .cds--data-table--xl td,
7553
7845
  .cds--data-table--xl tbody tr th {
7554
7846
  padding-top: 1rem;
7847
+ padding-bottom: 1rem;
7555
7848
  }
7556
7849
  .cds--data-table--xl th,
7557
7850
  .cds--data-table--xl td {
@@ -8054,7 +8347,7 @@ tr.cds--data-table--selected:last-of-type td {
8054
8347
  align-items: center;
8055
8348
  }
8056
8349
  .cds--action-list .cds--btn {
8057
- padding: calc(0.875rem - 3px) 16px;
8350
+ padding: calc(0.875rem - 3px) 1rem;
8058
8351
  color: var(--cds-text-on-color, #ffffff);
8059
8352
  white-space: nowrap;
8060
8353
  }
@@ -8364,6 +8657,22 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
8364
8657
  .cds--table-expand__button::-moz-focus-inner {
8365
8658
  border: 0;
8366
8659
  }
8660
+ .cds--data-table--top-aligned-body td .cds--table-expand__button,
8661
+ .cds--data-table--top-aligned-header th .cds--table-expand__button {
8662
+ height: 2rem;
8663
+ align-items: start;
8664
+ padding-top: 0.5rem;
8665
+ }
8666
+ .cds--data-table--top-aligned-body.cds--data-table--xs td .cds--table-expand__button,
8667
+ .cds--data-table--top-aligned-header.cds--data-table--xs th .cds--table-expand__button {
8668
+ height: 1.5rem;
8669
+ padding-top: 0.25rem;
8670
+ }
8671
+ .cds--data-table--top-aligned-body.cds--data-table--md td .cds--table-expand__button,
8672
+ .cds--data-table--top-aligned-header.cds--data-table--md th .cds--table-expand__button {
8673
+ padding-top: 0.5rem;
8674
+ margin-top: -0.25rem;
8675
+ }
8367
8676
  .cds--table-expand__button:focus {
8368
8677
  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe);
8369
8678
  outline: none;
@@ -8375,7 +8684,6 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
8375
8684
  }
8376
8685
  .cds--data-table--xl .cds--table-expand__button {
8377
8686
  width: 2rem;
8378
- padding: 0;
8379
8687
  }
8380
8688
  tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
8381
8689
  position: absolute;
@@ -8674,6 +8982,25 @@ th .cds--table-sort__flex {
8674
8982
  align-items: center;
8675
8983
  justify-content: space-between;
8676
8984
  }
8985
+ .cds--data-table--top-aligned-header th .cds--table-sort__flex {
8986
+ align-items: start;
8987
+ }
8988
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th.cds--table-sort__header {
8989
+ padding-top: 1rem;
8990
+ }
8991
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label,
8992
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label {
8993
+ padding-top: 0;
8994
+ padding-bottom: 0;
8995
+ }
8996
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header {
8997
+ padding-top: 0.4375rem;
8998
+ padding-bottom: 0.4375rem;
8999
+ }
9000
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header {
9001
+ padding-top: 0.125rem;
9002
+ padding-bottom: 0.125rem;
9003
+ }
8677
9004
  .cds--data-table--sort:not(.cds--data-table--xs):not(.cds--data-table--sm):not(.cds--data-table--md):not(.cds--data-table--xl) th .cds--table-sort__flex {
8678
9005
  /* IE11 workaround for align-items: center and min-height
8679
9006
  https://github.com/philipwalton/flexbugs/issues/231 */
@@ -9474,6 +9801,7 @@ th .cds--table-sort__flex {
9474
9801
  }
9475
9802
  }
9476
9803
  .cds--date-picker__input[readonly] {
9804
+ border-bottom-color: var(--cds-border-subtle);
9477
9805
  background: transparent;
9478
9806
  cursor: text;
9479
9807
  }
@@ -9914,6 +10242,7 @@ button.cds--dropdown-text:focus {
9914
10242
  }
9915
10243
  .cds--dropdown--readonly,
9916
10244
  .cds--dropdown--readonly:hover {
10245
+ border-bottom-color: var(--cds-border-subtle);
9917
10246
  background-color: transparent;
9918
10247
  }
9919
10248
  .cds--dropdown--readonly .cds--list-box__field,
@@ -10810,6 +11139,13 @@ button.cds--dropdown-text:focus {
10810
11139
  .cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container .cds--date-picker__icon {
10811
11140
  bottom: 0.5rem;
10812
11141
  }
11142
+ .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker > .cds--date-picker-container,
11143
+ .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker .cds--date-picker__input {
11144
+ border-bottom-color: var(--cds-border-subtle);
11145
+ }
11146
+ .cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input {
11147
+ border-left-color: var(--cds-border-subtle);
11148
+ }
10813
11149
  .cds--multi-select__wrapper.cds--list-box__wrapper--fluid--focus:not(.cds--multi-select--filterable__wrapper) .cds--list-box__field--wrapper--input-focused {
10814
11150
  outline: none;
10815
11151
  }
@@ -10848,6 +11184,9 @@ button.cds--dropdown-text:focus {
10848
11184
  .cds--number strong {
10849
11185
  font-weight: 600;
10850
11186
  }
11187
+ .cds--number .cds--number__input-wrapper--warning input[type=number] {
11188
+ padding-right: 8rem;
11189
+ }
10851
11190
  .cds--number input[type=number] {
10852
11191
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
10853
11192
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -10860,7 +11199,7 @@ button.cds--dropdown-text:focus {
10860
11199
  min-width: 9.375rem;
10861
11200
  height: 2.5rem;
10862
11201
  box-sizing: border-box;
10863
- padding-right: 8rem;
11202
+ padding-right: 6rem;
10864
11203
  padding-left: 1rem;
10865
11204
  border: 0;
10866
11205
  border-bottom: 0.0625rem solid var(--cds-border-strong);
@@ -10895,10 +11234,25 @@ button.cds--dropdown-text:focus {
10895
11234
  -webkit-appearance: none;
10896
11235
  appearance: none;
10897
11236
  }
11237
+ .cds--number input[type=number][data-invalid] {
11238
+ padding-right: 8rem;
11239
+ }
10898
11240
  .cds--number--lg.cds--number input[type=number] {
11241
+ padding-right: 7rem;
11242
+ }
11243
+ .cds--number--lg.cds--number input[type=number][data-invalid] {
11244
+ padding-right: 9rem;
11245
+ }
11246
+ .cds--number--lg.cds--number .cds--number__input-wrapper--warning input[type=number] {
10899
11247
  padding-right: 9rem;
10900
11248
  }
10901
11249
  .cds--number--sm.cds--number input[type=number] {
11250
+ padding-right: 5rem;
11251
+ }
11252
+ .cds--number--sm.cds--number input[type=number][data-invalid] {
11253
+ padding-right: 7rem;
11254
+ }
11255
+ .cds--number--sm.cds--number .cds--number__input-wrapper--warning input[type=number] {
10902
11256
  padding-right: 7rem;
10903
11257
  }
10904
11258
  .cds--number input[type=number]:disabled {
@@ -11025,12 +11379,11 @@ button.cds--dropdown-text:focus {
11025
11379
  order: 2;
11026
11380
  }
11027
11381
  .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
11028
- border-bottom-width: 0;
11382
+ border-bottom-color: transparent;
11029
11383
  }
11030
11384
  .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
11031
11385
  outline: 2px solid var(--cds-focus, #0f62fe);
11032
11386
  outline-offset: -2px;
11033
- border: 0;
11034
11387
  }
11035
11388
  @media screen and (prefers-contrast) {
11036
11389
  .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
@@ -11038,7 +11391,7 @@ button.cds--dropdown-text:focus {
11038
11391
  }
11039
11392
  }
11040
11393
  .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
11041
- border-bottom-width: 0;
11394
+ border-bottom-color: transparent;
11042
11395
  }
11043
11396
  .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
11044
11397
  outline: 2px solid var(--cds-support-error, #da1e28);
@@ -11176,6 +11529,7 @@ button.cds--dropdown-text:focus {
11176
11529
  right: 1rem;
11177
11530
  }
11178
11531
  .cds--number--readonly input[type=number] {
11532
+ border-bottom-color: var(--cds-border-subtle);
11179
11533
  background: transparent;
11180
11534
  }
11181
11535
  .cds--number--readonly .cds--number__control-btn {
@@ -11277,6 +11631,9 @@ button.cds--dropdown-text:focus {
11277
11631
  scrollbar-width: none;
11278
11632
  white-space: nowrap;
11279
11633
  }
11634
+ .cds--number-input--fluid .cds--number__input-wrapper {
11635
+ position: initial;
11636
+ }
11280
11637
  .cds--number-input--fluid input[type=number] {
11281
11638
  min-height: 4rem;
11282
11639
  padding: 2rem 5rem 0.8125rem 1rem;
@@ -12067,6 +12424,7 @@ optgroup.cds--select-optgroup:disabled,
12067
12424
  cursor: not-allowed;
12068
12425
  }
12069
12426
  .cds--select--readonly .cds--select-input {
12427
+ border-bottom-color: var(--cds-border-subtle);
12070
12428
  background-color: transparent;
12071
12429
  cursor: default;
12072
12430
  }
@@ -12178,7 +12536,7 @@ optgroup.cds--select-optgroup:disabled,
12178
12536
  border-bottom: 1px solid var(--cds-border-strong);
12179
12537
  }
12180
12538
  .cds--select--fluid .cds--select-input__wrapper {
12181
- flex-direction: column;
12539
+ display: block;
12182
12540
  }
12183
12541
  .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
12184
12542
  .cds--select--fluid .cds--select--warning .cds--select-input:not(:focus) {
@@ -12289,6 +12647,10 @@ optgroup.cds--select-optgroup:disabled,
12289
12647
  .cds--text-area--fluid .cds--text-area--warn {
12290
12648
  resize: none;
12291
12649
  }
12650
+ .cds--text-area--fluid .cds--text-area--invalid {
12651
+ padding: 0 0.875rem 0.8125rem;
12652
+ margin-top: 1.875rem;
12653
+ }
12292
12654
  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider,
12293
12655
  .cds--text-area--fluid .cds--text-area__wrapper--warn .cds--text-area__divider {
12294
12656
  display: block;
@@ -12325,20 +12687,12 @@ optgroup.cds--select-optgroup:disabled,
12325
12687
  top: 0.5rem;
12326
12688
  }
12327
12689
  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:not(:focus) {
12328
- outline: 2px solid var(--cds-support-error, #da1e28);
12329
- outline-offset: -2px;
12330
- outline-offset: 0;
12331
- }
12332
- @media screen and (prefers-contrast) {
12333
- .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:not(:focus) {
12334
- outline-style: dotted;
12335
- }
12690
+ border: 2px solid var(--cds-support-error, #da1e28);
12336
12691
  }
12337
12692
  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within,
12338
12693
  .cds--text-area--fluid .cds--text-area__wrapper:focus-within {
12339
12694
  outline: 2px solid var(--cds-focus, #0f62fe);
12340
12695
  outline-offset: -2px;
12341
- outline-offset: 0;
12342
12696
  }
12343
12697
  @media screen and (prefers-contrast) {
12344
12698
  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within,
@@ -12743,6 +13097,9 @@ optgroup.cds--select-optgroup:disabled,
12743
13097
  .cds--list--ordered--native *::after {
12744
13098
  box-sizing: inherit;
12745
13099
  }
13100
+ .cds--list--unordered:not(.cds--list--nested) {
13101
+ margin-left: 1rem;
13102
+ }
12746
13103
  .cds--list--expressive,
12747
13104
  .cds--list--expressive .cds--list--nested {
12748
13105
  font-size: var(--cds-body-02-font-size, 1rem);
@@ -12880,6 +13237,9 @@ optgroup.cds--select-optgroup:disabled,
12880
13237
  text-overflow: ellipsis;
12881
13238
  white-space: nowrap;
12882
13239
  }
13240
+ .cds--menu-item__shortcut {
13241
+ display: flex;
13242
+ }
12883
13243
  .cds--menu--with-icons > .cds--menu-item,
12884
13244
  .cds--menu--with-icons > .cds--menu-item-group > ul > .cds--menu-item,
12885
13245
  .cds--menu--with-icons > .cds--menu-item-radio-group > ul > .cds--menu-item {
@@ -12950,6 +13310,28 @@ optgroup.cds--select-optgroup:disabled,
12950
13310
  .cds--modal .cds--number__rule-divider {
12951
13311
  background-color: var(--cds-border-subtle-02, #e0e0e0);
12952
13312
  }
13313
+ .cds--modal .cds--text-input--fluid .cds--text-input,
13314
+ .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
13315
+ .cds--modal .cds--text-area--fluid .cds--text-area,
13316
+ .cds--modal .cds--search--fluid .cds--search-input,
13317
+ .cds--modal .cds--select--fluid .cds--select-input,
13318
+ .cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement,
13319
+ .cds--modal .cds--list-box__wrapper--fluid .cds--list-box,
13320
+ .cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
13321
+ .cds--modal .cds--number-input--fluid input[type=number],
13322
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn::before,
13323
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn::after,
13324
+ .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
13325
+ background-color: var(--cds-field-01, #f4f4f4);
13326
+ }
13327
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
13328
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
13329
+ background-color: var(--cds-field-hover);
13330
+ }
13331
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::before,
13332
+ .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::after {
13333
+ border-left: 2px solid var(--cds-focus, #0f62fe);
13334
+ }
12953
13335
  .cds--modal.is-visible .cds--modal-container {
12954
13336
  transform: translate3d(0, 0, 0);
12955
13337
  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
@@ -13018,6 +13400,10 @@ optgroup.cds--select-optgroup:disabled,
13018
13400
  outline-style: dotted;
13019
13401
  }
13020
13402
  }
13403
+ .cds--modal-content .cds--form--fluid {
13404
+ margin-right: -1rem;
13405
+ margin-left: -1rem;
13406
+ }
13021
13407
  .cds--modal-content > p,
13022
13408
  .cds--modal-content__regular-content {
13023
13409
  font-size: var(--cds-body-01-font-size, 0.875rem);
@@ -13050,6 +13436,7 @@ optgroup.cds--select-optgroup:disabled,
13050
13436
  font-weight: var(--cds-heading-03-font-weight, 400);
13051
13437
  line-height: var(--cds-heading-03-line-height, 1.4);
13052
13438
  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
13439
+ padding-right: calc(20% - 3rem);
13053
13440
  color: var(--cds-text-primary, #161616);
13054
13441
  }
13055
13442
  .cds--modal-container--xs .cds--modal-content__regular-content {
@@ -13162,7 +13549,8 @@ optgroup.cds--select-optgroup:disabled,
13162
13549
  max-width: none;
13163
13550
  height: 4rem;
13164
13551
  flex: 0 1 50%;
13165
- padding-top: 1rem;
13552
+ align-items: baseline;
13553
+ padding-top: 0.875rem;
13166
13554
  padding-bottom: 2rem;
13167
13555
  margin: 0;
13168
13556
  }
@@ -13300,6 +13688,7 @@ optgroup.cds--select-optgroup:disabled,
13300
13688
  }
13301
13689
  .cds--multi-select.cds--multi-select--readonly,
13302
13690
  .cds--multi-select.cds--multi-select--readonly:hover {
13691
+ border-bottom-color: var(--cds-border-subtle);
13303
13692
  background-color: transparent;
13304
13693
  }
13305
13694
  .cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon svg {
@@ -13502,7 +13891,8 @@ optgroup.cds--select-optgroup:disabled,
13502
13891
  .cds--inline-notification--low-contrast.cds--inline-notification--warning-alt::before {
13503
13892
  border-color: var(--cds-support-warning, #f1c21b);
13504
13893
  }
13505
- .cds--inline-notification--warning .cds--inline-notification__icon path[opacity="0"] {
13894
+ .cds--inline-notification--warning .cds--inline-notification__icon path[opacity="0"],
13895
+ .cds--inline-notification--warning-alt .cds--inline-notification__icon path:first-of-type {
13506
13896
  fill: #000000;
13507
13897
  opacity: 1;
13508
13898
  }
@@ -13781,7 +14171,8 @@ optgroup.cds--select-optgroup:disabled,
13781
14171
  .cds--toast-notification--low-contrast.cds--toast-notification--warning-alt .cds--actionable-notification__icon {
13782
14172
  fill: var(--cds-support-warning, #f1c21b);
13783
14173
  }
13784
- .cds--toast-notification--warning .cds--toast-notification__icon path[opacity="0"] {
14174
+ .cds--toast-notification--warning .cds--toast-notification__icon path[opacity="0"],
14175
+ .cds--toast-notification--warning-alt .cds--toast-notification__icon path:first-of-type {
13785
14176
  fill: #000000;
13786
14177
  opacity: 1;
13787
14178
  }
@@ -14074,7 +14465,8 @@ optgroup.cds--select-optgroup:disabled,
14074
14465
  .cds--actionable-notification--low-contrast.cds--actionable-notification--warning-alt::before {
14075
14466
  border-color: var(--cds-support-warning, #f1c21b);
14076
14467
  }
14077
- .cds--actionable-notification--warning .cds--toast-notification__icon path[opacity="0"] {
14468
+ .cds--actionable-notification--warning .cds--toast-notification__icon path[opacity="0"],
14469
+ .cds--actionable-notification--warning-alt .cds--toast-notification__icon path:first-of-type {
14078
14470
  fill: #000000;
14079
14471
  opacity: 1;
14080
14472
  }
@@ -14178,7 +14570,8 @@ optgroup.cds--select-optgroup:disabled,
14178
14570
  }
14179
14571
  /* Tertiary action button when not inline (toast) */
14180
14572
  .cds--actionable-notification__action-button.cds--btn--tertiary {
14181
- padding: 0 1rem;
14573
+ padding-right: 1rem;
14574
+ padding-left: 1rem;
14182
14575
  margin-bottom: 1rem;
14183
14576
  margin-left: calc(2rem + 1.25rem - 0.125rem);
14184
14577
  }
@@ -14376,6 +14769,9 @@ optgroup.cds--select-optgroup:disabled,
14376
14769
  .cds--overflow-menu__trigger:hover {
14377
14770
  background-color: var(--cds-layer-hover);
14378
14771
  }
14772
+ .cds--overflow-menu > :first-child {
14773
+ margin-block-start: 0;
14774
+ }
14379
14775
  .cds--overflow-menu--sm {
14380
14776
  width: 2rem;
14381
14777
  height: 2rem;
@@ -14837,6 +15233,10 @@ span.cds--pagination__text.cds--pagination__items-count {
14837
15233
  .cds--btn--ghost.cds--pagination__button *::after {
14838
15234
  box-sizing: inherit;
14839
15235
  }
15236
+ .cds--pagination__button > svg,
15237
+ .cds--btn--ghost.cds--pagination__button > svg {
15238
+ margin-block-start: 0;
15239
+ }
14840
15240
  .cds--pagination--sm .cds--pagination__button,
14841
15241
  .cds--pagination--sm .cds--btn--ghost.cds--pagination__button {
14842
15242
  width: 2rem;
@@ -15281,7 +15681,7 @@ span.cds--pagination__text.cds--pagination__items-count {
15281
15681
  color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
15282
15682
  pointer-events: auto;
15283
15683
  }
15284
- .cds--popover--open .cds--popover-content {
15684
+ .cds--popover--open > .cds--popover > .cds--popover-content {
15285
15685
  display: block;
15286
15686
  }
15287
15687
  .cds--popover-content::before {
@@ -15289,7 +15689,7 @@ span.cds--pagination__text.cds--pagination__items-count {
15289
15689
  display: none;
15290
15690
  content: "";
15291
15691
  }
15292
- .cds--popover--open .cds--popover-content::before {
15692
+ .cds--popover--open > .cds--popover > .cds--popover-content::before {
15293
15693
  display: block;
15294
15694
  }
15295
15695
  .cds--popover-caret {
@@ -15299,9 +15699,12 @@ span.cds--pagination__text.cds--pagination__items-count {
15299
15699
  background-color: var(--cds-popover-background-color, var(--cds-layer));
15300
15700
  will-change: transform;
15301
15701
  }
15302
- .cds--popover--open.cds--popover--caret .cds--popover-caret {
15702
+ .cds--popover--open > .cds--popover > .cds--popover-caret {
15303
15703
  display: block;
15304
15704
  }
15705
+ .cds--popover--tab-tip .cds--popover .cds--popover-caret {
15706
+ display: none;
15707
+ }
15305
15708
  .cds--popover--bottom .cds--popover-content {
15306
15709
  bottom: 0;
15307
15710
  left: 50%;
@@ -15501,6 +15904,9 @@ span.cds--pagination__text.cds--pagination__items-count {
15501
15904
  .cds--popover--tab-tip__button svg {
15502
15905
  fill: var(--cds-icon-primary, #161616);
15503
15906
  }
15907
+ .cds--progress-bar {
15908
+ --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));
15909
+ }
15504
15910
  .cds--progress-bar__label {
15505
15911
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
15506
15912
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -15509,8 +15915,8 @@ span.cds--pagination__text.cds--pagination__items-count {
15509
15915
  display: flex;
15510
15916
  min-width: 3rem;
15511
15917
  justify-content: space-between;
15512
- margin-bottom: 0.5rem;
15513
15918
  color: var(--cds-text-primary, #161616);
15919
+ margin-block-end: 0.5rem;
15514
15920
  }
15515
15921
  .cds--progress-bar__label-text {
15516
15922
  overflow: hidden;
@@ -15564,7 +15970,7 @@ span.cds--pagination__text.cds--pagination__items-count {
15564
15970
  }
15565
15971
  .cds--progress-bar__status-icon {
15566
15972
  flex-shrink: 0;
15567
- margin-left: 1rem;
15973
+ margin-inline-start: var(--cds-layout-density-padding-inline-local);
15568
15974
  }
15569
15975
  .cds--progress-bar--finished .cds--progress-bar__bar,
15570
15976
  .cds--progress-bar--finished .cds--progress-bar__status-icon {
@@ -15596,7 +16002,7 @@ span.cds--pagination__text.cds--pagination__items-count {
15596
16002
  .cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__label {
15597
16003
  flex-shrink: 1;
15598
16004
  justify-content: flex-start;
15599
- margin-right: 0;
16005
+ margin-inline-end: 0;
15600
16006
  }
15601
16007
  @keyframes progress-bar-indeterminate {
15602
16008
  0% {
@@ -15613,7 +16019,7 @@ span.cds--pagination__text.cds--pagination__items-count {
15613
16019
  .cds--progress-bar--inline .cds--progress-bar__label {
15614
16020
  flex-shrink: 0;
15615
16021
  margin-bottom: 0;
15616
- margin-inline-end: 1rem;
16022
+ margin-inline-end: var(--cds-layout-density-padding-inline-local);
15617
16023
  }
15618
16024
  .cds--progress-bar--inline .cds--progress-bar__track {
15619
16025
  flex-basis: 0;
@@ -15633,7 +16039,7 @@ span.cds--pagination__text.cds--pagination__items-count {
15633
16039
  }
15634
16040
  .cds--progress-bar--indented .cds--progress-bar__label,
15635
16041
  .cds--progress-bar--indented .cds--progress-bar__helper-text {
15636
- padding-inline: 1rem;
16042
+ padding-inline: var(--cds-layout-density-padding-inline-local);
15637
16043
  }
15638
16044
  .cds--tooltip {
15639
16045
  --cds-popover-offset: 12px;
@@ -16126,6 +16532,42 @@ span.cds--pagination__text.cds--pagination__items-count {
16126
16532
  -webkit-user-select: text;
16127
16533
  user-select: text;
16128
16534
  }
16535
+ .cds--radio-button-group--invalid .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
16536
+ border-color: var(--cds-support-error, #da1e28);
16537
+ }
16538
+ .cds--radio-button__validation-msg {
16539
+ display: none;
16540
+ align-items: flex-end;
16541
+ margin-top: 0.375rem;
16542
+ }
16543
+ .cds--radio-button__invalid-icon {
16544
+ margin: 0 0.0625rem 0 0.1875rem;
16545
+ fill: var(--cds-support-error, #da1e28);
16546
+ }
16547
+ .cds--radio-button__invalid-icon--warning {
16548
+ fill: var(--cds-support-warning, #f1c21b);
16549
+ }
16550
+ .cds--radio-button__invalid-icon--warning path:first-of-type {
16551
+ fill: #000000;
16552
+ }
16553
+ .cds--radio-button-group--invalid + .cds--radio-button__validation-msg,
16554
+ .cds--radio-button-group--warning + .cds--radio-button__validation-msg {
16555
+ display: flex;
16556
+ }
16557
+ .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement,
16558
+ .cds--radio-button-group--warning + .cds--radio-button__validation-msg .cds--form-requirement {
16559
+ display: block;
16560
+ overflow: visible;
16561
+ max-height: 100%;
16562
+ margin-top: 0;
16563
+ margin-left: 0.5rem;
16564
+ }
16565
+ .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement {
16566
+ color: var(--cds-text-error, #da1e28);
16567
+ }
16568
+ .cds--radio-button-group ~ .cds--form__helper-text {
16569
+ margin-top: 0.375rem;
16570
+ }
16129
16571
  .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
16130
16572
  outline: 2px solid var(--cds-focus, #0f62fe);
16131
16573
  outline-offset: 1.5px;
@@ -16281,6 +16723,7 @@ span.cds--pagination__text.cds--pagination__items-count {
16281
16723
  height: 1.5rem;
16282
16724
  }
16283
16725
  .cds--slider-container {
16726
+ position: relative;
16284
16727
  display: flex;
16285
16728
  align-items: center;
16286
16729
  -webkit-user-select: none;
@@ -16296,11 +16739,10 @@ span.cds--pagination__text.cds--pagination__items-count {
16296
16739
  cursor: pointer;
16297
16740
  }
16298
16741
  .cds--slider__range-label {
16299
- font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
16300
- font-size: var(--cds-code-02-font-size, 0.875rem);
16301
- font-weight: var(--cds-code-02-font-weight, 400);
16302
- line-height: var(--cds-code-02-line-height, 1.42857);
16303
- letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
16742
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
16743
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
16744
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
16745
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
16304
16746
  color: var(--cds-text-primary, #161616);
16305
16747
  white-space: nowrap;
16306
16748
  }
@@ -16367,7 +16809,6 @@ span.cds--pagination__text.cds--pagination__items-count {
16367
16809
  width: 4rem;
16368
16810
  height: 2.5rem;
16369
16811
  -moz-appearance: textfield;
16370
- text-align: center;
16371
16812
  }
16372
16813
  .cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button,
16373
16814
  .cds-slider-text-input::-webkit-outer-spin-button,
@@ -16377,12 +16818,37 @@ span.cds--pagination__text.cds--pagination__items-count {
16377
16818
  .cds--slider-text-input--hidden {
16378
16819
  display: none;
16379
16820
  }
16380
- .cds--slider-text-input.cds--text-input--invalid {
16381
- padding-right: 1rem;
16382
- }
16383
16821
  .cds--slider__thumb:focus ~ .cds--slider__filled-track {
16384
16822
  background-color: var(--cds-interactive, #0f62fe);
16385
16823
  }
16824
+ .cds--slider-text-input.cds--text-input--invalid,
16825
+ .cds--slider-text-input--warn {
16826
+ width: 6rem;
16827
+ padding-right: 3rem;
16828
+ }
16829
+ .cds--slider__invalid-icon {
16830
+ position: absolute;
16831
+ top: 50%;
16832
+ right: 1rem;
16833
+ fill: var(--cds-support-error, #da1e28);
16834
+ transform: translateY(-50%);
16835
+ }
16836
+ .cds--slider__validation-msg.cds--form-requirement {
16837
+ display: block;
16838
+ overflow: visible;
16839
+ max-height: 100%;
16840
+ margin-top: 0;
16841
+ }
16842
+ .cds--slider__validation-msg--invalid {
16843
+ color: var(--cds-text-error, #da1e28);
16844
+ }
16845
+ .cds--slider__invalid-icon.cds--slider__invalid-icon--warning {
16846
+ fill: var(--cds-support-warning, #f1c21b);
16847
+ }
16848
+ .cds--slider__invalid-icon--warning path:first-of-type {
16849
+ fill: #000000;
16850
+ opacity: 1;
16851
+ }
16386
16852
  .cds--label--disabled ~ .cds--slider-container > .cds--slider__range-label {
16387
16853
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16388
16854
  }
@@ -16597,28 +17063,40 @@ span.cds--pagination__text.cds--pagination__items-count {
16597
17063
  }
16598
17064
  .cds--structured-list-row {
16599
17065
  display: table-row;
16600
- border-bottom: 1px solid var(--cds-border-subtle);
17066
+ border-top: 1px solid var(--cds-border-subtle);
16601
17067
  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16602
17068
  }
17069
+ .cds--structured-list-tbody .cds--structured-list-row:last-child {
17070
+ border-bottom: 1px solid var(--cds-border-subtle);
17071
+ }
17072
+ .cds--structured-list-row--header-row {
17073
+ border: none;
17074
+ }
16603
17075
  .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
16604
- border-bottom: 1px solid var(--cds-background-hover, rgba(141, 141, 141, 0.12));
16605
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
17076
+ border-color: var(--cds-layer-hover);
17077
+ background-color: var(--cds-layer-hover);
16606
17078
  cursor: pointer;
16607
17079
  }
16608
- .cds--structured-list-row.cds--structured-list-row--selected {
16609
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
17080
+ .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) + .cds--structured-list-row {
17081
+ border-color: var(--cds-layer-hover);
17082
+ }
17083
+ .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected {
17084
+ border-color: var(--cds-layer-selected);
17085
+ background-color: var(--cds-layer-selected);
17086
+ }
17087
+ .cds--structured-list--selection .cds--structured-list-row--selected + .cds--structured-list-row {
17088
+ border-color: var(--cds-layer-selected);
17089
+ }
17090
+ .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected .cds--structured-list-td {
17091
+ color: var(--cds-text-primary, #161616);
16610
17092
  }
16611
17093
  .cds--structured-list-row.cds--structured-list-row--header-row {
16612
- border-bottom: 1px solid var(--cds-background-selected, rgba(141, 141, 141, 0.2));
16613
17094
  cursor: inherit;
16614
17095
  }
16615
17096
  .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td,
16616
- .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
17097
+ .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
16617
17098
  color: var(--cds-text-primary, #161616);
16618
17099
  }
16619
- .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td {
16620
- border-top: 1px solid var(--cds-border-subtle);
16621
- }
16622
17100
  .cds--structured-list-thead {
16623
17101
  display: table-header-group;
16624
17102
  vertical-align: middle;
@@ -16667,7 +17145,6 @@ span.cds--pagination__text.cds--pagination__items-count {
16667
17145
  display: table-cell;
16668
17146
  max-width: 36rem;
16669
17147
  color: var(--cds-text-secondary, #525252);
16670
- border-top: 1px solid var(--cds-border-subtle);
16671
17148
  transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16672
17149
  }
16673
17150
  .cds--structured-list-td html {
@@ -16689,11 +17166,14 @@ span.cds--pagination__text.cds--pagination__items-count {
16689
17166
  .cds--structured-list-content--nowrap {
16690
17167
  white-space: nowrap;
16691
17168
  }
17169
+ .cds--structured-list-input + .cds--structured-list-td {
17170
+ text-align: right;
17171
+ }
16692
17172
  .cds--structured-list-svg {
16693
17173
  display: inline-block;
16694
17174
  fill: transparent;
16695
17175
  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16696
- vertical-align: middle;
17176
+ vertical-align: top;
16697
17177
  }
16698
17178
  .cds--structured-list-input:checked + .cds--structured-list-row .cds--structured-list-svg,
16699
17179
  .cds--structured-list-input:checked + .cds--structured-list-td .cds--structured-list-svg {
@@ -16911,6 +17391,9 @@ span.cds--pagination__text.cds--pagination__items-count {
16911
17391
  }
16912
17392
  }
16913
17393
  }
17394
+ .cds--tabs .cds--tabs__nav-item-label-wrapper {
17395
+ display: flex;
17396
+ }
16914
17397
  .cds--tabs .cds--tabs__nav-item {
16915
17398
  display: flex;
16916
17399
  flex: 1 0 auto;
@@ -16947,6 +17430,50 @@ span.cds--pagination__text.cds--pagination__items-count {
16947
17430
  .cds--tabs .cds--tabs__nav-item .cds--tabs__nav-link {
16948
17431
  transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
16949
17432
  }
17433
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
17434
+ padding: 1rem;
17435
+ margin-top: -0.5rem;
17436
+ margin-right: -1rem;
17437
+ margin-left: -1rem;
17438
+ }
17439
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
17440
+ background-color: inherit;
17441
+ }
17442
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg {
17443
+ width: 24px;
17444
+ height: 24px;
17445
+ padding: 0.25rem;
17446
+ margin: -0.25rem;
17447
+ }
17448
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg:hover {
17449
+ background-color: var(--cds-layer-accent-hover);
17450
+ }
17451
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled).cds--tabs__nav-item--selected .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg:hover {
17452
+ background-color: var(--cds-layer-hover);
17453
+ }
17454
+ .cds--tabs .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
17455
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
17456
+ }
17457
+ .cds--tabs .cds--tabs__nav-item--icon {
17458
+ display: flex;
17459
+ align-items: center;
17460
+ padding-left: 0.5rem;
17461
+ }
17462
+ .cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
17463
+ padding: 0.25rem;
17464
+ margin: -0.25rem;
17465
+ line-height: 0;
17466
+ pointer-events: auto;
17467
+ }
17468
+ .cds--tabs .cds--tabs__nav-item--icon-left {
17469
+ display: flex;
17470
+ align-items: center;
17471
+ padding-right: 0.5rem;
17472
+ margin-top: -2px;
17473
+ }
17474
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
17475
+ padding-left: 1rem;
17476
+ }
16950
17477
  .cds--tabs .cds--tabs__nav-link {
16951
17478
  box-sizing: border-box;
16952
17479
  padding: 0;
@@ -17000,12 +17527,24 @@ span.cds--pagination__text.cds--pagination__items-count {
17000
17527
  height: 3rem;
17001
17528
  padding: 0.5rem 1rem;
17002
17529
  border-bottom: 0;
17530
+ }
17531
+ .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
17003
17532
  line-height: calc(3rem - (0.5rem * 2));
17004
17533
  }
17534
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item-secondary-label {
17535
+ font-size: var(--cds-label-01-font-size, 0.75rem);
17536
+ font-weight: var(--cds-label-01-font-weight, 400);
17537
+ line-height: var(--cds-label-01-line-height, 1.33333);
17538
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
17539
+ min-height: 1rem;
17540
+ }
17541
+ .cds--tabs.cds--tabs--contained.cds--tabs--tall .cds--tabs__nav-link {
17542
+ height: 4rem;
17543
+ }
17005
17544
  .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
17006
17545
  overflow-x: visible;
17007
17546
  }
17008
- .cds--tabs .cds--tabs__nav-item--icon, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
17547
+ .cds--tabs .cds--tabs__nav-item--icon-only, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only {
17009
17548
  display: flex;
17010
17549
  width: var(--cds-icon-tab-size, 2.5rem);
17011
17550
  height: var(--cds-icon-tab-size, 2.5rem);
@@ -17013,11 +17552,19 @@ span.cds--pagination__text.cds--pagination__items-count {
17013
17552
  justify-content: center;
17014
17553
  padding: 0;
17015
17554
  }
17555
+ .cds--tabs .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label {
17556
+ line-height: 0;
17557
+ }
17016
17558
  .cds--tabs.cds--tabs__icon--lg {
17017
17559
  --cds-icon-tab-size: 3rem;
17018
17560
  }
17019
- .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:hover {
17020
- background-color: var(--cds-layer-selected-hover);
17561
+ .cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):hover {
17562
+ border-bottom: 2px solid var(--cds-border-strong);
17563
+ color: var(--cds-text-primary, #161616);
17564
+ }
17565
+ .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):not(.cds--tabs__nav-item--hover-off):hover {
17566
+ background-color: var(--cds-layer-accent-hover);
17567
+ color: var(--cds-text-primary, #161616);
17021
17568
  }
17022
17569
  .cds--tabs .cds--tabs__nav-item--selected {
17023
17570
  border-bottom: 2px solid var(--cds-border-interactive, #0f62fe);
@@ -17039,9 +17586,11 @@ span.cds--pagination__text.cds--pagination__items-count {
17039
17586
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
17040
17587
  color: var(--cds-text-primary, #161616);
17041
17588
  }
17589
+ .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item--selected:hover {
17590
+ line-height: calc(3rem - (0.5rem * 2));
17591
+ }
17042
17592
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover {
17043
17593
  background-color: var(--cds-layer);
17044
- line-height: calc(3rem - (0.5rem * 2));
17045
17594
  }
17046
17595
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected .cds--tabs__nav-link:focus,
17047
17596
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected .cds--tabs__nav-link:active, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected:hover .cds--tabs__nav-link:focus,
@@ -17051,10 +17600,6 @@ span.cds--pagination__text.cds--pagination__items-count {
17051
17600
  .cds--tabs.cds--tabs--light.cds--tabs--contained .cds--tabs__nav-item--selected, .cds--tabs.cds--tabs--light.cds--tabs--contained .cds--tabs__nav-item--selected:hover {
17052
17601
  background-color: var(--cds-background, #ffffff);
17053
17602
  }
17054
- .cds--tabs .cds--tabs__nav-item:hover .cds--tabs__nav-link {
17055
- border-bottom: 2px solid var(--cds-border-strong);
17056
- color: var(--cds-text-primary, #161616);
17057
- }
17058
17603
  .cds--tabs .cds--tabs__nav-item--disabled {
17059
17604
  border-bottom: 2px solid var(--cds-border-disabled, #c6c6c6);
17060
17605
  background-color: transparent;
@@ -17260,6 +17805,7 @@ span.cds--pagination__text.cds--pagination__items-count {
17260
17805
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
17261
17806
  }
17262
17807
  .cds--text-area__wrapper--readonly .cds--text-area {
17808
+ border-bottom-color: var(--cds-border-subtle);
17263
17809
  background: transparent;
17264
17810
  }
17265
17811
  .cds--text-area.cds--text-area--light:disabled {
@@ -17401,6 +17947,22 @@ span.cds--pagination__text.cds--pagination__items-count {
17401
17947
  padding: 1rem;
17402
17948
  background-color: var(--cds-layer);
17403
17949
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
17950
+ cursor: not-allowed;
17951
+ }
17952
+ .cds--tile--clickable .cds--tile--icon,
17953
+ .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
17954
+ position: absolute;
17955
+ right: 1rem;
17956
+ bottom: 1rem;
17957
+ }
17958
+ .cds--tile--clickable .cds--tile--icon {
17959
+ fill: var(--cds-icon-interactive, #0f62fe);
17960
+ }
17961
+ .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
17962
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
17963
+ }
17964
+ .cds--tile--clickable.cds--link--disabled .cds--tile--icon {
17965
+ display: none;
17404
17966
  }
17405
17967
  .cds--tile--selectable {
17406
17968
  padding-right: 3rem;
@@ -17613,7 +18175,7 @@ span.cds--pagination__text.cds--pagination__items-count {
17613
18175
  background-color: var(--cds-layer-02, #ffffff);
17614
18176
  }
17615
18177
  .cds--tile--disabled.cds--tile--is-selected {
17616
- border-color: var(--cds-button-disabled, #c6c6c6);
18178
+ border-color: var(--cds-border-disabled, #c6c6c6);
17617
18179
  }
17618
18180
  .cds--tile--disabled .cds--tile__checkmark svg {
17619
18181
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
@@ -17636,9 +18198,19 @@ span.cds--pagination__text.cds--pagination__items-count {
17636
18198
  margin: 0 0.125rem;
17637
18199
  }
17638
18200
  .cds--time-picker__input {
18201
+ position: relative;
17639
18202
  display: flex;
17640
18203
  flex-direction: column;
17641
18204
  }
18205
+ .cds--time-picker__error__icon {
18206
+ position: absolute;
18207
+ top: 50%;
18208
+ right: 1rem;
18209
+ display: flex;
18210
+ height: 100%;
18211
+ place-items: center;
18212
+ transform: translateY(-50%);
18213
+ }
17642
18214
  .cds--time-picker .cds--select-input {
17643
18215
  width: auto;
17644
18216
  min-width: auto;
@@ -17664,6 +18236,9 @@ span.cds--pagination__text.cds--pagination__items-count {
17664
18236
  color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
17665
18237
  opacity: 1;
17666
18238
  }
18239
+ .cds--time-picker__input-field-error {
18240
+ width: 6.175rem;
18241
+ }
17667
18242
  .cds--time-picker--light .cds--select-input {
17668
18243
  background-color: var(--cds-field-02, #ffffff);
17669
18244
  }
@@ -17687,9 +18262,11 @@ span.cds--pagination__text.cds--pagination__items-count {
17687
18262
  max-height: 3rem;
17688
18263
  }
17689
18264
  .cds--time-picker--readonly .cds--time-picker__input-field {
18265
+ border-bottom-color: var(--cds-border-subtle);
17690
18266
  background-color: transparent;
17691
18267
  }
17692
18268
  .cds--time-picker--readonly .cds--select-input {
18269
+ border-bottom-color: var(--cds-border-subtle);
17693
18270
  background-color: transparent;
17694
18271
  cursor: default;
17695
18272
  }
@@ -17934,6 +18511,12 @@ span.cds--pagination__text.cds--pagination__items-count {
17934
18511
  .cds--tree-node:focus {
17935
18512
  outline: none;
17936
18513
  }
18514
+ .cds--tree-node:hover {
18515
+ cursor: pointer;
18516
+ }
18517
+ .cds--tree-node--with-icon .cds--tree-node {
18518
+ margin-left: 0.5rem;
18519
+ }
17937
18520
  .cds--tree-node:focus > .cds--tree-node__label {
17938
18521
  outline: 2px solid var(--cds-focus, #0f62fe);
17939
18522
  outline-offset: -2px;
@@ -17971,13 +18554,15 @@ span.cds--pagination__text.cds--pagination__items-count {
17971
18554
  min-height: 2rem;
17972
18555
  flex: 1;
17973
18556
  align-items: center;
17974
- padding-top: 0.4375rem;
17975
- padding-bottom: 0.4375rem;
17976
18557
  }
17977
18558
  .cds--tree-node__label:hover {
17978
18559
  background-color: var(--cds-layer-hover-01, #e8e8e8);
17979
18560
  color: var(--cds-text-primary, #161616);
17980
18561
  }
18562
+ .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label {
18563
+ padding-top: 0.4375rem;
18564
+ padding-bottom: 0.4375rem;
18565
+ }
17981
18566
  .cds--tree-node__label:hover .cds--tree-node__label__details {
17982
18567
  color: var(--cds-text-primary, #161616);
17983
18568
  }
@@ -17992,6 +18577,9 @@ span.cds--pagination__text.cds--pagination__items-count {
17992
18577
  .cds--tree-leaf-node.cds--tree-node--with-icon {
17993
18578
  padding-left: 2rem;
17994
18579
  }
18580
+ .cds--tree-leaf-node.cds--tree-node--with-icon .cds--tree-leaf-node {
18581
+ padding-left: 1.5rem;
18582
+ }
17995
18583
  .cds--tree-node__label__details {
17996
18584
  display: flex;
17997
18585
  align-items: center;
@@ -18001,11 +18589,15 @@ span.cds--pagination__text.cds--pagination__items-count {
18001
18589
  }
18002
18590
  .cds--tree-parent-node__toggle {
18003
18591
  display: flex;
18592
+ width: 1.5rem;
18593
+ height: 1.5rem;
18004
18594
  align-items: center;
18005
18595
  align-self: flex-start;
18006
- padding: 0.0625rem 0;
18596
+ padding-left: 0.25rem;
18007
18597
  border: 0;
18008
- margin-right: 0.5rem;
18598
+ margin-top: 0.25rem;
18599
+ margin-right: 0.25rem;
18600
+ margin-left: -0.25rem;
18009
18601
  }
18010
18602
  .cds--tree-parent-node__toggle:hover {
18011
18603
  cursor: pointer;
@@ -18027,8 +18619,12 @@ span.cds--pagination__text.cds--pagination__items-count {
18027
18619
  align-self: flex-start;
18028
18620
  margin-top: 0.0625rem;
18029
18621
  margin-right: 0.5rem;
18622
+ margin-left: 0.5rem;
18030
18623
  fill: var(--cds-icon-secondary, #525252);
18031
18624
  }
18625
+ .cds--tree-parent-node__toggle + .cds--tree-node__label__details .cds--tree-node__icon {
18626
+ margin-left: 0.25rem;
18627
+ }
18032
18628
  .cds--tree-node--selected > .cds--tree-node__label {
18033
18629
  background-color: var(--cds-layer-selected-01, #e0e0e0);
18034
18630
  color: var(--cds-text-primary, #161616);
@@ -18119,6 +18715,9 @@ span.cds--pagination__text.cds--pagination__items-count {
18119
18715
  min-width: 3rem;
18120
18716
  }
18121
18717
  }
18718
+ .cds--header__action > :first-child {
18719
+ margin-block-start: 0;
18720
+ }
18122
18721
  .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
18123
18722
  .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
18124
18723
  display: none;
@@ -18281,12 +18880,11 @@ a.cds--header__menu-item[aria-current=page],
18281
18880
  a.cds--header__menu-item[aria-current=page]::after,
18282
18881
  .cds--header__menu-item--current::after {
18283
18882
  position: absolute;
18284
- top: 0;
18285
- right: 0;
18286
18883
  bottom: -2px;
18287
- left: 0;
18288
- width: 100%;
18289
- border-bottom: 3px solid var(--cds-border-interactive, #0f62fe);
18884
+ left: -2px;
18885
+ width: calc(100% + 4px);
18886
+ height: 3px;
18887
+ background-color: var(--cds-border-interactive, #0f62fe);
18290
18888
  content: "";
18291
18889
  }
18292
18890
  a.cds--header__menu-item[aria-current=page]:focus::after,
@@ -18295,15 +18893,19 @@ a.cds--header__menu-item[aria-current=page]:focus::after,
18295
18893
  }
18296
18894
  .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]::after,
18297
18895
  .cds--header__submenu .cds--header__menu .cds--header__menu-item--current::after {
18298
- bottom: 0;
18896
+ top: -2px;
18299
18897
  left: -2px;
18300
- border-bottom: none;
18301
- border-left: 3px solid var(--cds-border-interactive, #0f62fe);
18898
+ width: 3px;
18899
+ height: calc(100% + 4px);
18900
+ background-color: var(--cds-border-interactive, #0f62fe);
18302
18901
  }
18303
18902
  .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]:focus::after,
18304
18903
  .cds--header__submenu .cds--header__menu .cds--header__menu-item--current:focus::after {
18305
- left: 0;
18306
- border-left: 3px solid var(--cds-border-interactive, #0f62fe);
18904
+ top: -2px;
18905
+ left: -2px;
18906
+ width: 5px;
18907
+ height: calc(100% + 4px);
18908
+ background-color: var(--cds-border-interactive, #0f62fe);
18307
18909
  }
18308
18910
  a.cds--header__menu-item[aria-current=page]:focus,
18309
18911
  a.cds--header__menu-item.cds--header__menu-item--current:focus {
@@ -18352,6 +18954,12 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
18352
18954
  background-color: var(--cds-layer-active);
18353
18955
  color: var(--cds-text-primary, #161616);
18354
18956
  }
18957
+ .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current {
18958
+ background-color: var(--cds-layer-selected);
18959
+ }
18960
+ .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current:hover {
18961
+ background-color: var(--cds-layer-selected-hover);
18962
+ }
18355
18963
  .cds--header__menu .cds--header__menu-item {
18356
18964
  height: 3rem;
18357
18965
  }
@@ -18441,7 +19049,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
18441
19049
  .cds--side-nav--hidden {
18442
19050
  width: 0;
18443
19051
  }
18444
- .cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
18445
19052
  .cds--side-nav--expanded {
18446
19053
  width: 16rem;
18447
19054
  }
@@ -18457,6 +19064,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
18457
19064
  }
18458
19065
  @media (max-width: 65.98rem) {
18459
19066
  .cds--side-nav__overlay-active {
19067
+ z-index: 6000;
18460
19068
  width: 100vw;
18461
19069
  height: 100vh;
18462
19070
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
@@ -18791,6 +19399,14 @@ a.cds--side-nav__link--current::before {
18791
19399
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
18792
19400
  color: var(--cds-text-primary, #161616);
18793
19401
  }
19402
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
19403
+ background-color: var(--cds-layer-selected-hover);
19404
+ }
19405
+ .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
19406
+ .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
19407
+ width: 3px;
19408
+ height: calc(100% + 4px);
19409
+ }
18794
19410
  .cds--side-nav .cds--header__menu a.cds--header__menu-item {
18795
19411
  height: inherit;
18796
19412
  }
@@ -18919,6 +19535,9 @@ a.cds--side-nav__link--current::before {
18919
19535
  min-width: 3rem;
18920
19536
  }
18921
19537
  }
19538
+ .cds--header__action > :first-child {
19539
+ margin-block-start: 0;
19540
+ }
18922
19541
  .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
18923
19542
  .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
18924
19543
  display: none;
@@ -19081,12 +19700,11 @@ a.cds--header__menu-item[aria-current=page],
19081
19700
  a.cds--header__menu-item[aria-current=page]::after,
19082
19701
  .cds--header__menu-item--current::after {
19083
19702
  position: absolute;
19084
- top: 0;
19085
- right: 0;
19086
19703
  bottom: -2px;
19087
- left: 0;
19088
- width: 100%;
19089
- border-bottom: 3px solid var(--cds-border-interactive, #0f62fe);
19704
+ left: -2px;
19705
+ width: calc(100% + 4px);
19706
+ height: 3px;
19707
+ background-color: var(--cds-border-interactive, #0f62fe);
19090
19708
  content: "";
19091
19709
  }
19092
19710
  a.cds--header__menu-item[aria-current=page]:focus::after,
@@ -19095,15 +19713,19 @@ a.cds--header__menu-item[aria-current=page]:focus::after,
19095
19713
  }
19096
19714
  .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]::after,
19097
19715
  .cds--header__submenu .cds--header__menu .cds--header__menu-item--current::after {
19098
- bottom: 0;
19716
+ top: -2px;
19099
19717
  left: -2px;
19100
- border-bottom: none;
19101
- border-left: 3px solid var(--cds-border-interactive, #0f62fe);
19718
+ width: 3px;
19719
+ height: calc(100% + 4px);
19720
+ background-color: var(--cds-border-interactive, #0f62fe);
19102
19721
  }
19103
19722
  .cds--header__submenu .cds--header__menu a.cds--header__menu-item[aria-current=page]:focus::after,
19104
19723
  .cds--header__submenu .cds--header__menu .cds--header__menu-item--current:focus::after {
19105
- left: 0;
19106
- border-left: 3px solid var(--cds-border-interactive, #0f62fe);
19724
+ top: -2px;
19725
+ left: -2px;
19726
+ width: 5px;
19727
+ height: calc(100% + 4px);
19728
+ background-color: var(--cds-border-interactive, #0f62fe);
19107
19729
  }
19108
19730
  a.cds--header__menu-item[aria-current=page]:focus,
19109
19731
  a.cds--header__menu-item.cds--header__menu-item--current:focus {
@@ -19152,6 +19774,12 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
19152
19774
  background-color: var(--cds-layer-active);
19153
19775
  color: var(--cds-text-primary, #161616);
19154
19776
  }
19777
+ .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current {
19778
+ background-color: var(--cds-layer-selected);
19779
+ }
19780
+ .cds--header__menu-title[aria-expanded=true] + .cds--header__menu .cds--header__menu-item.cds--header__menu-item--current:hover {
19781
+ background-color: var(--cds-layer-selected-hover);
19782
+ }
19155
19783
  .cds--header__menu .cds--header__menu-item {
19156
19784
  height: 3rem;
19157
19785
  }
@@ -19241,7 +19869,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
19241
19869
  .cds--side-nav--hidden {
19242
19870
  width: 0;
19243
19871
  }
19244
- .cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
19245
19872
  .cds--side-nav--expanded {
19246
19873
  width: 16rem;
19247
19874
  }
@@ -19257,6 +19884,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
19257
19884
  }
19258
19885
  @media (max-width: 65.98rem) {
19259
19886
  .cds--side-nav__overlay-active {
19887
+ z-index: 6000;
19260
19888
  width: 100vw;
19261
19889
  height: 100vh;
19262
19890
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
@@ -19591,6 +20219,14 @@ a.cds--side-nav__link--current::before {
19591
20219
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
19592
20220
  color: var(--cds-text-primary, #161616);
19593
20221
  }
20222
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
20223
+ background-color: var(--cds-layer-selected-hover);
20224
+ }
20225
+ .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
20226
+ .cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current::after {
20227
+ width: 3px;
20228
+ height: calc(100% + 4px);
20229
+ }
19594
20230
  .cds--side-nav .cds--header__menu a.cds--header__menu-item {
19595
20231
  height: inherit;
19596
20232
  }
@@ -21345,6 +21981,14 @@ html {
21345
21981
  --cds-fluid-spacing-02: 2vw;
21346
21982
  --cds-fluid-spacing-03: 5vw;
21347
21983
  --cds-fluid-spacing-04: 10vw;
21984
+ --cds-caption-01-font-size: 0.75rem;
21985
+ --cds-caption-01-font-weight: 400;
21986
+ --cds-caption-01-line-height: 1.33333;
21987
+ --cds-caption-01-letter-spacing: 0.32px;
21988
+ --cds-caption-02-font-size: 0.875rem;
21989
+ --cds-caption-02-font-weight: 400;
21990
+ --cds-caption-02-line-height: 1.28572;
21991
+ --cds-caption-02-letter-spacing: 0.32px;
21348
21992
  --cds-label-01-font-size: 0.75rem;
21349
21993
  --cds-label-01-font-weight: 400;
21350
21994
  --cds-label-01-line-height: 1.33333;
@@ -21639,7 +22283,7 @@ html {
21639
22283
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
21640
22284
  --cds-field: var(--cds-field-01, #f4f4f4);
21641
22285
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
21642
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
22286
+ --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
21643
22287
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
21644
22288
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
21645
22289
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);