@carbon/styles 1.93.1 → 1.94.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/css/styles.css CHANGED
@@ -3781,6 +3781,13 @@ em {
3781
3781
  font-family: inherit;
3782
3782
  font-size: 100%;
3783
3783
  vertical-align: baseline;
3784
+ }
3785
+ .cds--accordion__heading *,
3786
+ .cds--accordion__heading *::before,
3787
+ .cds--accordion__heading *::after {
3788
+ box-sizing: inherit;
3789
+ }
3790
+ .cds--accordion__heading {
3784
3791
  display: inline-block;
3785
3792
  padding: 0;
3786
3793
  border: 0;
@@ -3792,11 +3799,6 @@ em {
3792
3799
  text-align: start;
3793
3800
  inline-size: 100%;
3794
3801
  }
3795
- .cds--accordion__heading *,
3796
- .cds--accordion__heading *::before,
3797
- .cds--accordion__heading *::after {
3798
- box-sizing: inherit;
3799
- }
3800
3802
  .cds--accordion__heading::-moz-focus-inner {
3801
3803
  border: 0;
3802
3804
  }
@@ -4152,7 +4154,7 @@ li.cds--accordion__item--disabled:last-of-type {
4152
4154
  filter: var(--cds-popover-drop-shadow, drop-shadow(0 0.125rem 0.125rem rgba(0, 0, 0, 0.2)));
4153
4155
  }
4154
4156
 
4155
- .cds--popover--border .cds--popover > .cds--popover-content {
4157
+ .cds--popover--border > .cds--popover > .cds--popover-content {
4156
4158
  outline: 1px solid var(--cds-popover-border-color, var(--cds-border-subtle));
4157
4159
  outline-offset: -1px;
4158
4160
  }
@@ -4170,8 +4172,23 @@ li.cds--accordion__item--disabled:last-of-type {
4170
4172
 
4171
4173
  .cds--popover-content {
4172
4174
  --cds-layout-size-height-sm: 2rem;
4175
+ }
4176
+ .cds--popover-content.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--popover-content) {
4177
+ --cds-layout-size-height: var(--cds-layout-size-height-sm);
4178
+ }
4179
+ .cds--popover-content {
4173
4180
  --cds-layout-size-height-md: 2.5rem;
4181
+ }
4182
+ .cds--popover-content.cds--layout--size-md, .cds--layout--size-md :where(.cds--popover-content) {
4183
+ --cds-layout-size-height: var(--cds-layout-size-height-md);
4184
+ }
4185
+ .cds--popover-content {
4174
4186
  --cds-layout-size-height-lg: 3rem;
4187
+ }
4188
+ .cds--popover-content.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--popover-content) {
4189
+ --cds-layout-size-height: var(--cds-layout-size-height-lg);
4190
+ }
4191
+ .cds--popover-content {
4175
4192
  box-sizing: border-box;
4176
4193
  padding: 0;
4177
4194
  border: 0;
@@ -4179,6 +4196,13 @@ li.cds--accordion__item--disabled:last-of-type {
4179
4196
  font-family: inherit;
4180
4197
  font-size: 100%;
4181
4198
  vertical-align: baseline;
4199
+ }
4200
+ .cds--popover-content *,
4201
+ .cds--popover-content *::before,
4202
+ .cds--popover-content *::after {
4203
+ box-sizing: inherit;
4204
+ }
4205
+ .cds--popover-content {
4182
4206
  position: absolute;
4183
4207
  z-index: 6000;
4184
4208
  display: none;
@@ -4190,26 +4214,12 @@ li.cds--accordion__item--disabled:last-of-type {
4190
4214
  max-inline-size: 23rem;
4191
4215
  pointer-events: auto;
4192
4216
  }
4193
- .cds--popover-content.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--popover-content) {
4194
- --cds-layout-size-height: var(--cds-layout-size-height-sm);
4195
- }
4196
- .cds--popover-content.cds--layout--size-md, .cds--layout--size-md :where(.cds--popover-content) {
4197
- --cds-layout-size-height: var(--cds-layout-size-height-md);
4198
- }
4199
- .cds--popover-content.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--popover-content) {
4200
- --cds-layout-size-height: var(--cds-layout-size-height-lg);
4201
- }
4202
- .cds--popover-content *,
4203
- .cds--popover-content *::before,
4204
- .cds--popover-content *::after {
4205
- box-sizing: inherit;
4206
- }
4207
4217
 
4208
4218
  .cds--popover--open > .cds--popover > .cds--popover-content {
4209
4219
  display: block;
4210
4220
  }
4211
4221
 
4212
- .cds--popover--background-token__background .cds--popover-content {
4222
+ .cds--popover--background-token__background > .cds--popover > .cds--popover-content {
4213
4223
  background-color: var(--cds-background, #ffffff);
4214
4224
  }
4215
4225
 
@@ -4245,7 +4255,7 @@ li.cds--accordion__item--disabled:last-of-type {
4245
4255
  content: "";
4246
4256
  }
4247
4257
 
4248
- .cds--popover--background-token__background .cds--popover-caret::after {
4258
+ .cds--popover--background-token__background > .cds--popover > .cds--popover-caret::after {
4249
4259
  background-color: var(--cds-background, #ffffff);
4250
4260
  }
4251
4261
 
@@ -4849,6 +4859,13 @@ li.cds--accordion__item--disabled:last-of-type {
4849
4859
  font-family: inherit;
4850
4860
  font-size: 100%;
4851
4861
  vertical-align: baseline;
4862
+ }
4863
+ .cds--popover--tab-tip__button *,
4864
+ .cds--popover--tab-tip__button *::before,
4865
+ .cds--popover--tab-tip__button *::after {
4866
+ box-sizing: inherit;
4867
+ }
4868
+ .cds--popover--tab-tip__button {
4852
4869
  display: inline-block;
4853
4870
  padding: 0;
4854
4871
  border: 0;
@@ -4859,6 +4876,11 @@ li.cds--accordion__item--disabled:last-of-type {
4859
4876
  cursor: pointer;
4860
4877
  text-align: start;
4861
4878
  inline-size: 100%;
4879
+ }
4880
+ .cds--popover--tab-tip__button::-moz-focus-inner {
4881
+ border: 0;
4882
+ }
4883
+ .cds--popover--tab-tip__button {
4862
4884
  position: relative;
4863
4885
  display: inline-flex;
4864
4886
  align-items: center;
@@ -4866,14 +4888,6 @@ li.cds--accordion__item--disabled:last-of-type {
4866
4888
  block-size: 2rem;
4867
4889
  inline-size: 2rem;
4868
4890
  }
4869
- .cds--popover--tab-tip__button *,
4870
- .cds--popover--tab-tip__button *::before,
4871
- .cds--popover--tab-tip__button *::after {
4872
- box-sizing: inherit;
4873
- }
4874
- .cds--popover--tab-tip__button::-moz-focus-inner {
4875
- border: 0;
4876
- }
4877
4891
  .cds--popover--tab-tip__button:focus {
4878
4892
  outline: 2px solid var(--cds-focus, #0f62fe);
4879
4893
  outline-offset: -2px;
@@ -4942,6 +4956,13 @@ li.cds--accordion__item--disabled:last-of-type {
4942
4956
  font-family: inherit;
4943
4957
  font-size: 100%;
4944
4958
  vertical-align: baseline;
4959
+ }
4960
+ .cds--definition-term *,
4961
+ .cds--definition-term *::before,
4962
+ .cds--definition-term *::after {
4963
+ box-sizing: inherit;
4964
+ }
4965
+ .cds--definition-term {
4945
4966
  display: inline-block;
4946
4967
  padding: 0;
4947
4968
  border: 0;
@@ -4952,28 +4973,27 @@ li.cds--accordion__item--disabled:last-of-type {
4952
4973
  cursor: pointer;
4953
4974
  text-align: start;
4954
4975
  inline-size: 100%;
4955
- border-radius: 0;
4956
- border-block-end: 1px dotted var(--cds-border-strong);
4957
- color: var(--cds-text-primary, #161616);
4958
- }
4959
- .cds--definition-term *,
4960
- .cds--definition-term *::before,
4961
- .cds--definition-term *::after {
4962
- box-sizing: inherit;
4963
4976
  }
4964
4977
  .cds--definition-term::-moz-focus-inner {
4965
4978
  border: 0;
4966
4979
  }
4980
+ .cds--definition-term {
4981
+ border-radius: 0;
4982
+ border-block-end: 1px dotted var(--cds-border-strong);
4983
+ color: var(--cds-text-primary, #161616);
4984
+ }
4967
4985
 
4968
4986
  .cds--definition-term:focus {
4969
4987
  outline: 1px solid var(--cds-focus, #0f62fe);
4970
- border-block-end-color: var(--cds-border-interactive, #0f62fe);
4971
4988
  }
4972
4989
  @media screen and (prefers-contrast) {
4973
4990
  .cds--definition-term:focus {
4974
4991
  outline-style: dotted;
4975
4992
  }
4976
4993
  }
4994
+ .cds--definition-term:focus {
4995
+ border-block-end-color: var(--cds-border-interactive, #0f62fe);
4996
+ }
4977
4997
 
4978
4998
  .cds--definition-term:hover {
4979
4999
  border-block-end-color: var(--cds-border-interactive, #0f62fe);
@@ -5010,6 +5030,13 @@ li.cds--accordion__item--disabled:last-of-type {
5010
5030
  font-family: inherit;
5011
5031
  font-size: 100%;
5012
5032
  vertical-align: baseline;
5033
+ }
5034
+ .cds--btn *,
5035
+ .cds--btn *::before,
5036
+ .cds--btn *::after {
5037
+ box-sizing: inherit;
5038
+ }
5039
+ .cds--btn {
5013
5040
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
5014
5041
  font-weight: var(--cds-body-compact-01-font-weight, 400);
5015
5042
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -5033,11 +5060,6 @@ li.cds--accordion__item--disabled:last-of-type {
5033
5060
  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);
5034
5061
  vertical-align: top;
5035
5062
  }
5036
- .cds--btn *,
5037
- .cds--btn *::before,
5038
- .cds--btn *::after {
5039
- box-sizing: inherit;
5040
- }
5041
5063
  .cds--btn:disabled, .cds--btn:hover:disabled, .cds--btn:focus:disabled, .cds--btn.cds--btn--disabled, .cds--btn.cds--btn--disabled:hover, .cds--btn.cds--btn--disabled:focus {
5042
5064
  border-color: var(--cds-button-disabled, #c6c6c6);
5043
5065
  background: var(--cds-button-disabled, #c6c6c6);
@@ -5155,7 +5177,6 @@ li.cds--accordion__item--disabled:last-of-type {
5155
5177
  border-color: transparent;
5156
5178
  background-color: transparent;
5157
5179
  color: var(--cds-link-primary, #0f62fe);
5158
- padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
5159
5180
  }
5160
5181
  .cds--btn--ghost:hover {
5161
5182
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
@@ -5171,6 +5192,9 @@ li.cds--accordion__item--disabled:last-of-type {
5171
5192
  .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
5172
5193
  fill: currentColor;
5173
5194
  }
5195
+ .cds--btn--ghost {
5196
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
5197
+ }
5174
5198
  .cds--btn--ghost .cds--btn__icon {
5175
5199
  position: static;
5176
5200
  align-self: center;
@@ -5323,7 +5347,6 @@ li.cds--accordion__item--disabled:last-of-type {
5323
5347
  border-color: transparent;
5324
5348
  background-color: transparent;
5325
5349
  color: var(--cds-button-danger-secondary, #da1e28);
5326
- padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
5327
5350
  }
5328
5351
  .cds--btn--danger--ghost:hover {
5329
5352
  background-color: var(--cds-button-danger-hover, #b81921);
@@ -5339,6 +5362,9 @@ li.cds--accordion__item--disabled:last-of-type {
5339
5362
  .cds--btn--danger--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
5340
5363
  fill: currentColor;
5341
5364
  }
5365
+ .cds--btn--danger--ghost {
5366
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
5367
+ }
5342
5368
  .cds--btn--danger--ghost .cds--btn__icon {
5343
5369
  position: static;
5344
5370
  margin-inline-start: 0.5rem;
@@ -5381,7 +5407,6 @@ li.cds--accordion__item--disabled:last-of-type {
5381
5407
  background: var(--cds-skeleton-background, #e8e8e8);
5382
5408
  box-shadow: none;
5383
5409
  pointer-events: none;
5384
- inline-size: 9.375rem;
5385
5410
  }
5386
5411
  .cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
5387
5412
  border: none;
@@ -5412,6 +5437,9 @@ li.cds--accordion__item--disabled:last-of-type {
5412
5437
  forced-color-adjust: none;
5413
5438
  }
5414
5439
  }
5440
+ .cds--btn.cds--skeleton {
5441
+ inline-size: 9.375rem;
5442
+ }
5415
5443
 
5416
5444
  .cds--btn-set {
5417
5445
  display: flex;
@@ -5504,6 +5532,13 @@ li.cds--accordion__item--disabled:last-of-type {
5504
5532
  font-family: inherit;
5505
5533
  font-size: 100%;
5506
5534
  vertical-align: baseline;
5535
+ }
5536
+ .cds--toggletip-button *,
5537
+ .cds--toggletip-button *::before,
5538
+ .cds--toggletip-button *::after {
5539
+ box-sizing: inherit;
5540
+ }
5541
+ .cds--toggletip-button {
5507
5542
  display: inline-block;
5508
5543
  padding: 0;
5509
5544
  border: 0;
@@ -5514,17 +5549,14 @@ li.cds--accordion__item--disabled:last-of-type {
5514
5549
  cursor: pointer;
5515
5550
  text-align: start;
5516
5551
  inline-size: 100%;
5517
- display: flex;
5518
- align-items: center;
5519
- }
5520
- .cds--toggletip-button *,
5521
- .cds--toggletip-button *::before,
5522
- .cds--toggletip-button *::after {
5523
- box-sizing: inherit;
5524
5552
  }
5525
5553
  .cds--toggletip-button::-moz-focus-inner {
5526
5554
  border: 0;
5527
5555
  }
5556
+ .cds--toggletip-button {
5557
+ display: flex;
5558
+ align-items: center;
5559
+ }
5528
5560
 
5529
5561
  .cds--toggletip-button svg {
5530
5562
  fill: var(--cds-icon-secondary, #525252);
@@ -5692,7 +5724,6 @@ li.cds--accordion__item--disabled:last-of-type {
5692
5724
  .cds--ai-label__text,
5693
5725
  .cds--slug__text {
5694
5726
  position: relative;
5695
- z-index: 1;
5696
5727
  }
5697
5728
 
5698
5729
  .cds--ai-label .cds--ai-label__button--inline,
@@ -6489,6 +6520,17 @@ li.cds--accordion__item--disabled:last-of-type {
6489
6520
  font-family: inherit;
6490
6521
  font-size: 100%;
6491
6522
  vertical-align: baseline;
6523
+ }
6524
+ .cds--overflow-menu *,
6525
+ .cds--overflow-menu *::before,
6526
+ .cds--overflow-menu *::after,
6527
+ .cds--overflow-menu__trigger *,
6528
+ .cds--overflow-menu__trigger *::before,
6529
+ .cds--overflow-menu__trigger *::after {
6530
+ box-sizing: inherit;
6531
+ }
6532
+ .cds--overflow-menu,
6533
+ .cds--overflow-menu__trigger {
6492
6534
  display: inline-block;
6493
6535
  padding: 0;
6494
6536
  border: 0;
@@ -6499,6 +6541,13 @@ li.cds--accordion__item--disabled:last-of-type {
6499
6541
  cursor: pointer;
6500
6542
  text-align: start;
6501
6543
  inline-size: 100%;
6544
+ }
6545
+ .cds--overflow-menu::-moz-focus-inner,
6546
+ .cds--overflow-menu__trigger::-moz-focus-inner {
6547
+ border: 0;
6548
+ }
6549
+ .cds--overflow-menu,
6550
+ .cds--overflow-menu__trigger {
6502
6551
  box-sizing: border-box;
6503
6552
  padding: 0;
6504
6553
  border: 0;
@@ -6506,6 +6555,17 @@ li.cds--accordion__item--disabled:last-of-type {
6506
6555
  font-family: inherit;
6507
6556
  font-size: 100%;
6508
6557
  vertical-align: baseline;
6558
+ }
6559
+ .cds--overflow-menu *,
6560
+ .cds--overflow-menu *::before,
6561
+ .cds--overflow-menu *::after,
6562
+ .cds--overflow-menu__trigger *,
6563
+ .cds--overflow-menu__trigger *::before,
6564
+ .cds--overflow-menu__trigger *::after {
6565
+ box-sizing: inherit;
6566
+ }
6567
+ .cds--overflow-menu,
6568
+ .cds--overflow-menu__trigger {
6509
6569
  outline: 2px solid transparent;
6510
6570
  outline-offset: -2px;
6511
6571
  position: relative;
@@ -6518,26 +6578,6 @@ li.cds--accordion__item--disabled:last-of-type {
6518
6578
  min-block-size: 2.5rem;
6519
6579
  transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
6520
6580
  }
6521
- .cds--overflow-menu *,
6522
- .cds--overflow-menu *::before,
6523
- .cds--overflow-menu *::after,
6524
- .cds--overflow-menu__trigger *,
6525
- .cds--overflow-menu__trigger *::before,
6526
- .cds--overflow-menu__trigger *::after {
6527
- box-sizing: inherit;
6528
- }
6529
- .cds--overflow-menu::-moz-focus-inner,
6530
- .cds--overflow-menu__trigger::-moz-focus-inner {
6531
- border: 0;
6532
- }
6533
- .cds--overflow-menu *,
6534
- .cds--overflow-menu *::before,
6535
- .cds--overflow-menu *::after,
6536
- .cds--overflow-menu__trigger *,
6537
- .cds--overflow-menu__trigger *::before,
6538
- .cds--overflow-menu__trigger *::after {
6539
- box-sizing: inherit;
6540
- }
6541
6581
  .cds--overflow-menu:focus,
6542
6582
  .cds--overflow-menu__trigger:focus {
6543
6583
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -6618,6 +6658,13 @@ li.cds--accordion__item--disabled:last-of-type {
6618
6658
  font-family: inherit;
6619
6659
  font-size: 100%;
6620
6660
  vertical-align: baseline;
6661
+ }
6662
+ .cds--overflow-menu-options *,
6663
+ .cds--overflow-menu-options *::before,
6664
+ .cds--overflow-menu-options *::after {
6665
+ box-sizing: inherit;
6666
+ }
6667
+ .cds--overflow-menu-options {
6621
6668
  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
6622
6669
  position: absolute;
6623
6670
  z-index: 6000;
@@ -6630,11 +6677,6 @@ li.cds--accordion__item--disabled:last-of-type {
6630
6677
  inset-inline-start: 0;
6631
6678
  list-style: none;
6632
6679
  }
6633
- .cds--overflow-menu-options *,
6634
- .cds--overflow-menu-options *::before,
6635
- .cds--overflow-menu-options *::after {
6636
- box-sizing: inherit;
6637
- }
6638
6680
  .cds--overflow-menu-options::after {
6639
6681
  position: absolute;
6640
6682
  display: block;
@@ -6738,6 +6780,13 @@ li.cds--accordion__item--disabled:last-of-type {
6738
6780
  font-family: inherit;
6739
6781
  font-size: 100%;
6740
6782
  vertical-align: baseline;
6783
+ }
6784
+ .cds--overflow-menu-options__option *,
6785
+ .cds--overflow-menu-options__option *::before,
6786
+ .cds--overflow-menu-options__option *::after {
6787
+ box-sizing: inherit;
6788
+ }
6789
+ .cds--overflow-menu-options__option {
6741
6790
  display: flex;
6742
6791
  align-items: center;
6743
6792
  padding: 0;
@@ -6746,11 +6795,6 @@ li.cds--accordion__item--disabled:last-of-type {
6746
6795
  inline-size: 100%;
6747
6796
  transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
6748
6797
  }
6749
- .cds--overflow-menu-options__option *,
6750
- .cds--overflow-menu-options__option *::before,
6751
- .cds--overflow-menu-options__option *::after {
6752
- box-sizing: inherit;
6753
- }
6754
6798
 
6755
6799
  .cds--overflow-menu-options--xs .cds--overflow-menu-options__option {
6756
6800
  block-size: 1.5rem;
@@ -6898,17 +6942,19 @@ a.cds--overflow-menu-options__btn::before {
6898
6942
  font-family: inherit;
6899
6943
  font-size: 100%;
6900
6944
  vertical-align: baseline;
6901
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6902
- font-weight: var(--cds-body-compact-01-font-weight, 400);
6903
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
6904
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6905
- display: inline;
6906
6945
  }
6907
6946
  .cds--breadcrumb *,
6908
6947
  .cds--breadcrumb *::before,
6909
6948
  .cds--breadcrumb *::after {
6910
6949
  box-sizing: inherit;
6911
6950
  }
6951
+ .cds--breadcrumb {
6952
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6953
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
6954
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
6955
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6956
+ display: inline;
6957
+ }
6912
6958
  @media (min-width: 42rem) {
6913
6959
  .cds--breadcrumb {
6914
6960
  display: flex;
@@ -7088,8 +7134,6 @@ a.cds--overflow-menu-options__btn::before {
7088
7134
  background: var(--cds-skeleton-background, #e8e8e8);
7089
7135
  box-shadow: none;
7090
7136
  pointer-events: none;
7091
- block-size: 1rem;
7092
- inline-size: 6.25rem;
7093
7137
  }
7094
7138
  .cds--breadcrumb.cds--skeleton .cds--link:hover, .cds--breadcrumb.cds--skeleton .cds--link:focus, .cds--breadcrumb.cds--skeleton .cds--link:active {
7095
7139
  border: none;
@@ -7120,6 +7164,10 @@ a.cds--overflow-menu-options__btn::before {
7120
7164
  forced-color-adjust: none;
7121
7165
  }
7122
7166
  }
7167
+ .cds--breadcrumb.cds--skeleton .cds--link {
7168
+ block-size: 1rem;
7169
+ inline-size: 6.25rem;
7170
+ }
7123
7171
 
7124
7172
  .cds--link {
7125
7173
  box-sizing: border-box;
@@ -7129,6 +7177,13 @@ a.cds--overflow-menu-options__btn::before {
7129
7177
  font-family: inherit;
7130
7178
  font-size: 100%;
7131
7179
  vertical-align: baseline;
7180
+ }
7181
+ .cds--link *,
7182
+ .cds--link *::before,
7183
+ .cds--link *::after {
7184
+ box-sizing: inherit;
7185
+ }
7186
+ .cds--link {
7132
7187
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7133
7188
  font-weight: var(--cds-body-compact-01-font-weight, 400);
7134
7189
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -7139,36 +7194,35 @@ a.cds--overflow-menu-options__btn::before {
7139
7194
  text-decoration: none;
7140
7195
  transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
7141
7196
  }
7142
- .cds--link *,
7143
- .cds--link *::before,
7144
- .cds--link *::after {
7145
- box-sizing: inherit;
7146
- }
7147
7197
  .cds--link:hover {
7148
7198
  color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
7149
7199
  text-decoration: underline;
7150
7200
  }
7151
7201
  .cds--link:active:not(.cds--link--disabled), .cds--link:active:visited, .cds--link:active:visited:hover {
7152
7202
  outline: 1px solid var(--cds-focus, #0f62fe);
7153
- color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
7154
- outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
7155
- text-decoration: underline;
7156
7203
  }
7157
7204
  @media screen and (prefers-contrast) {
7158
7205
  .cds--link:active:not(.cds--link--disabled), .cds--link:active:visited, .cds--link:active:visited:hover {
7159
7206
  outline-style: dotted;
7160
7207
  }
7161
7208
  }
7162
- .cds--link:focus:not(.cds--link--disabled) {
7163
- outline: 1px solid var(--cds-focus, #0f62fe);
7209
+ .cds--link:active:not(.cds--link--disabled), .cds--link:active:visited, .cds--link:active:visited:hover {
7210
+ color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
7164
7211
  outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
7165
7212
  text-decoration: underline;
7166
7213
  }
7214
+ .cds--link:focus:not(.cds--link--disabled) {
7215
+ outline: 1px solid var(--cds-focus, #0f62fe);
7216
+ }
7167
7217
  @media screen and (prefers-contrast) {
7168
7218
  .cds--link:focus:not(.cds--link--disabled) {
7169
7219
  outline-style: dotted;
7170
7220
  }
7171
7221
  }
7222
+ .cds--link:focus:not(.cds--link--disabled) {
7223
+ outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
7224
+ text-decoration: underline;
7225
+ }
7172
7226
  .cds--link:visited {
7173
7227
  color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
7174
7228
  }
@@ -7185,14 +7239,6 @@ a.cds--overflow-menu-options__btn::before {
7185
7239
  font-family: inherit;
7186
7240
  font-size: 100%;
7187
7241
  vertical-align: baseline;
7188
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7189
- font-weight: var(--cds-body-compact-01-font-weight, 400);
7190
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
7191
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7192
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7193
- cursor: not-allowed;
7194
- font-weight: 400;
7195
- text-decoration: none;
7196
7242
  }
7197
7243
  .cds--link--disabled *,
7198
7244
  .cds--link--disabled *::before,
@@ -7202,6 +7248,17 @@ a.cds--overflow-menu-options__btn::before {
7202
7248
  .cds--link--disabled:hover *::after {
7203
7249
  box-sizing: inherit;
7204
7250
  }
7251
+ .cds--link--disabled,
7252
+ .cds--link--disabled:hover {
7253
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7254
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7255
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7256
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7257
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7258
+ cursor: not-allowed;
7259
+ font-weight: 400;
7260
+ text-decoration: none;
7261
+ }
7205
7262
 
7206
7263
  .cds--link.cds--link--visited:visited {
7207
7264
  color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
@@ -7345,18 +7402,6 @@ textarea:-webkit-autofill:focus {
7345
7402
  align-items: flex-start;
7346
7403
  }
7347
7404
 
7348
- .cds--label {
7349
- font-size: var(--cds-label-01-font-size, 0.75rem);
7350
- font-weight: var(--cds-label-01-font-weight, 400);
7351
- line-height: var(--cds-label-01-line-height, 1.33333);
7352
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
7353
- display: inline-block;
7354
- color: var(--cds-text-secondary, #525252);
7355
- font-weight: 400;
7356
- line-height: 1rem;
7357
- margin-block-end: 0.5rem;
7358
- vertical-align: baseline;
7359
- }
7360
7405
  .cds--label html {
7361
7406
  font-size: 100%;
7362
7407
  }
@@ -7373,6 +7418,18 @@ textarea:-webkit-autofill:focus {
7373
7418
  .cds--label strong {
7374
7419
  font-weight: 600;
7375
7420
  }
7421
+ .cds--label {
7422
+ font-size: var(--cds-label-01-font-size, 0.75rem);
7423
+ font-weight: var(--cds-label-01-font-weight, 400);
7424
+ line-height: var(--cds-label-01-line-height, 1.33333);
7425
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
7426
+ display: inline-block;
7427
+ color: var(--cds-text-secondary, #525252);
7428
+ font-weight: 400;
7429
+ line-height: 1rem;
7430
+ margin-block-end: 0.5rem;
7431
+ vertical-align: baseline;
7432
+ }
7376
7433
 
7377
7434
  .cds--label .cds--toggletip-label {
7378
7435
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -7399,6 +7456,13 @@ textarea:-webkit-autofill:focus {
7399
7456
  font-family: inherit;
7400
7457
  font-size: 100%;
7401
7458
  vertical-align: baseline;
7459
+ }
7460
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *,
7461
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
7462
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
7463
+ box-sizing: inherit;
7464
+ }
7465
+ .cds--label + .cds--tooltip .cds--tooltip__trigger {
7402
7466
  display: inline-block;
7403
7467
  padding: 0;
7404
7468
  border: 0;
@@ -7409,6 +7473,11 @@ textarea:-webkit-autofill:focus {
7409
7473
  cursor: pointer;
7410
7474
  text-align: start;
7411
7475
  inline-size: 100%;
7476
+ }
7477
+ .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
7478
+ border: 0;
7479
+ }
7480
+ .cds--label + .cds--tooltip .cds--tooltip__trigger {
7412
7481
  display: flex;
7413
7482
  align-items: center;
7414
7483
  justify-content: center;
@@ -7417,14 +7486,6 @@ textarea:-webkit-autofill:focus {
7417
7486
  line-height: var(--cds-label-01-line-height, 1.33333);
7418
7487
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
7419
7488
  }
7420
- .cds--label + .cds--tooltip .cds--tooltip__trigger *,
7421
- .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
7422
- .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
7423
- box-sizing: inherit;
7424
- }
7425
- .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
7426
- border: 0;
7427
- }
7428
7489
 
7429
7490
  .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
7430
7491
  outline: 1px solid var(--cds-focus, #0f62fe);
@@ -7450,8 +7511,6 @@ textarea:-webkit-autofill:focus {
7450
7511
  background: var(--cds-skeleton-background, #e8e8e8);
7451
7512
  box-shadow: none;
7452
7513
  pointer-events: none;
7453
- block-size: 0.875rem;
7454
- inline-size: 4.6875rem;
7455
7514
  }
7456
7515
  .cds--label.cds--skeleton:hover, .cds--label.cds--skeleton:focus, .cds--label.cds--skeleton:active {
7457
7516
  border: none;
@@ -7482,6 +7541,10 @@ textarea:-webkit-autofill:focus {
7482
7541
  forced-color-adjust: none;
7483
7542
  }
7484
7543
  }
7544
+ .cds--label.cds--skeleton {
7545
+ block-size: 0.875rem;
7546
+ inline-size: 4.6875rem;
7547
+ }
7485
7548
 
7486
7549
  input[type=number],
7487
7550
  input[type=text].cds--number {
@@ -7581,16 +7644,6 @@ input:not(output, [data-invalid]):-moz-ui-invalid {
7581
7644
  box-shadow: none;
7582
7645
  }
7583
7646
 
7584
- .cds--form-requirement {
7585
- font-size: var(--cds-label-01-font-size, 0.75rem);
7586
- font-weight: var(--cds-label-01-font-weight, 400);
7587
- line-height: var(--cds-label-01-line-height, 1.33333);
7588
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
7589
- display: none;
7590
- overflow: hidden;
7591
- margin: 0.25rem 0 0;
7592
- max-block-size: 0;
7593
- }
7594
7647
  .cds--form-requirement html {
7595
7648
  font-size: 100%;
7596
7649
  }
@@ -7607,6 +7660,16 @@ input:not(output, [data-invalid]):-moz-ui-invalid {
7607
7660
  .cds--form-requirement strong {
7608
7661
  font-weight: 600;
7609
7662
  }
7663
+ .cds--form-requirement {
7664
+ font-size: var(--cds-label-01-font-size, 0.75rem);
7665
+ font-weight: var(--cds-label-01-font-weight, 400);
7666
+ line-height: var(--cds-label-01-line-height, 1.33333);
7667
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
7668
+ display: none;
7669
+ overflow: hidden;
7670
+ margin: 0.25rem 0 0;
7671
+ max-block-size: 0;
7672
+ }
7610
7673
 
7611
7674
  .cds--select--inline .cds--form__helper-text {
7612
7675
  margin-block-start: 0;
@@ -7680,21 +7743,6 @@ fieldset[disabled] .cds--form__helper-text {
7680
7743
  inset-inline-start: 0.7rem;
7681
7744
  }
7682
7745
 
7683
- .cds--checkbox-label {
7684
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7685
- font-weight: var(--cds-body-compact-01-font-weight, 400);
7686
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
7687
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7688
- position: relative;
7689
- display: flex;
7690
- cursor: pointer;
7691
- min-block-size: 1.25rem;
7692
- padding-block-start: 0.0625rem;
7693
- padding-inline-start: 1.25rem;
7694
- -webkit-user-select: none;
7695
- -moz-user-select: none;
7696
- user-select: none;
7697
- }
7698
7746
  .cds--checkbox-label html {
7699
7747
  font-size: 100%;
7700
7748
  }
@@ -7711,6 +7759,21 @@ fieldset[disabled] .cds--form__helper-text {
7711
7759
  .cds--checkbox-label strong {
7712
7760
  font-weight: 600;
7713
7761
  }
7762
+ .cds--checkbox-label {
7763
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7764
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7765
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7766
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7767
+ position: relative;
7768
+ display: flex;
7769
+ cursor: pointer;
7770
+ min-block-size: 1.25rem;
7771
+ padding-block-start: 0.0625rem;
7772
+ padding-inline-start: 1.25rem;
7773
+ -webkit-user-select: none;
7774
+ -moz-user-select: none;
7775
+ user-select: none;
7776
+ }
7714
7777
 
7715
7778
  .cds--checkbox-label-text {
7716
7779
  padding-inline-start: 0.625rem;
@@ -7732,6 +7795,13 @@ fieldset[disabled] .cds--form__helper-text {
7732
7795
  position: absolute;
7733
7796
  border: 1px solid var(--cds-icon-primary, #161616);
7734
7797
  border-radius: 2px;
7798
+ }
7799
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7800
+ .cds--checkbox-label::before {
7801
+ border: 1px solid ButtonBorder;
7802
+ }
7803
+ }
7804
+ .cds--checkbox-label::before {
7735
7805
  background-color: transparent;
7736
7806
  block-size: 1rem;
7737
7807
  content: "";
@@ -7741,11 +7811,6 @@ fieldset[disabled] .cds--form__helper-text {
7741
7811
  margin-block: 0.0625rem 0.125rem;
7742
7812
  margin-inline: 0.1875rem 0;
7743
7813
  }
7744
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7745
- .cds--checkbox-label::before {
7746
- border: 1px solid ButtonBorder;
7747
- }
7748
- }
7749
7814
 
7750
7815
  .cds--checkbox-label::after {
7751
7816
  position: absolute;
@@ -7925,10 +7990,6 @@ fieldset[disabled] .cds--form__helper-text {
7925
7990
  background: var(--cds-skeleton-background, #e8e8e8);
7926
7991
  box-shadow: none;
7927
7992
  pointer-events: none;
7928
- block-size: 1rem;
7929
- inline-size: 6.25rem;
7930
- margin-block: 0.0625rem 0;
7931
- margin-inline: 0.375rem 0;
7932
7993
  }
7933
7994
  .cds--checkbox-label-text.cds--skeleton:hover, .cds--checkbox-label-text.cds--skeleton:focus, .cds--checkbox-label-text.cds--skeleton:active {
7934
7995
  border: none;
@@ -7959,6 +8020,12 @@ fieldset[disabled] .cds--form__helper-text {
7959
8020
  forced-color-adjust: none;
7960
8021
  }
7961
8022
  }
8023
+ .cds--checkbox-label-text.cds--skeleton {
8024
+ block-size: 1rem;
8025
+ inline-size: 6.25rem;
8026
+ margin-block: 0.0625rem 0;
8027
+ margin-inline: 0.375rem 0;
8028
+ }
7962
8029
 
7963
8030
  .cds--checkbox--inline {
7964
8031
  position: relative;
@@ -8028,16 +8095,6 @@ fieldset[disabled] .cds--form__helper-text {
8028
8095
  margin-block-start: 0;
8029
8096
  }
8030
8097
 
8031
- .cds--copy-btn {
8032
- position: relative;
8033
- display: flex;
8034
- align-items: center;
8035
- justify-content: center;
8036
- padding: 0;
8037
- border: none;
8038
- background-color: var(--cds-layer);
8039
- cursor: pointer;
8040
- }
8041
8098
  .cds--copy-btn html {
8042
8099
  font-size: 100%;
8043
8100
  }
@@ -8054,6 +8111,16 @@ fieldset[disabled] .cds--form__helper-text {
8054
8111
  .cds--copy-btn strong {
8055
8112
  font-weight: 600;
8056
8113
  }
8114
+ .cds--copy-btn {
8115
+ position: relative;
8116
+ display: flex;
8117
+ align-items: center;
8118
+ justify-content: center;
8119
+ padding: 0;
8120
+ border: none;
8121
+ background-color: var(--cds-layer);
8122
+ cursor: pointer;
8123
+ }
8057
8124
  .cds--copy-btn:hover {
8058
8125
  background-color: var(--cds-layer-hover);
8059
8126
  }
@@ -8088,11 +8155,6 @@ fieldset[disabled] .cds--form__helper-text {
8088
8155
  font-weight: var(--cds-body-compact-01-font-weight, 400);
8089
8156
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
8090
8157
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
8091
- display: none;
8092
- overflow: visible;
8093
- box-sizing: content-box;
8094
- margin: auto;
8095
- clip: auto;
8096
8158
  }
8097
8159
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
8098
8160
  .cds--copy-btn .cds--copy-btn__feedback {
@@ -8114,16 +8176,25 @@ fieldset[disabled] .cds--form__helper-text {
8114
8176
  border: 1px solid transparent;
8115
8177
  }
8116
8178
  }
8179
+ .cds--copy-btn .cds--copy-btn__feedback {
8180
+ display: none;
8181
+ overflow: visible;
8182
+ box-sizing: content-box;
8183
+ margin: auto;
8184
+ clip: auto;
8185
+ }
8117
8186
  .cds--copy-btn:focus {
8118
8187
  outline: 2px solid var(--cds-focus, #0f62fe);
8119
8188
  outline-offset: -2px;
8120
- outline-color: var(--cds-focus, #0f62fe);
8121
8189
  }
8122
8190
  @media screen and (prefers-contrast) {
8123
8191
  .cds--copy-btn:focus {
8124
8192
  outline-style: dotted;
8125
8193
  }
8126
8194
  }
8195
+ .cds--copy-btn:focus {
8196
+ outline-color: var(--cds-focus, #0f62fe);
8197
+ }
8127
8198
  .cds--copy-btn.cds--copy-btn--animating::before, .cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback {
8128
8199
  display: block;
8129
8200
  }
@@ -8189,16 +8260,6 @@ fieldset[disabled] .cds--form__helper-text {
8189
8260
  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
8190
8261
  }
8191
8262
 
8192
- .cds--snippet--inline {
8193
- position: relative;
8194
- display: inline;
8195
- padding: 0;
8196
- border: 1px solid transparent;
8197
- border-radius: 4px;
8198
- background-color: var(--cds-layer);
8199
- color: var(--cds-text-primary, #161616);
8200
- cursor: pointer;
8201
- }
8202
8263
  .cds--snippet--inline html {
8203
8264
  font-size: 100%;
8204
8265
  }
@@ -8215,6 +8276,16 @@ fieldset[disabled] .cds--form__helper-text {
8215
8276
  .cds--snippet--inline strong {
8216
8277
  font-weight: 600;
8217
8278
  }
8279
+ .cds--snippet--inline {
8280
+ position: relative;
8281
+ display: inline;
8282
+ padding: 0;
8283
+ border: 1px solid transparent;
8284
+ border-radius: 4px;
8285
+ background-color: var(--cds-layer);
8286
+ color: var(--cds-text-primary, #161616);
8287
+ cursor: pointer;
8288
+ }
8218
8289
  .cds--snippet--inline:hover {
8219
8290
  background-color: var(--cds-layer-hover);
8220
8291
  }
@@ -8254,11 +8325,6 @@ fieldset[disabled] .cds--form__helper-text {
8254
8325
  font-weight: var(--cds-body-compact-01-font-weight, 400);
8255
8326
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
8256
8327
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
8257
- display: none;
8258
- overflow: visible;
8259
- box-sizing: content-box;
8260
- margin: auto;
8261
- clip: auto;
8262
8328
  }
8263
8329
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
8264
8330
  .cds--snippet--inline .cds--copy-btn__feedback {
@@ -8280,6 +8346,13 @@ fieldset[disabled] .cds--form__helper-text {
8280
8346
  border: 1px solid transparent;
8281
8347
  }
8282
8348
  }
8349
+ .cds--snippet--inline .cds--copy-btn__feedback {
8350
+ display: none;
8351
+ overflow: visible;
8352
+ box-sizing: content-box;
8353
+ margin: auto;
8354
+ clip: auto;
8355
+ }
8283
8356
 
8284
8357
  .cds--snippet--inline.cds--copy-btn--animating::before,
8285
8358
  .cds--snippet--inline.cds--copy-btn--animating .cds--copy-btn__feedback {
@@ -8393,13 +8466,15 @@ fieldset[disabled] .cds--form__helper-text {
8393
8466
  .cds--snippet--multi .cds--snippet-container:focus {
8394
8467
  outline: 2px solid var(--cds-focus, #0f62fe);
8395
8468
  outline-offset: -2px;
8396
- outline-offset: 0;
8397
8469
  }
8398
8470
  @media screen and (prefers-contrast) {
8399
8471
  .cds--snippet--multi .cds--snippet-container:focus {
8400
8472
  outline-style: dotted;
8401
8473
  }
8402
8474
  }
8475
+ .cds--snippet--multi .cds--snippet-container:focus {
8476
+ outline-offset: 0;
8477
+ }
8403
8478
 
8404
8479
  .cds--snippet--multi.cds--snippet--expand .cds--snippet-container {
8405
8480
  padding-block-end: 1rem;
@@ -8440,17 +8515,6 @@ fieldset[disabled] .cds--form__helper-text {
8440
8515
  margin-block-start: 0;
8441
8516
  }
8442
8517
 
8443
- .cds--copy-btn {
8444
- display: flex;
8445
- overflow: visible;
8446
- align-items: center;
8447
- justify-content: center;
8448
- padding: 0;
8449
- border: none;
8450
- background-color: var(--cds-layer);
8451
- cursor: pointer;
8452
- outline: none;
8453
- }
8454
8518
  .cds--copy-btn html {
8455
8519
  font-size: 100%;
8456
8520
  }
@@ -8467,16 +8531,29 @@ fieldset[disabled] .cds--form__helper-text {
8467
8531
  .cds--copy-btn strong {
8468
8532
  font-weight: 600;
8469
8533
  }
8534
+ .cds--copy-btn {
8535
+ display: flex;
8536
+ overflow: visible;
8537
+ align-items: center;
8538
+ justify-content: center;
8539
+ padding: 0;
8540
+ border: none;
8541
+ background-color: var(--cds-layer);
8542
+ cursor: pointer;
8543
+ outline: none;
8544
+ }
8470
8545
  .cds--copy-btn:focus {
8471
8546
  outline: 2px solid var(--cds-focus, #0f62fe);
8472
8547
  outline-offset: -2px;
8473
- outline-color: var(--cds-focus, #0f62fe);
8474
8548
  }
8475
8549
  @media screen and (prefers-contrast) {
8476
8550
  .cds--copy-btn:focus {
8477
8551
  outline-style: dotted;
8478
8552
  }
8479
8553
  }
8554
+ .cds--copy-btn:focus {
8555
+ outline-color: var(--cds-focus, #0f62fe);
8556
+ }
8480
8557
 
8481
8558
  .cds--snippet .cds--popover-container {
8482
8559
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
@@ -8553,13 +8630,15 @@ fieldset[disabled] .cds--form__helper-text {
8553
8630
  .cds--snippet-btn--expand:focus {
8554
8631
  outline: 2px solid var(--cds-focus, #0f62fe);
8555
8632
  outline-offset: -2px;
8556
- border-color: transparent;
8557
8633
  }
8558
8634
  @media screen and (prefers-contrast) {
8559
8635
  .cds--snippet-btn--expand:focus {
8560
8636
  outline-style: dotted;
8561
8637
  }
8562
8638
  }
8639
+ .cds--snippet-btn--expand:focus {
8640
+ border-color: transparent;
8641
+ }
8563
8642
 
8564
8643
  .cds--snippet--expand .cds--snippet-btn--expand .cds--icon-chevron--down {
8565
8644
  transform: rotate(180deg);
@@ -8662,10 +8741,6 @@ fieldset[disabled] .cds--form__helper-text {
8662
8741
  background: var(--cds-skeleton-background, #e8e8e8);
8663
8742
  box-shadow: none;
8664
8743
  pointer-events: none;
8665
- display: block;
8666
- block-size: 1rem;
8667
- inline-size: 100%;
8668
- margin-block-start: 0.5rem;
8669
8744
  }
8670
8745
  .cds--snippet.cds--skeleton span:hover, .cds--snippet.cds--skeleton span:focus, .cds--snippet.cds--skeleton span:active {
8671
8746
  border: none;
@@ -8696,6 +8771,12 @@ fieldset[disabled] .cds--form__helper-text {
8696
8771
  forced-color-adjust: none;
8697
8772
  }
8698
8773
  }
8774
+ .cds--snippet.cds--skeleton span {
8775
+ display: block;
8776
+ block-size: 1rem;
8777
+ inline-size: 100%;
8778
+ margin-block-start: 0.5rem;
8779
+ }
8699
8780
  .cds--snippet.cds--skeleton span:first-child {
8700
8781
  margin: 0;
8701
8782
  }
@@ -8734,6 +8815,13 @@ fieldset[disabled] .cds--form__helper-text {
8734
8815
  font-family: inherit;
8735
8816
  font-size: 100%;
8736
8817
  vertical-align: baseline;
8818
+ }
8819
+ .cds--text-input *,
8820
+ .cds--text-input *::before,
8821
+ .cds--text-input *::after {
8822
+ box-sizing: inherit;
8823
+ }
8824
+ .cds--text-input {
8737
8825
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
8738
8826
  font-weight: var(--cds-body-compact-01-font-weight, 400);
8739
8827
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -8750,11 +8838,6 @@ fieldset[disabled] .cds--form__helper-text {
8750
8838
  inline-size: 100%;
8751
8839
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
8752
8840
  }
8753
- .cds--text-input *,
8754
- .cds--text-input *::before,
8755
- .cds--text-input *::after {
8756
- box-sizing: inherit;
8757
- }
8758
8841
  .cds--text-input:focus, .cds--text-input:active {
8759
8842
  outline: 2px solid var(--cds-focus, #0f62fe);
8760
8843
  outline-offset: -2px;
@@ -8822,7 +8905,6 @@ fieldset[disabled] .cds--form__helper-text {
8822
8905
  display: inline-flex;
8823
8906
  overflow: visible;
8824
8907
  align-items: center;
8825
- cursor: pointer;
8826
8908
  }
8827
8909
  .cds--text-input--password__visibility:focus {
8828
8910
  outline: 1px solid var(--cds-focus, #0f62fe);
@@ -8832,6 +8914,9 @@ fieldset[disabled] .cds--form__helper-text {
8832
8914
  outline-style: dotted;
8833
8915
  }
8834
8916
  }
8917
+ .cds--text-input--password__visibility {
8918
+ cursor: pointer;
8919
+ }
8835
8920
  .cds--text-input--password__visibility:focus {
8836
8921
  outline: 1px solid transparent;
8837
8922
  }
@@ -9085,19 +9170,19 @@ fieldset[disabled] .cds--form__helper-text {
9085
9170
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
9086
9171
  }
9087
9172
 
9088
- .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger {
9089
- cursor: default;
9090
- }
9091
9173
  .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger svg {
9092
9174
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
9093
9175
  }
9094
-
9095
- .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover {
9176
+ .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger {
9096
9177
  cursor: default;
9097
9178
  }
9179
+
9098
9180
  .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover svg {
9099
9181
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
9100
9182
  }
9183
+ .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover {
9184
+ cursor: default;
9185
+ }
9101
9186
 
9102
9187
  .cds--text-input__counter-alert {
9103
9188
  position: absolute;
@@ -9137,13 +9222,15 @@ fieldset[disabled] .cds--form__helper-text {
9137
9222
  .cds--text-input--invalid {
9138
9223
  outline: 2px solid var(--cds-support-error, #da1e28);
9139
9224
  outline-offset: -2px;
9140
- box-shadow: none;
9141
9225
  }
9142
9226
  @media screen and (prefers-contrast) {
9143
9227
  .cds--text-input--invalid {
9144
9228
  outline-style: dotted;
9145
9229
  }
9146
9230
  }
9231
+ .cds--text-input--invalid {
9232
+ box-shadow: none;
9233
+ }
9147
9234
  .cds--text-input--invalid .cds--text-input--password__visibility__toggle {
9148
9235
  inset-inline-end: 2.5rem;
9149
9236
  }
@@ -9384,40 +9471,37 @@ fieldset[disabled] .cds--form__helper-text {
9384
9471
 
9385
9472
  .cds--tag {
9386
9473
  --cds-layout-size-height-xs: 1.125rem;
9387
- --cds-layout-size-height-sm: 1.125rem;
9388
- --cds-layout-size-height-md: 1.5rem;
9389
- --cds-layout-size-height-lg: 2rem;
9390
- --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)));
9391
- font-size: var(--cds-label-01-font-size, 0.75rem);
9392
- font-weight: var(--cds-label-01-font-weight, 400);
9393
- line-height: var(--cds-label-01-line-height, 1.33333);
9394
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
9395
- background-color: var(--cds-tag-background-gray, #e0e0e0);
9396
- color: var(--cds-tag-color-gray, #161616);
9397
- display: inline-flex;
9398
- align-items: center;
9399
- justify-content: center;
9400
- border-radius: 1rem;
9401
- cursor: default;
9402
- max-inline-size: 13rem;
9403
- min-block-size: var(--cds-layout-size-height-local);
9404
- min-inline-size: 2rem;
9405
- padding-inline: 0.5rem;
9406
- vertical-align: middle;
9407
- word-break: break-word;
9408
9474
  }
9409
9475
  .cds--tag.cds--layout--size-xs, .cds--layout--size-xs :where(.cds--tag) {
9410
9476
  --cds-layout-size-height: var(--cds-layout-size-height-xs);
9411
9477
  }
9478
+ .cds--tag {
9479
+ --cds-layout-size-height-sm: 1.125rem;
9480
+ }
9412
9481
  .cds--tag.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--tag) {
9413
9482
  --cds-layout-size-height: var(--cds-layout-size-height-sm);
9414
9483
  }
9484
+ .cds--tag {
9485
+ --cds-layout-size-height-md: 1.5rem;
9486
+ }
9415
9487
  .cds--tag.cds--layout--size-md, .cds--layout--size-md :where(.cds--tag) {
9416
9488
  --cds-layout-size-height: var(--cds-layout-size-height-md);
9417
9489
  }
9490
+ .cds--tag {
9491
+ --cds-layout-size-height-lg: 2rem;
9492
+ }
9418
9493
  .cds--tag.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--tag) {
9419
9494
  --cds-layout-size-height: var(--cds-layout-size-height-lg);
9420
9495
  }
9496
+ .cds--tag {
9497
+ --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)));
9498
+ font-size: var(--cds-label-01-font-size, 0.75rem);
9499
+ font-weight: var(--cds-label-01-font-weight, 400);
9500
+ line-height: var(--cds-label-01-line-height, 1.33333);
9501
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
9502
+ background-color: var(--cds-tag-background-gray, #e0e0e0);
9503
+ color: var(--cds-tag-color-gray, #161616);
9504
+ }
9421
9505
  .cds--tag.cds--tag--operational {
9422
9506
  border: 1px solid var(--cds-tag-background-gray, #e0e0e0);
9423
9507
  }
@@ -9430,6 +9514,19 @@ fieldset[disabled] .cds--form__helper-text {
9430
9514
  .cds--tag .cds--definition-term .cds--tag__label {
9431
9515
  color: var(--cds-tag-color-gray, #161616);
9432
9516
  }
9517
+ .cds--tag {
9518
+ display: inline-flex;
9519
+ align-items: center;
9520
+ justify-content: center;
9521
+ border-radius: 1rem;
9522
+ cursor: default;
9523
+ max-inline-size: 13rem;
9524
+ min-block-size: var(--cds-layout-size-height-local);
9525
+ min-inline-size: 2rem;
9526
+ padding-inline: 0.5rem;
9527
+ vertical-align: middle;
9528
+ word-break: break-word;
9529
+ }
9433
9530
  .cds--tag.cds--tag--lg {
9434
9531
  padding-inline-start: 0.75rem;
9435
9532
  }
@@ -9703,8 +9800,6 @@ fieldset[disabled] .cds--form__helper-text {
9703
9800
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) {
9704
9801
  background-color: var(--cds-background, #ffffff);
9705
9802
  color: var(--cds-text-primary, #161616);
9706
- outline: 1px solid var(--cds-background-inverse, #393939);
9707
- outline-offset: -1px;
9708
9803
  }
9709
9804
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational {
9710
9805
  border: 1px solid var(--cds-background, #ffffff);
@@ -9718,14 +9813,16 @@ fieldset[disabled] .cds--form__helper-text {
9718
9813
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--definition-term .cds--tag__label {
9719
9814
  color: var(--cds-text-primary, #161616);
9720
9815
  }
9816
+ .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) {
9817
+ outline: 1px solid var(--cds-background-inverse, #393939);
9818
+ outline-offset: -1px;
9819
+ }
9721
9820
 
9722
9821
  .cds--tag--disabled:not(.cds--tag--operational),
9723
9822
  .cds--tag--filter.cds--tag--disabled,
9724
9823
  .cds--tag--interactive.cds--tag--disabled {
9725
9824
  background-color: var(--cds-layer);
9726
9825
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
9727
- box-shadow: none;
9728
- outline: none;
9729
9826
  }
9730
9827
  .cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational,
9731
9828
  .cds--tag--filter.cds--tag--disabled.cds--tag--operational,
@@ -9747,6 +9844,12 @@ fieldset[disabled] .cds--form__helper-text {
9747
9844
  .cds--tag--interactive.cds--tag--disabled .cds--definition-term .cds--tag__label {
9748
9845
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
9749
9846
  }
9847
+ .cds--tag--disabled:not(.cds--tag--operational),
9848
+ .cds--tag--filter.cds--tag--disabled,
9849
+ .cds--tag--interactive.cds--tag--disabled {
9850
+ box-shadow: none;
9851
+ outline: none;
9852
+ }
9750
9853
  .cds--tag--disabled:not(.cds--tag--operational):hover,
9751
9854
  .cds--tag--filter.cds--tag--disabled:hover,
9752
9855
  .cds--tag--interactive.cds--tag--disabled:hover {
@@ -9848,10 +9951,6 @@ fieldset[disabled] .cds--form__helper-text {
9848
9951
  background: var(--cds-skeleton-background, #e8e8e8);
9849
9952
  box-shadow: none;
9850
9953
  pointer-events: none;
9851
- background-color: var(--cds-skeleton-background, #e8e8e8);
9852
- color: var(--cds-text-primary, #161616);
9853
- overflow: hidden;
9854
- inline-size: 3.75rem;
9855
9954
  }
9856
9955
  .cds--tag.cds--skeleton:hover, .cds--tag.cds--skeleton:focus, .cds--tag.cds--skeleton:active {
9857
9956
  border: none;
@@ -9882,6 +9981,10 @@ fieldset[disabled] .cds--form__helper-text {
9882
9981
  forced-color-adjust: none;
9883
9982
  }
9884
9983
  }
9984
+ .cds--tag.cds--skeleton {
9985
+ background-color: var(--cds-skeleton-background, #e8e8e8);
9986
+ color: var(--cds-text-primary, #161616);
9987
+ }
9885
9988
  .cds--tag.cds--skeleton.cds--tag--operational {
9886
9989
  border: 1px solid var(--cds-skeleton-background, #e8e8e8);
9887
9990
  }
@@ -9894,6 +9997,10 @@ fieldset[disabled] .cds--form__helper-text {
9894
9997
  .cds--tag.cds--skeleton .cds--definition-term .cds--tag__label {
9895
9998
  color: var(--cds-text-primary, #161616);
9896
9999
  }
10000
+ .cds--tag.cds--skeleton {
10001
+ overflow: hidden;
10002
+ inline-size: 3.75rem;
10003
+ }
9897
10004
  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
9898
10005
  .cds--tag.cds--skeleton {
9899
10006
  transform: translateZ(0);
@@ -10008,18 +10115,6 @@ fieldset[disabled] .cds--form__helper-text {
10008
10115
  grid-column: 2;
10009
10116
  }
10010
10117
 
10011
- .cds--list-box {
10012
- position: relative;
10013
- border: none;
10014
- background-color: var(--cds-field);
10015
- block-size: 2.5rem;
10016
- border-block-end: 1px solid var(--cds-border-strong);
10017
- color: var(--cds-text-primary, #161616);
10018
- cursor: pointer;
10019
- inline-size: 100%;
10020
- max-block-size: 2.5rem;
10021
- transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10022
- }
10023
10118
  .cds--list-box html {
10024
10119
  font-size: 100%;
10025
10120
  }
@@ -10036,6 +10131,18 @@ fieldset[disabled] .cds--form__helper-text {
10036
10131
  .cds--list-box strong {
10037
10132
  font-weight: 600;
10038
10133
  }
10134
+ .cds--list-box {
10135
+ position: relative;
10136
+ border: none;
10137
+ background-color: var(--cds-field);
10138
+ block-size: 2.5rem;
10139
+ border-block-end: 1px solid var(--cds-border-strong);
10140
+ color: var(--cds-text-primary, #161616);
10141
+ cursor: pointer;
10142
+ inline-size: 100%;
10143
+ max-block-size: 2.5rem;
10144
+ transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10145
+ }
10039
10146
  .cds--list-box:hover {
10040
10147
  background-color: var(--cds-field-hover);
10041
10148
  }
@@ -10234,6 +10341,13 @@ fieldset[disabled] .cds--form__helper-text {
10234
10341
  font-family: inherit;
10235
10342
  font-size: 100%;
10236
10343
  vertical-align: baseline;
10344
+ }
10345
+ .cds--list-box__field *,
10346
+ .cds--list-box__field *::before,
10347
+ .cds--list-box__field *::after {
10348
+ box-sizing: inherit;
10349
+ }
10350
+ .cds--list-box__field {
10237
10351
  display: inline-block;
10238
10352
  padding: 0;
10239
10353
  border: 0;
@@ -10244,6 +10358,11 @@ fieldset[disabled] .cds--form__helper-text {
10244
10358
  cursor: pointer;
10245
10359
  text-align: start;
10246
10360
  inline-size: 100%;
10361
+ }
10362
+ .cds--list-box__field::-moz-focus-inner {
10363
+ border: 0;
10364
+ }
10365
+ .cds--list-box__field {
10247
10366
  position: relative;
10248
10367
  display: inline-flex;
10249
10368
  overflow: hidden;
@@ -10257,14 +10376,6 @@ fieldset[disabled] .cds--form__helper-text {
10257
10376
  vertical-align: top;
10258
10377
  white-space: nowrap;
10259
10378
  }
10260
- .cds--list-box__field *,
10261
- .cds--list-box__field *::before,
10262
- .cds--list-box__field *::after {
10263
- box-sizing: inherit;
10264
- }
10265
- .cds--list-box__field::-moz-focus-inner {
10266
- border: 0;
10267
- }
10268
10379
 
10269
10380
  .cds--list-box__field:focus {
10270
10381
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -10282,7 +10393,7 @@ fieldset[disabled] .cds--form__helper-text {
10282
10393
  }
10283
10394
 
10284
10395
  .cds--list-box__field .cds--text-input {
10285
- padding-inline-end: 5rem;
10396
+ padding-inline-end: 4.375rem;
10286
10397
  }
10287
10398
 
10288
10399
  .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input,
@@ -10331,6 +10442,13 @@ fieldset[disabled] .cds--form__helper-text {
10331
10442
  font-family: inherit;
10332
10443
  font-size: 100%;
10333
10444
  vertical-align: baseline;
10445
+ }
10446
+ .cds--list-box__menu-icon *,
10447
+ .cds--list-box__menu-icon *::before,
10448
+ .cds--list-box__menu-icon *::after {
10449
+ box-sizing: inherit;
10450
+ }
10451
+ .cds--list-box__menu-icon {
10334
10452
  display: inline-block;
10335
10453
  padding: 0;
10336
10454
  border: 0;
@@ -10340,6 +10458,11 @@ fieldset[disabled] .cds--form__helper-text {
10340
10458
  background: none;
10341
10459
  cursor: pointer;
10342
10460
  text-align: start;
10461
+ }
10462
+ .cds--list-box__menu-icon::-moz-focus-inner {
10463
+ border: 0;
10464
+ }
10465
+ .cds--list-box__menu-icon {
10343
10466
  position: absolute;
10344
10467
  display: flex;
10345
10468
  align-items: center;
@@ -10351,14 +10474,6 @@ fieldset[disabled] .cds--form__helper-text {
10351
10474
  outline: none;
10352
10475
  transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10353
10476
  }
10354
- .cds--list-box__menu-icon *,
10355
- .cds--list-box__menu-icon *::before,
10356
- .cds--list-box__menu-icon *::after {
10357
- box-sizing: inherit;
10358
- }
10359
- .cds--list-box__menu-icon::-moz-focus-inner {
10360
- border: 0;
10361
- }
10362
10477
 
10363
10478
  .cds--list-box__menu-icon > svg {
10364
10479
  fill: var(--cds-icon-primary, #161616);
@@ -10378,6 +10493,13 @@ fieldset[disabled] .cds--form__helper-text {
10378
10493
  font-family: inherit;
10379
10494
  font-size: 100%;
10380
10495
  vertical-align: baseline;
10496
+ }
10497
+ .cds--list-box__selection *,
10498
+ .cds--list-box__selection *::before,
10499
+ .cds--list-box__selection *::after {
10500
+ box-sizing: inherit;
10501
+ }
10502
+ .cds--list-box__selection {
10381
10503
  display: inline-block;
10382
10504
  padding: 0;
10383
10505
  border: 0;
@@ -10387,6 +10509,11 @@ fieldset[disabled] .cds--form__helper-text {
10387
10509
  background: none;
10388
10510
  cursor: pointer;
10389
10511
  text-align: start;
10512
+ }
10513
+ .cds--list-box__selection::-moz-focus-inner {
10514
+ border: 0;
10515
+ }
10516
+ .cds--list-box__selection {
10390
10517
  position: absolute;
10391
10518
  display: flex;
10392
10519
  align-items: center;
@@ -10403,14 +10530,6 @@ fieldset[disabled] .cds--form__helper-text {
10403
10530
  -moz-user-select: none;
10404
10531
  user-select: none;
10405
10532
  }
10406
- .cds--list-box__selection *,
10407
- .cds--list-box__selection *::before,
10408
- .cds--list-box__selection *::after {
10409
- box-sizing: inherit;
10410
- }
10411
- .cds--list-box__selection::-moz-focus-inner {
10412
- border: 0;
10413
- }
10414
10533
  .cds--list-box__selection:focus {
10415
10534
  outline: 2px solid var(--cds-focus, #0f62fe);
10416
10535
  outline-offset: -2px;
@@ -10627,6 +10746,13 @@ fieldset[disabled] .cds--form__helper-text {
10627
10746
  font-family: inherit;
10628
10747
  font-size: 100%;
10629
10748
  vertical-align: baseline;
10749
+ }
10750
+ .cds--list-box__menu-item__option *,
10751
+ .cds--list-box__menu-item__option *::before,
10752
+ .cds--list-box__menu-item__option *::after {
10753
+ box-sizing: inherit;
10754
+ }
10755
+ .cds--list-box__menu-item__option {
10630
10756
  outline: 2px solid transparent;
10631
10757
  outline-offset: -2px;
10632
10758
  display: block;
@@ -10646,23 +10772,20 @@ fieldset[disabled] .cds--form__helper-text {
10646
10772
  transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10647
10773
  white-space: nowrap;
10648
10774
  }
10649
- .cds--list-box__menu-item__option *,
10650
- .cds--list-box__menu-item__option *::before,
10651
- .cds--list-box__menu-item__option *::after {
10652
- box-sizing: inherit;
10653
- }
10654
10775
  .cds--list-box__menu-item__option:focus {
10655
10776
  outline: 2px solid var(--cds-focus, #0f62fe);
10656
10777
  outline-offset: -2px;
10657
- padding: 0.6875rem 1rem;
10658
- border-color: transparent;
10659
- margin: 0;
10660
10778
  }
10661
10779
  @media screen and (prefers-contrast) {
10662
10780
  .cds--list-box__menu-item__option:focus {
10663
10781
  outline-style: dotted;
10664
10782
  }
10665
10783
  }
10784
+ .cds--list-box__menu-item__option:focus {
10785
+ padding: 0.6875rem 1rem;
10786
+ border-color: transparent;
10787
+ margin: 0;
10788
+ }
10666
10789
  .cds--list-box__menu-item__option:hover {
10667
10790
  border-color: transparent;
10668
10791
  color: var(--cds-text-primary, #161616);
@@ -10731,13 +10854,15 @@ fieldset[disabled] .cds--form__helper-text {
10731
10854
  .cds--list-box__menu-item--highlighted {
10732
10855
  outline: 2px solid var(--cds-focus, #0f62fe);
10733
10856
  outline-offset: -2px;
10734
- color: var(--cds-text-primary, #161616);
10735
10857
  }
10736
10858
  @media screen and (prefers-contrast) {
10737
10859
  .cds--list-box__menu-item--highlighted {
10738
10860
  outline-style: dotted;
10739
10861
  }
10740
10862
  }
10863
+ .cds--list-box__menu-item--highlighted {
10864
+ color: var(--cds-text-primary, #161616);
10865
+ }
10741
10866
 
10742
10867
  .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,
10743
10868
  .cds--list-box__menu-item--highlighted + .cds--list-box__menu-item .cds--list-box__menu-item__option {
@@ -10832,12 +10957,12 @@ fieldset[disabled] .cds--form__helper-text {
10832
10957
  transform: translateY(-50%);
10833
10958
  }
10834
10959
 
10960
+ .cds--list-box__wrapper--decorator:has(.cds--list-box__invalid-icon) .cds--list-box__inner-wrapper--decorator > *::before,
10961
+ .cds--list-box__wrapper--slug:has(.cds--list-box__invalid-icon) .cds--ai-label::before,
10962
+ .cds--list-box__wrapper--slug:has(.cds--list-box__invalid-icon) .cds--slug::before,
10835
10963
  .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *::after,
10836
- .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *::before,
10837
10964
  .cds--list-box__wrapper--slug .cds--ai-label::after,
10838
- .cds--list-box__wrapper--slug .cds--ai-label::before,
10839
- .cds--list-box__wrapper--slug .cds--slug::after,
10840
- .cds--list-box__wrapper--slug .cds--slug::before {
10965
+ .cds--list-box__wrapper--slug .cds--slug::after {
10841
10966
  position: absolute;
10842
10967
  background-color: var(--cds-border-subtle-01, #c6c6c6);
10843
10968
  block-size: 1rem;
@@ -10852,14 +10977,23 @@ fieldset[disabled] .cds--form__helper-text {
10852
10977
  inset-inline-start: -0.5625rem;
10853
10978
  }
10854
10979
 
10980
+ .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *::before,
10981
+ .cds--list-box__wrapper--slug .cds--ai-label::before,
10982
+ .cds--list-box__wrapper--slug .cds--slug::before,
10983
+ .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator .cds--ai-label--revert::before,
10984
+ .cds--list-box__wrapper--slug .cds--ai-label--revert::before,
10985
+ .cds--list-box__wrapper--slug .cds--slug--revert::before,
10855
10986
  .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *::after,
10856
10987
  .cds--list-box__wrapper--slug .cds--ai-label::after,
10857
10988
  .cds--list-box__wrapper--slug .cds--slug::after {
10858
10989
  display: block;
10859
- inset-block-start: 0;
10990
+ inset-block-start: 0.0625rem;
10860
10991
  inset-inline-end: -0.5625rem;
10861
10992
  }
10862
10993
 
10994
+ .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator .cds--ai-label--revert::before,
10995
+ .cds--list-box__wrapper--slug .cds--ai-label--revert::before,
10996
+ .cds--list-box__wrapper--slug .cds--slug--revert::before,
10863
10997
  .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator .cds--ai-label--revert::after,
10864
10998
  .cds--list-box__wrapper--slug .cds--ai-label--revert::after,
10865
10999
  .cds--list-box__wrapper--slug .cds--slug--revert::after {
@@ -10888,7 +11022,7 @@ fieldset[disabled] .cds--form__helper-text {
10888
11022
 
10889
11023
  .cds--list-box__wrapper--decorator .cds--text-input:not(.cds--text-input--empty),
10890
11024
  .cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
10891
- padding-inline-end: 6rem;
11025
+ padding-inline-end: 6.5625rem;
10892
11026
  }
10893
11027
 
10894
11028
  .cds--list-box__wrapper--decorator .cds--list-box--invalid[data-invalid] .cds--text-input--empty,
@@ -10906,7 +11040,7 @@ fieldset[disabled] .cds--form__helper-text {
10906
11040
  .cds--list-box__wrapper--decorator .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty),
10907
11041
  .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty),
10908
11042
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
10909
- padding-inline-end: 8.8125rem;
11043
+ padding-inline-end: 8.5625rem;
10910
11044
  }
10911
11045
 
10912
11046
  .cds--list-box__wrapper--decorator .cds--list-box--invalid[data-invalid] .cds--text-input--empty + .cds--list-box__invalid-icon,
@@ -10915,7 +11049,7 @@ fieldset[disabled] .cds--form__helper-text {
10915
11049
  .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty + .cds--list-box__invalid-icon,
10916
11050
  .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__invalid-icon,
10917
11051
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__invalid-icon.cds--list-box__invalid-icon--warning {
10918
- inset-inline-end: 5.1875rem;
11052
+ inset-inline-end: 5.0625rem;
10919
11053
  }
10920
11054
 
10921
11055
  .cds--list-box__wrapper--decorator .cds--list-box--invalid[data-invalid] > *::before,
@@ -10938,10 +11072,19 @@ fieldset[disabled] .cds--form__helper-text {
10938
11072
  inset-inline-end: calc(4rem + 18px);
10939
11073
  }
10940
11074
 
11075
+ .cds--list-box__wrapper--decorator .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--list-box__inner-wrapper--decorator > * {
11076
+ inset-inline-end: calc(4rem + 18px);
11077
+ }
11078
+
10941
11079
  .cds--list-box__wrapper--decorator .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
10942
11080
  .cds--list-box__wrapper--decorator .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
10943
11081
  .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
10944
11082
  .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon {
11083
+ inset-inline-end: 7.125rem;
11084
+ }
11085
+
11086
+ .cds--list-box__wrapper--decorator .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--list-box__inner-wrapper--decorator > *,
11087
+ .cds--list-box__wrapper--decorator .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--list-box__inner-wrapper--decorator > * {
10945
11088
  inset-inline-end: 7.25rem;
10946
11089
  }
10947
11090
 
@@ -11071,6 +11214,13 @@ fieldset[disabled] .cds--form__helper-text {
11071
11214
  font-family: inherit;
11072
11215
  font-size: 100%;
11073
11216
  vertical-align: baseline;
11217
+ }
11218
+ .cds--menu *,
11219
+ .cds--menu *::before,
11220
+ .cds--menu *::after {
11221
+ box-sizing: inherit;
11222
+ }
11223
+ .cds--menu {
11074
11224
  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
11075
11225
  position: fixed;
11076
11226
  z-index: 9000;
@@ -11082,10 +11232,13 @@ fieldset[disabled] .cds--form__helper-text {
11082
11232
  overflow-y: auto;
11083
11233
  visibility: hidden;
11084
11234
  }
11085
- .cds--menu *,
11086
- .cds--menu *::before,
11087
- .cds--menu *::after {
11088
- box-sizing: inherit;
11235
+
11236
+ .cds--menu--border {
11237
+ outline: 1px solid var(--cds-border-subtle);
11238
+ }
11239
+
11240
+ .cds--menu--background-token__background {
11241
+ background-color: var(--cds-background, #ffffff);
11089
11242
  }
11090
11243
 
11091
11244
  .cds--menu--with-icons {
@@ -11301,27 +11454,37 @@ fieldset[disabled] .cds--form__helper-text {
11301
11454
 
11302
11455
  .cds--contained-list .cds--tag {
11303
11456
  --cds-layout-size-height-xs: 1.125rem;
11304
- --cds-layout-size-height-sm: 1.125rem;
11305
- --cds-layout-size-height-md: 1.5rem;
11306
- --cds-layout-size-height-lg: 1.5rem;
11307
- --cds-layout-size-height-xl: 1.5rem;
11308
- --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
11309
11457
  }
11310
11458
  .cds--contained-list .cds--tag.cds--layout--size-xs, .cds--layout--size-xs :where(.cds--contained-list .cds--tag) {
11311
11459
  --cds-layout-size-height: var(--cds-layout-size-height-xs);
11312
11460
  }
11461
+ .cds--contained-list .cds--tag {
11462
+ --cds-layout-size-height-sm: 1.125rem;
11463
+ }
11313
11464
  .cds--contained-list .cds--tag.cds--layout--size-sm, .cds--layout--size-sm :where(.cds--contained-list .cds--tag) {
11314
11465
  --cds-layout-size-height: var(--cds-layout-size-height-sm);
11315
11466
  }
11467
+ .cds--contained-list .cds--tag {
11468
+ --cds-layout-size-height-md: 1.5rem;
11469
+ }
11316
11470
  .cds--contained-list .cds--tag.cds--layout--size-md, .cds--layout--size-md :where(.cds--contained-list .cds--tag) {
11317
11471
  --cds-layout-size-height: var(--cds-layout-size-height-md);
11318
11472
  }
11473
+ .cds--contained-list .cds--tag {
11474
+ --cds-layout-size-height-lg: 1.5rem;
11475
+ }
11319
11476
  .cds--contained-list .cds--tag.cds--layout--size-lg, .cds--layout--size-lg :where(.cds--contained-list .cds--tag) {
11320
11477
  --cds-layout-size-height: var(--cds-layout-size-height-lg);
11321
11478
  }
11479
+ .cds--contained-list .cds--tag {
11480
+ --cds-layout-size-height-xl: 1.5rem;
11481
+ }
11322
11482
  .cds--contained-list .cds--tag.cds--layout--size-xl, .cds--layout--size-xl :where(.cds--contained-list .cds--tag) {
11323
11483
  --cds-layout-size-height: var(--cds-layout-size-height-xl);
11324
11484
  }
11485
+ .cds--contained-list .cds--tag {
11486
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
11487
+ }
11325
11488
 
11326
11489
  .cds--contained-list > ul {
11327
11490
  padding: 0;
@@ -11438,6 +11601,13 @@ fieldset[disabled] .cds--form__helper-text {
11438
11601
  font-family: inherit;
11439
11602
  font-size: 100%;
11440
11603
  vertical-align: baseline;
11604
+ }
11605
+ .cds--contained-list-item--clickable .cds--contained-list-item__content *,
11606
+ .cds--contained-list-item--clickable .cds--contained-list-item__content *::before,
11607
+ .cds--contained-list-item--clickable .cds--contained-list-item__content *::after {
11608
+ box-sizing: inherit;
11609
+ }
11610
+ .cds--contained-list-item--clickable .cds--contained-list-item__content {
11441
11611
  display: inline-block;
11442
11612
  padding: 0;
11443
11613
  border: 0;
@@ -11448,17 +11618,14 @@ fieldset[disabled] .cds--form__helper-text {
11448
11618
  cursor: pointer;
11449
11619
  text-align: start;
11450
11620
  inline-size: 100%;
11451
- text-align: start;
11452
- transition: background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11453
- }
11454
- .cds--contained-list-item--clickable .cds--contained-list-item__content *,
11455
- .cds--contained-list-item--clickable .cds--contained-list-item__content *::before,
11456
- .cds--contained-list-item--clickable .cds--contained-list-item__content *::after {
11457
- box-sizing: inherit;
11458
11621
  }
11459
11622
  .cds--contained-list-item--clickable .cds--contained-list-item__content::-moz-focus-inner {
11460
11623
  border: 0;
11461
11624
  }
11625
+ .cds--contained-list-item--clickable .cds--contained-list-item__content {
11626
+ text-align: start;
11627
+ transition: background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11628
+ }
11462
11629
 
11463
11630
  .cds--contained-list-item__content,
11464
11631
  .cds--contained-list-item--clickable .cds--contained-list-item__content {
@@ -11507,15 +11674,17 @@ fieldset[disabled] .cds--form__helper-text {
11507
11674
  .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
11508
11675
  outline: 2px solid var(--cds-focus, #0f62fe);
11509
11676
  outline-offset: -2px;
11510
- position: absolute;
11511
- content: "";
11512
- inset: 0;
11513
11677
  }
11514
11678
  @media screen and (prefers-contrast) {
11515
11679
  .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
11516
11680
  outline-style: dotted;
11517
11681
  }
11518
11682
  }
11683
+ .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
11684
+ position: absolute;
11685
+ content: "";
11686
+ inset: 0;
11687
+ }
11519
11688
 
11520
11689
  .cds--contained-list-item--with-action .cds--contained-list-item__content {
11521
11690
  padding-inline-end: 4rem;
@@ -11564,6 +11733,22 @@ fieldset[disabled] .cds--form__helper-text {
11564
11733
  outline-color: var(--cds-border-disabled, #c6c6c6);
11565
11734
  }
11566
11735
 
11736
+ .cds--content-switcher-btn html {
11737
+ font-size: 100%;
11738
+ }
11739
+ .cds--content-switcher-btn body {
11740
+ font-weight: 400;
11741
+ font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
11742
+ -moz-osx-font-smoothing: grayscale;
11743
+ -webkit-font-smoothing: antialiased;
11744
+ text-rendering: optimizeLegibility;
11745
+ }
11746
+ .cds--content-switcher-btn code {
11747
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11748
+ }
11749
+ .cds--content-switcher-btn strong {
11750
+ font-weight: 600;
11751
+ }
11567
11752
  .cds--content-switcher-btn {
11568
11753
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
11569
11754
  outline: 2px solid transparent;
@@ -11585,22 +11770,6 @@ fieldset[disabled] .cds--form__helper-text {
11585
11770
  text-decoration: none;
11586
11771
  white-space: nowrap;
11587
11772
  }
11588
- .cds--content-switcher-btn html {
11589
- font-size: 100%;
11590
- }
11591
- .cds--content-switcher-btn body {
11592
- font-weight: 400;
11593
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
11594
- -moz-osx-font-smoothing: grayscale;
11595
- -webkit-font-smoothing: antialiased;
11596
- text-rendering: optimizeLegibility;
11597
- }
11598
- .cds--content-switcher-btn code {
11599
- font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11600
- }
11601
- .cds--content-switcher-btn strong {
11602
- font-weight: 600;
11603
- }
11604
11773
  .cds--content-switcher-btn::after {
11605
11774
  position: absolute;
11606
11775
  display: block;
@@ -12072,15 +12241,17 @@ fieldset[disabled] .cds--form__helper-text {
12072
12241
  font-family: inherit;
12073
12242
  font-size: 100%;
12074
12243
  vertical-align: baseline;
12075
- position: relative;
12076
- display: flex;
12077
- align-items: center;
12078
12244
  }
12079
12245
  .cds--radio-button-group *,
12080
12246
  .cds--radio-button-group *::before,
12081
12247
  .cds--radio-button-group *::after {
12082
12248
  box-sizing: inherit;
12083
12249
  }
12250
+ .cds--radio-button-group {
12251
+ position: relative;
12252
+ display: flex;
12253
+ align-items: center;
12254
+ }
12084
12255
 
12085
12256
  .cds--label + .cds--form-item .cds--radio-button-group {
12086
12257
  margin-block-start: 0;
@@ -12139,6 +12310,13 @@ fieldset[disabled] .cds--form__helper-text {
12139
12310
  font-family: inherit;
12140
12311
  font-size: 100%;
12141
12312
  vertical-align: baseline;
12313
+ }
12314
+ .cds--radio-button__appearance *,
12315
+ .cds--radio-button__appearance *::before,
12316
+ .cds--radio-button__appearance *::after {
12317
+ box-sizing: inherit;
12318
+ }
12319
+ .cds--radio-button__appearance {
12142
12320
  flex-shrink: 0;
12143
12321
  border: 1px solid var(--cds-icon-primary, #161616);
12144
12322
  border-radius: 50%;
@@ -12148,11 +12326,6 @@ fieldset[disabled] .cds--form__helper-text {
12148
12326
  margin-block: 0.0625rem 0.125rem;
12149
12327
  margin-inline: 0.125rem 0.625rem;
12150
12328
  }
12151
- .cds--radio-button__appearance *,
12152
- .cds--radio-button__appearance *::before,
12153
- .cds--radio-button__appearance *::after {
12154
- box-sizing: inherit;
12155
- }
12156
12329
 
12157
12330
  .cds--radio-button-group--vertical .cds--radio-button__appearance {
12158
12331
  margin-block: 0;
@@ -12272,8 +12445,6 @@ fieldset[disabled] .cds--form__helper-text {
12272
12445
  background: var(--cds-skeleton-background, #e8e8e8);
12273
12446
  box-shadow: none;
12274
12447
  pointer-events: none;
12275
- block-size: 1.125rem;
12276
- inline-size: 6.25rem;
12277
12448
  }
12278
12449
  .cds--radio-button__label.cds--skeleton:hover, .cds--radio-button__label.cds--skeleton:focus, .cds--radio-button__label.cds--skeleton:active {
12279
12450
  border: none;
@@ -12304,6 +12475,10 @@ fieldset[disabled] .cds--form__helper-text {
12304
12475
  forced-color-adjust: none;
12305
12476
  }
12306
12477
  }
12478
+ .cds--radio-button__label.cds--skeleton {
12479
+ block-size: 1.125rem;
12480
+ inline-size: 6.25rem;
12481
+ }
12307
12482
 
12308
12483
  .cds--radio-button__label.cds--skeleton .cds--radio-button__appearance {
12309
12484
  display: none;
@@ -12947,11 +13122,6 @@ tr.cds--data-table--selected:last-of-type td {
12947
13122
  .cds--data-table--sticky-header {
12948
13123
  display: block;
12949
13124
  overflow-y: scroll;
12950
- /* When using sticky header, with a selection element in the first column, we need to set the last item to a fixed width to match the table body. We only want this to happen when the last table header does not have any text */
12951
- /* This is for targeting styles specific to firefox */
12952
- /* To hide the firefox scrollbar */
12953
- /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
12954
- /* stylelint-disable-next-line at-rule-no-vendor-prefix */
12955
13125
  }
12956
13126
  .cds--data-table--sticky-header thead,
12957
13127
  .cds--data-table--sticky-header tbody,
@@ -13015,6 +13185,9 @@ tr.cds--data-table--selected:last-of-type td {
13015
13185
  .cds--data-table--sticky-header.cds--data-table--xl thead th.cds--table-column-checkbox, .cds--data-table--sticky-header.cds--data-table--xl td.cds--table-column-checkbox {
13016
13186
  align-items: flex-start;
13017
13187
  }
13188
+ .cds--data-table--sticky-header {
13189
+ /* When using sticky header, with a selection element in the first column, we need to set the last item to a fixed width to match the table body. We only want this to happen when the last table header does not have any text */
13190
+ }
13018
13191
  .cds--data-table--sticky-header th.cds--table-column-checkbox ~ th:last-of-type:empty {
13019
13192
  max-inline-size: 4rem;
13020
13193
  }
@@ -13030,6 +13203,12 @@ tr.cds--data-table--selected:last-of-type td {
13030
13203
  .cds--data-table--sticky-header tbody::-webkit-scrollbar {
13031
13204
  display: none;
13032
13205
  }
13206
+ .cds--data-table--sticky-header {
13207
+ /* This is for targeting styles specific to firefox */
13208
+ /* To hide the firefox scrollbar */
13209
+ /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
13210
+ /* stylelint-disable-next-line at-rule-no-vendor-prefix */
13211
+ }
13033
13212
  @-moz-document url-prefix() {
13034
13213
  .cds--data-table--sticky-header thead,
13035
13214
  .cds--data-table--sticky-header tbody {
@@ -13260,6 +13439,13 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13260
13439
  font-family: inherit;
13261
13440
  font-size: 100%;
13262
13441
  vertical-align: baseline;
13442
+ }
13443
+ .cds--search-input *,
13444
+ .cds--search-input *::before,
13445
+ .cds--search-input *::after {
13446
+ box-sizing: inherit;
13447
+ }
13448
+ .cds--search-input {
13263
13449
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
13264
13450
  font-weight: var(--cds-body-compact-01-font-weight, 400);
13265
13451
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -13279,11 +13465,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13279
13465
  text-overflow: ellipsis;
13280
13466
  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
13281
13467
  }
13282
- .cds--search-input *,
13283
- .cds--search-input *::before,
13284
- .cds--search-input *::after {
13285
- box-sizing: inherit;
13286
- }
13287
13468
  .cds--search-input:focus {
13288
13469
  outline: 2px solid var(--cds-focus, #0f62fe);
13289
13470
  outline-offset: -2px;
@@ -13365,6 +13546,13 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13365
13546
  font-family: inherit;
13366
13547
  font-size: 100%;
13367
13548
  vertical-align: baseline;
13549
+ }
13550
+ .cds--search-magnifier-icon *,
13551
+ .cds--search-magnifier-icon *::before,
13552
+ .cds--search-magnifier-icon *::after {
13553
+ box-sizing: inherit;
13554
+ }
13555
+ .cds--search-magnifier-icon {
13368
13556
  position: absolute;
13369
13557
  z-index: 2;
13370
13558
  block-size: 1rem;
@@ -13375,11 +13563,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13375
13563
  pointer-events: none;
13376
13564
  transform: translateY(-50%);
13377
13565
  }
13378
- .cds--search-magnifier-icon *,
13379
- .cds--search-magnifier-icon *::before,
13380
- .cds--search-magnifier-icon *::after {
13381
- box-sizing: inherit;
13382
- }
13383
13566
 
13384
13567
  .cds--search-close {
13385
13568
  box-sizing: border-box;
@@ -13389,6 +13572,13 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13389
13572
  font-family: inherit;
13390
13573
  font-size: 100%;
13391
13574
  vertical-align: baseline;
13575
+ }
13576
+ .cds--search-close *,
13577
+ .cds--search-close *::before,
13578
+ .cds--search-close *::after {
13579
+ box-sizing: inherit;
13580
+ }
13581
+ .cds--search-close {
13392
13582
  display: inline-block;
13393
13583
  padding: 0;
13394
13584
  border: 0;
@@ -13398,20 +13588,17 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13398
13588
  background: none;
13399
13589
  cursor: pointer;
13400
13590
  text-align: start;
13401
- outline: 2px solid transparent;
13402
- outline-offset: -2px;
13403
- position: absolute;
13404
- inset-block-start: 0;
13405
- inset-inline-end: 0;
13406
- }
13407
- .cds--search-close *,
13408
- .cds--search-close *::before,
13409
- .cds--search-close *::after {
13410
- box-sizing: inherit;
13411
13591
  }
13412
13592
  .cds--search-close::-moz-focus-inner {
13413
13593
  border: 0;
13414
13594
  }
13595
+ .cds--search-close {
13596
+ outline: 2px solid transparent;
13597
+ outline-offset: -2px;
13598
+ position: absolute;
13599
+ inset-block-start: 0;
13600
+ inset-inline-end: 0;
13601
+ }
13415
13602
  .cds--search-close::before {
13416
13603
  position: absolute;
13417
13604
  display: block;
@@ -13484,7 +13671,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13484
13671
  .cds--search-button:active {
13485
13672
  outline: 2px solid var(--cds-focus, #0f62fe);
13486
13673
  outline-offset: -2px;
13487
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
13488
13674
  }
13489
13675
  @media screen and (prefers-contrast) {
13490
13676
  .cds--search-close:active,
@@ -13492,6 +13678,10 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13492
13678
  outline-style: dotted;
13493
13679
  }
13494
13680
  }
13681
+ .cds--search-close:active,
13682
+ .cds--search-button:active {
13683
+ background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
13684
+ }
13495
13685
 
13496
13686
  .cds--search--disabled .cds--search-close,
13497
13687
  .cds--search--disabled.cds--search--expandable .cds--search-magnifier {
@@ -13577,7 +13767,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13577
13767
  background: var(--cds-skeleton-background, #e8e8e8);
13578
13768
  box-shadow: none;
13579
13769
  pointer-events: none;
13580
- inline-size: 100%;
13581
13770
  }
13582
13771
  .cds--search--lg.cds--skeleton .cds--search-input:hover, .cds--search--lg.cds--skeleton .cds--search-input:focus, .cds--search--lg.cds--skeleton .cds--search-input:active,
13583
13772
  .cds--search--md.cds--skeleton .cds--search-input:hover,
@@ -13622,6 +13811,11 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13622
13811
  forced-color-adjust: none;
13623
13812
  }
13624
13813
  }
13814
+ .cds--search--lg.cds--skeleton .cds--search-input,
13815
+ .cds--search--md.cds--skeleton .cds--search-input,
13816
+ .cds--search--sm.cds--skeleton .cds--search-input {
13817
+ inline-size: 100%;
13818
+ }
13625
13819
  .cds--search--lg.cds--skeleton .cds--search-input::-moz-placeholder, .cds--search--md.cds--skeleton .cds--search-input::-moz-placeholder, .cds--search--sm.cds--skeleton .cds--search-input::-moz-placeholder {
13626
13820
  color: transparent;
13627
13821
  }
@@ -13877,6 +14071,13 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13877
14071
  font-family: inherit;
13878
14072
  font-size: 100%;
13879
14073
  vertical-align: baseline;
14074
+ }
14075
+ .cds--overflow-menu.cds--toolbar-action *,
14076
+ .cds--overflow-menu.cds--toolbar-action *::before,
14077
+ .cds--overflow-menu.cds--toolbar-action *::after {
14078
+ box-sizing: inherit;
14079
+ }
14080
+ .cds--overflow-menu.cds--toolbar-action {
13880
14081
  display: inline-block;
13881
14082
  padding: 0;
13882
14083
  border: 0;
@@ -13887,6 +14088,11 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13887
14088
  cursor: pointer;
13888
14089
  text-align: start;
13889
14090
  inline-size: 100%;
14091
+ }
14092
+ .cds--overflow-menu.cds--toolbar-action::-moz-focus-inner {
14093
+ border: 0;
14094
+ }
14095
+ .cds--overflow-menu.cds--toolbar-action {
13890
14096
  display: flex;
13891
14097
  padding: 1rem;
13892
14098
  block-size: 3rem;
@@ -13894,14 +14100,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13894
14100
  inline-size: 3rem;
13895
14101
  transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9);
13896
14102
  }
13897
- .cds--overflow-menu.cds--toolbar-action *,
13898
- .cds--overflow-menu.cds--toolbar-action *::before,
13899
- .cds--overflow-menu.cds--toolbar-action *::after {
13900
- box-sizing: inherit;
13901
- }
13902
- .cds--overflow-menu.cds--toolbar-action::-moz-focus-inner {
13903
- border: 0;
13904
- }
13905
14103
 
13906
14104
  .cds--toolbar-action {
13907
14105
  box-sizing: border-box;
@@ -13911,6 +14109,13 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13911
14109
  font-family: inherit;
13912
14110
  font-size: 100%;
13913
14111
  vertical-align: baseline;
14112
+ }
14113
+ .cds--toolbar-action *,
14114
+ .cds--toolbar-action *::before,
14115
+ .cds--toolbar-action *::after {
14116
+ box-sizing: inherit;
14117
+ }
14118
+ .cds--toolbar-action {
13914
14119
  display: inline-block;
13915
14120
  padding: 0;
13916
14121
  border: 0;
@@ -13921,20 +14126,17 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
13921
14126
  cursor: pointer;
13922
14127
  text-align: start;
13923
14128
  inline-size: 100%;
14129
+ }
14130
+ .cds--toolbar-action::-moz-focus-inner {
14131
+ border: 0;
14132
+ }
14133
+ .cds--toolbar-action {
13924
14134
  display: flex;
13925
14135
  block-size: 3rem;
13926
14136
  cursor: pointer;
13927
14137
  inline-size: 3rem;
13928
14138
  transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9);
13929
14139
  }
13930
- .cds--toolbar-action *,
13931
- .cds--toolbar-action *::before,
13932
- .cds--toolbar-action *::after {
13933
- box-sizing: inherit;
13934
- }
13935
- .cds--toolbar-action::-moz-focus-inner {
13936
- border: 0;
13937
- }
13938
14140
 
13939
14141
  .cds--toolbar-action:hover:not([disabled]) {
13940
14142
  background-color: var(--cds-field-hover);
@@ -14225,13 +14427,15 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
14225
14427
  .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus {
14226
14428
  outline: 2px solid var(--cds-focus, #0f62fe);
14227
14429
  outline-offset: -2px;
14228
- background-color: var(--cds-field-hover);
14229
14430
  }
14230
14431
  @media screen and (prefers-contrast) {
14231
14432
  .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus {
14232
14433
  outline-style: dotted;
14233
14434
  }
14234
14435
  }
14436
+ .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus {
14437
+ background-color: var(--cds-field-hover);
14438
+ }
14235
14439
  .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:not(:-moz-placeholder-shown) {
14236
14440
  background-color: var(--cds-field-hover);
14237
14441
  }
@@ -14456,6 +14660,13 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
14456
14660
  font-family: inherit;
14457
14661
  font-size: 100%;
14458
14662
  vertical-align: baseline;
14663
+ }
14664
+ .cds--table-expand__button *,
14665
+ .cds--table-expand__button *::before,
14666
+ .cds--table-expand__button *::after {
14667
+ box-sizing: inherit;
14668
+ }
14669
+ .cds--table-expand__button {
14459
14670
  display: inline-block;
14460
14671
  padding: 0;
14461
14672
  border: 0;
@@ -14465,6 +14676,11 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
14465
14676
  background: none;
14466
14677
  cursor: pointer;
14467
14678
  text-align: start;
14679
+ }
14680
+ .cds--table-expand__button::-moz-focus-inner {
14681
+ border: 0;
14682
+ }
14683
+ .cds--table-expand__button {
14468
14684
  display: inline-flex;
14469
14685
  align-items: center;
14470
14686
  justify-content: center;
@@ -14473,14 +14689,6 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
14473
14689
  inline-size: 100%;
14474
14690
  vertical-align: inherit;
14475
14691
  }
14476
- .cds--table-expand__button *,
14477
- .cds--table-expand__button *::before,
14478
- .cds--table-expand__button *::after {
14479
- box-sizing: inherit;
14480
- }
14481
- .cds--table-expand__button::-moz-focus-inner {
14482
- border: 0;
14483
- }
14484
14692
 
14485
14693
  .cds--data-table--top-aligned-body td .cds--table-expand__button,
14486
14694
  .cds--data-table--top-aligned-header th .cds--table-expand__button {
@@ -14649,9 +14857,6 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14649
14857
  background: var(--cds-skeleton-background, #e8e8e8);
14650
14858
  box-shadow: none;
14651
14859
  pointer-events: none;
14652
- display: block;
14653
- block-size: 1rem;
14654
- inline-size: 4rem;
14655
14860
  }
14656
14861
  .cds--data-table.cds--skeleton th span:hover, .cds--data-table.cds--skeleton th span:focus, .cds--data-table.cds--skeleton th span:active,
14657
14862
  .cds--data-table.cds--skeleton td span:hover,
@@ -14689,6 +14894,12 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14689
14894
  forced-color-adjust: none;
14690
14895
  }
14691
14896
  }
14897
+ .cds--data-table.cds--skeleton th span,
14898
+ .cds--data-table.cds--skeleton td span {
14899
+ display: block;
14900
+ block-size: 1rem;
14901
+ inline-size: 4rem;
14902
+ }
14692
14903
 
14693
14904
  .cds--data-table.cds--skeleton tr:hover td {
14694
14905
  border-color: var(--cds-border-subtle);
@@ -14719,8 +14930,6 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14719
14930
  background: var(--cds-skeleton-background, #e8e8e8);
14720
14931
  box-shadow: none;
14721
14932
  pointer-events: none;
14722
- block-size: 1.5rem;
14723
- inline-size: 7.5rem;
14724
14933
  }
14725
14934
  .cds--data-table-container.cds--skeleton .cds--data-table-header__title:hover, .cds--data-table-container.cds--skeleton .cds--data-table-header__title:focus, .cds--data-table-container.cds--skeleton .cds--data-table-header__title:active {
14726
14935
  border: none;
@@ -14751,6 +14960,10 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14751
14960
  forced-color-adjust: none;
14752
14961
  }
14753
14962
  }
14963
+ .cds--data-table-container.cds--skeleton .cds--data-table-header__title {
14964
+ block-size: 1.5rem;
14965
+ inline-size: 7.5rem;
14966
+ }
14754
14967
 
14755
14968
  .cds--data-table-container.cds--skeleton .cds--data-table-header__description {
14756
14969
  position: relative;
@@ -14759,9 +14972,6 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14759
14972
  background: var(--cds-skeleton-background, #e8e8e8);
14760
14973
  box-shadow: none;
14761
14974
  pointer-events: none;
14762
- block-size: 1rem;
14763
- inline-size: 10rem;
14764
- margin-block-start: 0.5rem;
14765
14975
  }
14766
14976
  .cds--data-table-container.cds--skeleton .cds--data-table-header__description:hover, .cds--data-table-container.cds--skeleton .cds--data-table-header__description:focus, .cds--data-table-container.cds--skeleton .cds--data-table-header__description:active {
14767
14977
  border: none;
@@ -14792,6 +15002,11 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14792
15002
  forced-color-adjust: none;
14793
15003
  }
14794
15004
  }
15005
+ .cds--data-table-container.cds--skeleton .cds--data-table-header__description {
15006
+ block-size: 1rem;
15007
+ inline-size: 10rem;
15008
+ margin-block-start: 0.5rem;
15009
+ }
14795
15010
 
14796
15011
  .cds--data-table--sort th,
14797
15012
  .cds--data-table th[aria-sort] {
@@ -14813,6 +15028,13 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14813
15028
  font-family: inherit;
14814
15029
  font-size: 100%;
14815
15030
  vertical-align: baseline;
15031
+ }
15032
+ .cds--table-sort *,
15033
+ .cds--table-sort *::before,
15034
+ .cds--table-sort *::after {
15035
+ box-sizing: inherit;
15036
+ }
15037
+ .cds--table-sort {
14816
15038
  display: inline-block;
14817
15039
  padding: 0;
14818
15040
  border: 0;
@@ -14822,6 +15044,11 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14822
15044
  background: none;
14823
15045
  cursor: pointer;
14824
15046
  text-align: start;
15047
+ }
15048
+ .cds--table-sort::-moz-focus-inner {
15049
+ border: 0;
15050
+ }
15051
+ .cds--table-sort {
14825
15052
  display: flex;
14826
15053
  align-items: center;
14827
15054
  justify-content: space-between;
@@ -14835,14 +15062,6 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
14835
15062
  text-align: start;
14836
15063
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
14837
15064
  }
14838
- .cds--table-sort *,
14839
- .cds--table-sort *::before,
14840
- .cds--table-sort *::after {
14841
- box-sizing: inherit;
14842
- }
14843
- .cds--table-sort::-moz-focus-inner {
14844
- border: 0;
14845
- }
14846
15065
 
14847
15066
  .cds--table-sort:focus {
14848
15067
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -15443,13 +15662,15 @@ th .cds--table-sort__flex {
15443
15662
  .flatpickr-day:focus {
15444
15663
  outline: 2px solid var(--cds-focus, #0f62fe);
15445
15664
  outline-offset: -2px;
15446
- outline-color: var(--cds-button-primary, #0f62fe);
15447
15665
  }
15448
15666
  @media screen and (prefers-contrast) {
15449
15667
  .flatpickr-day:focus {
15450
15668
  outline-style: dotted;
15451
15669
  }
15452
15670
  }
15671
+ .flatpickr-day:focus {
15672
+ outline-color: var(--cds-button-primary, #0f62fe);
15673
+ }
15453
15674
 
15454
15675
  .nextMonthDay,
15455
15676
  .prevMonthDay {
@@ -15520,8 +15741,6 @@ th .cds--table-sort__flex {
15520
15741
  .flatpickr-day.endRange.inRange {
15521
15742
  outline: 2px solid var(--cds-focus, #0f62fe);
15522
15743
  outline-offset: -2px;
15523
- z-index: 3;
15524
- background: var(--cds-layer-01, #f4f4f4);
15525
15744
  }
15526
15745
  @media screen and (prefers-contrast) {
15527
15746
  .flatpickr-day.startRange.inRange:not(.selected),
@@ -15529,18 +15748,25 @@ th .cds--table-sort__flex {
15529
15748
  outline-style: dotted;
15530
15749
  }
15531
15750
  }
15751
+ .flatpickr-day.startRange.inRange:not(.selected),
15752
+ .flatpickr-day.endRange.inRange {
15753
+ z-index: 3;
15754
+ background: var(--cds-layer-01, #f4f4f4);
15755
+ }
15532
15756
 
15533
15757
  .flatpickr-day.endRange:hover {
15534
15758
  outline: 2px solid var(--cds-focus, #0f62fe);
15535
15759
  outline-offset: -2px;
15536
- background: var(--cds-layer-01, #f4f4f4);
15537
- color: var(--cds-text-primary, #161616);
15538
15760
  }
15539
15761
  @media screen and (prefers-contrast) {
15540
15762
  .flatpickr-day.endRange:hover {
15541
15763
  outline-style: dotted;
15542
15764
  }
15543
15765
  }
15766
+ .flatpickr-day.endRange:hover {
15767
+ background: var(--cds-layer-01, #f4f4f4);
15768
+ color: var(--cds-text-primary, #161616);
15769
+ }
15544
15770
 
15545
15771
  .flatpickr-day.endRange.inRange.selected {
15546
15772
  background: var(--cds-button-primary, #0f62fe);
@@ -15630,6 +15856,13 @@ th .cds--table-sort__flex {
15630
15856
  font-family: inherit;
15631
15857
  font-size: 100%;
15632
15858
  vertical-align: baseline;
15859
+ }
15860
+ .cds--date-picker__input *,
15861
+ .cds--date-picker__input *::before,
15862
+ .cds--date-picker__input *::after {
15863
+ box-sizing: inherit;
15864
+ }
15865
+ .cds--date-picker__input {
15633
15866
  font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
15634
15867
  font-size: var(--cds-code-02-font-size, 0.875rem);
15635
15868
  font-weight: var(--cds-code-02-font-weight, 400);
@@ -15647,11 +15880,6 @@ th .cds--table-sort__flex {
15647
15880
  color: var(--cds-text-primary, #161616);
15648
15881
  transition: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) all;
15649
15882
  }
15650
- .cds--date-picker__input *,
15651
- .cds--date-picker__input *::before,
15652
- .cds--date-picker__input *::after {
15653
- box-sizing: inherit;
15654
- }
15655
15883
  .cds--date-picker__input:focus, .cds--date-picker__input.cds--focused {
15656
15884
  outline: 2px solid var(--cds-focus, #0f62fe);
15657
15885
  outline-offset: -2px;
@@ -15778,7 +16006,6 @@ th .cds--table-sort__flex {
15778
16006
  background: var(--cds-skeleton-background, #e8e8e8);
15779
16007
  box-shadow: none;
15780
16008
  pointer-events: none;
15781
- inline-size: 100%;
15782
16009
  }
15783
16010
  .cds--date-picker.cds--skeleton input:hover, .cds--date-picker.cds--skeleton input:focus, .cds--date-picker.cds--skeleton input:active,
15784
16011
  .cds--date-picker__input.cds--skeleton:hover,
@@ -15816,6 +16043,10 @@ th .cds--table-sort__flex {
15816
16043
  forced-color-adjust: none;
15817
16044
  }
15818
16045
  }
16046
+ .cds--date-picker.cds--skeleton input,
16047
+ .cds--date-picker__input.cds--skeleton {
16048
+ inline-size: 100%;
16049
+ }
15819
16050
  .cds--date-picker.cds--skeleton input::-moz-placeholder, .cds--date-picker__input.cds--skeleton::-moz-placeholder {
15820
16051
  color: transparent;
15821
16052
  }
@@ -15831,8 +16062,6 @@ th .cds--table-sort__flex {
15831
16062
  background: var(--cds-skeleton-background, #e8e8e8);
15832
16063
  box-shadow: none;
15833
16064
  pointer-events: none;
15834
- block-size: 0.875rem;
15835
- inline-size: 4.6875rem;
15836
16065
  }
15837
16066
  .cds--date-picker.cds--skeleton .cds--label:hover, .cds--date-picker.cds--skeleton .cds--label:focus, .cds--date-picker.cds--skeleton .cds--label:active {
15838
16067
  border: none;
@@ -15863,6 +16092,10 @@ th .cds--table-sort__flex {
15863
16092
  forced-color-adjust: none;
15864
16093
  }
15865
16094
  }
16095
+ .cds--date-picker.cds--skeleton .cds--label {
16096
+ block-size: 0.875rem;
16097
+ inline-size: 4.6875rem;
16098
+ }
15866
16099
 
15867
16100
  .cds--dialog {
15868
16101
  position: fixed;
@@ -15874,18 +16107,6 @@ th .cds--table-sort__flex {
15874
16107
  inline-size: 48rem;
15875
16108
  inset: 0;
15876
16109
  max-block-size: 100%;
15877
- opacity: 0;
15878
- transform: translateY(calc(-1 * 1.5rem));
15879
- /** opening and closing is used in as allow-discrete is not currently supported wide enough
15880
- * https://caniuse.com/mdn-css_properties_display_is_transitionable
15881
- */
15882
- transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), transform 240ms cubic-bezier(0.4, 0.14, 1, 1), overlay 240ms cubic-bezier(0.4, 0.14, 1, 1) allow-discrete, display 240ms cubic-bezier(0.4, 0.14, 1, 1) allow-discrete;
15883
- /** starting style also not supported widely
15884
- * https://caniuse.com/mdn-css_at-rules_starting-style
15885
- */
15886
- /* Before-open state */
15887
- /* Needs to be after the previous dialog[open] rule to take effect,
15888
- as the specificity is the same */
15889
16110
  }
15890
16111
  @media (min-width: 42rem) {
15891
16112
  .cds--dialog {
@@ -15902,6 +16123,14 @@ th .cds--table-sort__flex {
15902
16123
  max-inline-size: 48%;
15903
16124
  }
15904
16125
  }
16126
+ .cds--dialog {
16127
+ opacity: 0;
16128
+ transform: translateY(calc(-1 * 1.5rem));
16129
+ /** opening and closing is used in as allow-discrete is not currently supported wide enough
16130
+ * https://caniuse.com/mdn-css_properties_display_is_transitionable
16131
+ */
16132
+ transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), transform 240ms cubic-bezier(0.4, 0.14, 1, 1), overlay 240ms cubic-bezier(0.4, 0.14, 1, 1) allow-discrete, display 240ms cubic-bezier(0.4, 0.14, 1, 1) allow-discrete;
16133
+ }
15905
16134
  @media (prefers-reduced-motion) {
15906
16135
  .cds--dialog {
15907
16136
  transition: none;
@@ -15917,6 +16146,14 @@ th .cds--table-sort__flex {
15917
16146
  transition: none;
15918
16147
  }
15919
16148
  }
16149
+ .cds--dialog {
16150
+ /** starting style also not supported widely
16151
+ * https://caniuse.com/mdn-css_at-rules_starting-style
16152
+ */
16153
+ /* Before-open state */
16154
+ /* Needs to be after the previous dialog[open] rule to take effect,
16155
+ as the specificity is the same */
16156
+ }
15920
16157
  @starting-style {
15921
16158
  .cds--dialog[open] {
15922
16159
  opacity: 0;
@@ -15986,6 +16223,13 @@ because the nesting selector cannot represent pseudo-elements. */
15986
16223
  font-family: inherit;
15987
16224
  font-size: 100%;
15988
16225
  vertical-align: baseline;
16226
+ }
16227
+ .cds--dialog-header__label *,
16228
+ .cds--dialog-header__label *::before,
16229
+ .cds--dialog-header__label *::after {
16230
+ box-sizing: inherit;
16231
+ }
16232
+ .cds--dialog-header__label {
15989
16233
  font-size: var(--cds-label-01-font-size, 0.75rem);
15990
16234
  font-weight: var(--cds-label-01-font-weight, 400);
15991
16235
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -15993,11 +16237,6 @@ because the nesting selector cannot represent pseudo-elements. */
15993
16237
  color: var(--cds-text-secondary, #525252);
15994
16238
  margin-block-end: 0.25rem;
15995
16239
  }
15996
- .cds--dialog-header__label *,
15997
- .cds--dialog-header__label *::before,
15998
- .cds--dialog-header__label *::after {
15999
- box-sizing: inherit;
16000
- }
16001
16240
 
16002
16241
  .cds--dialog-header__heading {
16003
16242
  box-sizing: border-box;
@@ -16007,6 +16246,13 @@ because the nesting selector cannot represent pseudo-elements. */
16007
16246
  font-family: inherit;
16008
16247
  font-size: 100%;
16009
16248
  vertical-align: baseline;
16249
+ }
16250
+ .cds--dialog-header__heading *,
16251
+ .cds--dialog-header__heading *::before,
16252
+ .cds--dialog-header__heading *::after {
16253
+ box-sizing: inherit;
16254
+ }
16255
+ .cds--dialog-header__heading {
16010
16256
  font-size: var(--cds-heading-03-font-size, 1.25rem);
16011
16257
  font-weight: var(--cds-heading-03-font-weight, 400);
16012
16258
  line-height: var(--cds-heading-03-line-height, 1.4);
@@ -16015,11 +16261,6 @@ because the nesting selector cannot represent pseudo-elements. */
16015
16261
  color: var(--cds-text-primary, #161616);
16016
16262
  padding-inline-end: calc(20% - 3rem);
16017
16263
  }
16018
- .cds--dialog-header__heading *,
16019
- .cds--dialog-header__heading *::before,
16020
- .cds--dialog-header__heading *::after {
16021
- box-sizing: inherit;
16022
- }
16023
16264
 
16024
16265
  .cds--dialog-container {
16025
16266
  display: grid;
@@ -16155,22 +16396,6 @@ because the nesting selector cannot represent pseudo-elements. */
16155
16396
  grid-column: 2;
16156
16397
  }
16157
16398
 
16158
- .cds--dropdown {
16159
- outline: 2px solid transparent;
16160
- outline-offset: -2px;
16161
- position: relative;
16162
- display: block;
16163
- border: none;
16164
- background-color: var(--cds-field);
16165
- block-size: 2.5rem;
16166
- border-block-end: 1px solid var(--cds-border-strong);
16167
- color: var(--cds-text-primary, #161616);
16168
- cursor: pointer;
16169
- inline-size: 100%;
16170
- list-style: none;
16171
- outline: 2px solid transparent;
16172
- transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
16173
- }
16174
16399
  .cds--dropdown html {
16175
16400
  font-size: 100%;
16176
16401
  }
@@ -16187,6 +16412,22 @@ because the nesting selector cannot represent pseudo-elements. */
16187
16412
  .cds--dropdown strong {
16188
16413
  font-weight: 600;
16189
16414
  }
16415
+ .cds--dropdown {
16416
+ outline: 2px solid transparent;
16417
+ outline-offset: -2px;
16418
+ position: relative;
16419
+ display: block;
16420
+ border: none;
16421
+ background-color: var(--cds-field);
16422
+ block-size: 2.5rem;
16423
+ border-block-end: 1px solid var(--cds-border-strong);
16424
+ color: var(--cds-text-primary, #161616);
16425
+ cursor: pointer;
16426
+ inline-size: 100%;
16427
+ list-style: none;
16428
+ outline: 2px solid transparent;
16429
+ transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
16430
+ }
16190
16431
  .cds--dropdown:hover {
16191
16432
  background-color: var(--cds-field-hover);
16192
16433
  }
@@ -16321,7 +16562,23 @@ button.cds--dropdown-text:focus {
16321
16562
  text-overflow: ellipsis;
16322
16563
  white-space: nowrap;
16323
16564
  }
16324
-
16565
+
16566
+ .cds--dropdown-list html {
16567
+ font-size: 100%;
16568
+ }
16569
+ .cds--dropdown-list body {
16570
+ font-weight: 400;
16571
+ font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
16572
+ -moz-osx-font-smoothing: grayscale;
16573
+ -webkit-font-smoothing: antialiased;
16574
+ text-rendering: optimizeLegibility;
16575
+ }
16576
+ .cds--dropdown-list code {
16577
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
16578
+ }
16579
+ .cds--dropdown-list strong {
16580
+ font-weight: 600;
16581
+ }
16325
16582
  .cds--dropdown-list {
16326
16583
  outline: 2px solid transparent;
16327
16584
  outline-offset: -2px;
@@ -16341,22 +16598,6 @@ button.cds--dropdown-text:focus {
16341
16598
  max-block-size: 0;
16342
16599
  transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
16343
16600
  }
16344
- .cds--dropdown-list html {
16345
- font-size: 100%;
16346
- }
16347
- .cds--dropdown-list body {
16348
- font-weight: 400;
16349
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
16350
- -moz-osx-font-smoothing: grayscale;
16351
- -webkit-font-smoothing: antialiased;
16352
- text-rendering: optimizeLegibility;
16353
- }
16354
- .cds--dropdown-list code {
16355
- font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
16356
- }
16357
- .cds--dropdown-list strong {
16358
- font-weight: 600;
16359
- }
16360
16601
 
16361
16602
  .cds--dropdown--light .cds--dropdown-list {
16362
16603
  background-color: var(--cds-layer);
@@ -16424,8 +16665,6 @@ button.cds--dropdown-text:focus {
16424
16665
  .cds--dropdown-link:focus {
16425
16666
  outline: 2px solid var(--cds-focus, #0f62fe);
16426
16667
  outline-offset: -2px;
16427
- padding: 0.6875rem 1rem;
16428
- margin: 0;
16429
16668
  }
16430
16669
  @media screen and (prefers-contrast) {
16431
16670
  .cds--dropdown--focused,
@@ -16433,6 +16672,11 @@ button.cds--dropdown-text:focus {
16433
16672
  outline-style: dotted;
16434
16673
  }
16435
16674
  }
16675
+ .cds--dropdown--focused,
16676
+ .cds--dropdown-link:focus {
16677
+ padding: 0.6875rem 1rem;
16678
+ margin: 0;
16679
+ }
16436
16680
 
16437
16681
  .cds--dropdown-list[aria-activedescendant] .cds--dropdown-link:focus {
16438
16682
  padding: 0.6875rem 0;
@@ -16443,14 +16687,16 @@ button.cds--dropdown-text:focus {
16443
16687
  .cds--dropdown-list[aria-activedescendant] .cds--dropdown--focused:focus {
16444
16688
  outline: 2px solid var(--cds-focus, #0f62fe);
16445
16689
  outline-offset: -2px;
16446
- padding: 0.6875rem 1rem;
16447
- margin: 0;
16448
16690
  }
16449
16691
  @media screen and (prefers-contrast) {
16450
16692
  .cds--dropdown-list[aria-activedescendant] .cds--dropdown--focused:focus {
16451
16693
  outline-style: dotted;
16452
16694
  }
16453
16695
  }
16696
+ .cds--dropdown-list[aria-activedescendant] .cds--dropdown--focused:focus {
16697
+ padding: 0.6875rem 1rem;
16698
+ margin: 0;
16699
+ }
16454
16700
 
16455
16701
  .cds--dropdown-list[aria-activedescendant] .cds--dropdown-item:active {
16456
16702
  background-color: inherit;
@@ -16661,19 +16907,19 @@ button.cds--dropdown-text:focus {
16661
16907
  font-family: inherit;
16662
16908
  font-size: 100%;
16663
16909
  vertical-align: baseline;
16664
- animation-duration: 690ms;
16665
- animation-fill-mode: forwards;
16666
- animation-iteration-count: infinite;
16667
- animation-name: cds--rotate;
16668
- animation-timing-function: linear;
16669
- block-size: 5.5rem;
16670
- inline-size: 5.5rem;
16671
16910
  }
16672
16911
  .cds--loading *,
16673
16912
  .cds--loading *::before,
16674
16913
  .cds--loading *::after {
16675
16914
  box-sizing: inherit;
16676
16915
  }
16916
+ .cds--loading {
16917
+ animation-duration: 690ms;
16918
+ animation-fill-mode: forwards;
16919
+ animation-iteration-count: infinite;
16920
+ animation-name: cds--rotate;
16921
+ animation-timing-function: linear;
16922
+ }
16677
16923
  .cds--loading svg circle {
16678
16924
  animation-duration: 10ms;
16679
16925
  animation-name: cds--init-stroke;
@@ -16684,6 +16930,10 @@ button.cds--dropdown-text:focus {
16684
16930
  animation: none;
16685
16931
  }
16686
16932
  }
16933
+ .cds--loading {
16934
+ block-size: 5.5rem;
16935
+ inline-size: 5.5rem;
16936
+ }
16687
16937
 
16688
16938
  .cds--loading__svg {
16689
16939
  fill: transparent;
@@ -16806,14 +17056,6 @@ button.cds--dropdown-text:focus {
16806
17056
  margin-inline-end: 0.5rem;
16807
17057
  }
16808
17058
 
16809
- .cds--file--label {
16810
- font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
16811
- font-weight: var(--cds-heading-compact-01-font-weight, 600);
16812
- line-height: var(--cds-heading-compact-01-line-height, 1.28572);
16813
- letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
16814
- color: var(--cds-text-primary, #161616);
16815
- margin-block-end: 0.5rem;
16816
- }
16817
17059
  .cds--file--label html {
16818
17060
  font-size: 100%;
16819
17061
  }
@@ -16830,6 +17072,14 @@ button.cds--dropdown-text:focus {
16830
17072
  .cds--file--label strong {
16831
17073
  font-weight: 600;
16832
17074
  }
17075
+ .cds--file--label {
17076
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
17077
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
17078
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
17079
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
17080
+ color: var(--cds-text-primary, #161616);
17081
+ margin-block-end: 0.5rem;
17082
+ }
16833
17083
 
16834
17084
  .cds--file--label--disabled {
16835
17085
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -16890,14 +17140,6 @@ button.cds--dropdown-text:focus {
16890
17140
  border: 1px dashed var(--cds-button-disabled, #c6c6c6);
16891
17141
  }
16892
17142
 
16893
- .cds--label-description {
16894
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
16895
- font-weight: var(--cds-body-compact-01-font-weight, 400);
16896
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
16897
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
16898
- color: var(--cds-text-secondary, #525252);
16899
- margin-block-end: 1rem;
16900
- }
16901
17143
  .cds--label-description html {
16902
17144
  font-size: 100%;
16903
17145
  }
@@ -16914,6 +17156,14 @@ button.cds--dropdown-text:focus {
16914
17156
  .cds--label-description strong {
16915
17157
  font-weight: 600;
16916
17158
  }
17159
+ .cds--label-description {
17160
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
17161
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
17162
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
17163
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
17164
+ color: var(--cds-text-secondary, #525252);
17165
+ margin-block-end: 1rem;
17166
+ }
16917
17167
 
16918
17168
  .cds--label-description--disabled {
16919
17169
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -17048,27 +17298,31 @@ button.cds--dropdown-text:focus {
17048
17298
  .cds--file__selected-file--invalid__wrapper {
17049
17299
  outline: 2px solid var(--cds-support-error, #da1e28);
17050
17300
  outline-offset: -2px;
17051
- background-color: var(--cds-layer);
17052
- margin-block-end: 0.5rem;
17053
- max-inline-size: 20rem;
17054
- outline-width: 1px;
17055
17301
  }
17056
17302
  @media screen and (prefers-contrast) {
17057
17303
  .cds--file__selected-file--invalid__wrapper {
17058
17304
  outline-style: dotted;
17059
17305
  }
17060
17306
  }
17307
+ .cds--file__selected-file--invalid__wrapper {
17308
+ background-color: var(--cds-layer);
17309
+ margin-block-end: 0.5rem;
17310
+ max-inline-size: 20rem;
17311
+ outline-width: 1px;
17312
+ }
17061
17313
 
17062
17314
  .cds--file__selected-file--invalid {
17063
17315
  outline: 2px solid var(--cds-support-error, #da1e28);
17064
17316
  outline-offset: -2px;
17065
- padding: 0.75rem 0;
17066
17317
  }
17067
17318
  @media screen and (prefers-contrast) {
17068
17319
  .cds--file__selected-file--invalid {
17069
17320
  outline-style: dotted;
17070
17321
  }
17071
17322
  }
17323
+ .cds--file__selected-file--invalid {
17324
+ padding: 0.75rem 0;
17325
+ }
17072
17326
 
17073
17327
  .cds--file__selected-file--invalid.cds--file__selected-file--sm {
17074
17328
  padding: 0.25rem 0;
@@ -17209,6 +17463,13 @@ button.cds--dropdown-text:focus {
17209
17463
  font-family: inherit;
17210
17464
  font-size: 100%;
17211
17465
  vertical-align: baseline;
17466
+ }
17467
+ .cds--file__drop-container *,
17468
+ .cds--file__drop-container *::before,
17469
+ .cds--file__drop-container *::after {
17470
+ box-sizing: inherit;
17471
+ }
17472
+ .cds--file__drop-container {
17212
17473
  display: inline-block;
17213
17474
  padding: 0;
17214
17475
  border: 0;
@@ -17219,6 +17480,11 @@ button.cds--dropdown-text:focus {
17219
17480
  cursor: pointer;
17220
17481
  text-align: start;
17221
17482
  inline-size: 100%;
17483
+ }
17484
+ .cds--file__drop-container::-moz-focus-inner {
17485
+ border: 0;
17486
+ }
17487
+ .cds--file__drop-container {
17222
17488
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
17223
17489
  font-weight: var(--cds-body-compact-01-font-weight, 400);
17224
17490
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -17231,14 +17497,6 @@ button.cds--dropdown-text:focus {
17231
17497
  border: 1px dashed var(--cds-border-strong);
17232
17498
  block-size: 6rem;
17233
17499
  }
17234
- .cds--file__drop-container *,
17235
- .cds--file__drop-container *::before,
17236
- .cds--file__drop-container *::after {
17237
- box-sizing: inherit;
17238
- }
17239
- .cds--file__drop-container::-moz-focus-inner {
17240
- border: 0;
17241
- }
17242
17500
 
17243
17501
  .cds--file__drop-container--drag-over {
17244
17502
  background: none;
@@ -17323,14 +17581,16 @@ button.cds--dropdown-text:focus {
17323
17581
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus {
17324
17582
  outline: 2px solid var(--cds-focus, #0f62fe);
17325
17583
  outline-offset: -2px;
17326
- z-index: 2;
17327
- outline-offset: 0;
17328
17584
  }
17329
17585
  @media screen and (prefers-contrast) {
17330
17586
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus {
17331
17587
  outline-style: dotted;
17332
17588
  }
17333
17589
  }
17590
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus {
17591
+ z-index: 2;
17592
+ outline-offset: 0;
17593
+ }
17334
17594
 
17335
17595
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--list-box--expanded.cds--multi-select--selected) {
17336
17596
  outline-width: 0.0625rem;
@@ -17344,14 +17604,16 @@ button.cds--dropdown-text:focus {
17344
17604
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
17345
17605
  outline: 2px solid var(--cds-support-error, #da1e28);
17346
17606
  outline-offset: -2px;
17347
- z-index: 2;
17348
- outline-offset: 0;
17349
17607
  }
17350
17608
  @media screen and (prefers-contrast) {
17351
17609
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
17352
17610
  outline-style: dotted;
17353
17611
  }
17354
17612
  }
17613
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
17614
+ z-index: 2;
17615
+ outline-offset: 0;
17616
+ }
17355
17617
 
17356
17618
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--list-box:not(.cds--list-box--invalid),
17357
17619
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--list-box .cds--text-input,
@@ -17435,12 +17697,6 @@ button.cds--dropdown-text:focus {
17435
17697
  background: var(--cds-skeleton-background, #e8e8e8);
17436
17698
  box-shadow: none;
17437
17699
  pointer-events: none;
17438
- position: absolute;
17439
- padding: 0;
17440
- block-size: 0.5rem;
17441
- inline-size: 50%;
17442
- inset-block-start: 2.25rem;
17443
- inset-inline-start: 1rem;
17444
17700
  }
17445
17701
  .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field:hover, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field:focus, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field:active {
17446
17702
  border: none;
@@ -17471,6 +17727,14 @@ button.cds--dropdown-text:focus {
17471
17727
  forced-color-adjust: none;
17472
17728
  }
17473
17729
  }
17730
+ .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field {
17731
+ position: absolute;
17732
+ padding: 0;
17733
+ block-size: 0.5rem;
17734
+ inline-size: 50%;
17735
+ inset-block-start: 2.25rem;
17736
+ inset-inline-start: 1rem;
17737
+ }
17474
17738
 
17475
17739
  .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
17476
17740
  position: relative;
@@ -17479,11 +17743,6 @@ button.cds--dropdown-text:focus {
17479
17743
  background: var(--cds-skeleton-background, #e8e8e8);
17480
17744
  box-shadow: none;
17481
17745
  pointer-events: none;
17482
- position: absolute;
17483
- block-size: 0.5rem;
17484
- inline-size: 25%;
17485
- inset-block-start: 1rem;
17486
- inset-inline-start: 1rem;
17487
17746
  }
17488
17747
  .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label:hover, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label:focus, .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label:active {
17489
17748
  border: none;
@@ -17514,6 +17773,13 @@ button.cds--dropdown-text:focus {
17514
17773
  forced-color-adjust: none;
17515
17774
  }
17516
17775
  }
17776
+ .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
17777
+ position: absolute;
17778
+ block-size: 0.5rem;
17779
+ inline-size: 25%;
17780
+ inset-block-start: 1rem;
17781
+ inset-inline-start: 1rem;
17782
+ }
17517
17783
 
17518
17784
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *,
17519
17785
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--ai-label,
@@ -18129,12 +18395,6 @@ button.cds--dropdown-text:focus {
18129
18395
  display: none;
18130
18396
  }
18131
18397
 
18132
- .cds--number {
18133
- position: relative;
18134
- display: flex;
18135
- flex-direction: column;
18136
- inline-size: 100%;
18137
- }
18138
18398
  .cds--number html {
18139
18399
  font-size: 100%;
18140
18400
  }
@@ -18151,6 +18411,12 @@ button.cds--dropdown-text:focus {
18151
18411
  .cds--number strong {
18152
18412
  font-weight: 600;
18153
18413
  }
18414
+ .cds--number {
18415
+ position: relative;
18416
+ display: flex;
18417
+ flex-direction: column;
18418
+ inline-size: 100%;
18419
+ }
18154
18420
 
18155
18421
  .cds--number .cds--number__input-wrapper--warning input[type=number],
18156
18422
  .cds--number .cds--number__input-wrapper--warning input[type=text] {
@@ -18256,18 +18522,6 @@ button.cds--dropdown-text:focus {
18256
18522
  align-items: center;
18257
18523
  }
18258
18524
 
18259
- .cds--number__controls {
18260
- position: absolute;
18261
- display: flex;
18262
- flex-direction: row;
18263
- align-items: center;
18264
- justify-content: center;
18265
- block-size: 100%;
18266
- inline-size: 5rem;
18267
- inset-block-start: 50%;
18268
- inset-inline-end: 0;
18269
- transform: translateY(-50%);
18270
- }
18271
18525
  .cds--number__controls html {
18272
18526
  font-size: 100%;
18273
18527
  }
@@ -18284,6 +18538,18 @@ button.cds--dropdown-text:focus {
18284
18538
  .cds--number__controls strong {
18285
18539
  font-weight: 600;
18286
18540
  }
18541
+ .cds--number__controls {
18542
+ position: absolute;
18543
+ display: flex;
18544
+ flex-direction: row;
18545
+ align-items: center;
18546
+ justify-content: center;
18547
+ block-size: 100%;
18548
+ inline-size: 5rem;
18549
+ inset-block-start: 50%;
18550
+ inset-inline-end: 0;
18551
+ transform: translateY(-50%);
18552
+ }
18287
18553
 
18288
18554
  .cds--number__control-btn {
18289
18555
  box-sizing: border-box;
@@ -18293,6 +18559,13 @@ button.cds--dropdown-text:focus {
18293
18559
  font-family: inherit;
18294
18560
  font-size: 100%;
18295
18561
  vertical-align: baseline;
18562
+ }
18563
+ .cds--number__control-btn *,
18564
+ .cds--number__control-btn *::before,
18565
+ .cds--number__control-btn *::after {
18566
+ box-sizing: inherit;
18567
+ }
18568
+ .cds--number__control-btn {
18296
18569
  display: inline-block;
18297
18570
  padding: 0;
18298
18571
  border: 0;
@@ -18303,6 +18576,11 @@ button.cds--dropdown-text:focus {
18303
18576
  cursor: pointer;
18304
18577
  text-align: start;
18305
18578
  inline-size: 100%;
18579
+ }
18580
+ .cds--number__control-btn::-moz-focus-inner {
18581
+ border: 0;
18582
+ }
18583
+ .cds--number__control-btn {
18306
18584
  position: relative;
18307
18585
  display: inline-flex;
18308
18586
  align-items: center;
@@ -18310,28 +18588,22 @@ button.cds--dropdown-text:focus {
18310
18588
  block-size: 100%;
18311
18589
  color: var(--cds-icon-primary, #161616);
18312
18590
  }
18313
- .cds--number__control-btn *,
18314
- .cds--number__control-btn *::before,
18315
- .cds--number__control-btn *::after {
18316
- box-sizing: inherit;
18317
- }
18318
- .cds--number__control-btn::-moz-focus-inner {
18319
- border: 0;
18320
- }
18321
18591
  .cds--number__control-btn svg {
18322
18592
  fill: currentColor;
18323
18593
  }
18324
18594
  .cds--number__control-btn:focus {
18325
18595
  outline: 1px solid var(--cds-focus, #0f62fe);
18326
- color: var(--cds-icon-primary, #161616);
18327
- outline-offset: -2px;
18328
- outline-width: 2px;
18329
18596
  }
18330
18597
  @media screen and (prefers-contrast) {
18331
18598
  .cds--number__control-btn:focus {
18332
18599
  outline-style: dotted;
18333
18600
  }
18334
18601
  }
18602
+ .cds--number__control-btn:focus {
18603
+ color: var(--cds-icon-primary, #161616);
18604
+ outline-offset: -2px;
18605
+ outline-width: 2px;
18606
+ }
18335
18607
  .cds--number__control-btn:hover {
18336
18608
  background-color: var(--cds-field-hover);
18337
18609
  box-shadow: 0 -1px 0 var(--cds-border-strong) inset;
@@ -18661,7 +18933,6 @@ button.cds--dropdown-text:focus {
18661
18933
  background: var(--cds-skeleton-background, #e8e8e8);
18662
18934
  box-shadow: none;
18663
18935
  pointer-events: none;
18664
- inline-size: 100%;
18665
18936
  }
18666
18937
  .cds--number.cds--skeleton:hover, .cds--number.cds--skeleton:focus, .cds--number.cds--skeleton:active {
18667
18938
  border: none;
@@ -18692,6 +18963,9 @@ button.cds--dropdown-text:focus {
18692
18963
  forced-color-adjust: none;
18693
18964
  }
18694
18965
  }
18966
+ .cds--number.cds--skeleton {
18967
+ inline-size: 100%;
18968
+ }
18695
18969
  .cds--number.cds--skeleton input[type=number],
18696
18970
  .cds--number.cds--skeleton input[type=text] {
18697
18971
  display: none;
@@ -19065,17 +19339,19 @@ button.cds--dropdown-text:focus {
19065
19339
  font-family: inherit;
19066
19340
  font-size: 100%;
19067
19341
  vertical-align: baseline;
19068
- position: relative;
19069
- display: flex;
19070
- flex-direction: column;
19071
- align-items: flex-start;
19072
- inline-size: 100%;
19073
19342
  }
19074
19343
  .cds--select *,
19075
19344
  .cds--select *::before,
19076
19345
  .cds--select *::after {
19077
19346
  box-sizing: inherit;
19078
19347
  }
19348
+ .cds--select {
19349
+ position: relative;
19350
+ display: flex;
19351
+ flex-direction: column;
19352
+ align-items: flex-start;
19353
+ inline-size: 100%;
19354
+ }
19079
19355
 
19080
19356
  .cds--select-input__wrapper {
19081
19357
  position: relative;
@@ -19109,10 +19385,6 @@ button.cds--dropdown-text:focus {
19109
19385
  padding-inline: 1rem 3rem;
19110
19386
  text-overflow: ellipsis;
19111
19387
  transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
19112
- /* This is for targeting styles specific to firefox */
19113
- /* Removes dotted inner focus */
19114
- /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
19115
- /* stylelint-disable-next-line at-rule-no-vendor-prefix */
19116
19388
  }
19117
19389
  .cds--select-input:hover {
19118
19390
  background-color: var(--cds-field-hover);
@@ -19120,6 +19392,12 @@ button.cds--dropdown-text:focus {
19120
19392
  .cds--select-input::-ms-expand {
19121
19393
  display: none;
19122
19394
  }
19395
+ .cds--select-input {
19396
+ /* This is for targeting styles specific to firefox */
19397
+ /* Removes dotted inner focus */
19398
+ /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
19399
+ /* stylelint-disable-next-line at-rule-no-vendor-prefix */
19400
+ }
19123
19401
  @-moz-document url-prefix() {
19124
19402
  .cds--select-input:-moz-focusring, .cds--select-input::-moz-focus-inner {
19125
19403
  background-image: none;
@@ -19130,13 +19408,15 @@ button.cds--dropdown-text:focus {
19130
19408
  .cds--select-input:focus {
19131
19409
  outline: 2px solid var(--cds-focus, #0f62fe);
19132
19410
  outline-offset: -2px;
19133
- color: var(--cds-text-primary, #161616);
19134
19411
  }
19135
19412
  @media screen and (prefers-contrast) {
19136
19413
  .cds--select-input:focus {
19137
19414
  outline-style: dotted;
19138
19415
  }
19139
19416
  }
19417
+ .cds--select-input:focus {
19418
+ color: var(--cds-text-primary, #161616);
19419
+ }
19140
19420
  .cds--select-input:disabled, .cds--select-input:hover:disabled {
19141
19421
  background-color: var(--cds-field);
19142
19422
  border-block-end-color: transparent;
@@ -19311,8 +19591,6 @@ optgroup.cds--select-optgroup:disabled,
19311
19591
  background: var(--cds-skeleton-background, #e8e8e8);
19312
19592
  box-shadow: none;
19313
19593
  pointer-events: none;
19314
- block-size: 2.5rem;
19315
- inline-size: 100%;
19316
19594
  }
19317
19595
  .cds--select.cds--skeleton:hover, .cds--select.cds--skeleton:focus, .cds--select.cds--skeleton:active {
19318
19596
  border: none;
@@ -19343,6 +19621,10 @@ optgroup.cds--select-optgroup:disabled,
19343
19621
  forced-color-adjust: none;
19344
19622
  }
19345
19623
  }
19624
+ .cds--select.cds--skeleton {
19625
+ block-size: 2.5rem;
19626
+ inline-size: 100%;
19627
+ }
19346
19628
 
19347
19629
  .cds--select.cds--skeleton .cds--select-input {
19348
19630
  display: none;
@@ -19605,6 +19887,13 @@ optgroup.cds--select-optgroup:disabled,
19605
19887
  font-family: inherit;
19606
19888
  font-size: 100%;
19607
19889
  vertical-align: baseline;
19890
+ }
19891
+ .cds--text-area *,
19892
+ .cds--text-area *::before,
19893
+ .cds--text-area *::after {
19894
+ box-sizing: inherit;
19895
+ }
19896
+ .cds--text-area {
19608
19897
  font-size: var(--cds-body-01-font-size, 0.875rem);
19609
19898
  font-weight: var(--cds-body-01-font-weight, 400);
19610
19899
  line-height: var(--cds-body-01-line-height, 1.42857);
@@ -19623,11 +19912,6 @@ optgroup.cds--select-optgroup:disabled,
19623
19912
  resize: vertical;
19624
19913
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
19625
19914
  }
19626
- .cds--text-area *,
19627
- .cds--text-area *::before,
19628
- .cds--text-area *::after {
19629
- box-sizing: inherit;
19630
- }
19631
19915
 
19632
19916
  .cds--text-area:focus,
19633
19917
  .cds--text-area:active {
@@ -19792,8 +20076,6 @@ optgroup.cds--select-optgroup:disabled,
19792
20076
  background: var(--cds-skeleton-background, #e8e8e8);
19793
20077
  box-shadow: none;
19794
20078
  pointer-events: none;
19795
- block-size: 6.25rem;
19796
- inline-size: 100%;
19797
20079
  }
19798
20080
  .cds--text-area.cds--skeleton:hover, .cds--text-area.cds--skeleton:focus, .cds--text-area.cds--skeleton:active {
19799
20081
  border: none;
@@ -19824,6 +20106,10 @@ optgroup.cds--select-optgroup:disabled,
19824
20106
  forced-color-adjust: none;
19825
20107
  }
19826
20108
  }
20109
+ .cds--text-area.cds--skeleton {
20110
+ block-size: 6.25rem;
20111
+ inline-size: 100%;
20112
+ }
19827
20113
  .cds--text-area.cds--skeleton::-moz-placeholder {
19828
20114
  color: transparent;
19829
20115
  }
@@ -20299,13 +20585,15 @@ optgroup.cds--select-optgroup:disabled,
20299
20585
  .cds--time-picker--fluid--invalid {
20300
20586
  outline: 2px solid var(--cds-support-error, #da1e28);
20301
20587
  outline-offset: -2px;
20302
- position: relative;
20303
20588
  }
20304
20589
  @media screen and (prefers-contrast) {
20305
20590
  .cds--time-picker--fluid--invalid {
20306
20591
  outline-style: dotted;
20307
20592
  }
20308
20593
  }
20594
+ .cds--time-picker--fluid--invalid {
20595
+ position: relative;
20596
+ }
20309
20597
 
20310
20598
  .cds--time-picker--fluid--invalid .cds--text-input,
20311
20599
  .cds--time-picker--fluid--invalid .cds--text-input-wrapper,
@@ -20592,11 +20880,6 @@ optgroup.cds--select-optgroup:disabled,
20592
20880
  font-family: inherit;
20593
20881
  font-size: 100%;
20594
20882
  vertical-align: baseline;
20595
- font-size: var(--cds-body-01-font-size, 0.875rem);
20596
- font-weight: var(--cds-body-01-font-weight, 400);
20597
- line-height: var(--cds-body-01-line-height, 1.42857);
20598
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
20599
- list-style: none;
20600
20883
  }
20601
20884
  .cds--list--nested *,
20602
20885
  .cds--list--nested *::before,
@@ -20612,6 +20895,16 @@ optgroup.cds--select-optgroup:disabled,
20612
20895
  .cds--list--ordered--native *::after {
20613
20896
  box-sizing: inherit;
20614
20897
  }
20898
+ .cds--list--nested,
20899
+ .cds--list--unordered,
20900
+ .cds--list--ordered,
20901
+ .cds--list--ordered--native {
20902
+ font-size: var(--cds-body-01-font-size, 0.875rem);
20903
+ font-weight: var(--cds-body-01-font-weight, 400);
20904
+ line-height: var(--cds-body-01-line-height, 1.42857);
20905
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
20906
+ list-style: none;
20907
+ }
20615
20908
 
20616
20909
  .cds--list--unordered:not(.cds--list--nested) {
20617
20910
  margin-inline-start: 1rem;
@@ -20833,7 +21126,6 @@ optgroup.cds--select-optgroup:disabled,
20833
21126
  position: fixed;
20834
21127
  display: grid;
20835
21128
  background-color: var(--cds-layer);
20836
- block-size: 100%;
20837
21129
  grid-template-columns: 100%;
20838
21130
  grid-template-rows: auto 1fr auto;
20839
21131
  inline-size: 100%;
@@ -20846,7 +21138,6 @@ optgroup.cds--select-optgroup:disabled,
20846
21138
  @media (min-width: 42rem) {
20847
21139
  .cds--modal-container {
20848
21140
  position: relative;
20849
- block-size: auto;
20850
21141
  inline-size: 84%;
20851
21142
  max-block-size: 90%;
20852
21143
  }
@@ -20925,6 +21216,13 @@ optgroup.cds--select-optgroup:disabled,
20925
21216
  font-family: inherit;
20926
21217
  font-size: 100%;
20927
21218
  vertical-align: baseline;
21219
+ }
21220
+ .cds--modal-header__label *,
21221
+ .cds--modal-header__label *::before,
21222
+ .cds--modal-header__label *::after {
21223
+ box-sizing: inherit;
21224
+ }
21225
+ .cds--modal-header__label {
20928
21226
  font-size: var(--cds-label-01-font-size, 0.75rem);
20929
21227
  font-weight: var(--cds-label-01-font-weight, 400);
20930
21228
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -20932,11 +21230,6 @@ optgroup.cds--select-optgroup:disabled,
20932
21230
  color: var(--cds-text-secondary, #525252);
20933
21231
  margin-block-end: 0.25rem;
20934
21232
  }
20935
- .cds--modal-header__label *,
20936
- .cds--modal-header__label *::before,
20937
- .cds--modal-header__label *::after {
20938
- box-sizing: inherit;
20939
- }
20940
21233
 
20941
21234
  .cds--modal-header__heading {
20942
21235
  box-sizing: border-box;
@@ -20946,6 +21239,13 @@ optgroup.cds--select-optgroup:disabled,
20946
21239
  font-family: inherit;
20947
21240
  font-size: 100%;
20948
21241
  vertical-align: baseline;
21242
+ }
21243
+ .cds--modal-header__heading *,
21244
+ .cds--modal-header__heading *::before,
21245
+ .cds--modal-header__heading *::after {
21246
+ box-sizing: inherit;
21247
+ }
21248
+ .cds--modal-header__heading {
20949
21249
  font-size: var(--cds-heading-03-font-size, 1.25rem);
20950
21250
  font-weight: var(--cds-heading-03-font-weight, 400);
20951
21251
  line-height: var(--cds-heading-03-line-height, 1.4);
@@ -20953,11 +21253,6 @@ optgroup.cds--select-optgroup:disabled,
20953
21253
  color: var(--cds-text-primary, #161616);
20954
21254
  padding-inline-end: calc(20% - 3rem);
20955
21255
  }
20956
- .cds--modal-header__heading *,
20957
- .cds--modal-header__heading *::before,
20958
- .cds--modal-header__heading *::after {
20959
- box-sizing: inherit;
20960
- }
20961
21256
 
20962
21257
  .cds--modal-container--xs .cds--modal-content__regular-content {
20963
21258
  padding-inline-end: 1rem;
@@ -21182,17 +21477,6 @@ optgroup.cds--select-optgroup:disabled,
21182
21477
  }
21183
21478
  }
21184
21479
 
21185
- .cds--inline-notification {
21186
- position: relative;
21187
- display: flex;
21188
- flex-wrap: wrap;
21189
- block-size: auto;
21190
- color: var(--cds-text-inverse, #ffffff);
21191
- inline-size: 100%;
21192
- max-inline-size: 18rem;
21193
- min-block-size: 3rem;
21194
- min-inline-size: 18rem;
21195
- }
21196
21480
  .cds--inline-notification html {
21197
21481
  font-size: 100%;
21198
21482
  }
@@ -21209,6 +21493,17 @@ optgroup.cds--select-optgroup:disabled,
21209
21493
  .cds--inline-notification strong {
21210
21494
  font-weight: 600;
21211
21495
  }
21496
+ .cds--inline-notification {
21497
+ position: relative;
21498
+ display: flex;
21499
+ flex-wrap: wrap;
21500
+ block-size: auto;
21501
+ color: var(--cds-text-inverse, #ffffff);
21502
+ inline-size: 100%;
21503
+ max-inline-size: 18rem;
21504
+ min-block-size: 3rem;
21505
+ min-inline-size: 18rem;
21506
+ }
21212
21507
  @media (min-width: 42rem) {
21213
21508
  .cds--inline-notification {
21214
21509
  flex-wrap: nowrap;
@@ -21524,14 +21819,6 @@ optgroup.cds--select-optgroup:disabled,
21524
21819
  }
21525
21820
  }
21526
21821
 
21527
- .cds--toast-notification {
21528
- display: flex;
21529
- block-size: auto;
21530
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
21531
- color: var(--cds-text-inverse, #ffffff);
21532
- inline-size: 18rem;
21533
- padding-inline-start: 0.8125rem;
21534
- }
21535
21822
  .cds--toast-notification html {
21536
21823
  font-size: 100%;
21537
21824
  }
@@ -21548,6 +21835,14 @@ optgroup.cds--select-optgroup:disabled,
21548
21835
  .cds--toast-notification strong {
21549
21836
  font-weight: 600;
21550
21837
  }
21838
+ .cds--toast-notification {
21839
+ display: flex;
21840
+ block-size: auto;
21841
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
21842
+ color: var(--cds-text-inverse, #ffffff);
21843
+ inline-size: 18rem;
21844
+ padding-inline-start: 0.8125rem;
21845
+ }
21551
21846
  @media (min-width: 99rem) {
21552
21847
  .cds--toast-notification {
21553
21848
  inline-size: 22rem;
@@ -21786,17 +22081,6 @@ optgroup.cds--select-optgroup:disabled,
21786
22081
  }
21787
22082
  }
21788
22083
 
21789
- .cds--actionable-notification {
21790
- position: relative;
21791
- display: flex;
21792
- flex-wrap: wrap;
21793
- block-size: auto;
21794
- color: var(--cds-text-inverse, #ffffff);
21795
- inline-size: 100%;
21796
- max-inline-size: 18rem;
21797
- min-block-size: 3rem;
21798
- min-inline-size: 18rem;
21799
- }
21800
22084
  .cds--actionable-notification html {
21801
22085
  font-size: 100%;
21802
22086
  }
@@ -21813,6 +22097,17 @@ optgroup.cds--select-optgroup:disabled,
21813
22097
  .cds--actionable-notification strong {
21814
22098
  font-weight: 600;
21815
22099
  }
22100
+ .cds--actionable-notification {
22101
+ position: relative;
22102
+ display: flex;
22103
+ flex-wrap: wrap;
22104
+ block-size: auto;
22105
+ color: var(--cds-text-inverse, #ffffff);
22106
+ inline-size: 100%;
22107
+ max-inline-size: 18rem;
22108
+ min-block-size: 3rem;
22109
+ min-inline-size: 18rem;
22110
+ }
21816
22111
  @media (min-width: 42rem) {
21817
22112
  .cds--actionable-notification {
21818
22113
  flex-wrap: nowrap;
@@ -22316,13 +22611,6 @@ optgroup.cds--select-optgroup:disabled,
22316
22611
  padding: 1.5rem 0;
22317
22612
  }
22318
22613
 
22319
- .cds--page-header__content__title-wrapper {
22320
- display: grid;
22321
- gap: 1rem;
22322
- grid-template-columns: auto minmax(var(--pageheader-title-grid-width, 0), 1fr);
22323
- margin-block-end: 1rem;
22324
- min-block-size: 2.5rem;
22325
- }
22326
22614
  @media (max-width: 41.98rem) {
22327
22615
  .cds--page-header__content__title-wrapper {
22328
22616
  display: flex;
@@ -22330,6 +22618,13 @@ optgroup.cds--select-optgroup:disabled,
22330
22618
  grid-gap: 1rem;
22331
22619
  }
22332
22620
  }
22621
+ .cds--page-header__content__title-wrapper {
22622
+ display: grid;
22623
+ gap: 1rem;
22624
+ grid-template-columns: auto minmax(var(--pageheader-title-grid-width, 0), 1fr);
22625
+ margin-block-end: 1rem;
22626
+ min-block-size: 2.5rem;
22627
+ }
22333
22628
 
22334
22629
  .cds--page-header__content__start {
22335
22630
  display: flex;
@@ -22453,11 +22748,19 @@ optgroup.cds--select-optgroup:disabled,
22453
22748
  font-family: inherit;
22454
22749
  font-size: 100%;
22455
22750
  vertical-align: baseline;
22751
+ }
22752
+ .cds--pagination *,
22753
+ .cds--pagination *::before,
22754
+ .cds--pagination *::after {
22755
+ box-sizing: inherit;
22756
+ }
22757
+ .cds--pagination {
22456
22758
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
22457
22759
  font-weight: var(--cds-body-compact-01-font-weight, 400);
22458
22760
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
22459
22761
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
22460
22762
  display: flex;
22763
+ overflow: initial;
22461
22764
  align-items: center;
22462
22765
  justify-content: space-between;
22463
22766
  background-color: var(--cds-layer);
@@ -22466,17 +22769,8 @@ optgroup.cds--select-optgroup:disabled,
22466
22769
  container-type: inline-size;
22467
22770
  inline-size: calc(100% - 1px);
22468
22771
  min-block-size: 2.5rem;
22469
- overflow-x: auto;
22470
- }
22471
- .cds--pagination *,
22472
- .cds--pagination *::before,
22473
- .cds--pagination *::after {
22474
- box-sizing: inherit;
22475
22772
  }
22476
22773
  @container pagination (min-width: 42rem) {
22477
- .cds--pagination {
22478
- overflow: initial;
22479
- }
22480
22774
  .cds--pagination .cds--pagination__control-buttons {
22481
22775
  display: flex;
22482
22776
  }
@@ -22634,6 +22928,17 @@ span.cds--pagination__text.cds--pagination__items-count {
22634
22928
  font-family: inherit;
22635
22929
  font-size: 100%;
22636
22930
  vertical-align: baseline;
22931
+ }
22932
+ .cds--pagination__button *,
22933
+ .cds--pagination__button *::before,
22934
+ .cds--pagination__button *::after,
22935
+ .cds--btn--ghost.cds--pagination__button *,
22936
+ .cds--btn--ghost.cds--pagination__button *::before,
22937
+ .cds--btn--ghost.cds--pagination__button *::after {
22938
+ box-sizing: inherit;
22939
+ }
22940
+ .cds--pagination__button,
22941
+ .cds--btn--ghost.cds--pagination__button {
22637
22942
  display: flex;
22638
22943
  align-items: center;
22639
22944
  justify-content: center;
@@ -22648,14 +22953,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22648
22953
  min-block-size: 2rem;
22649
22954
  transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
22650
22955
  }
22651
- .cds--pagination__button *,
22652
- .cds--pagination__button *::before,
22653
- .cds--pagination__button *::after,
22654
- .cds--btn--ghost.cds--pagination__button *,
22655
- .cds--btn--ghost.cds--pagination__button *::before,
22656
- .cds--btn--ghost.cds--pagination__button *::after {
22657
- box-sizing: inherit;
22658
- }
22659
22956
 
22660
22957
  .cds--pagination__button > svg,
22661
22958
  .cds--btn--ghost.cds--pagination__button > svg {
@@ -22683,7 +22980,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22683
22980
  .cds--btn--ghost:focus.cds--pagination__button {
22684
22981
  outline: 2px solid var(--cds-focus, #0f62fe);
22685
22982
  outline-offset: -2px;
22686
- border-inline-start: 0;
22687
22983
  }
22688
22984
  @media screen and (prefers-contrast) {
22689
22985
  .cds--pagination__button:focus,
@@ -22691,6 +22987,10 @@ span.cds--pagination__text.cds--pagination__items-count {
22691
22987
  outline-style: dotted;
22692
22988
  }
22693
22989
  }
22990
+ .cds--pagination__button:focus,
22991
+ .cds--btn--ghost:focus.cds--pagination__button {
22992
+ border-inline-start: 0;
22993
+ }
22694
22994
 
22695
22995
  .cds--pagination__button:hover,
22696
22996
  .cds--btn--ghost:hover.cds--pagination__button {
@@ -22737,6 +23037,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22737
23037
  font-family: inherit;
22738
23038
  font-size: 100%;
22739
23039
  vertical-align: baseline;
23040
+ }
23041
+ .cds--unstable-pagination *,
23042
+ .cds--unstable-pagination *::before,
23043
+ .cds--unstable-pagination *::after {
23044
+ box-sizing: inherit;
23045
+ }
23046
+ .cds--unstable-pagination {
22740
23047
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
22741
23048
  font-weight: var(--cds-body-compact-01-font-weight, 400);
22742
23049
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -22752,21 +23059,16 @@ span.cds--pagination__text.cds--pagination__items-count {
22752
23059
  inline-size: 100%;
22753
23060
  min-block-size: 2.5rem;
22754
23061
  }
22755
- .cds--unstable-pagination *,
22756
- .cds--unstable-pagination *::before,
22757
- .cds--unstable-pagination *::after {
22758
- box-sizing: inherit;
22759
- }
22760
23062
 
22761
- .cds--unstable-pagination__text {
22762
- margin: 0 1rem;
22763
- color: var(--cds-text-secondary, #525252);
22764
- }
22765
23063
  @container pagination (min-width: 42rem) {
22766
23064
  .cds--unstable-pagination__text {
22767
23065
  display: inline-block;
22768
23066
  }
22769
23067
  }
23068
+ .cds--unstable-pagination__text {
23069
+ margin: 0 1rem;
23070
+ color: var(--cds-text-secondary, #525252);
23071
+ }
22770
23072
 
22771
23073
  .cds--unstable-pagination__left,
22772
23074
  .cds--unstable-pagination__right {
@@ -22800,6 +23102,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22800
23102
  font-family: inherit;
22801
23103
  font-size: 100%;
22802
23104
  vertical-align: baseline;
23105
+ }
23106
+ .cds--unstable-pagination__button *,
23107
+ .cds--unstable-pagination__button *::before,
23108
+ .cds--unstable-pagination__button *::after {
23109
+ box-sizing: inherit;
23110
+ }
23111
+ .cds--unstable-pagination__button {
22803
23112
  display: flex;
22804
23113
  align-items: center;
22805
23114
  justify-content: center;
@@ -22815,11 +23124,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22815
23124
  min-block-size: 2rem;
22816
23125
  transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
22817
23126
  }
22818
- .cds--unstable-pagination__button *,
22819
- .cds--unstable-pagination__button *::before,
22820
- .cds--unstable-pagination__button *::after {
22821
- box-sizing: inherit;
22822
- }
22823
23127
 
22824
23128
  .cds--unstable-pagination__button .cds--btn__icon {
22825
23129
  block-size: initial;
@@ -22908,15 +23212,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22908
23212
  border-inline-end: 1px solid var(--cds-border-subtle);
22909
23213
  }
22910
23214
 
22911
- .cds--pagination-nav {
22912
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
22913
- font-weight: var(--cds-body-compact-01-font-weight, 400);
22914
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
22915
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
22916
- --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-lg)));
22917
- --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));
22918
- line-height: 0;
22919
- }
22920
23215
  .cds--pagination-nav html {
22921
23216
  font-size: 100%;
22922
23217
  }
@@ -22933,6 +23228,15 @@ span.cds--pagination__text.cds--pagination__items-count {
22933
23228
  .cds--pagination-nav strong {
22934
23229
  font-weight: 600;
22935
23230
  }
23231
+ .cds--pagination-nav {
23232
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
23233
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
23234
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
23235
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
23236
+ --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-lg)));
23237
+ --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));
23238
+ line-height: 0;
23239
+ }
22936
23240
 
22937
23241
  .cds--pagination-nav__list {
22938
23242
  display: flex;
@@ -22962,6 +23266,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22962
23266
  font-family: inherit;
22963
23267
  font-size: 100%;
22964
23268
  vertical-align: baseline;
23269
+ }
23270
+ .cds--pagination-nav__page *,
23271
+ .cds--pagination-nav__page *::before,
23272
+ .cds--pagination-nav__page *::after {
23273
+ box-sizing: inherit;
23274
+ }
23275
+ .cds--pagination-nav__page {
22965
23276
  display: inline-block;
22966
23277
  padding: 0;
22967
23278
  border: 0;
@@ -22971,6 +23282,11 @@ span.cds--pagination__text.cds--pagination__items-count {
22971
23282
  background: none;
22972
23283
  cursor: pointer;
22973
23284
  text-align: start;
23285
+ }
23286
+ .cds--pagination-nav__page::-moz-focus-inner {
23287
+ border: 0;
23288
+ }
23289
+ .cds--pagination-nav__page {
22974
23290
  position: relative;
22975
23291
  display: block;
22976
23292
  padding: calc((var(--cds-layout-size-height-local) - 0.875rem) / 2) 0.25rem;
@@ -22979,21 +23295,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22979
23295
  font-weight: 400;
22980
23296
  line-height: 1;
22981
23297
  min-inline-size: var(--cds-layout-size-height-local);
22982
- outline: 0;
22983
- text-align: center;
22984
- text-decoration: none;
22985
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
22986
- -webkit-user-select: none;
22987
- -moz-user-select: none;
22988
- user-select: none;
22989
- }
22990
- .cds--pagination-nav__page *,
22991
- .cds--pagination-nav__page *::before,
22992
- .cds--pagination-nav__page *::after {
22993
- box-sizing: inherit;
22994
- }
22995
- .cds--pagination-nav__page::-moz-focus-inner {
22996
- border: 0;
23298
+ outline: 0;
23299
+ text-align: center;
23300
+ text-decoration: none;
23301
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
23302
+ -webkit-user-select: none;
23303
+ -moz-user-select: none;
23304
+ user-select: none;
22997
23305
  }
22998
23306
  .cds--pagination-nav__page:hover {
22999
23307
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
@@ -23324,14 +23632,16 @@ span.cds--pagination__text.cds--pagination__items-count {
23324
23632
  font-family: inherit;
23325
23633
  font-size: 100%;
23326
23634
  vertical-align: baseline;
23327
- display: flex;
23328
- list-style: none;
23329
23635
  }
23330
23636
  .cds--progress *,
23331
23637
  .cds--progress *::before,
23332
23638
  .cds--progress *::after {
23333
23639
  box-sizing: inherit;
23334
23640
  }
23641
+ .cds--progress {
23642
+ display: flex;
23643
+ list-style: none;
23644
+ }
23335
23645
 
23336
23646
  .cds--progress-step {
23337
23647
  position: relative;
@@ -23500,6 +23810,13 @@ span.cds--pagination__text.cds--pagination__items-count {
23500
23810
  font-family: inherit;
23501
23811
  font-size: 100%;
23502
23812
  vertical-align: baseline;
23813
+ }
23814
+ .cds--progress-step-button *,
23815
+ .cds--progress-step-button *::before,
23816
+ .cds--progress-step-button *::after {
23817
+ box-sizing: inherit;
23818
+ }
23819
+ .cds--progress-step-button {
23503
23820
  display: inline-block;
23504
23821
  padding: 0;
23505
23822
  border: 0;
@@ -23510,17 +23827,14 @@ span.cds--pagination__text.cds--pagination__items-count {
23510
23827
  cursor: pointer;
23511
23828
  text-align: start;
23512
23829
  inline-size: 100%;
23513
- display: flex;
23514
- text-align: start;
23515
- }
23516
- .cds--progress-step-button *,
23517
- .cds--progress-step-button *::before,
23518
- .cds--progress-step-button *::after {
23519
- box-sizing: inherit;
23520
23830
  }
23521
23831
  .cds--progress-step-button::-moz-focus-inner {
23522
23832
  border: 0;
23523
23833
  }
23834
+ .cds--progress-step-button {
23835
+ display: flex;
23836
+ text-align: start;
23837
+ }
23524
23838
 
23525
23839
  .cds--progress-step-button--unclickable {
23526
23840
  cursor: default;
@@ -23571,9 +23885,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23571
23885
  background: var(--cds-skeleton-background, #e8e8e8);
23572
23886
  box-shadow: none;
23573
23887
  pointer-events: none;
23574
- block-size: 0.875rem;
23575
- inline-size: 2.5rem;
23576
- margin-block-start: 0.625rem;
23577
23888
  }
23578
23889
  .cds--progress.cds--skeleton .cds--progress-label:hover, .cds--progress.cds--skeleton .cds--progress-label:focus, .cds--progress.cds--skeleton .cds--progress-label:active {
23579
23890
  border: none;
@@ -23604,6 +23915,11 @@ span.cds--pagination__text.cds--pagination__items-count {
23604
23915
  forced-color-adjust: none;
23605
23916
  }
23606
23917
  }
23918
+ .cds--progress.cds--skeleton .cds--progress-label {
23919
+ block-size: 0.875rem;
23920
+ inline-size: 2.5rem;
23921
+ margin-block-start: 0.625rem;
23922
+ }
23607
23923
 
23608
23924
  .cds--progress.cds--progress--vertical.cds--skeleton .cds--progress-label {
23609
23925
  margin-block-start: 0.0625rem;
@@ -23749,9 +24065,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23749
24065
  background: var(--cds-skeleton-background, #e8e8e8);
23750
24066
  box-shadow: none;
23751
24067
  pointer-events: none;
23752
- display: inline-block;
23753
- block-size: 1rem;
23754
- inline-size: 1rem;
23755
24068
  }
23756
24069
  .cds--icon--skeleton:hover, .cds--icon--skeleton:focus, .cds--icon--skeleton:active {
23757
24070
  border: none;
@@ -23782,6 +24095,11 @@ span.cds--pagination__text.cds--pagination__items-count {
23782
24095
  forced-color-adjust: none;
23783
24096
  }
23784
24097
  }
24098
+ .cds--icon--skeleton {
24099
+ display: inline-block;
24100
+ block-size: 1rem;
24101
+ inline-size: 1rem;
24102
+ }
23785
24103
 
23786
24104
  .cds--skeleton__placeholder {
23787
24105
  position: relative;
@@ -23790,8 +24108,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23790
24108
  background: var(--cds-skeleton-background, #e8e8e8);
23791
24109
  box-shadow: none;
23792
24110
  pointer-events: none;
23793
- block-size: 6.25rem;
23794
- inline-size: 6.25rem;
23795
24111
  }
23796
24112
  .cds--skeleton__placeholder:hover, .cds--skeleton__placeholder:focus, .cds--skeleton__placeholder:active {
23797
24113
  border: none;
@@ -23822,6 +24138,10 @@ span.cds--pagination__text.cds--pagination__items-count {
23822
24138
  forced-color-adjust: none;
23823
24139
  }
23824
24140
  }
24141
+ .cds--skeleton__placeholder {
24142
+ block-size: 6.25rem;
24143
+ inline-size: 6.25rem;
24144
+ }
23825
24145
 
23826
24146
  .cds--skeleton__text {
23827
24147
  position: relative;
@@ -23830,9 +24150,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23830
24150
  background: var(--cds-skeleton-background, #e8e8e8);
23831
24151
  box-shadow: none;
23832
24152
  pointer-events: none;
23833
- block-size: 1rem;
23834
- inline-size: 100%;
23835
- margin-block-end: 0.5rem;
23836
24153
  }
23837
24154
  .cds--skeleton__text:hover, .cds--skeleton__text:focus, .cds--skeleton__text:active {
23838
24155
  border: none;
@@ -23863,6 +24180,11 @@ span.cds--pagination__text.cds--pagination__items-count {
23863
24180
  forced-color-adjust: none;
23864
24181
  }
23865
24182
  }
24183
+ .cds--skeleton__text {
24184
+ block-size: 1rem;
24185
+ inline-size: 100%;
24186
+ margin-block-end: 0.5rem;
24187
+ }
23866
24188
 
23867
24189
  .cds--skeleton__heading {
23868
24190
  block-size: 1.5rem;
@@ -24288,8 +24610,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24288
24610
  background: var(--cds-skeleton-background, #e8e8e8);
24289
24611
  box-shadow: none;
24290
24612
  pointer-events: none;
24291
- block-size: 0.75rem;
24292
- inline-size: 1.25rem;
24293
24613
  }
24294
24614
  .cds--slider-container.cds--skeleton .cds--slider__range-label:hover, .cds--slider-container.cds--skeleton .cds--slider__range-label:focus, .cds--slider-container.cds--skeleton .cds--slider__range-label:active {
24295
24615
  border: none;
@@ -24320,6 +24640,10 @@ span.cds--pagination__text.cds--pagination__items-count {
24320
24640
  forced-color-adjust: none;
24321
24641
  }
24322
24642
  }
24643
+ .cds--slider-container.cds--skeleton .cds--slider__range-label {
24644
+ block-size: 0.75rem;
24645
+ inline-size: 1.25rem;
24646
+ }
24323
24647
 
24324
24648
  .cds--slider-container.cds--skeleton .cds--slider__track {
24325
24649
  cursor: default;
@@ -24455,6 +24779,13 @@ span.cds--pagination__text.cds--pagination__items-count {
24455
24779
  font-family: inherit;
24456
24780
  font-size: 100%;
24457
24781
  vertical-align: baseline;
24782
+ }
24783
+ .cds--structured-list *,
24784
+ .cds--structured-list *::before,
24785
+ .cds--structured-list *::after {
24786
+ box-sizing: inherit;
24787
+ }
24788
+ .cds--structured-list {
24458
24789
  display: table;
24459
24790
  background-color: var(--cds-layer) transparent;
24460
24791
  border-collapse: collapse;
@@ -24462,11 +24793,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24462
24793
  inline-size: 100%;
24463
24794
  overflow-x: auto;
24464
24795
  }
24465
- .cds--structured-list *,
24466
- .cds--structured-list *::before,
24467
- .cds--structured-list *::after {
24468
- box-sizing: inherit;
24469
- }
24470
24796
  .cds--structured-list.cds--structured-list--condensed .cds--structured-list-td, .cds--structured-list.cds--structured-list--condensed .cds--structured-list-th {
24471
24797
  padding: 0.5rem;
24472
24798
  }
@@ -24537,6 +24863,13 @@ span.cds--pagination__text.cds--pagination__items-count {
24537
24863
  font-family: inherit;
24538
24864
  font-size: 100%;
24539
24865
  vertical-align: baseline;
24866
+ }
24867
+ .cds--structured-list-th *,
24868
+ .cds--structured-list-th *::before,
24869
+ .cds--structured-list-th *::after {
24870
+ box-sizing: inherit;
24871
+ }
24872
+ .cds--structured-list-th {
24540
24873
  padding: 1rem 0.5rem 0.5rem 0.5rem;
24541
24874
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
24542
24875
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -24550,11 +24883,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24550
24883
  text-transform: none;
24551
24884
  vertical-align: top;
24552
24885
  }
24553
- .cds--structured-list-th *,
24554
- .cds--structured-list-th *::before,
24555
- .cds--structured-list-th *::after {
24556
- box-sizing: inherit;
24557
- }
24558
24886
 
24559
24887
  .cds--structured-list-tbody {
24560
24888
  display: table-row-group;
@@ -24569,6 +24897,13 @@ span.cds--pagination__text.cds--pagination__items-count {
24569
24897
  font-family: inherit;
24570
24898
  font-size: 100%;
24571
24899
  vertical-align: baseline;
24900
+ }
24901
+ .cds--structured-list-td *,
24902
+ .cds--structured-list-td *::before,
24903
+ .cds--structured-list-td *::after {
24904
+ box-sizing: inherit;
24905
+ }
24906
+ .cds--structured-list-td {
24572
24907
  font-size: var(--cds-body-01-font-size, 0.875rem);
24573
24908
  font-weight: var(--cds-body-01-font-weight, 400);
24574
24909
  line-height: var(--cds-body-01-line-height, 1.42857);
@@ -24580,11 +24915,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24580
24915
  max-inline-size: 36rem;
24581
24916
  transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
24582
24917
  }
24583
- .cds--structured-list-td *,
24584
- .cds--structured-list-td *::before,
24585
- .cds--structured-list-td *::after {
24586
- box-sizing: inherit;
24587
- }
24588
24918
 
24589
24919
  .cds--structured-list-content--nowrap {
24590
24920
  white-space: nowrap;
@@ -24631,9 +24961,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24631
24961
  background: var(--cds-skeleton-background, #e8e8e8);
24632
24962
  box-shadow: none;
24633
24963
  pointer-events: none;
24634
- display: block;
24635
- block-size: 1rem;
24636
- inline-size: 75%;
24637
24964
  }
24638
24965
  .cds--structured-list.cds--skeleton span:hover, .cds--structured-list.cds--skeleton span:focus, .cds--structured-list.cds--skeleton span:active {
24639
24966
  border: none;
@@ -24664,6 +24991,11 @@ span.cds--pagination__text.cds--pagination__items-count {
24664
24991
  forced-color-adjust: none;
24665
24992
  }
24666
24993
  }
24994
+ .cds--structured-list.cds--skeleton span {
24995
+ display: block;
24996
+ block-size: 1rem;
24997
+ inline-size: 75%;
24998
+ }
24667
24999
 
24668
25000
  .cds--structured-list.cds--structured-list--selection.cds--skeleton .cds--structured-list-th:first-child {
24669
25001
  inline-size: 5%;
@@ -24715,21 +25047,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24715
25047
  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-lg)), var(--cds-layout-size-height, var(--cds-layout-size-height-xl)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
24716
25048
  }
24717
25049
 
24718
- .cds--tabs {
24719
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
24720
- font-weight: var(--cds-body-compact-01-font-weight, 400);
24721
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
24722
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
24723
- --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)));
24724
- position: relative;
24725
- display: flex;
24726
- block-size: auto;
24727
- color: var(--cds-text-primary, #161616);
24728
- inline-size: 100%;
24729
- max-block-size: var(--cds-layout-size-height-xl);
24730
- min-block-size: var(--cds-layout-size-height-local);
24731
- overflow-x: hidden;
24732
- }
24733
25050
  .cds--tabs html {
24734
25051
  font-size: 100%;
24735
25052
  }
@@ -24746,6 +25063,21 @@ span.cds--pagination__text.cds--pagination__items-count {
24746
25063
  .cds--tabs strong {
24747
25064
  font-weight: 600;
24748
25065
  }
25066
+ .cds--tabs {
25067
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
25068
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
25069
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
25070
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
25071
+ --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)));
25072
+ position: relative;
25073
+ display: flex;
25074
+ block-size: auto;
25075
+ color: var(--cds-text-primary, #161616);
25076
+ inline-size: 100%;
25077
+ max-block-size: var(--cds-layout-size-height-xl);
25078
+ min-block-size: var(--cds-layout-size-height-local);
25079
+ overflow-x: hidden;
25080
+ }
24749
25081
  .cds--tabs.cds--tabs--contained {
24750
25082
  --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)));
24751
25083
  }
@@ -24800,13 +25132,15 @@ span.cds--pagination__text.cds--pagination__items-count {
24800
25132
  font-family: inherit;
24801
25133
  font-size: 100%;
24802
25134
  vertical-align: baseline;
24803
- display: flex;
24804
25135
  }
24805
25136
  .cds--tabs .cds--tabs__nav *,
24806
25137
  .cds--tabs .cds--tabs__nav *::before,
24807
25138
  .cds--tabs .cds--tabs__nav *::after {
24808
25139
  box-sizing: inherit;
24809
25140
  }
25141
+ .cds--tabs .cds--tabs__nav {
25142
+ display: flex;
25143
+ }
24810
25144
  .cds--tabs .cds--tab--overflow-nav-button {
24811
25145
  box-sizing: border-box;
24812
25146
  padding: 0;
@@ -24815,6 +25149,13 @@ span.cds--pagination__text.cds--pagination__items-count {
24815
25149
  font-family: inherit;
24816
25150
  font-size: 100%;
24817
25151
  vertical-align: baseline;
25152
+ }
25153
+ .cds--tabs .cds--tab--overflow-nav-button *,
25154
+ .cds--tabs .cds--tab--overflow-nav-button *::before,
25155
+ .cds--tabs .cds--tab--overflow-nav-button *::after {
25156
+ box-sizing: inherit;
25157
+ }
25158
+ .cds--tabs .cds--tab--overflow-nav-button {
24818
25159
  display: inline-block;
24819
25160
  padding: 0;
24820
25161
  border: 0;
@@ -24825,6 +25166,11 @@ span.cds--pagination__text.cds--pagination__items-count {
24825
25166
  cursor: pointer;
24826
25167
  text-align: start;
24827
25168
  inline-size: 100%;
25169
+ }
25170
+ .cds--tabs .cds--tab--overflow-nav-button::-moz-focus-inner {
25171
+ border: 0;
25172
+ }
25173
+ .cds--tabs .cds--tab--overflow-nav-button {
24828
25174
  display: flex;
24829
25175
  flex-shrink: 0;
24830
25176
  align-items: center;
@@ -24832,14 +25178,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24832
25178
  background-color: var(--cds-background, #ffffff);
24833
25179
  inline-size: 2.5rem;
24834
25180
  }
24835
- .cds--tabs .cds--tab--overflow-nav-button *,
24836
- .cds--tabs .cds--tab--overflow-nav-button *::before,
24837
- .cds--tabs .cds--tab--overflow-nav-button *::after {
24838
- box-sizing: inherit;
24839
- }
24840
- .cds--tabs .cds--tab--overflow-nav-button::-moz-focus-inner {
24841
- border: 0;
24842
- }
24843
25181
  .cds--tabs .cds--tab--overflow-nav-button:focus {
24844
25182
  outline: 2px solid var(--cds-focus, #0f62fe);
24845
25183
  outline-offset: -2px;
@@ -24942,14 +25280,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24942
25280
  position: relative;
24943
25281
  inset-block-start: 0.0625rem;
24944
25282
  }
24945
- .cds--tabs .cds--tabs__nav-item {
24946
- position: relative;
24947
- display: flex;
24948
- flex: 1 0 auto;
24949
- padding: 0;
24950
- cursor: pointer;
24951
- transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
24952
- }
24953
25283
  .cds--tabs .cds--tabs__nav-item html {
24954
25284
  font-size: 100%;
24955
25285
  }
@@ -24966,6 +25296,14 @@ span.cds--pagination__text.cds--pagination__items-count {
24966
25296
  .cds--tabs .cds--tabs__nav-item strong {
24967
25297
  font-weight: 600;
24968
25298
  }
25299
+ .cds--tabs .cds--tabs__nav-item {
25300
+ position: relative;
25301
+ display: flex;
25302
+ flex: 1 0 auto;
25303
+ padding: 0;
25304
+ cursor: pointer;
25305
+ transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25306
+ }
24969
25307
  .cds--tabs .cds--tabs__nav-item + .cds--tabs__nav-item {
24970
25308
  margin-inline-start: 0.0625rem;
24971
25309
  }
@@ -25028,6 +25366,13 @@ span.cds--pagination__text.cds--pagination__items-count {
25028
25366
  font-family: inherit;
25029
25367
  font-size: 100%;
25030
25368
  vertical-align: baseline;
25369
+ }
25370
+ .cds--tabs .cds--tabs__nav-item--close-icon *,
25371
+ .cds--tabs .cds--tabs__nav-item--close-icon *::before,
25372
+ .cds--tabs .cds--tabs__nav-item--close-icon *::after {
25373
+ box-sizing: inherit;
25374
+ }
25375
+ .cds--tabs .cds--tabs__nav-item--close-icon {
25031
25376
  display: inline-block;
25032
25377
  padding: 0;
25033
25378
  border: 0;
@@ -25038,20 +25383,17 @@ span.cds--pagination__text.cds--pagination__items-count {
25038
25383
  cursor: pointer;
25039
25384
  text-align: start;
25040
25385
  inline-size: 100%;
25386
+ }
25387
+ .cds--tabs .cds--tabs__nav-item--close-icon::-moz-focus-inner {
25388
+ border: 0;
25389
+ }
25390
+ .cds--tabs .cds--tabs__nav-item--close-icon {
25041
25391
  block-size: 1.5rem;
25042
25392
  inline-size: 1.5rem;
25043
25393
  padding-block: 0.25rem;
25044
25394
  padding-inline: 0.25rem;
25045
25395
  pointer-events: auto;
25046
25396
  }
25047
- .cds--tabs .cds--tabs__nav-item--close-icon *,
25048
- .cds--tabs .cds--tabs__nav-item--close-icon *::before,
25049
- .cds--tabs .cds--tabs__nav-item--close-icon *::after {
25050
- box-sizing: inherit;
25051
- }
25052
- .cds--tabs .cds--tabs__nav-item--close-icon::-moz-focus-inner {
25053
- border: 0;
25054
- }
25055
25397
  .cds--tabs .cds--tabs__nav-item--close-icon svg {
25056
25398
  block-size: 1rem;
25057
25399
  fill: var(--cds-text-secondary, #525252);
@@ -25119,6 +25461,13 @@ span.cds--pagination__text.cds--pagination__items-count {
25119
25461
  font-family: inherit;
25120
25462
  font-size: 100%;
25121
25463
  vertical-align: baseline;
25464
+ }
25465
+ .cds--tabs .cds--tabs__nav-link *,
25466
+ .cds--tabs .cds--tabs__nav-link *::before,
25467
+ .cds--tabs .cds--tabs__nav-link *::after {
25468
+ box-sizing: inherit;
25469
+ }
25470
+ .cds--tabs .cds--tabs__nav-link {
25122
25471
  display: inline-block;
25123
25472
  padding: 0;
25124
25473
  border: 0;
@@ -25128,6 +25477,11 @@ span.cds--pagination__text.cds--pagination__items-count {
25128
25477
  background: none;
25129
25478
  cursor: pointer;
25130
25479
  text-align: start;
25480
+ }
25481
+ .cds--tabs .cds--tabs__nav-link::-moz-focus-inner {
25482
+ border: 0;
25483
+ }
25484
+ .cds--tabs .cds--tabs__nav-link {
25131
25485
  outline: 2px solid transparent;
25132
25486
  outline-offset: -2px;
25133
25487
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -25144,14 +25498,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25144
25498
  transition: border 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25145
25499
  white-space: nowrap;
25146
25500
  }
25147
- .cds--tabs .cds--tabs__nav-link *,
25148
- .cds--tabs .cds--tabs__nav-link *::before,
25149
- .cds--tabs .cds--tabs__nav-link *::after {
25150
- box-sizing: inherit;
25151
- }
25152
- .cds--tabs .cds--tabs__nav-link::-moz-focus-inner {
25153
- border: 0;
25154
- }
25155
25501
  .cds--tabs .cds--tabs__nav-link:focus, .cds--tabs .cds--tabs__nav-link:active {
25156
25502
  outline: 2px solid var(--cds-focus, #0f62fe);
25157
25503
  outline-offset: -2px;
@@ -25304,10 +25650,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25304
25650
  background: var(--cds-layer);
25305
25651
  }
25306
25652
 
25307
- .cds--tabs--vertical ~ .cds--tab-content {
25308
- grid-column: 3/-1;
25309
- overflow-y: auto;
25310
- }
25311
25653
  .cds--tabs--vertical ~ .cds--tab-content .cds--text-input--fluid .cds--text-input,
25312
25654
  .cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area__wrapper,
25313
25655
  .cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area,
@@ -25343,6 +25685,10 @@ span.cds--pagination__text.cds--pagination__items-count {
25343
25685
  .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:focus::after {
25344
25686
  border-inline-start: 2px solid var(--cds-focus, #0f62fe);
25345
25687
  }
25688
+ .cds--tabs--vertical ~ .cds--tab-content {
25689
+ grid-column: 3/-1;
25690
+ overflow-y: auto;
25691
+ }
25346
25692
  @media (min-width: 66rem) {
25347
25693
  .cds--tabs--vertical ~ .cds--tab-content {
25348
25694
  grid-column: 5/-1;
@@ -25373,9 +25719,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25373
25719
  background: var(--cds-skeleton-background, #e8e8e8);
25374
25720
  box-shadow: none;
25375
25721
  pointer-events: none;
25376
- display: block;
25377
- block-size: 0.875rem;
25378
- inline-size: 100%;
25379
25722
  }
25380
25723
  .cds--tabs.cds--skeleton .cds--tabs__nav-link span:hover, .cds--tabs.cds--skeleton .cds--tabs__nav-link span:focus, .cds--tabs.cds--skeleton .cds--tabs__nav-link span:active {
25381
25724
  border: none;
@@ -25406,6 +25749,11 @@ span.cds--pagination__text.cds--pagination__items-count {
25406
25749
  forced-color-adjust: none;
25407
25750
  }
25408
25751
  }
25752
+ .cds--tabs.cds--skeleton .cds--tabs__nav-link span {
25753
+ display: block;
25754
+ block-size: 0.875rem;
25755
+ inline-size: 100%;
25756
+ }
25409
25757
 
25410
25758
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25411
25759
  .cds--tabs__nav-item .cds--tabs__nav-item--selected .cds--tabs__nav-item--selected {
@@ -25466,16 +25814,27 @@ span.cds--pagination__text.cds--pagination__items-count {
25466
25814
  .cds--tile--light {
25467
25815
  background-color: var(--cds-layer-02, #ffffff);
25468
25816
  }
25469
-
25817
+
25818
+ .cds--tile--clickable,
25819
+ .cds--tile--selectable {
25820
+ box-sizing: border-box;
25821
+ padding: 0;
25822
+ border: 0;
25823
+ margin: 0;
25824
+ font-family: inherit;
25825
+ font-size: 100%;
25826
+ vertical-align: baseline;
25827
+ }
25828
+ .cds--tile--clickable *,
25829
+ .cds--tile--clickable *::before,
25830
+ .cds--tile--clickable *::after,
25831
+ .cds--tile--selectable *,
25832
+ .cds--tile--selectable *::before,
25833
+ .cds--tile--selectable *::after {
25834
+ box-sizing: inherit;
25835
+ }
25470
25836
  .cds--tile--clickable,
25471
25837
  .cds--tile--selectable {
25472
- box-sizing: border-box;
25473
- padding: 0;
25474
- border: 0;
25475
- margin: 0;
25476
- font-family: inherit;
25477
- font-size: 100%;
25478
- vertical-align: baseline;
25479
25838
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
25480
25839
  font-weight: var(--cds-body-compact-01-font-weight, 400);
25481
25840
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -25484,14 +25843,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25484
25843
  cursor: pointer;
25485
25844
  transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25486
25845
  }
25487
- .cds--tile--clickable *,
25488
- .cds--tile--clickable *::before,
25489
- .cds--tile--clickable *::after,
25490
- .cds--tile--selectable *,
25491
- .cds--tile--selectable *::before,
25492
- .cds--tile--selectable *::after {
25493
- box-sizing: inherit;
25494
- }
25495
25846
  .cds--tile--clickable:hover,
25496
25847
  .cds--tile--selectable:hover {
25497
25848
  background: var(--cds-layer-hover);
@@ -25504,13 +25855,15 @@ span.cds--pagination__text.cds--pagination__items-count {
25504
25855
  .cds--tile--clickable:focus {
25505
25856
  outline: 2px solid var(--cds-focus, #0f62fe);
25506
25857
  outline-offset: -2px;
25507
- text-decoration: none;
25508
25858
  }
25509
25859
  @media screen and (prefers-contrast) {
25510
25860
  .cds--tile--clickable:focus {
25511
25861
  outline-style: dotted;
25512
25862
  }
25513
25863
  }
25864
+ .cds--tile--clickable:focus {
25865
+ text-decoration: none;
25866
+ }
25514
25867
  .cds--tile--clickable:hover .cds--tile__checkmark, .cds--tile--clickable:focus .cds--tile__checkmark {
25515
25868
  opacity: 1;
25516
25869
  }
@@ -25619,6 +25972,13 @@ span.cds--pagination__text.cds--pagination__items-count {
25619
25972
  font-family: inherit;
25620
25973
  font-size: 100%;
25621
25974
  vertical-align: baseline;
25975
+ }
25976
+ .cds--tile__chevron--interactive *,
25977
+ .cds--tile__chevron--interactive *::before,
25978
+ .cds--tile__chevron--interactive *::after {
25979
+ box-sizing: inherit;
25980
+ }
25981
+ .cds--tile__chevron--interactive {
25622
25982
  display: inline-block;
25623
25983
  padding: 0;
25624
25984
  border: 0;
@@ -25629,6 +25989,11 @@ span.cds--pagination__text.cds--pagination__items-count {
25629
25989
  cursor: pointer;
25630
25990
  text-align: start;
25631
25991
  inline-size: 100%;
25992
+ }
25993
+ .cds--tile__chevron--interactive::-moz-focus-inner {
25994
+ border: 0;
25995
+ }
25996
+ .cds--tile__chevron--interactive {
25632
25997
  position: absolute;
25633
25998
  display: flex;
25634
25999
  align-items: center;
@@ -25638,14 +26003,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25638
26003
  inset-block-end: 0;
25639
26004
  inset-inline-end: 0;
25640
26005
  }
25641
- .cds--tile__chevron--interactive *,
25642
- .cds--tile__chevron--interactive *::before,
25643
- .cds--tile__chevron--interactive *::after {
25644
- box-sizing: inherit;
25645
- }
25646
- .cds--tile__chevron--interactive::-moz-focus-inner {
25647
- border: 0;
25648
- }
25649
26006
  .cds--tile__chevron--interactive:focus {
25650
26007
  outline: 2px solid var(--cds-focus, #0f62fe);
25651
26008
  outline-offset: -2px;
@@ -26254,9 +26611,6 @@ span.cds--pagination__text.cds--pagination__items-count {
26254
26611
  overflow: hidden;
26255
26612
  border-radius: 50%;
26256
26613
  background: var(--cds-skeleton-background, #e8e8e8);
26257
- border-radius: 50%;
26258
- block-size: 1.125rem;
26259
- inline-size: 1.125rem;
26260
26614
  }
26261
26615
  .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
26262
26616
  position: absolute;
@@ -26281,6 +26635,11 @@ span.cds--pagination__text.cds--pagination__items-count {
26281
26635
  forced-color-adjust: none;
26282
26636
  }
26283
26637
  }
26638
+ .cds--toggle--skeleton .cds--toggle__skeleton-circle {
26639
+ border-radius: 50%;
26640
+ block-size: 1.125rem;
26641
+ inline-size: 1.125rem;
26642
+ }
26284
26643
 
26285
26644
  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
26286
26645
  position: relative;
@@ -26289,9 +26648,6 @@ span.cds--pagination__text.cds--pagination__items-count {
26289
26648
  background: var(--cds-skeleton-background, #e8e8e8);
26290
26649
  box-shadow: none;
26291
26650
  pointer-events: none;
26292
- block-size: 0.5rem;
26293
- inline-size: 1.5rem;
26294
- margin-inline-start: 0.5rem;
26295
26651
  }
26296
26652
  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active {
26297
26653
  border: none;
@@ -26322,6 +26678,11 @@ span.cds--pagination__text.cds--pagination__items-count {
26322
26678
  forced-color-adjust: none;
26323
26679
  }
26324
26680
  }
26681
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
26682
+ block-size: 0.5rem;
26683
+ inline-size: 1.5rem;
26684
+ margin-inline-start: 0.5rem;
26685
+ }
26325
26686
 
26326
26687
  [dir=rtl] .cds--toggle__switch--checked::before {
26327
26688
  transform: translateX(-1.5rem);
@@ -26339,13 +26700,15 @@ span.cds--pagination__text.cds--pagination__items-count {
26339
26700
  font-family: inherit;
26340
26701
  font-size: 100%;
26341
26702
  vertical-align: baseline;
26342
- overflow: hidden;
26343
26703
  }
26344
26704
  .cds--tree *,
26345
26705
  .cds--tree *::before,
26346
26706
  .cds--tree *::after {
26347
26707
  box-sizing: inherit;
26348
26708
  }
26709
+ .cds--tree {
26710
+ overflow: hidden;
26711
+ }
26349
26712
 
26350
26713
  .cds--tree-node {
26351
26714
  background-color: var(--cds-layer-01, #f4f4f4);
@@ -26371,13 +26734,15 @@ span.cds--pagination__text.cds--pagination__items-count {
26371
26734
  font-family: inherit;
26372
26735
  font-size: 100%;
26373
26736
  vertical-align: baseline;
26374
- list-style-type: none;
26375
26737
  }
26376
26738
  .cds--tree-node__children *,
26377
26739
  .cds--tree-node__children *::before,
26378
26740
  .cds--tree-node__children *::after {
26379
26741
  box-sizing: inherit;
26380
26742
  }
26743
+ .cds--tree-node__children {
26744
+ list-style-type: none;
26745
+ }
26381
26746
 
26382
26747
  .cds--tree-node--with-icon .cds--tree-node {
26383
26748
  margin-inline-start: 0.5rem;
@@ -26639,6 +27004,13 @@ div:has(.cds--header) ~ .cds--content {
26639
27004
  font-family: inherit;
26640
27005
  font-size: 100%;
26641
27006
  vertical-align: baseline;
27007
+ }
27008
+ .cds--header *,
27009
+ .cds--header *::before,
27010
+ .cds--header *::after {
27011
+ box-sizing: inherit;
27012
+ }
27013
+ .cds--header {
26642
27014
  position: fixed;
26643
27015
  z-index: 8000;
26644
27016
  display: flex;
@@ -26649,11 +27021,6 @@ div:has(.cds--header) ~ .cds--content {
26649
27021
  inset-block-start: 0;
26650
27022
  inset-inline: 0;
26651
27023
  }
26652
- .cds--header *,
26653
- .cds--header *::before,
26654
- .cds--header *::after {
26655
- box-sizing: inherit;
26656
- }
26657
27024
 
26658
27025
  .cds--header__action {
26659
27026
  box-sizing: border-box;
@@ -26663,6 +27030,13 @@ div:has(.cds--header) ~ .cds--content {
26663
27030
  font-family: inherit;
26664
27031
  font-size: 100%;
26665
27032
  vertical-align: baseline;
27033
+ }
27034
+ .cds--header__action *,
27035
+ .cds--header__action *::before,
27036
+ .cds--header__action *::after {
27037
+ box-sizing: inherit;
27038
+ }
27039
+ .cds--header__action {
26666
27040
  display: inline-block;
26667
27041
  padding: 0;
26668
27042
  border: 0;
@@ -26673,20 +27047,17 @@ div:has(.cds--header) ~ .cds--content {
26673
27047
  cursor: pointer;
26674
27048
  text-align: start;
26675
27049
  inline-size: 100%;
27050
+ }
27051
+ .cds--header__action::-moz-focus-inner {
27052
+ border: 0;
27053
+ }
27054
+ .cds--header__action {
26676
27055
  display: inline-flex;
26677
27056
  border: 0.0625rem solid transparent;
26678
27057
  block-size: 3rem;
26679
27058
  inline-size: 3rem;
26680
27059
  transition: background-color 110ms, border-color 110ms;
26681
27060
  }
26682
- .cds--header__action *,
26683
- .cds--header__action *::before,
26684
- .cds--header__action *::after {
26685
- box-sizing: inherit;
26686
- }
26687
- .cds--header__action::-moz-focus-inner {
26688
- border: 0;
26689
- }
26690
27061
  @media (max-width: 41.98rem) {
26691
27062
  .cds--header__action {
26692
27063
  min-inline-size: 3rem;
@@ -26843,17 +27214,19 @@ a.cds--header__name:hover {
26843
27214
  font-family: inherit;
26844
27215
  font-size: 100%;
26845
27216
  vertical-align: baseline;
26846
- display: flex;
26847
- padding: 0;
26848
- margin: 0;
26849
- block-size: 100%;
26850
- list-style: none;
26851
27217
  }
26852
27218
  .cds--header__menu-bar *,
26853
27219
  .cds--header__menu-bar *::before,
26854
27220
  .cds--header__menu-bar *::after {
26855
27221
  box-sizing: inherit;
26856
27222
  }
27223
+ .cds--header__menu-bar {
27224
+ display: flex;
27225
+ padding: 0;
27226
+ margin: 0;
27227
+ block-size: 100%;
27228
+ list-style: none;
27229
+ }
26857
27230
 
26858
27231
  a.cds--header__menu-item {
26859
27232
  position: relative;
@@ -27150,15 +27523,17 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27150
27523
  font-family: inherit;
27151
27524
  font-size: 100%;
27152
27525
  vertical-align: baseline;
27153
- overflow: hidden;
27154
- flex: 1 1;
27155
- padding: 1rem 0 0;
27156
27526
  }
27157
27527
  .cds--side-nav__items *,
27158
27528
  .cds--side-nav__items *::before,
27159
27529
  .cds--side-nav__items *::after {
27160
27530
  box-sizing: inherit;
27161
27531
  }
27532
+ .cds--side-nav__items {
27533
+ overflow: hidden;
27534
+ flex: 1 1;
27535
+ padding: 1rem 0 0;
27536
+ }
27162
27537
  .cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items {
27163
27538
  overflow-y: auto;
27164
27539
  }
@@ -27215,6 +27590,13 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27215
27590
  font-family: inherit;
27216
27591
  font-size: 100%;
27217
27592
  vertical-align: baseline;
27593
+ }
27594
+ .cds--side-nav__submenu *,
27595
+ .cds--side-nav__submenu *::before,
27596
+ .cds--side-nav__submenu *::after {
27597
+ box-sizing: inherit;
27598
+ }
27599
+ .cds--side-nav__submenu {
27218
27600
  display: inline-block;
27219
27601
  padding: 0;
27220
27602
  border: 0;
@@ -27225,6 +27607,11 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27225
27607
  cursor: pointer;
27226
27608
  text-align: start;
27227
27609
  inline-size: 100%;
27610
+ }
27611
+ .cds--side-nav__submenu::-moz-focus-inner {
27612
+ border: 0;
27613
+ }
27614
+ .cds--side-nav__submenu {
27228
27615
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
27229
27616
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
27230
27617
  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
@@ -27241,14 +27628,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27241
27628
  -moz-user-select: none;
27242
27629
  user-select: none;
27243
27630
  }
27244
- .cds--side-nav__submenu *,
27245
- .cds--side-nav__submenu *::before,
27246
- .cds--side-nav__submenu *::after {
27247
- box-sizing: inherit;
27248
- }
27249
- .cds--side-nav__submenu::-moz-focus-inner {
27250
- border: 0;
27251
- }
27252
27631
 
27253
27632
  .cds--side-nav__submenu:hover {
27254
27633
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
@@ -27328,15 +27707,17 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27328
27707
  font-family: inherit;
27329
27708
  font-size: 100%;
27330
27709
  vertical-align: baseline;
27331
- display: block;
27332
- max-block-size: 0;
27333
- visibility: hidden;
27334
27710
  }
27335
27711
  .cds--side-nav__menu *,
27336
27712
  .cds--side-nav__menu *::before,
27337
27713
  .cds--side-nav__menu *::after {
27338
27714
  box-sizing: inherit;
27339
27715
  }
27716
+ .cds--side-nav__menu {
27717
+ display: block;
27718
+ max-block-size: 0;
27719
+ visibility: hidden;
27720
+ }
27340
27721
 
27341
27722
  .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
27342
27723
  max-block-size: 93.75rem;
@@ -27487,13 +27868,15 @@ a.cds--side-nav__link--current::before {
27487
27868
  font-family: inherit;
27488
27869
  font-size: 100%;
27489
27870
  vertical-align: baseline;
27490
- display: none;
27491
27871
  }
27492
27872
  .cds--side-nav__header-navigation *,
27493
27873
  .cds--side-nav__header-navigation *::before,
27494
27874
  .cds--side-nav__header-navigation *::after {
27495
27875
  box-sizing: inherit;
27496
27876
  }
27877
+ .cds--side-nav__header-navigation {
27878
+ display: none;
27879
+ }
27497
27880
  @media (max-width: 65.98rem) {
27498
27881
  .cds--side-nav__header-navigation {
27499
27882
  position: relative;
@@ -27568,17 +27951,19 @@ a.cds--side-nav__link--current::before {
27568
27951
  font-family: inherit;
27569
27952
  font-size: 100%;
27570
27953
  vertical-align: baseline;
27571
- display: flex;
27572
- flex-direction: column;
27573
- align-items: center;
27574
- justify-content: center;
27575
- color: var(--cds-text-secondary, #525252);
27576
27954
  }
27577
27955
  .cds--switcher *,
27578
27956
  .cds--switcher *::before,
27579
27957
  .cds--switcher *::after {
27580
27958
  box-sizing: inherit;
27581
27959
  }
27960
+ .cds--switcher {
27961
+ display: flex;
27962
+ flex-direction: column;
27963
+ align-items: center;
27964
+ justify-content: center;
27965
+ color: var(--cds-text-secondary, #525252);
27966
+ }
27582
27967
 
27583
27968
  .cds--switcher__item {
27584
27969
  block-size: 2rem;
@@ -27655,6 +28040,13 @@ div:has(.cds--header) ~ .cds--content {
27655
28040
  font-family: inherit;
27656
28041
  font-size: 100%;
27657
28042
  vertical-align: baseline;
28043
+ }
28044
+ .cds--header *,
28045
+ .cds--header *::before,
28046
+ .cds--header *::after {
28047
+ box-sizing: inherit;
28048
+ }
28049
+ .cds--header {
27658
28050
  position: fixed;
27659
28051
  z-index: 8000;
27660
28052
  display: flex;
@@ -27665,11 +28057,6 @@ div:has(.cds--header) ~ .cds--content {
27665
28057
  inset-block-start: 0;
27666
28058
  inset-inline: 0;
27667
28059
  }
27668
- .cds--header *,
27669
- .cds--header *::before,
27670
- .cds--header *::after {
27671
- box-sizing: inherit;
27672
- }
27673
28060
 
27674
28061
  .cds--header__action {
27675
28062
  box-sizing: border-box;
@@ -27679,6 +28066,13 @@ div:has(.cds--header) ~ .cds--content {
27679
28066
  font-family: inherit;
27680
28067
  font-size: 100%;
27681
28068
  vertical-align: baseline;
28069
+ }
28070
+ .cds--header__action *,
28071
+ .cds--header__action *::before,
28072
+ .cds--header__action *::after {
28073
+ box-sizing: inherit;
28074
+ }
28075
+ .cds--header__action {
27682
28076
  display: inline-block;
27683
28077
  padding: 0;
27684
28078
  border: 0;
@@ -27689,20 +28083,17 @@ div:has(.cds--header) ~ .cds--content {
27689
28083
  cursor: pointer;
27690
28084
  text-align: start;
27691
28085
  inline-size: 100%;
28086
+ }
28087
+ .cds--header__action::-moz-focus-inner {
28088
+ border: 0;
28089
+ }
28090
+ .cds--header__action {
27692
28091
  display: inline-flex;
27693
28092
  border: 0.0625rem solid transparent;
27694
28093
  block-size: 3rem;
27695
28094
  inline-size: 3rem;
27696
28095
  transition: background-color 110ms, border-color 110ms;
27697
28096
  }
27698
- .cds--header__action *,
27699
- .cds--header__action *::before,
27700
- .cds--header__action *::after {
27701
- box-sizing: inherit;
27702
- }
27703
- .cds--header__action::-moz-focus-inner {
27704
- border: 0;
27705
- }
27706
28097
  @media (max-width: 41.98rem) {
27707
28098
  .cds--header__action {
27708
28099
  min-inline-size: 3rem;
@@ -27859,17 +28250,19 @@ a.cds--header__name:hover {
27859
28250
  font-family: inherit;
27860
28251
  font-size: 100%;
27861
28252
  vertical-align: baseline;
27862
- display: flex;
27863
- padding: 0;
27864
- margin: 0;
27865
- block-size: 100%;
27866
- list-style: none;
27867
28253
  }
27868
28254
  .cds--header__menu-bar *,
27869
28255
  .cds--header__menu-bar *::before,
27870
28256
  .cds--header__menu-bar *::after {
27871
28257
  box-sizing: inherit;
27872
28258
  }
28259
+ .cds--header__menu-bar {
28260
+ display: flex;
28261
+ padding: 0;
28262
+ margin: 0;
28263
+ block-size: 100%;
28264
+ list-style: none;
28265
+ }
27873
28266
 
27874
28267
  a.cds--header__menu-item {
27875
28268
  position: relative;
@@ -28166,15 +28559,17 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28166
28559
  font-family: inherit;
28167
28560
  font-size: 100%;
28168
28561
  vertical-align: baseline;
28169
- overflow: hidden;
28170
- flex: 1 1;
28171
- padding: 1rem 0 0;
28172
28562
  }
28173
28563
  .cds--side-nav__items *,
28174
28564
  .cds--side-nav__items *::before,
28175
28565
  .cds--side-nav__items *::after {
28176
28566
  box-sizing: inherit;
28177
28567
  }
28568
+ .cds--side-nav__items {
28569
+ overflow: hidden;
28570
+ flex: 1 1;
28571
+ padding: 1rem 0 0;
28572
+ }
28178
28573
  .cds--side-nav:hover .cds--side-nav__items, .cds--side-nav--fixed .cds--side-nav__items, .cds--side-nav--expanded .cds--side-nav__items {
28179
28574
  overflow-y: auto;
28180
28575
  }
@@ -28231,6 +28626,13 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28231
28626
  font-family: inherit;
28232
28627
  font-size: 100%;
28233
28628
  vertical-align: baseline;
28629
+ }
28630
+ .cds--side-nav__submenu *,
28631
+ .cds--side-nav__submenu *::before,
28632
+ .cds--side-nav__submenu *::after {
28633
+ box-sizing: inherit;
28634
+ }
28635
+ .cds--side-nav__submenu {
28234
28636
  display: inline-block;
28235
28637
  padding: 0;
28236
28638
  border: 0;
@@ -28241,6 +28643,11 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28241
28643
  cursor: pointer;
28242
28644
  text-align: start;
28243
28645
  inline-size: 100%;
28646
+ }
28647
+ .cds--side-nav__submenu::-moz-focus-inner {
28648
+ border: 0;
28649
+ }
28650
+ .cds--side-nav__submenu {
28244
28651
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
28245
28652
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
28246
28653
  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
@@ -28257,14 +28664,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28257
28664
  -moz-user-select: none;
28258
28665
  user-select: none;
28259
28666
  }
28260
- .cds--side-nav__submenu *,
28261
- .cds--side-nav__submenu *::before,
28262
- .cds--side-nav__submenu *::after {
28263
- box-sizing: inherit;
28264
- }
28265
- .cds--side-nav__submenu::-moz-focus-inner {
28266
- border: 0;
28267
- }
28268
28667
 
28269
28668
  .cds--side-nav__submenu:hover {
28270
28669
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
@@ -28344,15 +28743,17 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28344
28743
  font-family: inherit;
28345
28744
  font-size: 100%;
28346
28745
  vertical-align: baseline;
28347
- display: block;
28348
- max-block-size: 0;
28349
- visibility: hidden;
28350
28746
  }
28351
28747
  .cds--side-nav__menu *,
28352
28748
  .cds--side-nav__menu *::before,
28353
28749
  .cds--side-nav__menu *::after {
28354
28750
  box-sizing: inherit;
28355
28751
  }
28752
+ .cds--side-nav__menu {
28753
+ display: block;
28754
+ max-block-size: 0;
28755
+ visibility: hidden;
28756
+ }
28356
28757
 
28357
28758
  .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
28358
28759
  max-block-size: 93.75rem;
@@ -28503,13 +28904,15 @@ a.cds--side-nav__link--current::before {
28503
28904
  font-family: inherit;
28504
28905
  font-size: 100%;
28505
28906
  vertical-align: baseline;
28506
- display: none;
28507
28907
  }
28508
28908
  .cds--side-nav__header-navigation *,
28509
28909
  .cds--side-nav__header-navigation *::before,
28510
28910
  .cds--side-nav__header-navigation *::after {
28511
28911
  box-sizing: inherit;
28512
28912
  }
28913
+ .cds--side-nav__header-navigation {
28914
+ display: none;
28915
+ }
28513
28916
  @media (max-width: 65.98rem) {
28514
28917
  .cds--side-nav__header-navigation {
28515
28918
  position: relative;
@@ -28584,17 +28987,19 @@ a.cds--side-nav__link--current::before {
28584
28987
  font-family: inherit;
28585
28988
  font-size: 100%;
28586
28989
  vertical-align: baseline;
28587
- display: flex;
28588
- flex-direction: column;
28589
- align-items: center;
28590
- justify-content: center;
28591
- color: var(--cds-text-secondary, #525252);
28592
28990
  }
28593
28991
  .cds--switcher *,
28594
28992
  .cds--switcher *::before,
28595
28993
  .cds--switcher *::after {
28596
28994
  box-sizing: inherit;
28597
28995
  }
28996
+ .cds--switcher {
28997
+ display: flex;
28998
+ flex-direction: column;
28999
+ align-items: center;
29000
+ justify-content: center;
29001
+ color: var(--cds-text-secondary, #525252);
29002
+ }
28598
29003
 
28599
29004
  .cds--switcher__item {
28600
29005
  block-size: 2rem;