@carbon/styles 1.93.0 → 1.94.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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;
13591
+ }
13592
+ .cds--search-close::-moz-focus-inner {
13593
+ border: 0;
13594
+ }
13595
+ .cds--search-close {
13401
13596
  outline: 2px solid transparent;
13402
13597
  outline-offset: -2px;
13403
13598
  position: absolute;
13404
13599
  inset-block-start: 0;
13405
13600
  inset-inline-end: 0;
13406
13601
  }
13407
- .cds--search-close *,
13408
- .cds--search-close *::before,
13409
- .cds--search-close *::after {
13410
- box-sizing: inherit;
13411
- }
13412
- .cds--search-close::-moz-focus-inner {
13413
- border: 0;
13414
- }
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;
@@ -20925,6 +21218,13 @@ optgroup.cds--select-optgroup:disabled,
20925
21218
  font-family: inherit;
20926
21219
  font-size: 100%;
20927
21220
  vertical-align: baseline;
21221
+ }
21222
+ .cds--modal-header__label *,
21223
+ .cds--modal-header__label *::before,
21224
+ .cds--modal-header__label *::after {
21225
+ box-sizing: inherit;
21226
+ }
21227
+ .cds--modal-header__label {
20928
21228
  font-size: var(--cds-label-01-font-size, 0.75rem);
20929
21229
  font-weight: var(--cds-label-01-font-weight, 400);
20930
21230
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -20932,11 +21232,6 @@ optgroup.cds--select-optgroup:disabled,
20932
21232
  color: var(--cds-text-secondary, #525252);
20933
21233
  margin-block-end: 0.25rem;
20934
21234
  }
20935
- .cds--modal-header__label *,
20936
- .cds--modal-header__label *::before,
20937
- .cds--modal-header__label *::after {
20938
- box-sizing: inherit;
20939
- }
20940
21235
 
20941
21236
  .cds--modal-header__heading {
20942
21237
  box-sizing: border-box;
@@ -20946,6 +21241,13 @@ optgroup.cds--select-optgroup:disabled,
20946
21241
  font-family: inherit;
20947
21242
  font-size: 100%;
20948
21243
  vertical-align: baseline;
21244
+ }
21245
+ .cds--modal-header__heading *,
21246
+ .cds--modal-header__heading *::before,
21247
+ .cds--modal-header__heading *::after {
21248
+ box-sizing: inherit;
21249
+ }
21250
+ .cds--modal-header__heading {
20949
21251
  font-size: var(--cds-heading-03-font-size, 1.25rem);
20950
21252
  font-weight: var(--cds-heading-03-font-weight, 400);
20951
21253
  line-height: var(--cds-heading-03-line-height, 1.4);
@@ -20953,11 +21255,6 @@ optgroup.cds--select-optgroup:disabled,
20953
21255
  color: var(--cds-text-primary, #161616);
20954
21256
  padding-inline-end: calc(20% - 3rem);
20955
21257
  }
20956
- .cds--modal-header__heading *,
20957
- .cds--modal-header__heading *::before,
20958
- .cds--modal-header__heading *::after {
20959
- box-sizing: inherit;
20960
- }
20961
21258
 
20962
21259
  .cds--modal-container--xs .cds--modal-content__regular-content {
20963
21260
  padding-inline-end: 1rem;
@@ -21182,17 +21479,6 @@ optgroup.cds--select-optgroup:disabled,
21182
21479
  }
21183
21480
  }
21184
21481
 
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
21482
  .cds--inline-notification html {
21197
21483
  font-size: 100%;
21198
21484
  }
@@ -21209,6 +21495,17 @@ optgroup.cds--select-optgroup:disabled,
21209
21495
  .cds--inline-notification strong {
21210
21496
  font-weight: 600;
21211
21497
  }
21498
+ .cds--inline-notification {
21499
+ position: relative;
21500
+ display: flex;
21501
+ flex-wrap: wrap;
21502
+ block-size: auto;
21503
+ color: var(--cds-text-inverse, #ffffff);
21504
+ inline-size: 100%;
21505
+ max-inline-size: 18rem;
21506
+ min-block-size: 3rem;
21507
+ min-inline-size: 18rem;
21508
+ }
21212
21509
  @media (min-width: 42rem) {
21213
21510
  .cds--inline-notification {
21214
21511
  flex-wrap: nowrap;
@@ -21524,14 +21821,6 @@ optgroup.cds--select-optgroup:disabled,
21524
21821
  }
21525
21822
  }
21526
21823
 
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
21824
  .cds--toast-notification html {
21536
21825
  font-size: 100%;
21537
21826
  }
@@ -21548,6 +21837,14 @@ optgroup.cds--select-optgroup:disabled,
21548
21837
  .cds--toast-notification strong {
21549
21838
  font-weight: 600;
21550
21839
  }
21840
+ .cds--toast-notification {
21841
+ display: flex;
21842
+ block-size: auto;
21843
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
21844
+ color: var(--cds-text-inverse, #ffffff);
21845
+ inline-size: 18rem;
21846
+ padding-inline-start: 0.8125rem;
21847
+ }
21551
21848
  @media (min-width: 99rem) {
21552
21849
  .cds--toast-notification {
21553
21850
  inline-size: 22rem;
@@ -21786,17 +22083,6 @@ optgroup.cds--select-optgroup:disabled,
21786
22083
  }
21787
22084
  }
21788
22085
 
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
22086
  .cds--actionable-notification html {
21801
22087
  font-size: 100%;
21802
22088
  }
@@ -21813,6 +22099,17 @@ optgroup.cds--select-optgroup:disabled,
21813
22099
  .cds--actionable-notification strong {
21814
22100
  font-weight: 600;
21815
22101
  }
22102
+ .cds--actionable-notification {
22103
+ position: relative;
22104
+ display: flex;
22105
+ flex-wrap: wrap;
22106
+ block-size: auto;
22107
+ color: var(--cds-text-inverse, #ffffff);
22108
+ inline-size: 100%;
22109
+ max-inline-size: 18rem;
22110
+ min-block-size: 3rem;
22111
+ min-inline-size: 18rem;
22112
+ }
21816
22113
  @media (min-width: 42rem) {
21817
22114
  .cds--actionable-notification {
21818
22115
  flex-wrap: nowrap;
@@ -22316,13 +22613,6 @@ optgroup.cds--select-optgroup:disabled,
22316
22613
  padding: 1.5rem 0;
22317
22614
  }
22318
22615
 
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
22616
  @media (max-width: 41.98rem) {
22327
22617
  .cds--page-header__content__title-wrapper {
22328
22618
  display: flex;
@@ -22330,6 +22620,13 @@ optgroup.cds--select-optgroup:disabled,
22330
22620
  grid-gap: 1rem;
22331
22621
  }
22332
22622
  }
22623
+ .cds--page-header__content__title-wrapper {
22624
+ display: grid;
22625
+ gap: 1rem;
22626
+ grid-template-columns: auto minmax(var(--pageheader-title-grid-width, 0), 1fr);
22627
+ margin-block-end: 1rem;
22628
+ min-block-size: 2.5rem;
22629
+ }
22333
22630
 
22334
22631
  .cds--page-header__content__start {
22335
22632
  display: flex;
@@ -22453,6 +22750,13 @@ optgroup.cds--select-optgroup:disabled,
22453
22750
  font-family: inherit;
22454
22751
  font-size: 100%;
22455
22752
  vertical-align: baseline;
22753
+ }
22754
+ .cds--pagination *,
22755
+ .cds--pagination *::before,
22756
+ .cds--pagination *::after {
22757
+ box-sizing: inherit;
22758
+ }
22759
+ .cds--pagination {
22456
22760
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
22457
22761
  font-weight: var(--cds-body-compact-01-font-weight, 400);
22458
22762
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -22468,11 +22772,6 @@ optgroup.cds--select-optgroup:disabled,
22468
22772
  min-block-size: 2.5rem;
22469
22773
  overflow-x: auto;
22470
22774
  }
22471
- .cds--pagination *,
22472
- .cds--pagination *::before,
22473
- .cds--pagination *::after {
22474
- box-sizing: inherit;
22475
- }
22476
22775
  @container pagination (min-width: 42rem) {
22477
22776
  .cds--pagination {
22478
22777
  overflow: initial;
@@ -22634,6 +22933,17 @@ span.cds--pagination__text.cds--pagination__items-count {
22634
22933
  font-family: inherit;
22635
22934
  font-size: 100%;
22636
22935
  vertical-align: baseline;
22936
+ }
22937
+ .cds--pagination__button *,
22938
+ .cds--pagination__button *::before,
22939
+ .cds--pagination__button *::after,
22940
+ .cds--btn--ghost.cds--pagination__button *,
22941
+ .cds--btn--ghost.cds--pagination__button *::before,
22942
+ .cds--btn--ghost.cds--pagination__button *::after {
22943
+ box-sizing: inherit;
22944
+ }
22945
+ .cds--pagination__button,
22946
+ .cds--btn--ghost.cds--pagination__button {
22637
22947
  display: flex;
22638
22948
  align-items: center;
22639
22949
  justify-content: center;
@@ -22648,14 +22958,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22648
22958
  min-block-size: 2rem;
22649
22959
  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
22960
  }
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
22961
 
22660
22962
  .cds--pagination__button > svg,
22661
22963
  .cds--btn--ghost.cds--pagination__button > svg {
@@ -22683,7 +22985,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22683
22985
  .cds--btn--ghost:focus.cds--pagination__button {
22684
22986
  outline: 2px solid var(--cds-focus, #0f62fe);
22685
22987
  outline-offset: -2px;
22686
- border-inline-start: 0;
22687
22988
  }
22688
22989
  @media screen and (prefers-contrast) {
22689
22990
  .cds--pagination__button:focus,
@@ -22691,6 +22992,10 @@ span.cds--pagination__text.cds--pagination__items-count {
22691
22992
  outline-style: dotted;
22692
22993
  }
22693
22994
  }
22995
+ .cds--pagination__button:focus,
22996
+ .cds--btn--ghost:focus.cds--pagination__button {
22997
+ border-inline-start: 0;
22998
+ }
22694
22999
 
22695
23000
  .cds--pagination__button:hover,
22696
23001
  .cds--btn--ghost:hover.cds--pagination__button {
@@ -22737,6 +23042,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22737
23042
  font-family: inherit;
22738
23043
  font-size: 100%;
22739
23044
  vertical-align: baseline;
23045
+ }
23046
+ .cds--unstable-pagination *,
23047
+ .cds--unstable-pagination *::before,
23048
+ .cds--unstable-pagination *::after {
23049
+ box-sizing: inherit;
23050
+ }
23051
+ .cds--unstable-pagination {
22740
23052
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
22741
23053
  font-weight: var(--cds-body-compact-01-font-weight, 400);
22742
23054
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -22752,21 +23064,16 @@ span.cds--pagination__text.cds--pagination__items-count {
22752
23064
  inline-size: 100%;
22753
23065
  min-block-size: 2.5rem;
22754
23066
  }
22755
- .cds--unstable-pagination *,
22756
- .cds--unstable-pagination *::before,
22757
- .cds--unstable-pagination *::after {
22758
- box-sizing: inherit;
22759
- }
22760
23067
 
22761
- .cds--unstable-pagination__text {
22762
- margin: 0 1rem;
22763
- color: var(--cds-text-secondary, #525252);
22764
- }
22765
23068
  @container pagination (min-width: 42rem) {
22766
23069
  .cds--unstable-pagination__text {
22767
23070
  display: inline-block;
22768
23071
  }
22769
23072
  }
23073
+ .cds--unstable-pagination__text {
23074
+ margin: 0 1rem;
23075
+ color: var(--cds-text-secondary, #525252);
23076
+ }
22770
23077
 
22771
23078
  .cds--unstable-pagination__left,
22772
23079
  .cds--unstable-pagination__right {
@@ -22800,6 +23107,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22800
23107
  font-family: inherit;
22801
23108
  font-size: 100%;
22802
23109
  vertical-align: baseline;
23110
+ }
23111
+ .cds--unstable-pagination__button *,
23112
+ .cds--unstable-pagination__button *::before,
23113
+ .cds--unstable-pagination__button *::after {
23114
+ box-sizing: inherit;
23115
+ }
23116
+ .cds--unstable-pagination__button {
22803
23117
  display: flex;
22804
23118
  align-items: center;
22805
23119
  justify-content: center;
@@ -22815,11 +23129,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22815
23129
  min-block-size: 2rem;
22816
23130
  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
23131
  }
22818
- .cds--unstable-pagination__button *,
22819
- .cds--unstable-pagination__button *::before,
22820
- .cds--unstable-pagination__button *::after {
22821
- box-sizing: inherit;
22822
- }
22823
23132
 
22824
23133
  .cds--unstable-pagination__button .cds--btn__icon {
22825
23134
  block-size: initial;
@@ -22908,15 +23217,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22908
23217
  border-inline-end: 1px solid var(--cds-border-subtle);
22909
23218
  }
22910
23219
 
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
23220
  .cds--pagination-nav html {
22921
23221
  font-size: 100%;
22922
23222
  }
@@ -22933,6 +23233,15 @@ span.cds--pagination__text.cds--pagination__items-count {
22933
23233
  .cds--pagination-nav strong {
22934
23234
  font-weight: 600;
22935
23235
  }
23236
+ .cds--pagination-nav {
23237
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
23238
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
23239
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
23240
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
23241
+ --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)));
23242
+ --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));
23243
+ line-height: 0;
23244
+ }
22936
23245
 
22937
23246
  .cds--pagination-nav__list {
22938
23247
  display: flex;
@@ -22962,6 +23271,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22962
23271
  font-family: inherit;
22963
23272
  font-size: 100%;
22964
23273
  vertical-align: baseline;
23274
+ }
23275
+ .cds--pagination-nav__page *,
23276
+ .cds--pagination-nav__page *::before,
23277
+ .cds--pagination-nav__page *::after {
23278
+ box-sizing: inherit;
23279
+ }
23280
+ .cds--pagination-nav__page {
22965
23281
  display: inline-block;
22966
23282
  padding: 0;
22967
23283
  border: 0;
@@ -22971,6 +23287,11 @@ span.cds--pagination__text.cds--pagination__items-count {
22971
23287
  background: none;
22972
23288
  cursor: pointer;
22973
23289
  text-align: start;
23290
+ }
23291
+ .cds--pagination-nav__page::-moz-focus-inner {
23292
+ border: 0;
23293
+ }
23294
+ .cds--pagination-nav__page {
22974
23295
  position: relative;
22975
23296
  display: block;
22976
23297
  padding: calc((var(--cds-layout-size-height-local) - 0.875rem) / 2) 0.25rem;
@@ -22979,21 +23300,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22979
23300
  font-weight: 400;
22980
23301
  line-height: 1;
22981
23302
  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;
23303
+ outline: 0;
23304
+ text-align: center;
23305
+ text-decoration: none;
23306
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
23307
+ -webkit-user-select: none;
23308
+ -moz-user-select: none;
23309
+ user-select: none;
22997
23310
  }
22998
23311
  .cds--pagination-nav__page:hover {
22999
23312
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
@@ -23324,14 +23637,16 @@ span.cds--pagination__text.cds--pagination__items-count {
23324
23637
  font-family: inherit;
23325
23638
  font-size: 100%;
23326
23639
  vertical-align: baseline;
23327
- display: flex;
23328
- list-style: none;
23329
23640
  }
23330
23641
  .cds--progress *,
23331
23642
  .cds--progress *::before,
23332
23643
  .cds--progress *::after {
23333
23644
  box-sizing: inherit;
23334
23645
  }
23646
+ .cds--progress {
23647
+ display: flex;
23648
+ list-style: none;
23649
+ }
23335
23650
 
23336
23651
  .cds--progress-step {
23337
23652
  position: relative;
@@ -23500,6 +23815,13 @@ span.cds--pagination__text.cds--pagination__items-count {
23500
23815
  font-family: inherit;
23501
23816
  font-size: 100%;
23502
23817
  vertical-align: baseline;
23818
+ }
23819
+ .cds--progress-step-button *,
23820
+ .cds--progress-step-button *::before,
23821
+ .cds--progress-step-button *::after {
23822
+ box-sizing: inherit;
23823
+ }
23824
+ .cds--progress-step-button {
23503
23825
  display: inline-block;
23504
23826
  padding: 0;
23505
23827
  border: 0;
@@ -23510,17 +23832,14 @@ span.cds--pagination__text.cds--pagination__items-count {
23510
23832
  cursor: pointer;
23511
23833
  text-align: start;
23512
23834
  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
23835
  }
23521
23836
  .cds--progress-step-button::-moz-focus-inner {
23522
23837
  border: 0;
23523
23838
  }
23839
+ .cds--progress-step-button {
23840
+ display: flex;
23841
+ text-align: start;
23842
+ }
23524
23843
 
23525
23844
  .cds--progress-step-button--unclickable {
23526
23845
  cursor: default;
@@ -23571,9 +23890,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23571
23890
  background: var(--cds-skeleton-background, #e8e8e8);
23572
23891
  box-shadow: none;
23573
23892
  pointer-events: none;
23574
- block-size: 0.875rem;
23575
- inline-size: 2.5rem;
23576
- margin-block-start: 0.625rem;
23577
23893
  }
23578
23894
  .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
23895
  border: none;
@@ -23604,6 +23920,11 @@ span.cds--pagination__text.cds--pagination__items-count {
23604
23920
  forced-color-adjust: none;
23605
23921
  }
23606
23922
  }
23923
+ .cds--progress.cds--skeleton .cds--progress-label {
23924
+ block-size: 0.875rem;
23925
+ inline-size: 2.5rem;
23926
+ margin-block-start: 0.625rem;
23927
+ }
23607
23928
 
23608
23929
  .cds--progress.cds--progress--vertical.cds--skeleton .cds--progress-label {
23609
23930
  margin-block-start: 0.0625rem;
@@ -23749,9 +24070,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23749
24070
  background: var(--cds-skeleton-background, #e8e8e8);
23750
24071
  box-shadow: none;
23751
24072
  pointer-events: none;
23752
- display: inline-block;
23753
- block-size: 1rem;
23754
- inline-size: 1rem;
23755
24073
  }
23756
24074
  .cds--icon--skeleton:hover, .cds--icon--skeleton:focus, .cds--icon--skeleton:active {
23757
24075
  border: none;
@@ -23782,6 +24100,11 @@ span.cds--pagination__text.cds--pagination__items-count {
23782
24100
  forced-color-adjust: none;
23783
24101
  }
23784
24102
  }
24103
+ .cds--icon--skeleton {
24104
+ display: inline-block;
24105
+ block-size: 1rem;
24106
+ inline-size: 1rem;
24107
+ }
23785
24108
 
23786
24109
  .cds--skeleton__placeholder {
23787
24110
  position: relative;
@@ -23790,8 +24113,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23790
24113
  background: var(--cds-skeleton-background, #e8e8e8);
23791
24114
  box-shadow: none;
23792
24115
  pointer-events: none;
23793
- block-size: 6.25rem;
23794
- inline-size: 6.25rem;
23795
24116
  }
23796
24117
  .cds--skeleton__placeholder:hover, .cds--skeleton__placeholder:focus, .cds--skeleton__placeholder:active {
23797
24118
  border: none;
@@ -23822,6 +24143,10 @@ span.cds--pagination__text.cds--pagination__items-count {
23822
24143
  forced-color-adjust: none;
23823
24144
  }
23824
24145
  }
24146
+ .cds--skeleton__placeholder {
24147
+ block-size: 6.25rem;
24148
+ inline-size: 6.25rem;
24149
+ }
23825
24150
 
23826
24151
  .cds--skeleton__text {
23827
24152
  position: relative;
@@ -23830,9 +24155,6 @@ span.cds--pagination__text.cds--pagination__items-count {
23830
24155
  background: var(--cds-skeleton-background, #e8e8e8);
23831
24156
  box-shadow: none;
23832
24157
  pointer-events: none;
23833
- block-size: 1rem;
23834
- inline-size: 100%;
23835
- margin-block-end: 0.5rem;
23836
24158
  }
23837
24159
  .cds--skeleton__text:hover, .cds--skeleton__text:focus, .cds--skeleton__text:active {
23838
24160
  border: none;
@@ -23863,6 +24185,11 @@ span.cds--pagination__text.cds--pagination__items-count {
23863
24185
  forced-color-adjust: none;
23864
24186
  }
23865
24187
  }
24188
+ .cds--skeleton__text {
24189
+ block-size: 1rem;
24190
+ inline-size: 100%;
24191
+ margin-block-end: 0.5rem;
24192
+ }
23866
24193
 
23867
24194
  .cds--skeleton__heading {
23868
24195
  block-size: 1.5rem;
@@ -24288,8 +24615,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24288
24615
  background: var(--cds-skeleton-background, #e8e8e8);
24289
24616
  box-shadow: none;
24290
24617
  pointer-events: none;
24291
- block-size: 0.75rem;
24292
- inline-size: 1.25rem;
24293
24618
  }
24294
24619
  .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
24620
  border: none;
@@ -24320,6 +24645,10 @@ span.cds--pagination__text.cds--pagination__items-count {
24320
24645
  forced-color-adjust: none;
24321
24646
  }
24322
24647
  }
24648
+ .cds--slider-container.cds--skeleton .cds--slider__range-label {
24649
+ block-size: 0.75rem;
24650
+ inline-size: 1.25rem;
24651
+ }
24323
24652
 
24324
24653
  .cds--slider-container.cds--skeleton .cds--slider__track {
24325
24654
  cursor: default;
@@ -24455,6 +24784,13 @@ span.cds--pagination__text.cds--pagination__items-count {
24455
24784
  font-family: inherit;
24456
24785
  font-size: 100%;
24457
24786
  vertical-align: baseline;
24787
+ }
24788
+ .cds--structured-list *,
24789
+ .cds--structured-list *::before,
24790
+ .cds--structured-list *::after {
24791
+ box-sizing: inherit;
24792
+ }
24793
+ .cds--structured-list {
24458
24794
  display: table;
24459
24795
  background-color: var(--cds-layer) transparent;
24460
24796
  border-collapse: collapse;
@@ -24462,11 +24798,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24462
24798
  inline-size: 100%;
24463
24799
  overflow-x: auto;
24464
24800
  }
24465
- .cds--structured-list *,
24466
- .cds--structured-list *::before,
24467
- .cds--structured-list *::after {
24468
- box-sizing: inherit;
24469
- }
24470
24801
  .cds--structured-list.cds--structured-list--condensed .cds--structured-list-td, .cds--structured-list.cds--structured-list--condensed .cds--structured-list-th {
24471
24802
  padding: 0.5rem;
24472
24803
  }
@@ -24537,6 +24868,13 @@ span.cds--pagination__text.cds--pagination__items-count {
24537
24868
  font-family: inherit;
24538
24869
  font-size: 100%;
24539
24870
  vertical-align: baseline;
24871
+ }
24872
+ .cds--structured-list-th *,
24873
+ .cds--structured-list-th *::before,
24874
+ .cds--structured-list-th *::after {
24875
+ box-sizing: inherit;
24876
+ }
24877
+ .cds--structured-list-th {
24540
24878
  padding: 1rem 0.5rem 0.5rem 0.5rem;
24541
24879
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
24542
24880
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -24550,11 +24888,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24550
24888
  text-transform: none;
24551
24889
  vertical-align: top;
24552
24890
  }
24553
- .cds--structured-list-th *,
24554
- .cds--structured-list-th *::before,
24555
- .cds--structured-list-th *::after {
24556
- box-sizing: inherit;
24557
- }
24558
24891
 
24559
24892
  .cds--structured-list-tbody {
24560
24893
  display: table-row-group;
@@ -24569,6 +24902,13 @@ span.cds--pagination__text.cds--pagination__items-count {
24569
24902
  font-family: inherit;
24570
24903
  font-size: 100%;
24571
24904
  vertical-align: baseline;
24905
+ }
24906
+ .cds--structured-list-td *,
24907
+ .cds--structured-list-td *::before,
24908
+ .cds--structured-list-td *::after {
24909
+ box-sizing: inherit;
24910
+ }
24911
+ .cds--structured-list-td {
24572
24912
  font-size: var(--cds-body-01-font-size, 0.875rem);
24573
24913
  font-weight: var(--cds-body-01-font-weight, 400);
24574
24914
  line-height: var(--cds-body-01-line-height, 1.42857);
@@ -24580,11 +24920,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24580
24920
  max-inline-size: 36rem;
24581
24921
  transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
24582
24922
  }
24583
- .cds--structured-list-td *,
24584
- .cds--structured-list-td *::before,
24585
- .cds--structured-list-td *::after {
24586
- box-sizing: inherit;
24587
- }
24588
24923
 
24589
24924
  .cds--structured-list-content--nowrap {
24590
24925
  white-space: nowrap;
@@ -24631,9 +24966,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24631
24966
  background: var(--cds-skeleton-background, #e8e8e8);
24632
24967
  box-shadow: none;
24633
24968
  pointer-events: none;
24634
- display: block;
24635
- block-size: 1rem;
24636
- inline-size: 75%;
24637
24969
  }
24638
24970
  .cds--structured-list.cds--skeleton span:hover, .cds--structured-list.cds--skeleton span:focus, .cds--structured-list.cds--skeleton span:active {
24639
24971
  border: none;
@@ -24664,6 +24996,11 @@ span.cds--pagination__text.cds--pagination__items-count {
24664
24996
  forced-color-adjust: none;
24665
24997
  }
24666
24998
  }
24999
+ .cds--structured-list.cds--skeleton span {
25000
+ display: block;
25001
+ block-size: 1rem;
25002
+ inline-size: 75%;
25003
+ }
24667
25004
 
24668
25005
  .cds--structured-list.cds--structured-list--selection.cds--skeleton .cds--structured-list-th:first-child {
24669
25006
  inline-size: 5%;
@@ -24715,21 +25052,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24715
25052
  --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
25053
  }
24717
25054
 
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
25055
  .cds--tabs html {
24734
25056
  font-size: 100%;
24735
25057
  }
@@ -24746,6 +25068,21 @@ span.cds--pagination__text.cds--pagination__items-count {
24746
25068
  .cds--tabs strong {
24747
25069
  font-weight: 600;
24748
25070
  }
25071
+ .cds--tabs {
25072
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
25073
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
25074
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
25075
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
25076
+ --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)));
25077
+ position: relative;
25078
+ display: flex;
25079
+ block-size: auto;
25080
+ color: var(--cds-text-primary, #161616);
25081
+ inline-size: 100%;
25082
+ max-block-size: var(--cds-layout-size-height-xl);
25083
+ min-block-size: var(--cds-layout-size-height-local);
25084
+ overflow-x: hidden;
25085
+ }
24749
25086
  .cds--tabs.cds--tabs--contained {
24750
25087
  --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
25088
  }
@@ -24800,13 +25137,15 @@ span.cds--pagination__text.cds--pagination__items-count {
24800
25137
  font-family: inherit;
24801
25138
  font-size: 100%;
24802
25139
  vertical-align: baseline;
24803
- display: flex;
24804
25140
  }
24805
25141
  .cds--tabs .cds--tabs__nav *,
24806
25142
  .cds--tabs .cds--tabs__nav *::before,
24807
25143
  .cds--tabs .cds--tabs__nav *::after {
24808
25144
  box-sizing: inherit;
24809
25145
  }
25146
+ .cds--tabs .cds--tabs__nav {
25147
+ display: flex;
25148
+ }
24810
25149
  .cds--tabs .cds--tab--overflow-nav-button {
24811
25150
  box-sizing: border-box;
24812
25151
  padding: 0;
@@ -24815,6 +25154,13 @@ span.cds--pagination__text.cds--pagination__items-count {
24815
25154
  font-family: inherit;
24816
25155
  font-size: 100%;
24817
25156
  vertical-align: baseline;
25157
+ }
25158
+ .cds--tabs .cds--tab--overflow-nav-button *,
25159
+ .cds--tabs .cds--tab--overflow-nav-button *::before,
25160
+ .cds--tabs .cds--tab--overflow-nav-button *::after {
25161
+ box-sizing: inherit;
25162
+ }
25163
+ .cds--tabs .cds--tab--overflow-nav-button {
24818
25164
  display: inline-block;
24819
25165
  padding: 0;
24820
25166
  border: 0;
@@ -24825,6 +25171,11 @@ span.cds--pagination__text.cds--pagination__items-count {
24825
25171
  cursor: pointer;
24826
25172
  text-align: start;
24827
25173
  inline-size: 100%;
25174
+ }
25175
+ .cds--tabs .cds--tab--overflow-nav-button::-moz-focus-inner {
25176
+ border: 0;
25177
+ }
25178
+ .cds--tabs .cds--tab--overflow-nav-button {
24828
25179
  display: flex;
24829
25180
  flex-shrink: 0;
24830
25181
  align-items: center;
@@ -24832,14 +25183,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24832
25183
  background-color: var(--cds-background, #ffffff);
24833
25184
  inline-size: 2.5rem;
24834
25185
  }
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
25186
  .cds--tabs .cds--tab--overflow-nav-button:focus {
24844
25187
  outline: 2px solid var(--cds-focus, #0f62fe);
24845
25188
  outline-offset: -2px;
@@ -24942,14 +25285,6 @@ span.cds--pagination__text.cds--pagination__items-count {
24942
25285
  position: relative;
24943
25286
  inset-block-start: 0.0625rem;
24944
25287
  }
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
25288
  .cds--tabs .cds--tabs__nav-item html {
24954
25289
  font-size: 100%;
24955
25290
  }
@@ -24966,6 +25301,14 @@ span.cds--pagination__text.cds--pagination__items-count {
24966
25301
  .cds--tabs .cds--tabs__nav-item strong {
24967
25302
  font-weight: 600;
24968
25303
  }
25304
+ .cds--tabs .cds--tabs__nav-item {
25305
+ position: relative;
25306
+ display: flex;
25307
+ flex: 1 0 auto;
25308
+ padding: 0;
25309
+ cursor: pointer;
25310
+ transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25311
+ }
24969
25312
  .cds--tabs .cds--tabs__nav-item + .cds--tabs__nav-item {
24970
25313
  margin-inline-start: 0.0625rem;
24971
25314
  }
@@ -25028,6 +25371,13 @@ span.cds--pagination__text.cds--pagination__items-count {
25028
25371
  font-family: inherit;
25029
25372
  font-size: 100%;
25030
25373
  vertical-align: baseline;
25374
+ }
25375
+ .cds--tabs .cds--tabs__nav-item--close-icon *,
25376
+ .cds--tabs .cds--tabs__nav-item--close-icon *::before,
25377
+ .cds--tabs .cds--tabs__nav-item--close-icon *::after {
25378
+ box-sizing: inherit;
25379
+ }
25380
+ .cds--tabs .cds--tabs__nav-item--close-icon {
25031
25381
  display: inline-block;
25032
25382
  padding: 0;
25033
25383
  border: 0;
@@ -25038,20 +25388,17 @@ span.cds--pagination__text.cds--pagination__items-count {
25038
25388
  cursor: pointer;
25039
25389
  text-align: start;
25040
25390
  inline-size: 100%;
25391
+ }
25392
+ .cds--tabs .cds--tabs__nav-item--close-icon::-moz-focus-inner {
25393
+ border: 0;
25394
+ }
25395
+ .cds--tabs .cds--tabs__nav-item--close-icon {
25041
25396
  block-size: 1.5rem;
25042
25397
  inline-size: 1.5rem;
25043
25398
  padding-block: 0.25rem;
25044
25399
  padding-inline: 0.25rem;
25045
25400
  pointer-events: auto;
25046
25401
  }
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
25402
  .cds--tabs .cds--tabs__nav-item--close-icon svg {
25056
25403
  block-size: 1rem;
25057
25404
  fill: var(--cds-text-secondary, #525252);
@@ -25119,6 +25466,13 @@ span.cds--pagination__text.cds--pagination__items-count {
25119
25466
  font-family: inherit;
25120
25467
  font-size: 100%;
25121
25468
  vertical-align: baseline;
25469
+ }
25470
+ .cds--tabs .cds--tabs__nav-link *,
25471
+ .cds--tabs .cds--tabs__nav-link *::before,
25472
+ .cds--tabs .cds--tabs__nav-link *::after {
25473
+ box-sizing: inherit;
25474
+ }
25475
+ .cds--tabs .cds--tabs__nav-link {
25122
25476
  display: inline-block;
25123
25477
  padding: 0;
25124
25478
  border: 0;
@@ -25128,6 +25482,11 @@ span.cds--pagination__text.cds--pagination__items-count {
25128
25482
  background: none;
25129
25483
  cursor: pointer;
25130
25484
  text-align: start;
25485
+ }
25486
+ .cds--tabs .cds--tabs__nav-link::-moz-focus-inner {
25487
+ border: 0;
25488
+ }
25489
+ .cds--tabs .cds--tabs__nav-link {
25131
25490
  outline: 2px solid transparent;
25132
25491
  outline-offset: -2px;
25133
25492
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -25144,14 +25503,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25144
25503
  transition: border 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25145
25504
  white-space: nowrap;
25146
25505
  }
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
25506
  .cds--tabs .cds--tabs__nav-link:focus, .cds--tabs .cds--tabs__nav-link:active {
25156
25507
  outline: 2px solid var(--cds-focus, #0f62fe);
25157
25508
  outline-offset: -2px;
@@ -25304,10 +25655,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25304
25655
  background: var(--cds-layer);
25305
25656
  }
25306
25657
 
25307
- .cds--tabs--vertical ~ .cds--tab-content {
25308
- grid-column: 3/-1;
25309
- overflow-y: auto;
25310
- }
25311
25658
  .cds--tabs--vertical ~ .cds--tab-content .cds--text-input--fluid .cds--text-input,
25312
25659
  .cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area__wrapper,
25313
25660
  .cds--tabs--vertical ~ .cds--tab-content .cds--text-area--fluid .cds--text-area,
@@ -25343,6 +25690,10 @@ span.cds--pagination__text.cds--pagination__items-count {
25343
25690
  .cds--tabs--vertical ~ .cds--tab-content .cds--number-input--fluid .cds--number__control-btn:focus::after {
25344
25691
  border-inline-start: 2px solid var(--cds-focus, #0f62fe);
25345
25692
  }
25693
+ .cds--tabs--vertical ~ .cds--tab-content {
25694
+ grid-column: 3/-1;
25695
+ overflow-y: auto;
25696
+ }
25346
25697
  @media (min-width: 66rem) {
25347
25698
  .cds--tabs--vertical ~ .cds--tab-content {
25348
25699
  grid-column: 5/-1;
@@ -25373,9 +25724,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25373
25724
  background: var(--cds-skeleton-background, #e8e8e8);
25374
25725
  box-shadow: none;
25375
25726
  pointer-events: none;
25376
- display: block;
25377
- block-size: 0.875rem;
25378
- inline-size: 100%;
25379
25727
  }
25380
25728
  .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
25729
  border: none;
@@ -25406,6 +25754,11 @@ span.cds--pagination__text.cds--pagination__items-count {
25406
25754
  forced-color-adjust: none;
25407
25755
  }
25408
25756
  }
25757
+ .cds--tabs.cds--skeleton .cds--tabs__nav-link span {
25758
+ display: block;
25759
+ block-size: 0.875rem;
25760
+ inline-size: 100%;
25761
+ }
25409
25762
 
25410
25763
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25411
25764
  .cds--tabs__nav-item .cds--tabs__nav-item--selected .cds--tabs__nav-item--selected {
@@ -25466,16 +25819,27 @@ span.cds--pagination__text.cds--pagination__items-count {
25466
25819
  .cds--tile--light {
25467
25820
  background-color: var(--cds-layer-02, #ffffff);
25468
25821
  }
25469
-
25822
+
25823
+ .cds--tile--clickable,
25824
+ .cds--tile--selectable {
25825
+ box-sizing: border-box;
25826
+ padding: 0;
25827
+ border: 0;
25828
+ margin: 0;
25829
+ font-family: inherit;
25830
+ font-size: 100%;
25831
+ vertical-align: baseline;
25832
+ }
25833
+ .cds--tile--clickable *,
25834
+ .cds--tile--clickable *::before,
25835
+ .cds--tile--clickable *::after,
25836
+ .cds--tile--selectable *,
25837
+ .cds--tile--selectable *::before,
25838
+ .cds--tile--selectable *::after {
25839
+ box-sizing: inherit;
25840
+ }
25470
25841
  .cds--tile--clickable,
25471
25842
  .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
25843
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
25480
25844
  font-weight: var(--cds-body-compact-01-font-weight, 400);
25481
25845
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -25484,14 +25848,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25484
25848
  cursor: pointer;
25485
25849
  transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25486
25850
  }
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
25851
  .cds--tile--clickable:hover,
25496
25852
  .cds--tile--selectable:hover {
25497
25853
  background: var(--cds-layer-hover);
@@ -25504,13 +25860,15 @@ span.cds--pagination__text.cds--pagination__items-count {
25504
25860
  .cds--tile--clickable:focus {
25505
25861
  outline: 2px solid var(--cds-focus, #0f62fe);
25506
25862
  outline-offset: -2px;
25507
- text-decoration: none;
25508
25863
  }
25509
25864
  @media screen and (prefers-contrast) {
25510
25865
  .cds--tile--clickable:focus {
25511
25866
  outline-style: dotted;
25512
25867
  }
25513
25868
  }
25869
+ .cds--tile--clickable:focus {
25870
+ text-decoration: none;
25871
+ }
25514
25872
  .cds--tile--clickable:hover .cds--tile__checkmark, .cds--tile--clickable:focus .cds--tile__checkmark {
25515
25873
  opacity: 1;
25516
25874
  }
@@ -25619,6 +25977,13 @@ span.cds--pagination__text.cds--pagination__items-count {
25619
25977
  font-family: inherit;
25620
25978
  font-size: 100%;
25621
25979
  vertical-align: baseline;
25980
+ }
25981
+ .cds--tile__chevron--interactive *,
25982
+ .cds--tile__chevron--interactive *::before,
25983
+ .cds--tile__chevron--interactive *::after {
25984
+ box-sizing: inherit;
25985
+ }
25986
+ .cds--tile__chevron--interactive {
25622
25987
  display: inline-block;
25623
25988
  padding: 0;
25624
25989
  border: 0;
@@ -25629,6 +25994,11 @@ span.cds--pagination__text.cds--pagination__items-count {
25629
25994
  cursor: pointer;
25630
25995
  text-align: start;
25631
25996
  inline-size: 100%;
25997
+ }
25998
+ .cds--tile__chevron--interactive::-moz-focus-inner {
25999
+ border: 0;
26000
+ }
26001
+ .cds--tile__chevron--interactive {
25632
26002
  position: absolute;
25633
26003
  display: flex;
25634
26004
  align-items: center;
@@ -25638,14 +26008,6 @@ span.cds--pagination__text.cds--pagination__items-count {
25638
26008
  inset-block-end: 0;
25639
26009
  inset-inline-end: 0;
25640
26010
  }
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
26011
  .cds--tile__chevron--interactive:focus {
25650
26012
  outline: 2px solid var(--cds-focus, #0f62fe);
25651
26013
  outline-offset: -2px;
@@ -26254,9 +26616,6 @@ span.cds--pagination__text.cds--pagination__items-count {
26254
26616
  overflow: hidden;
26255
26617
  border-radius: 50%;
26256
26618
  background: var(--cds-skeleton-background, #e8e8e8);
26257
- border-radius: 50%;
26258
- block-size: 1.125rem;
26259
- inline-size: 1.125rem;
26260
26619
  }
26261
26620
  .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
26262
26621
  position: absolute;
@@ -26281,6 +26640,11 @@ span.cds--pagination__text.cds--pagination__items-count {
26281
26640
  forced-color-adjust: none;
26282
26641
  }
26283
26642
  }
26643
+ .cds--toggle--skeleton .cds--toggle__skeleton-circle {
26644
+ border-radius: 50%;
26645
+ block-size: 1.125rem;
26646
+ inline-size: 1.125rem;
26647
+ }
26284
26648
 
26285
26649
  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
26286
26650
  position: relative;
@@ -26289,9 +26653,6 @@ span.cds--pagination__text.cds--pagination__items-count {
26289
26653
  background: var(--cds-skeleton-background, #e8e8e8);
26290
26654
  box-shadow: none;
26291
26655
  pointer-events: none;
26292
- block-size: 0.5rem;
26293
- inline-size: 1.5rem;
26294
- margin-inline-start: 0.5rem;
26295
26656
  }
26296
26657
  .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
26658
  border: none;
@@ -26322,6 +26683,11 @@ span.cds--pagination__text.cds--pagination__items-count {
26322
26683
  forced-color-adjust: none;
26323
26684
  }
26324
26685
  }
26686
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
26687
+ block-size: 0.5rem;
26688
+ inline-size: 1.5rem;
26689
+ margin-inline-start: 0.5rem;
26690
+ }
26325
26691
 
26326
26692
  [dir=rtl] .cds--toggle__switch--checked::before {
26327
26693
  transform: translateX(-1.5rem);
@@ -26339,13 +26705,15 @@ span.cds--pagination__text.cds--pagination__items-count {
26339
26705
  font-family: inherit;
26340
26706
  font-size: 100%;
26341
26707
  vertical-align: baseline;
26342
- overflow: hidden;
26343
26708
  }
26344
26709
  .cds--tree *,
26345
26710
  .cds--tree *::before,
26346
26711
  .cds--tree *::after {
26347
26712
  box-sizing: inherit;
26348
26713
  }
26714
+ .cds--tree {
26715
+ overflow: hidden;
26716
+ }
26349
26717
 
26350
26718
  .cds--tree-node {
26351
26719
  background-color: var(--cds-layer-01, #f4f4f4);
@@ -26371,13 +26739,15 @@ span.cds--pagination__text.cds--pagination__items-count {
26371
26739
  font-family: inherit;
26372
26740
  font-size: 100%;
26373
26741
  vertical-align: baseline;
26374
- list-style-type: none;
26375
26742
  }
26376
26743
  .cds--tree-node__children *,
26377
26744
  .cds--tree-node__children *::before,
26378
26745
  .cds--tree-node__children *::after {
26379
26746
  box-sizing: inherit;
26380
26747
  }
26748
+ .cds--tree-node__children {
26749
+ list-style-type: none;
26750
+ }
26381
26751
 
26382
26752
  .cds--tree-node--with-icon .cds--tree-node {
26383
26753
  margin-inline-start: 0.5rem;
@@ -26639,6 +27009,13 @@ div:has(.cds--header) ~ .cds--content {
26639
27009
  font-family: inherit;
26640
27010
  font-size: 100%;
26641
27011
  vertical-align: baseline;
27012
+ }
27013
+ .cds--header *,
27014
+ .cds--header *::before,
27015
+ .cds--header *::after {
27016
+ box-sizing: inherit;
27017
+ }
27018
+ .cds--header {
26642
27019
  position: fixed;
26643
27020
  z-index: 8000;
26644
27021
  display: flex;
@@ -26649,11 +27026,6 @@ div:has(.cds--header) ~ .cds--content {
26649
27026
  inset-block-start: 0;
26650
27027
  inset-inline: 0;
26651
27028
  }
26652
- .cds--header *,
26653
- .cds--header *::before,
26654
- .cds--header *::after {
26655
- box-sizing: inherit;
26656
- }
26657
27029
 
26658
27030
  .cds--header__action {
26659
27031
  box-sizing: border-box;
@@ -26663,6 +27035,13 @@ div:has(.cds--header) ~ .cds--content {
26663
27035
  font-family: inherit;
26664
27036
  font-size: 100%;
26665
27037
  vertical-align: baseline;
27038
+ }
27039
+ .cds--header__action *,
27040
+ .cds--header__action *::before,
27041
+ .cds--header__action *::after {
27042
+ box-sizing: inherit;
27043
+ }
27044
+ .cds--header__action {
26666
27045
  display: inline-block;
26667
27046
  padding: 0;
26668
27047
  border: 0;
@@ -26673,20 +27052,17 @@ div:has(.cds--header) ~ .cds--content {
26673
27052
  cursor: pointer;
26674
27053
  text-align: start;
26675
27054
  inline-size: 100%;
27055
+ }
27056
+ .cds--header__action::-moz-focus-inner {
27057
+ border: 0;
27058
+ }
27059
+ .cds--header__action {
26676
27060
  display: inline-flex;
26677
27061
  border: 0.0625rem solid transparent;
26678
27062
  block-size: 3rem;
26679
27063
  inline-size: 3rem;
26680
27064
  transition: background-color 110ms, border-color 110ms;
26681
27065
  }
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
27066
  @media (max-width: 41.98rem) {
26691
27067
  .cds--header__action {
26692
27068
  min-inline-size: 3rem;
@@ -26843,17 +27219,19 @@ a.cds--header__name:hover {
26843
27219
  font-family: inherit;
26844
27220
  font-size: 100%;
26845
27221
  vertical-align: baseline;
26846
- display: flex;
26847
- padding: 0;
26848
- margin: 0;
26849
- block-size: 100%;
26850
- list-style: none;
26851
27222
  }
26852
27223
  .cds--header__menu-bar *,
26853
27224
  .cds--header__menu-bar *::before,
26854
27225
  .cds--header__menu-bar *::after {
26855
27226
  box-sizing: inherit;
26856
27227
  }
27228
+ .cds--header__menu-bar {
27229
+ display: flex;
27230
+ padding: 0;
27231
+ margin: 0;
27232
+ block-size: 100%;
27233
+ list-style: none;
27234
+ }
26857
27235
 
26858
27236
  a.cds--header__menu-item {
26859
27237
  position: relative;
@@ -27150,15 +27528,17 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27150
27528
  font-family: inherit;
27151
27529
  font-size: 100%;
27152
27530
  vertical-align: baseline;
27153
- overflow: hidden;
27154
- flex: 1 1;
27155
- padding: 1rem 0 0;
27156
27531
  }
27157
27532
  .cds--side-nav__items *,
27158
27533
  .cds--side-nav__items *::before,
27159
27534
  .cds--side-nav__items *::after {
27160
27535
  box-sizing: inherit;
27161
27536
  }
27537
+ .cds--side-nav__items {
27538
+ overflow: hidden;
27539
+ flex: 1 1;
27540
+ padding: 1rem 0 0;
27541
+ }
27162
27542
  .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
27543
  overflow-y: auto;
27164
27544
  }
@@ -27215,6 +27595,13 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27215
27595
  font-family: inherit;
27216
27596
  font-size: 100%;
27217
27597
  vertical-align: baseline;
27598
+ }
27599
+ .cds--side-nav__submenu *,
27600
+ .cds--side-nav__submenu *::before,
27601
+ .cds--side-nav__submenu *::after {
27602
+ box-sizing: inherit;
27603
+ }
27604
+ .cds--side-nav__submenu {
27218
27605
  display: inline-block;
27219
27606
  padding: 0;
27220
27607
  border: 0;
@@ -27225,6 +27612,11 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27225
27612
  cursor: pointer;
27226
27613
  text-align: start;
27227
27614
  inline-size: 100%;
27615
+ }
27616
+ .cds--side-nav__submenu::-moz-focus-inner {
27617
+ border: 0;
27618
+ }
27619
+ .cds--side-nav__submenu {
27228
27620
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
27229
27621
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
27230
27622
  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
@@ -27241,14 +27633,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27241
27633
  -moz-user-select: none;
27242
27634
  user-select: none;
27243
27635
  }
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
27636
 
27253
27637
  .cds--side-nav__submenu:hover {
27254
27638
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
@@ -27328,15 +27712,17 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
27328
27712
  font-family: inherit;
27329
27713
  font-size: 100%;
27330
27714
  vertical-align: baseline;
27331
- display: block;
27332
- max-block-size: 0;
27333
- visibility: hidden;
27334
27715
  }
27335
27716
  .cds--side-nav__menu *,
27336
27717
  .cds--side-nav__menu *::before,
27337
27718
  .cds--side-nav__menu *::after {
27338
27719
  box-sizing: inherit;
27339
27720
  }
27721
+ .cds--side-nav__menu {
27722
+ display: block;
27723
+ max-block-size: 0;
27724
+ visibility: hidden;
27725
+ }
27340
27726
 
27341
27727
  .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
27342
27728
  max-block-size: 93.75rem;
@@ -27487,13 +27873,15 @@ a.cds--side-nav__link--current::before {
27487
27873
  font-family: inherit;
27488
27874
  font-size: 100%;
27489
27875
  vertical-align: baseline;
27490
- display: none;
27491
27876
  }
27492
27877
  .cds--side-nav__header-navigation *,
27493
27878
  .cds--side-nav__header-navigation *::before,
27494
27879
  .cds--side-nav__header-navigation *::after {
27495
27880
  box-sizing: inherit;
27496
27881
  }
27882
+ .cds--side-nav__header-navigation {
27883
+ display: none;
27884
+ }
27497
27885
  @media (max-width: 65.98rem) {
27498
27886
  .cds--side-nav__header-navigation {
27499
27887
  position: relative;
@@ -27568,17 +27956,19 @@ a.cds--side-nav__link--current::before {
27568
27956
  font-family: inherit;
27569
27957
  font-size: 100%;
27570
27958
  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
27959
  }
27577
27960
  .cds--switcher *,
27578
27961
  .cds--switcher *::before,
27579
27962
  .cds--switcher *::after {
27580
27963
  box-sizing: inherit;
27581
27964
  }
27965
+ .cds--switcher {
27966
+ display: flex;
27967
+ flex-direction: column;
27968
+ align-items: center;
27969
+ justify-content: center;
27970
+ color: var(--cds-text-secondary, #525252);
27971
+ }
27582
27972
 
27583
27973
  .cds--switcher__item {
27584
27974
  block-size: 2rem;
@@ -27655,6 +28045,13 @@ div:has(.cds--header) ~ .cds--content {
27655
28045
  font-family: inherit;
27656
28046
  font-size: 100%;
27657
28047
  vertical-align: baseline;
28048
+ }
28049
+ .cds--header *,
28050
+ .cds--header *::before,
28051
+ .cds--header *::after {
28052
+ box-sizing: inherit;
28053
+ }
28054
+ .cds--header {
27658
28055
  position: fixed;
27659
28056
  z-index: 8000;
27660
28057
  display: flex;
@@ -27665,11 +28062,6 @@ div:has(.cds--header) ~ .cds--content {
27665
28062
  inset-block-start: 0;
27666
28063
  inset-inline: 0;
27667
28064
  }
27668
- .cds--header *,
27669
- .cds--header *::before,
27670
- .cds--header *::after {
27671
- box-sizing: inherit;
27672
- }
27673
28065
 
27674
28066
  .cds--header__action {
27675
28067
  box-sizing: border-box;
@@ -27679,6 +28071,13 @@ div:has(.cds--header) ~ .cds--content {
27679
28071
  font-family: inherit;
27680
28072
  font-size: 100%;
27681
28073
  vertical-align: baseline;
28074
+ }
28075
+ .cds--header__action *,
28076
+ .cds--header__action *::before,
28077
+ .cds--header__action *::after {
28078
+ box-sizing: inherit;
28079
+ }
28080
+ .cds--header__action {
27682
28081
  display: inline-block;
27683
28082
  padding: 0;
27684
28083
  border: 0;
@@ -27689,20 +28088,17 @@ div:has(.cds--header) ~ .cds--content {
27689
28088
  cursor: pointer;
27690
28089
  text-align: start;
27691
28090
  inline-size: 100%;
28091
+ }
28092
+ .cds--header__action::-moz-focus-inner {
28093
+ border: 0;
28094
+ }
28095
+ .cds--header__action {
27692
28096
  display: inline-flex;
27693
28097
  border: 0.0625rem solid transparent;
27694
28098
  block-size: 3rem;
27695
28099
  inline-size: 3rem;
27696
28100
  transition: background-color 110ms, border-color 110ms;
27697
28101
  }
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
28102
  @media (max-width: 41.98rem) {
27707
28103
  .cds--header__action {
27708
28104
  min-inline-size: 3rem;
@@ -27859,17 +28255,19 @@ a.cds--header__name:hover {
27859
28255
  font-family: inherit;
27860
28256
  font-size: 100%;
27861
28257
  vertical-align: baseline;
27862
- display: flex;
27863
- padding: 0;
27864
- margin: 0;
27865
- block-size: 100%;
27866
- list-style: none;
27867
28258
  }
27868
28259
  .cds--header__menu-bar *,
27869
28260
  .cds--header__menu-bar *::before,
27870
28261
  .cds--header__menu-bar *::after {
27871
28262
  box-sizing: inherit;
27872
28263
  }
28264
+ .cds--header__menu-bar {
28265
+ display: flex;
28266
+ padding: 0;
28267
+ margin: 0;
28268
+ block-size: 100%;
28269
+ list-style: none;
28270
+ }
27873
28271
 
27874
28272
  a.cds--header__menu-item {
27875
28273
  position: relative;
@@ -28166,15 +28564,17 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28166
28564
  font-family: inherit;
28167
28565
  font-size: 100%;
28168
28566
  vertical-align: baseline;
28169
- overflow: hidden;
28170
- flex: 1 1;
28171
- padding: 1rem 0 0;
28172
28567
  }
28173
28568
  .cds--side-nav__items *,
28174
28569
  .cds--side-nav__items *::before,
28175
28570
  .cds--side-nav__items *::after {
28176
28571
  box-sizing: inherit;
28177
28572
  }
28573
+ .cds--side-nav__items {
28574
+ overflow: hidden;
28575
+ flex: 1 1;
28576
+ padding: 1rem 0 0;
28577
+ }
28178
28578
  .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
28579
  overflow-y: auto;
28180
28580
  }
@@ -28231,6 +28631,13 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28231
28631
  font-family: inherit;
28232
28632
  font-size: 100%;
28233
28633
  vertical-align: baseline;
28634
+ }
28635
+ .cds--side-nav__submenu *,
28636
+ .cds--side-nav__submenu *::before,
28637
+ .cds--side-nav__submenu *::after {
28638
+ box-sizing: inherit;
28639
+ }
28640
+ .cds--side-nav__submenu {
28234
28641
  display: inline-block;
28235
28642
  padding: 0;
28236
28643
  border: 0;
@@ -28241,6 +28648,11 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28241
28648
  cursor: pointer;
28242
28649
  text-align: start;
28243
28650
  inline-size: 100%;
28651
+ }
28652
+ .cds--side-nav__submenu::-moz-focus-inner {
28653
+ border: 0;
28654
+ }
28655
+ .cds--side-nav__submenu {
28244
28656
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
28245
28657
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
28246
28658
  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
@@ -28257,14 +28669,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28257
28669
  -moz-user-select: none;
28258
28670
  user-select: none;
28259
28671
  }
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
28672
 
28269
28673
  .cds--side-nav__submenu:hover {
28270
28674
  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
@@ -28344,15 +28748,17 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
28344
28748
  font-family: inherit;
28345
28749
  font-size: 100%;
28346
28750
  vertical-align: baseline;
28347
- display: block;
28348
- max-block-size: 0;
28349
- visibility: hidden;
28350
28751
  }
28351
28752
  .cds--side-nav__menu *,
28352
28753
  .cds--side-nav__menu *::before,
28353
28754
  .cds--side-nav__menu *::after {
28354
28755
  box-sizing: inherit;
28355
28756
  }
28757
+ .cds--side-nav__menu {
28758
+ display: block;
28759
+ max-block-size: 0;
28760
+ visibility: hidden;
28761
+ }
28356
28762
 
28357
28763
  .cds--side-nav__submenu[aria-expanded=true] + .cds--side-nav__menu {
28358
28764
  max-block-size: 93.75rem;
@@ -28503,13 +28909,15 @@ a.cds--side-nav__link--current::before {
28503
28909
  font-family: inherit;
28504
28910
  font-size: 100%;
28505
28911
  vertical-align: baseline;
28506
- display: none;
28507
28912
  }
28508
28913
  .cds--side-nav__header-navigation *,
28509
28914
  .cds--side-nav__header-navigation *::before,
28510
28915
  .cds--side-nav__header-navigation *::after {
28511
28916
  box-sizing: inherit;
28512
28917
  }
28918
+ .cds--side-nav__header-navigation {
28919
+ display: none;
28920
+ }
28513
28921
  @media (max-width: 65.98rem) {
28514
28922
  .cds--side-nav__header-navigation {
28515
28923
  position: relative;
@@ -28584,17 +28992,19 @@ a.cds--side-nav__link--current::before {
28584
28992
  font-family: inherit;
28585
28993
  font-size: 100%;
28586
28994
  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
28995
  }
28593
28996
  .cds--switcher *,
28594
28997
  .cds--switcher *::before,
28595
28998
  .cds--switcher *::after {
28596
28999
  box-sizing: inherit;
28597
29000
  }
29001
+ .cds--switcher {
29002
+ display: flex;
29003
+ flex-direction: column;
29004
+ align-items: center;
29005
+ justify-content: center;
29006
+ color: var(--cds-text-secondary, #525252);
29007
+ }
28598
29008
 
28599
29009
  .cds--switcher__item {
28600
29010
  block-size: 2rem;