@ebay/skin 19.13.0 → 19.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +1 -1
  2. package/dist/alert-dialog/alert-dialog.css +2 -2
  3. package/dist/breadcrumbs/breadcrumbs.css +0 -1
  4. package/dist/bundles/skin-default.css +103 -106
  5. package/dist/bundles/skin-full.css +103 -106
  6. package/dist/bundles/skin-headless.css +103 -106
  7. package/dist/button/button.css +29 -44
  8. package/dist/combobox/combobox.css +5 -22
  9. package/dist/confirm-dialog/confirm-dialog.css +2 -2
  10. package/dist/drawer-dialog/drawer-dialog.css +2 -2
  11. package/dist/file-input/file-input.css +0 -1
  12. package/dist/filter-button/filter-button.css +2 -12
  13. package/dist/filter-chip/filter-chip.css +6 -3
  14. package/dist/filter-menu-button/filter-menu-button.css +10 -20
  15. package/dist/global/global.css +4 -16
  16. package/dist/icon-button/icon-button.css +22 -68
  17. package/dist/lightbox-dialog/lightbox-dialog.css +2 -2
  18. package/dist/listbox/listbox.css +4 -13
  19. package/dist/listbox-button/listbox-button.css +5 -21
  20. package/dist/menu-button/menu-button.css +2 -9
  21. package/dist/number-input/number-input.css +0 -1
  22. package/dist/panel-dialog/panel-dialog.css +2 -2
  23. package/dist/progress-stepper/progress-stepper.css +1 -0
  24. package/dist/section-notice/section-notice.css +3 -10
  25. package/dist/select/select.css +0 -1
  26. package/dist/selection-chip/selection-chip.css +4 -2
  27. package/dist/svg/icon/icon-ai-camera-16.svg +5 -0
  28. package/dist/svg/icon/icon-ai-camera-20.svg +5 -0
  29. package/dist/svg/icon/icon-ai-camera-24.svg +5 -0
  30. package/dist/svg/icon/icon-attention-triangle-16.svg +5 -0
  31. package/dist/svg/icon/icon-attention-triangle-24.svg +5 -0
  32. package/dist/svg/icon/icon-attention-triangle-filled-16.svg +5 -0
  33. package/dist/svg/icon/icon-attention-triangle-filled-24.svg +5 -0
  34. package/dist/svg/icon/icon-clock-12.svg +9 -0
  35. package/dist/svg/icon/icon-closed-caption-16.svg +2 -7
  36. package/dist/svg/icon/icon-closed-caption-24.svg +5 -0
  37. package/dist/svg/icon/icon-closed-caption-filled-16.svg +2 -4
  38. package/dist/svg/icon/icon-closed-caption-filled-24.svg +5 -0
  39. package/dist/svg/icon/icon-fingerprint-16.svg +5 -0
  40. package/dist/svg/icons.svg +61 -9
  41. package/dist/textbox/textbox.css +0 -2
  42. package/package.json +8 -7
@@ -669,16 +669,16 @@ legend{
669
669
  }
670
670
 
671
671
  a{
672
- color:var(--link-foreground-color-default, var(--color-foreground-link-primary));
672
+ color:var(--color-foreground-link-primary);
673
673
  }
674
674
  a:visited{
675
- color:var(--link-foreground-color-visited, var(--color-foreground-link-visited));
675
+ color:var(--color-foreground-link-visited);
676
676
  }
677
677
  a:hover{
678
- color:var(--link-foreground-color-hover, var(--color-foreground-secondary));
678
+ color:var(--color-foreground-secondary);
679
679
  }
680
680
  a:not([href]),a[aria-disabled=true]{
681
- color:var(--link-forground-color-disabled, var(--color-foreground-disabled));
681
+ color:var(--color-foreground-disabled);
682
682
  }
683
683
  .clearfix:after,.clearfix:before{
684
684
  content:" ";
@@ -883,12 +883,12 @@ ul.accordion--large summary.details__summary{
883
883
  --dialog-lightbox-max-width:616px;
884
884
  }
885
885
  .alert-dialog[role=alertdialog]{
886
+ align-items:flex-start;
886
887
  background-color:var(--dialog-scrim-color-show);
887
888
  bottom:0;
889
+ justify-content:center;
888
890
  left:0;
889
891
  -webkit-overflow-scrolling:touch;
890
- align-items:flex-start;
891
- justify-content:center;
892
892
  position:fixed;
893
893
  right:0;
894
894
  top:0;
@@ -1188,7 +1188,6 @@ ul.accordion--large summary.details__summary{
1188
1188
  nav.breadcrumbs{
1189
1189
  color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
1190
1190
  font-size:var(--font-size-small);
1191
- height:-moz-fit-content;
1192
1191
  height:fit-content;
1193
1192
  margin:8px 0;
1194
1193
  min-height:16px;
@@ -1357,7 +1356,7 @@ a.fake-btn--slim,button.btn--slim{
1357
1356
  padding-right:var(--spacing-100);
1358
1357
  }
1359
1358
 
1360
- a.fake-btn:visited{
1359
+ a.fake-btn:hover,a.fake-btn:visited{
1361
1360
  color:inherit;
1362
1361
  }
1363
1362
 
@@ -1411,17 +1410,19 @@ a.fake-btn__cell--fixed-height svg.icon,button.btn__cell--fixed-height svg.icon{
1411
1410
  }
1412
1411
 
1413
1412
  a.fake-btn--primary,button.btn--primary{
1414
- background-color:var(--btn-primary-background-color, var(--color-background-accent));
1415
- border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
1416
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
1413
+ background-color:var(--color-background-accent);
1414
+ border-color:var(--color-stroke-accent);
1415
+ color:var(--color-foreground-on-accent);
1417
1416
  font-weight:700;
1418
- overflow:hidden;
1419
- position:relative;
1420
1417
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
1421
1418
  }
1422
1419
  a.fake-btn--primary:active,button.btn--primary:active{
1423
1420
  transform:scale(.97);
1424
1421
  }
1422
+ a.fake-btn--primary,button.btn--primary{
1423
+ overflow:hidden;
1424
+ position:relative;
1425
+ }
1425
1426
  a.fake-btn--primary:after,button.btn--primary:after{
1426
1427
  background-color:var(--state-layer-neutral);
1427
1428
  content:"";
@@ -1443,14 +1444,14 @@ a.fake-btn--primary{
1443
1444
  outline-color:var(--color-foreground-primary);
1444
1445
  }
1445
1446
 
1446
- a.fake-btn--primary:visited{
1447
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
1447
+ a.fake-btn--primary:hover,a.fake-btn--primary:visited{
1448
+ color:var(--color-foreground-on-accent);
1448
1449
  }
1449
1450
 
1450
1451
  a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
1451
- background-color:var(--btn-primary-destructive-background-color, var(--color-background-attention));
1452
- border-color:var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
1453
- color:var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
1452
+ background-color:var(--color-background-attention);
1453
+ border-color:var(--color-stroke-attention);
1454
+ color:var(--color-foreground-on-attention);
1454
1455
  font-weight:700;
1455
1456
  overflow:hidden;
1456
1457
  position:relative;
@@ -1473,8 +1474,8 @@ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):a
1473
1474
  }
1474
1475
 
1475
1476
  button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
1476
- background-color:var(--btn-primary-destructive-disabled-background, var(--color-background-disabled));
1477
- border-color:var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
1477
+ background-color:var(--color-background-disabled);
1478
+ border-color:var(--color-stroke-disabled);
1478
1479
  }
1479
1480
 
1480
1481
  button.btn .progress-spinner{
@@ -1527,15 +1528,17 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
1527
1528
 
1528
1529
  a.fake-btn--secondary,button.btn--secondary{
1529
1530
  background-color:var(--btn-secondary-background-color, transparent);
1530
- border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
1531
- color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
1532
- overflow:hidden;
1533
- position:relative;
1531
+ border-color:var(--color-stroke-accent);
1532
+ color:var(--color-foreground-accent);
1534
1533
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
1535
1534
  }
1536
1535
  a.fake-btn--secondary:active,button.btn--secondary:active{
1537
1536
  transform:scale(.97);
1538
1537
  }
1538
+ a.fake-btn--secondary,button.btn--secondary{
1539
+ overflow:hidden;
1540
+ position:relative;
1541
+ }
1539
1542
  a.fake-btn--secondary:after,button.btn--secondary:after{
1540
1543
  background-color:var(--state-layer-neutral);
1541
1544
  content:"";
@@ -1553,7 +1556,7 @@ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-b
1553
1556
  background-color:var(--state-layer-pressed);
1554
1557
  }
1555
1558
 
1556
- a.fake-btn--secondary:visited{
1559
+ a.fake-btn--secondary:hover,a.fake-btn--secondary:visited{
1557
1560
  color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
1558
1561
  }
1559
1562
 
@@ -1584,13 +1587,15 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
1584
1587
 
1585
1588
  a.fake-btn--tertiary,button.btn--tertiary{
1586
1589
  border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
1587
- overflow:hidden;
1588
- position:relative;
1589
1590
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
1590
1591
  }
1591
1592
  a.fake-btn--tertiary:active,button.btn--tertiary:active{
1592
1593
  transform:scale(.97);
1593
1594
  }
1595
+ a.fake-btn--tertiary,button.btn--tertiary{
1596
+ overflow:hidden;
1597
+ position:relative;
1598
+ }
1594
1599
  a.fake-btn--tertiary:after,button.btn--tertiary:after{
1595
1600
  background-color:var(--state-layer-neutral);
1596
1601
  content:"";
@@ -2721,8 +2726,8 @@ span.combobox{
2721
2726
  }
2722
2727
 
2723
2728
  .combobox__listbox{
2724
- background-color:var(--combobox-listbox-background-color, var(--color-background-elevated));
2725
- border-radius:var(--combobox-listbox-border-radius, var(--border-radius-50));
2729
+ background-color:var(--color-background-elevated);
2730
+ border-radius:var(--border-radius-50);
2726
2731
  box-shadow:var(--bubble-shadow);
2727
2732
  box-sizing:border-box;
2728
2733
  display:none;
@@ -2731,7 +2736,6 @@ span.combobox{
2731
2736
  overflow-y:auto;
2732
2737
  position:absolute;
2733
2738
  top:0;
2734
- width:-moz-fit-content;
2735
2739
  width:fit-content;
2736
2740
  z-index:2;
2737
2741
  }
@@ -2759,11 +2763,11 @@ span.combobox{
2759
2763
 
2760
2764
  .combobox__option[role^=option]{
2761
2765
  background-color:initial;
2762
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
2766
+ border-color:var(--color-background-primary);
2763
2767
  border-style:solid;
2764
2768
  border-width:1px;
2765
2769
  box-sizing:border-box;
2766
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
2770
+ color:var(--color-foreground-primary);
2767
2771
  cursor:default;
2768
2772
  display:inline-grid;
2769
2773
  font-family:inherit;
@@ -2780,7 +2784,7 @@ span.combobox{
2780
2784
  display:none;
2781
2785
  }
2782
2786
  .combobox__option[role^=option]:hover{
2783
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
2787
+ color:var(--color-foreground-primary);
2784
2788
  }
2785
2789
  .combobox__option[role^=option]:active{
2786
2790
  font-weight:700;
@@ -2853,7 +2857,6 @@ span.combobox{
2853
2857
 
2854
2858
  .combobox__control>input{
2855
2859
  -webkit-appearance:none;
2856
- -moz-appearance:none;
2857
2860
  appearance:none;
2858
2861
  background-color:var(--combobox-textbox-background-color, var(--color-background-secondary));
2859
2862
  border-color:var(--combobox-textbox-border-color, var(--color-stroke-default));
@@ -2952,12 +2955,12 @@ span.combobox{
2952
2955
  }
2953
2956
 
2954
2957
  .confirm-dialog[role=dialog]{
2958
+ align-items:flex-start;
2955
2959
  background-color:var(--dialog-scrim-color-show);
2956
2960
  bottom:0;
2961
+ justify-content:center;
2957
2962
  left:0;
2958
2963
  -webkit-overflow-scrolling:touch;
2959
- align-items:flex-start;
2960
- justify-content:center;
2961
2964
  position:fixed;
2962
2965
  right:0;
2963
2966
  top:0;
@@ -3382,12 +3385,12 @@ details.details summary:focus:not(:focus-visible){
3382
3385
  }
3383
3386
  /*! DEPRECATED COMPONENT. Will be removed next major version */
3384
3387
  .drawer-dialog[role=dialog]{
3388
+ align-items:flex-end;
3385
3389
  background-color:var(--dialog-scrim-color-show);
3386
3390
  bottom:0;
3387
3391
  left:0;
3388
- -webkit-overflow-scrolling:touch;
3389
- align-items:flex-end;
3390
3392
  overflow:hidden;
3393
+ -webkit-overflow-scrolling:touch;
3391
3394
  position:fixed;
3392
3395
  right:0;
3393
3396
  top:0;
@@ -4165,7 +4168,6 @@ div.file-input__container{
4165
4168
  display:flex;
4166
4169
  flex-direction:row;
4167
4170
  gap:var(--spacing-100);
4168
- min-width:-moz-fit-content;
4169
4171
  min-width:fit-content;
4170
4172
  padding:var(--spacing-200);
4171
4173
  pointer-events:none;
@@ -4236,12 +4238,11 @@ span.file-input__content-cta{
4236
4238
 
4237
4239
  a.filter-link,button.filter-button{
4238
4240
  align-items:center;
4239
- background-color:var(--filter-button-background-color, var(--color-background-secondary));
4241
+ background-color:var(--color-background-secondary);
4240
4242
  border:1px solid transparent;
4241
- border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
4242
4243
  border-radius:16px;
4243
4244
  box-sizing:border-box;
4244
- color:var(--filter-button-foreground-color, var(--color-foreground-primary));
4245
+ color:var(--color-foreground-primary);
4245
4246
  display:inline-flex;
4246
4247
  flex:0 1 auto;
4247
4248
  flex-direction:column;
@@ -4340,9 +4341,7 @@ a.filter-chip,button.filter-chip{
4340
4341
  justify-content:space-between;
4341
4342
  max-width:296px;
4342
4343
  min-width:32px;
4343
- overflow:hidden;
4344
4344
  padding:0 var(--spacing-150);
4345
- position:relative;
4346
4345
  text-decoration:none;
4347
4346
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
4348
4347
  vertical-align:bottom;
@@ -4350,6 +4349,10 @@ a.filter-chip,button.filter-chip{
4350
4349
  a.filter-chip:active,button.filter-chip:active{
4351
4350
  transform:scale(.97);
4352
4351
  }
4352
+ a.filter-chip,button.filter-chip{
4353
+ overflow:hidden;
4354
+ position:relative;
4355
+ }
4353
4356
  a.filter-chip:after,button.filter-chip:after{
4354
4357
  background-color:var(--state-layer-neutral);
4355
4358
  content:"";
@@ -4374,8 +4377,8 @@ a.filter-chip--expressive,button.filter-chip--expressive{
4374
4377
 
4375
4378
  .filter-chip__media{
4376
4379
  align-items:center;
4377
- border-radius:8px;
4378
4380
  border-radius:var(--spacing-400);
4381
+ border-radius:8px;
4379
4382
  display:flex;
4380
4383
  justify-content:center;
4381
4384
  margin-inline-start:-8px;
@@ -4689,12 +4692,11 @@ span.filter-menu-button+span.filter-menu-button{
4689
4692
 
4690
4693
  button.filter-menu-button__button{
4691
4694
  align-items:center;
4692
- background-color:var(--filter-button-background-color, var(--color-background-secondary));
4695
+ background-color:var(--color-background-secondary);
4693
4696
  border:1px solid transparent;
4694
- border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
4695
4697
  border-radius:16px;
4696
4698
  box-sizing:border-box;
4697
- color:var(--filter-button-foreground-color, var(--color-foreground-primary));
4699
+ color:var(--color-foreground-primary);
4698
4700
  display:inline-flex;
4699
4701
  flex:0 1 auto;
4700
4702
  flex-direction:column;
@@ -4714,7 +4716,7 @@ button.filter-menu-button__button+button.filter-menu-button__button{
4714
4716
  margin-left:8px;
4715
4717
  }
4716
4718
  button.filter-menu-button__button:active,button.filter-menu-button__button:focus,button.filter-menu-button__button:hover{
4717
- background-color:var(--filter-button-background-color, var(--color-state-secondary-hover));
4719
+ background-color:var(--color-state-secondary-hover);
4718
4720
  }
4719
4721
 
4720
4722
  .filter-menu-button__button-cell{
@@ -4836,8 +4838,6 @@ span.filter-menu-button__radio svg.icon--checked{
4836
4838
  justify-content:space-between;
4837
4839
  line-height:1.4em;
4838
4840
  margin:0;
4839
- outline-offset:-4px;
4840
- padding:8px 16px;
4841
4841
  width:100%;
4842
4842
  }
4843
4843
  .filter-menu-button__item:hover{
@@ -4852,6 +4852,10 @@ span.filter-menu-button__radio svg.icon--checked{
4852
4852
  .filter-menu-button__item:disabled:hover,.filter-menu-button__item[aria-disabled=true]:hover{
4853
4853
  background-color:inherit;
4854
4854
  }
4855
+ .filter-menu-button__item{
4856
+ outline-offset:-4px;
4857
+ padding:8px 16px;
4858
+ }
4855
4859
  .filter-menu-button__item:hover{
4856
4860
  background-color:var(--color-state-primary-hover);
4857
4861
  }
@@ -4884,8 +4888,9 @@ span.filter-menu-button__item{
4884
4888
  button.filter-menu-button__footer{
4885
4889
  background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
4886
4890
  border:none;
4887
- border-top:1px solid;
4888
- border-color:var(--filter-menu-border-color, var(--color-stroke-subtle));
4891
+ border-color:var(--color-stroke-subtle);
4892
+ border-top-style:solid;
4893
+ border-top-width:1px;
4889
4894
  bottom:0;
4890
4895
  box-sizing:border-box;
4891
4896
  color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -6340,10 +6345,12 @@ a.icon-link>svg{
6340
6345
  }
6341
6346
 
6342
6347
  a.icon-link,button.icon-btn{
6343
- background-color:var(--icon-button-background-color, var(--color-background-secondary));
6348
+ align-items:center;
6349
+ background-color:var(--color-background-secondary);
6344
6350
  border:2px solid transparent;
6345
6351
  border-radius:50px;
6346
6352
  box-sizing:border-box;
6353
+ display:inline-flex;
6347
6354
  font-family:inherit;
6348
6355
  height:40px;
6349
6356
  justify-content:center;
@@ -6353,7 +6360,7 @@ a.icon-link,button.icon-btn{
6353
6360
  width:40px;
6354
6361
  }
6355
6362
  a.icon-link>svg,button.icon-btn>svg{
6356
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
6363
+ fill:var(--color-foreground-primary);
6357
6364
  max-width:75%;
6358
6365
  position:relative;
6359
6366
  }
@@ -6368,17 +6375,17 @@ a.icon-link:not(:focus-visible),button.icon-btn:not(:focus-visible){
6368
6375
  }
6369
6376
 
6370
6377
  a.icon-link.icon-link--primary,button.icon-btn.icon-btn--primary{
6371
- background-color:var(--btn-primary-background-color, var(--color-background-accent));
6372
- border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
6373
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
6378
+ background-color:var(--color-background-accent);
6379
+ border-color:var(--color-stroke-accent);
6380
+ color:var(--color-foreground-on-accent);
6374
6381
  }
6375
6382
 
6376
6383
  a.icon-link.icon-link--primary>svg,button.icon-btn.icon-btn--primary>svg{
6377
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
6384
+ fill:var(--color-foreground-on-accent);
6378
6385
  }
6379
6386
 
6380
6387
  a.icon-link.icon-link--secondary>svg,button.icon-btn.icon-btn--secondary>svg{
6381
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-accent));
6388
+ fill:var(--color-foreground-accent);
6382
6389
  }
6383
6390
 
6384
6391
  a.icon-link.icon-link--small .progress-spinner,button.icon-btn.icon-btn--small .progress-spinner{
@@ -6404,7 +6411,7 @@ a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparen
6404
6411
  }
6405
6412
 
6406
6413
  a.icon-link:visited>svg{
6407
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
6414
+ fill:var(--color-foreground-primary);
6408
6415
  }
6409
6416
 
6410
6417
  a:not([href]).icon-link>svg,a[aria-disabled=true].icon-link>svg,button[aria-disabled=true].icon-btn>svg,button[disabled].icon-btn>svg{
@@ -6416,11 +6423,11 @@ a:not([href]).icon-link:focus>svg,a:not([href]).icon-link:hover>svg,a[aria-disab
6416
6423
  }
6417
6424
 
6418
6425
  a.icon-link:visited:focus>svg,a.icon-link:visited:hover>svg{
6419
- fill:var(--icon-button-icon-hover-foreground-color, var(--color-foreground-primary));
6426
+ fill:var(--color-foreground-primary);
6420
6427
  }
6421
6428
 
6422
6429
  a.icon-link.icon-link--primary:visited>svg{
6423
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
6430
+ fill:var(--color-foreground-on-accent);
6424
6431
  }
6425
6432
 
6426
6433
  a.icon-link--badged,button.icon-btn--badged{
@@ -6449,12 +6456,12 @@ a.icon-link.icon-link--primary,a.icon-link.icon-link--secondary,a.icon-link.icon
6449
6456
  }
6450
6457
 
6451
6458
  a:not([href]).icon-link.icon-link--primary,a[aria-disabled=true].icon-link.icon-link--primary,button[aria-disabled=true].icon-btn.icon-btn--primary,button[disabled].icon-btn.icon-btn--primary{
6452
- background-color:var(--icon-button-disabled-background-color, var(--color-background-disabled));
6453
- border-color:var(--btn-primary-disabled-border-color, var(--color-stroke-disabled));
6459
+ background-color:var(--color-background-disabled);
6460
+ border-color:var(--color-stroke-disabled);
6454
6461
  }
6455
6462
 
6456
6463
  a:not([href]).icon-link.icon-link--primary>svg,a[aria-disabled=true].icon-link.icon-link--primary>svg,button[aria-disabled=true].icon-btn.icon-btn--primary>svg,button[disabled].icon-btn.icon-btn--primary>svg{
6457
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
6464
+ fill:var(--color-foreground-on-accent);
6458
6465
  }
6459
6466
 
6460
6467
  a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--primary .progress-spinner{
@@ -6464,8 +6471,8 @@ a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--prima
6464
6471
 
6465
6472
  a.icon-link.icon-link--secondary,button.icon-btn.icon-btn--secondary{
6466
6473
  background-color:initial;
6467
- border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
6468
- color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
6474
+ border-color:var(--color-stroke-accent);
6475
+ color:var(--color-foreground-accent);
6469
6476
  }
6470
6477
 
6471
6478
  a.icon-link.icon-link--primary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--primary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--primary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--primary:not([disabled],[aria-disabled=true]):hover{
@@ -6481,11 +6488,11 @@ a.icon-link.icon-link--secondary .progress-spinner,a.icon-link.icon-link--tertia
6481
6488
  }
6482
6489
 
6483
6490
  a:not([href]).icon-link.icon-link--secondary,a[aria-disabled=true].icon-link.icon-link--secondary,button[aria-disabled=true].icon-btn.icon-btn--secondary,button[disabled].icon-btn.icon-btn--secondary{
6484
- border-color:var(--btn-secondary-disabled-border-color, var(--color-stroke-disabled));
6491
+ border-color:var(--color-stroke-disabled);
6485
6492
  }
6486
6493
 
6487
6494
  a:not([href]).icon-link.icon-blinktn--secondary>svg,a[aria-disabled=true].icon-link.icon-link--secondary>svg,button[aria-disabled=true].icon-btn.icon-btn--secondary>svg,button[disabled].icon-btn.icon-btn--secondary>svg{
6488
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-disabled));
6495
+ fill:var(--color-foreground-disabled);
6489
6496
  }
6490
6497
 
6491
6498
  a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--secondary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--secondary:not([disabled],[aria-disabled=true]):hover{
@@ -6497,12 +6504,12 @@ a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):active,but
6497
6504
 
6498
6505
  a.icon-link.icon-link--tertiary,button.icon-btn.icon-btn--tertiary{
6499
6506
  background-color:initial;
6500
- border-color:var(--btn-primary-border-color, var(--color-stroke-default));
6501
- color:var(--btn-primary-foreground-color, var(--color-foreground-accent));
6507
+ border-color:var(--color-stroke-default);
6508
+ color:var(--color-foreground-accent);
6502
6509
  }
6503
6510
 
6504
6511
  a:not([href]).icon-link.icon-link--tertiary,a[aria-disabled=true].icon-link.icon-link--tertiary,button[aria-disabled=true].icon-btn.icon-btn--tertiary,button[disabled].icon-btn.icon-btn--tertiary{
6505
- border-color:var(--btn-tertiary-disabled-border-color, var(--color-stroke-disabled));
6512
+ border-color:var(--color-stroke-disabled);
6506
6513
  }
6507
6514
 
6508
6515
  a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):hover{
@@ -7758,12 +7765,12 @@ span.inline-notice{
7758
7765
  }
7759
7766
 
7760
7767
  .lightbox-dialog[role=dialog]{
7768
+ align-items:flex-start;
7761
7769
  background-color:var(--dialog-scrim-color-show);
7762
7770
  bottom:0;
7771
+ justify-content:center;
7763
7772
  left:0;
7764
7773
  -webkit-overflow-scrolling:touch;
7765
- align-items:flex-start;
7766
- justify-content:center;
7767
7774
  position:fixed;
7768
7775
  right:0;
7769
7776
  top:0;
@@ -8191,11 +8198,11 @@ div.listbox__options--reverse[role=listbox]{
8191
8198
 
8192
8199
  div.listbox__option[role=option]{
8193
8200
  background-color:initial;
8194
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
8201
+ border-color:var(--color-background-primary);
8195
8202
  border-style:solid;
8196
8203
  border-width:1px;
8197
8204
  box-sizing:border-box;
8198
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
8205
+ color:var(--color-foreground-primary);
8199
8206
  display:inline-grid;
8200
8207
  font-family:inherit;
8201
8208
  grid-template-columns:auto auto;
@@ -8214,7 +8221,7 @@ div.listbox__option[role=option][hidden]{
8214
8221
  }
8215
8222
  div.listbox__option[role=option]:hover{
8216
8223
  background-color:var(--color-state-primary-hover);
8217
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
8224
+ color:var(--color-foreground-primary);
8218
8225
  }
8219
8226
  div.listbox__option[role=option]:active{
8220
8227
  font-weight:700;
@@ -8232,12 +8239,12 @@ span.listbox__value{
8232
8239
 
8233
8240
  div.listbox__option svg.icon{
8234
8241
  align-self:center;
8242
+ margin-inline-start:var(--spacing-100);
8235
8243
  fill:currentColor;
8236
8244
  margin:0 auto;
8237
8245
  opacity:0;
8238
8246
  stroke:currentColor;
8239
8247
  stroke-width:0;
8240
- margin-inline-start:var(--spacing-100);
8241
8248
  }
8242
8249
 
8243
8250
  div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
@@ -8271,8 +8278,8 @@ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--
8271
8278
  }
8272
8279
 
8273
8280
  div.listbox-button__listbox{
8274
- background-color:var(--listbox-button-listbox-background-color, var(--color-background-elevated));
8275
- border-radius:var(--listbox-button-listbox-border-radius, var(--border-radius-50));
8281
+ background-color:var(--color-background-elevated);
8282
+ border-radius:var(--border-radius-50);
8276
8283
  box-shadow:var(--bubble-shadow);
8277
8284
  box-sizing:border-box;
8278
8285
  display:none;
@@ -8281,7 +8288,6 @@ div.listbox-button__listbox{
8281
8288
  overflow-y:auto;
8282
8289
  position:absolute;
8283
8290
  top:0;
8284
- width:-moz-fit-content;
8285
8291
  width:fit-content;
8286
8292
  z-index:2;
8287
8293
  }
@@ -8401,11 +8407,11 @@ div.listbox-button__option[role=option][aria-selected=true] svg.icon{
8401
8407
 
8402
8408
  div.listbox-button__option[role=option]{
8403
8409
  background-color:initial;
8404
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
8410
+ border-color:var(--color-background-primary);
8405
8411
  border-style:solid;
8406
8412
  border-width:1px;
8407
8413
  box-sizing:border-box;
8408
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
8414
+ color:var(--color-foreground-primary);
8409
8415
  cursor:default;
8410
8416
  display:inline-grid;
8411
8417
  font-family:inherit;
@@ -8425,7 +8431,7 @@ div.listbox-button__option[role=option][hidden]{
8425
8431
  }
8426
8432
  div.listbox-button__option[role=option]:hover{
8427
8433
  background-color:var(--color-state-primary-hover);
8428
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
8434
+ color:var(--color-foreground-primary);
8429
8435
  }
8430
8436
  div.listbox-button__option[role=option]:active{
8431
8437
  font-weight:700;
@@ -8595,7 +8601,6 @@ span.listbox-button__value{
8595
8601
  margin:0;
8596
8602
  }
8597
8603
  .number-input .textbox .textbox__control[type=number]{
8598
- -moz-appearance:textfield;
8599
8604
  -webkit-appearance:textfield;
8600
8605
  appearance:textfield;
8601
8606
  }
@@ -8813,8 +8818,8 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
8813
8818
  }
8814
8819
 
8815
8820
  .fake-menu-button__menu,.menu-button__menu{
8816
- background-color:var(--menu-button-menu-background-color, var(--color-background-elevated));
8817
- border-radius:var(--menu-button-menu-border-radius, var(--border-radius-50));
8821
+ background-color:var(--color-background-elevated);
8822
+ border-radius:var(--border-radius-50);
8818
8823
  box-shadow:var(--bubble-shadow);
8819
8824
  box-sizing:border-box;
8820
8825
  display:none;
@@ -8824,7 +8829,6 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
8824
8829
  overflow-y:auto;
8825
8830
  position:absolute;
8826
8831
  top:0;
8827
- width:-moz-fit-content;
8828
8832
  width:fit-content;
8829
8833
  z-index:2;
8830
8834
  }
@@ -9415,10 +9419,10 @@ nav.pagination--fluid ol.pagination__items li{
9415
9419
  .panel-dialog[role=dialog]{
9416
9420
  background-color:var(--dialog-scrim-color-show);
9417
9421
  bottom:0;
9418
- left:0;
9419
- -webkit-overflow-scrolling:touch;
9420
9422
  flex-direction:column;
9423
+ left:0;
9421
9424
  overflow:hidden;
9425
+ -webkit-overflow-scrolling:touch;
9422
9426
  position:fixed;
9423
9427
  right:0;
9424
9428
  top:0;
@@ -10164,6 +10168,7 @@ hr.progress-stepper__separator{
10164
10168
  min-width:inherit;
10165
10169
  width:4px;
10166
10170
  }
10171
+
10167
10172
  [dir=rtl] .progress-stepper__item:first-child .progress-stepper__text{
10168
10173
  text-align:right;
10169
10174
  }
@@ -10298,7 +10303,7 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
10298
10303
 
10299
10304
  div[role=region].section-notice,section.section-notice{
10300
10305
  display:grid;
10301
- grid-template-columns:32px auto auto auto;
10306
+ grid-template-columns:32px auto min-content min-content;
10302
10307
  }
10303
10308
  .section-notice--education{
10304
10309
  background-color:var(--section-notice-education-background-color, var(--color-background-education));
@@ -10390,15 +10395,13 @@ p.section-notice__cta{
10390
10395
  grid-column:4;
10391
10396
  grid-row:1;
10392
10397
  justify-self:flex-end;
10393
- margin-right:var(--spacing-200);
10394
10398
  margin-top:0;
10395
- padding-right:var(--spacing-200);
10396
10399
  }
10397
10400
  .section-notice__header~.section-notice__cta{
10398
- grid-column:4;
10401
+ grid-column:3;
10399
10402
  }
10400
10403
  .section-notice__footer{
10401
- padding-left:var(--spacing-200);
10404
+ padding-inline-start:var(--spacing-200);
10402
10405
  }
10403
10406
  }
10404
10407
  [dir=rtl] .section-notice__footer{
@@ -10406,15 +10409,10 @@ p.section-notice__cta{
10406
10409
  margin-left:0;
10407
10410
  margin-right:auto;
10408
10411
  padding-left:0;
10409
- padding-right:0;
10410
10412
  }
10411
10413
  [dir=rtl] .section-notice__main{
10412
10414
  padding-right:0;
10413
10415
  }
10414
- [dir=rtl] p.section-notice__cta{
10415
- margin-left:16px;
10416
- padding-left:16px;
10417
- }
10418
10416
  .section-notice__header:has(svg[class*="24"]){
10419
10417
  height:var(--spacing-300);
10420
10418
  }
@@ -10595,7 +10593,6 @@ span.select{
10595
10593
 
10596
10594
  .select select{
10597
10595
  -webkit-appearance:none;
10598
- -moz-appearance:none;
10599
10596
  appearance:none;
10600
10597
  background-color:var(--select-background-color, var(--color-background-secondary));
10601
10598
  border-color:var(--select-border-color, var(--color-stroke-default));
@@ -10718,9 +10715,7 @@ span.select{
10718
10715
  justify-content:space-between;
10719
10716
  max-width:296px;
10720
10717
  min-width:32px;
10721
- overflow:hidden;
10722
10718
  padding:0 var(--spacing-150);
10723
- position:relative;
10724
10719
  text-decoration:none;
10725
10720
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
10726
10721
  vertical-align:bottom;
@@ -10728,6 +10723,10 @@ span.select{
10728
10723
  .selection-chip:active{
10729
10724
  transform:scale(.97);
10730
10725
  }
10726
+ .selection-chip{
10727
+ overflow:hidden;
10728
+ position:relative;
10729
+ }
10731
10730
  .selection-chip:after{
10732
10731
  background-color:var(--state-layer-neutral);
10733
10732
  content:"";
@@ -11658,7 +11657,6 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
11658
11657
  gap:var(--spacing-100);
11659
11658
  overflow:hidden;
11660
11659
  position:relative;
11661
- width:-moz-fit-content;
11662
11660
  width:fit-content;
11663
11661
  }
11664
11662
  .textbox button.icon-btn{
@@ -11714,7 +11712,6 @@ input.textbox__control:last-child:not([readonly]){
11714
11712
 
11715
11713
  input.textbox__control,textarea.textbox__control{
11716
11714
  -webkit-appearance:none;
11717
- -moz-appearance:none;
11718
11715
  appearance:none;
11719
11716
  flex-grow:1;
11720
11717
  font-size:1em;