@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
@@ -36,16 +36,16 @@ legend{
36
36
  }
37
37
 
38
38
  a{
39
- color:var(--link-foreground-color-default, var(--color-foreground-link-primary));
39
+ color:var(--color-foreground-link-primary);
40
40
  }
41
41
  a:visited{
42
- color:var(--link-foreground-color-visited, var(--color-foreground-link-visited));
42
+ color:var(--color-foreground-link-visited);
43
43
  }
44
44
  a:hover{
45
- color:var(--link-foreground-color-hover, var(--color-foreground-secondary));
45
+ color:var(--color-foreground-secondary);
46
46
  }
47
47
  a:not([href]),a[aria-disabled=true]{
48
- color:var(--link-forground-color-disabled, var(--color-foreground-disabled));
48
+ color:var(--color-foreground-disabled);
49
49
  }
50
50
  .clearfix:after,.clearfix:before{
51
51
  content:" ";
@@ -250,12 +250,12 @@ ul.accordion--large summary.details__summary{
250
250
  --dialog-lightbox-max-width:616px;
251
251
  }
252
252
  .alert-dialog[role=alertdialog]{
253
+ align-items:flex-start;
253
254
  background-color:var(--dialog-scrim-color-show);
254
255
  bottom:0;
256
+ justify-content:center;
255
257
  left:0;
256
258
  -webkit-overflow-scrolling:touch;
257
- align-items:flex-start;
258
- justify-content:center;
259
259
  position:fixed;
260
260
  right:0;
261
261
  top:0;
@@ -555,7 +555,6 @@ ul.accordion--large summary.details__summary{
555
555
  nav.breadcrumbs{
556
556
  color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
557
557
  font-size:var(--font-size-small);
558
- height:-moz-fit-content;
559
558
  height:fit-content;
560
559
  margin:8px 0;
561
560
  min-height:16px;
@@ -724,7 +723,7 @@ a.fake-btn--slim,button.btn--slim{
724
723
  padding-right:var(--spacing-100);
725
724
  }
726
725
 
727
- a.fake-btn:visited{
726
+ a.fake-btn:hover,a.fake-btn:visited{
728
727
  color:inherit;
729
728
  }
730
729
 
@@ -778,17 +777,19 @@ a.fake-btn__cell--fixed-height svg.icon,button.btn__cell--fixed-height svg.icon{
778
777
  }
779
778
 
780
779
  a.fake-btn--primary,button.btn--primary{
781
- background-color:var(--btn-primary-background-color, var(--color-background-accent));
782
- border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
783
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
780
+ background-color:var(--color-background-accent);
781
+ border-color:var(--color-stroke-accent);
782
+ color:var(--color-foreground-on-accent);
784
783
  font-weight:700;
785
- overflow:hidden;
786
- position:relative;
787
784
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
788
785
  }
789
786
  a.fake-btn--primary:active,button.btn--primary:active{
790
787
  transform:scale(.97);
791
788
  }
789
+ a.fake-btn--primary,button.btn--primary{
790
+ overflow:hidden;
791
+ position:relative;
792
+ }
792
793
  a.fake-btn--primary:after,button.btn--primary:after{
793
794
  background-color:var(--state-layer-neutral);
794
795
  content:"";
@@ -810,14 +811,14 @@ a.fake-btn--primary{
810
811
  outline-color:var(--color-foreground-primary);
811
812
  }
812
813
 
813
- a.fake-btn--primary:visited{
814
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
814
+ a.fake-btn--primary:hover,a.fake-btn--primary:visited{
815
+ color:var(--color-foreground-on-accent);
815
816
  }
816
817
 
817
818
  a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
818
- background-color:var(--btn-primary-destructive-background-color, var(--color-background-attention));
819
- border-color:var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
820
- color:var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
819
+ background-color:var(--color-background-attention);
820
+ border-color:var(--color-stroke-attention);
821
+ color:var(--color-foreground-on-attention);
821
822
  font-weight:700;
822
823
  overflow:hidden;
823
824
  position:relative;
@@ -840,8 +841,8 @@ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):a
840
841
  }
841
842
 
842
843
  button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
843
- background-color:var(--btn-primary-destructive-disabled-background, var(--color-background-disabled));
844
- border-color:var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
844
+ background-color:var(--color-background-disabled);
845
+ border-color:var(--color-stroke-disabled);
845
846
  }
846
847
 
847
848
  button.btn .progress-spinner{
@@ -894,15 +895,17 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
894
895
 
895
896
  a.fake-btn--secondary,button.btn--secondary{
896
897
  background-color:var(--btn-secondary-background-color, transparent);
897
- border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
898
- color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
899
- overflow:hidden;
900
- position:relative;
898
+ border-color:var(--color-stroke-accent);
899
+ color:var(--color-foreground-accent);
901
900
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
902
901
  }
903
902
  a.fake-btn--secondary:active,button.btn--secondary:active{
904
903
  transform:scale(.97);
905
904
  }
905
+ a.fake-btn--secondary,button.btn--secondary{
906
+ overflow:hidden;
907
+ position:relative;
908
+ }
906
909
  a.fake-btn--secondary:after,button.btn--secondary:after{
907
910
  background-color:var(--state-layer-neutral);
908
911
  content:"";
@@ -920,7 +923,7 @@ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-b
920
923
  background-color:var(--state-layer-pressed);
921
924
  }
922
925
 
923
- a.fake-btn--secondary:visited{
926
+ a.fake-btn--secondary:hover,a.fake-btn--secondary:visited{
924
927
  color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
925
928
  }
926
929
 
@@ -951,13 +954,15 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
951
954
 
952
955
  a.fake-btn--tertiary,button.btn--tertiary{
953
956
  border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
954
- overflow:hidden;
955
- position:relative;
956
957
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
957
958
  }
958
959
  a.fake-btn--tertiary:active,button.btn--tertiary:active{
959
960
  transform:scale(.97);
960
961
  }
962
+ a.fake-btn--tertiary,button.btn--tertiary{
963
+ overflow:hidden;
964
+ position:relative;
965
+ }
961
966
  a.fake-btn--tertiary:after,button.btn--tertiary:after{
962
967
  background-color:var(--state-layer-neutral);
963
968
  content:"";
@@ -2088,8 +2093,8 @@ span.combobox{
2088
2093
  }
2089
2094
 
2090
2095
  .combobox__listbox{
2091
- background-color:var(--combobox-listbox-background-color, var(--color-background-elevated));
2092
- border-radius:var(--combobox-listbox-border-radius, var(--border-radius-50));
2096
+ background-color:var(--color-background-elevated);
2097
+ border-radius:var(--border-radius-50);
2093
2098
  box-shadow:var(--bubble-shadow);
2094
2099
  box-sizing:border-box;
2095
2100
  display:none;
@@ -2098,7 +2103,6 @@ span.combobox{
2098
2103
  overflow-y:auto;
2099
2104
  position:absolute;
2100
2105
  top:0;
2101
- width:-moz-fit-content;
2102
2106
  width:fit-content;
2103
2107
  z-index:2;
2104
2108
  }
@@ -2126,11 +2130,11 @@ span.combobox{
2126
2130
 
2127
2131
  .combobox__option[role^=option]{
2128
2132
  background-color:initial;
2129
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
2133
+ border-color:var(--color-background-primary);
2130
2134
  border-style:solid;
2131
2135
  border-width:1px;
2132
2136
  box-sizing:border-box;
2133
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
2137
+ color:var(--color-foreground-primary);
2134
2138
  cursor:default;
2135
2139
  display:inline-grid;
2136
2140
  font-family:inherit;
@@ -2147,7 +2151,7 @@ span.combobox{
2147
2151
  display:none;
2148
2152
  }
2149
2153
  .combobox__option[role^=option]:hover{
2150
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
2154
+ color:var(--color-foreground-primary);
2151
2155
  }
2152
2156
  .combobox__option[role^=option]:active{
2153
2157
  font-weight:700;
@@ -2220,7 +2224,6 @@ span.combobox{
2220
2224
 
2221
2225
  .combobox__control>input{
2222
2226
  -webkit-appearance:none;
2223
- -moz-appearance:none;
2224
2227
  appearance:none;
2225
2228
  background-color:var(--combobox-textbox-background-color, var(--color-background-secondary));
2226
2229
  border-color:var(--combobox-textbox-border-color, var(--color-stroke-default));
@@ -2319,12 +2322,12 @@ span.combobox{
2319
2322
  }
2320
2323
 
2321
2324
  .confirm-dialog[role=dialog]{
2325
+ align-items:flex-start;
2322
2326
  background-color:var(--dialog-scrim-color-show);
2323
2327
  bottom:0;
2328
+ justify-content:center;
2324
2329
  left:0;
2325
2330
  -webkit-overflow-scrolling:touch;
2326
- align-items:flex-start;
2327
- justify-content:center;
2328
2331
  position:fixed;
2329
2332
  right:0;
2330
2333
  top:0;
@@ -2749,12 +2752,12 @@ details.details summary:focus:not(:focus-visible){
2749
2752
  }
2750
2753
  /*! DEPRECATED COMPONENT. Will be removed next major version */
2751
2754
  .drawer-dialog[role=dialog]{
2755
+ align-items:flex-end;
2752
2756
  background-color:var(--dialog-scrim-color-show);
2753
2757
  bottom:0;
2754
2758
  left:0;
2755
- -webkit-overflow-scrolling:touch;
2756
- align-items:flex-end;
2757
2759
  overflow:hidden;
2760
+ -webkit-overflow-scrolling:touch;
2758
2761
  position:fixed;
2759
2762
  right:0;
2760
2763
  top:0;
@@ -3532,7 +3535,6 @@ div.file-input__container{
3532
3535
  display:flex;
3533
3536
  flex-direction:row;
3534
3537
  gap:var(--spacing-100);
3535
- min-width:-moz-fit-content;
3536
3538
  min-width:fit-content;
3537
3539
  padding:var(--spacing-200);
3538
3540
  pointer-events:none;
@@ -3603,12 +3605,11 @@ span.file-input__content-cta{
3603
3605
 
3604
3606
  a.filter-link,button.filter-button{
3605
3607
  align-items:center;
3606
- background-color:var(--filter-button-background-color, var(--color-background-secondary));
3608
+ background-color:var(--color-background-secondary);
3607
3609
  border:1px solid transparent;
3608
- border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
3609
3610
  border-radius:16px;
3610
3611
  box-sizing:border-box;
3611
- color:var(--filter-button-foreground-color, var(--color-foreground-primary));
3612
+ color:var(--color-foreground-primary);
3612
3613
  display:inline-flex;
3613
3614
  flex:0 1 auto;
3614
3615
  flex-direction:column;
@@ -3707,9 +3708,7 @@ a.filter-chip,button.filter-chip{
3707
3708
  justify-content:space-between;
3708
3709
  max-width:296px;
3709
3710
  min-width:32px;
3710
- overflow:hidden;
3711
3711
  padding:0 var(--spacing-150);
3712
- position:relative;
3713
3712
  text-decoration:none;
3714
3713
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
3715
3714
  vertical-align:bottom;
@@ -3717,6 +3716,10 @@ a.filter-chip,button.filter-chip{
3717
3716
  a.filter-chip:active,button.filter-chip:active{
3718
3717
  transform:scale(.97);
3719
3718
  }
3719
+ a.filter-chip,button.filter-chip{
3720
+ overflow:hidden;
3721
+ position:relative;
3722
+ }
3720
3723
  a.filter-chip:after,button.filter-chip:after{
3721
3724
  background-color:var(--state-layer-neutral);
3722
3725
  content:"";
@@ -3741,8 +3744,8 @@ a.filter-chip--expressive,button.filter-chip--expressive{
3741
3744
 
3742
3745
  .filter-chip__media{
3743
3746
  align-items:center;
3744
- border-radius:8px;
3745
3747
  border-radius:var(--spacing-400);
3748
+ border-radius:8px;
3746
3749
  display:flex;
3747
3750
  justify-content:center;
3748
3751
  margin-inline-start:-8px;
@@ -4056,12 +4059,11 @@ span.filter-menu-button+span.filter-menu-button{
4056
4059
 
4057
4060
  button.filter-menu-button__button{
4058
4061
  align-items:center;
4059
- background-color:var(--filter-button-background-color, var(--color-background-secondary));
4062
+ background-color:var(--color-background-secondary);
4060
4063
  border:1px solid transparent;
4061
- border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
4062
4064
  border-radius:16px;
4063
4065
  box-sizing:border-box;
4064
- color:var(--filter-button-foreground-color, var(--color-foreground-primary));
4066
+ color:var(--color-foreground-primary);
4065
4067
  display:inline-flex;
4066
4068
  flex:0 1 auto;
4067
4069
  flex-direction:column;
@@ -4081,7 +4083,7 @@ button.filter-menu-button__button+button.filter-menu-button__button{
4081
4083
  margin-left:8px;
4082
4084
  }
4083
4085
  button.filter-menu-button__button:active,button.filter-menu-button__button:focus,button.filter-menu-button__button:hover{
4084
- background-color:var(--filter-button-background-color, var(--color-state-secondary-hover));
4086
+ background-color:var(--color-state-secondary-hover);
4085
4087
  }
4086
4088
 
4087
4089
  .filter-menu-button__button-cell{
@@ -4203,8 +4205,6 @@ span.filter-menu-button__radio svg.icon--checked{
4203
4205
  justify-content:space-between;
4204
4206
  line-height:1.4em;
4205
4207
  margin:0;
4206
- outline-offset:-4px;
4207
- padding:8px 16px;
4208
4208
  width:100%;
4209
4209
  }
4210
4210
  .filter-menu-button__item:hover{
@@ -4219,6 +4219,10 @@ span.filter-menu-button__radio svg.icon--checked{
4219
4219
  .filter-menu-button__item:disabled:hover,.filter-menu-button__item[aria-disabled=true]:hover{
4220
4220
  background-color:inherit;
4221
4221
  }
4222
+ .filter-menu-button__item{
4223
+ outline-offset:-4px;
4224
+ padding:8px 16px;
4225
+ }
4222
4226
  .filter-menu-button__item:hover{
4223
4227
  background-color:var(--color-state-primary-hover);
4224
4228
  }
@@ -4251,8 +4255,9 @@ span.filter-menu-button__item{
4251
4255
  button.filter-menu-button__footer{
4252
4256
  background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
4253
4257
  border:none;
4254
- border-top:1px solid;
4255
- border-color:var(--filter-menu-border-color, var(--color-stroke-subtle));
4258
+ border-color:var(--color-stroke-subtle);
4259
+ border-top-style:solid;
4260
+ border-top-width:1px;
4256
4261
  bottom:0;
4257
4262
  box-sizing:border-box;
4258
4263
  color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -5707,10 +5712,12 @@ a.icon-link>svg{
5707
5712
  }
5708
5713
 
5709
5714
  a.icon-link,button.icon-btn{
5710
- background-color:var(--icon-button-background-color, var(--color-background-secondary));
5715
+ align-items:center;
5716
+ background-color:var(--color-background-secondary);
5711
5717
  border:2px solid transparent;
5712
5718
  border-radius:50px;
5713
5719
  box-sizing:border-box;
5720
+ display:inline-flex;
5714
5721
  font-family:inherit;
5715
5722
  height:40px;
5716
5723
  justify-content:center;
@@ -5720,7 +5727,7 @@ a.icon-link,button.icon-btn{
5720
5727
  width:40px;
5721
5728
  }
5722
5729
  a.icon-link>svg,button.icon-btn>svg{
5723
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
5730
+ fill:var(--color-foreground-primary);
5724
5731
  max-width:75%;
5725
5732
  position:relative;
5726
5733
  }
@@ -5735,17 +5742,17 @@ a.icon-link:not(:focus-visible),button.icon-btn:not(:focus-visible){
5735
5742
  }
5736
5743
 
5737
5744
  a.icon-link.icon-link--primary,button.icon-btn.icon-btn--primary{
5738
- background-color:var(--btn-primary-background-color, var(--color-background-accent));
5739
- border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
5740
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
5745
+ background-color:var(--color-background-accent);
5746
+ border-color:var(--color-stroke-accent);
5747
+ color:var(--color-foreground-on-accent);
5741
5748
  }
5742
5749
 
5743
5750
  a.icon-link.icon-link--primary>svg,button.icon-btn.icon-btn--primary>svg{
5744
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
5751
+ fill:var(--color-foreground-on-accent);
5745
5752
  }
5746
5753
 
5747
5754
  a.icon-link.icon-link--secondary>svg,button.icon-btn.icon-btn--secondary>svg{
5748
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-accent));
5755
+ fill:var(--color-foreground-accent);
5749
5756
  }
5750
5757
 
5751
5758
  a.icon-link.icon-link--small .progress-spinner,button.icon-btn.icon-btn--small .progress-spinner{
@@ -5771,7 +5778,7 @@ a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparen
5771
5778
  }
5772
5779
 
5773
5780
  a.icon-link:visited>svg{
5774
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
5781
+ fill:var(--color-foreground-primary);
5775
5782
  }
5776
5783
 
5777
5784
  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{
@@ -5783,11 +5790,11 @@ a:not([href]).icon-link:focus>svg,a:not([href]).icon-link:hover>svg,a[aria-disab
5783
5790
  }
5784
5791
 
5785
5792
  a.icon-link:visited:focus>svg,a.icon-link:visited:hover>svg{
5786
- fill:var(--icon-button-icon-hover-foreground-color, var(--color-foreground-primary));
5793
+ fill:var(--color-foreground-primary);
5787
5794
  }
5788
5795
 
5789
5796
  a.icon-link.icon-link--primary:visited>svg{
5790
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
5797
+ fill:var(--color-foreground-on-accent);
5791
5798
  }
5792
5799
 
5793
5800
  a.icon-link--badged,button.icon-btn--badged{
@@ -5816,12 +5823,12 @@ a.icon-link.icon-link--primary,a.icon-link.icon-link--secondary,a.icon-link.icon
5816
5823
  }
5817
5824
 
5818
5825
  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{
5819
- background-color:var(--icon-button-disabled-background-color, var(--color-background-disabled));
5820
- border-color:var(--btn-primary-disabled-border-color, var(--color-stroke-disabled));
5826
+ background-color:var(--color-background-disabled);
5827
+ border-color:var(--color-stroke-disabled);
5821
5828
  }
5822
5829
 
5823
5830
  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{
5824
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
5831
+ fill:var(--color-foreground-on-accent);
5825
5832
  }
5826
5833
 
5827
5834
  a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--primary .progress-spinner{
@@ -5831,8 +5838,8 @@ a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--prima
5831
5838
 
5832
5839
  a.icon-link.icon-link--secondary,button.icon-btn.icon-btn--secondary{
5833
5840
  background-color:initial;
5834
- border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
5835
- color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
5841
+ border-color:var(--color-stroke-accent);
5842
+ color:var(--color-foreground-accent);
5836
5843
  }
5837
5844
 
5838
5845
  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{
@@ -5848,11 +5855,11 @@ a.icon-link.icon-link--secondary .progress-spinner,a.icon-link.icon-link--tertia
5848
5855
  }
5849
5856
 
5850
5857
  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{
5851
- border-color:var(--btn-secondary-disabled-border-color, var(--color-stroke-disabled));
5858
+ border-color:var(--color-stroke-disabled);
5852
5859
  }
5853
5860
 
5854
5861
  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{
5855
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-disabled));
5862
+ fill:var(--color-foreground-disabled);
5856
5863
  }
5857
5864
 
5858
5865
  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{
@@ -5864,12 +5871,12 @@ a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):active,but
5864
5871
 
5865
5872
  a.icon-link.icon-link--tertiary,button.icon-btn.icon-btn--tertiary{
5866
5873
  background-color:initial;
5867
- border-color:var(--btn-primary-border-color, var(--color-stroke-default));
5868
- color:var(--btn-primary-foreground-color, var(--color-foreground-accent));
5874
+ border-color:var(--color-stroke-default);
5875
+ color:var(--color-foreground-accent);
5869
5876
  }
5870
5877
 
5871
5878
  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{
5872
- border-color:var(--btn-tertiary-disabled-border-color, var(--color-stroke-disabled));
5879
+ border-color:var(--color-stroke-disabled);
5873
5880
  }
5874
5881
 
5875
5882
  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{
@@ -7125,12 +7132,12 @@ span.inline-notice{
7125
7132
  }
7126
7133
 
7127
7134
  .lightbox-dialog[role=dialog]{
7135
+ align-items:flex-start;
7128
7136
  background-color:var(--dialog-scrim-color-show);
7129
7137
  bottom:0;
7138
+ justify-content:center;
7130
7139
  left:0;
7131
7140
  -webkit-overflow-scrolling:touch;
7132
- align-items:flex-start;
7133
- justify-content:center;
7134
7141
  position:fixed;
7135
7142
  right:0;
7136
7143
  top:0;
@@ -7558,11 +7565,11 @@ div.listbox__options--reverse[role=listbox]{
7558
7565
 
7559
7566
  div.listbox__option[role=option]{
7560
7567
  background-color:initial;
7561
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
7568
+ border-color:var(--color-background-primary);
7562
7569
  border-style:solid;
7563
7570
  border-width:1px;
7564
7571
  box-sizing:border-box;
7565
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
7572
+ color:var(--color-foreground-primary);
7566
7573
  display:inline-grid;
7567
7574
  font-family:inherit;
7568
7575
  grid-template-columns:auto auto;
@@ -7581,7 +7588,7 @@ div.listbox__option[role=option][hidden]{
7581
7588
  }
7582
7589
  div.listbox__option[role=option]:hover{
7583
7590
  background-color:var(--color-state-primary-hover);
7584
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
7591
+ color:var(--color-foreground-primary);
7585
7592
  }
7586
7593
  div.listbox__option[role=option]:active{
7587
7594
  font-weight:700;
@@ -7599,12 +7606,12 @@ span.listbox__value{
7599
7606
 
7600
7607
  div.listbox__option svg.icon{
7601
7608
  align-self:center;
7609
+ margin-inline-start:var(--spacing-100);
7602
7610
  fill:currentColor;
7603
7611
  margin:0 auto;
7604
7612
  opacity:0;
7605
7613
  stroke:currentColor;
7606
7614
  stroke-width:0;
7607
- margin-inline-start:var(--spacing-100);
7608
7615
  }
7609
7616
 
7610
7617
  div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
@@ -7638,8 +7645,8 @@ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--
7638
7645
  }
7639
7646
 
7640
7647
  div.listbox-button__listbox{
7641
- background-color:var(--listbox-button-listbox-background-color, var(--color-background-elevated));
7642
- border-radius:var(--listbox-button-listbox-border-radius, var(--border-radius-50));
7648
+ background-color:var(--color-background-elevated);
7649
+ border-radius:var(--border-radius-50);
7643
7650
  box-shadow:var(--bubble-shadow);
7644
7651
  box-sizing:border-box;
7645
7652
  display:none;
@@ -7648,7 +7655,6 @@ div.listbox-button__listbox{
7648
7655
  overflow-y:auto;
7649
7656
  position:absolute;
7650
7657
  top:0;
7651
- width:-moz-fit-content;
7652
7658
  width:fit-content;
7653
7659
  z-index:2;
7654
7660
  }
@@ -7768,11 +7774,11 @@ div.listbox-button__option[role=option][aria-selected=true] svg.icon{
7768
7774
 
7769
7775
  div.listbox-button__option[role=option]{
7770
7776
  background-color:initial;
7771
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
7777
+ border-color:var(--color-background-primary);
7772
7778
  border-style:solid;
7773
7779
  border-width:1px;
7774
7780
  box-sizing:border-box;
7775
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
7781
+ color:var(--color-foreground-primary);
7776
7782
  cursor:default;
7777
7783
  display:inline-grid;
7778
7784
  font-family:inherit;
@@ -7792,7 +7798,7 @@ div.listbox-button__option[role=option][hidden]{
7792
7798
  }
7793
7799
  div.listbox-button__option[role=option]:hover{
7794
7800
  background-color:var(--color-state-primary-hover);
7795
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
7801
+ color:var(--color-foreground-primary);
7796
7802
  }
7797
7803
  div.listbox-button__option[role=option]:active{
7798
7804
  font-weight:700;
@@ -7962,7 +7968,6 @@ span.listbox-button__value{
7962
7968
  margin:0;
7963
7969
  }
7964
7970
  .number-input .textbox .textbox__control[type=number]{
7965
- -moz-appearance:textfield;
7966
7971
  -webkit-appearance:textfield;
7967
7972
  appearance:textfield;
7968
7973
  }
@@ -8180,8 +8185,8 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
8180
8185
  }
8181
8186
 
8182
8187
  .fake-menu-button__menu,.menu-button__menu{
8183
- background-color:var(--menu-button-menu-background-color, var(--color-background-elevated));
8184
- border-radius:var(--menu-button-menu-border-radius, var(--border-radius-50));
8188
+ background-color:var(--color-background-elevated);
8189
+ border-radius:var(--border-radius-50);
8185
8190
  box-shadow:var(--bubble-shadow);
8186
8191
  box-sizing:border-box;
8187
8192
  display:none;
@@ -8191,7 +8196,6 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
8191
8196
  overflow-y:auto;
8192
8197
  position:absolute;
8193
8198
  top:0;
8194
- width:-moz-fit-content;
8195
8199
  width:fit-content;
8196
8200
  z-index:2;
8197
8201
  }
@@ -8782,10 +8786,10 @@ nav.pagination--fluid ol.pagination__items li{
8782
8786
  .panel-dialog[role=dialog]{
8783
8787
  background-color:var(--dialog-scrim-color-show);
8784
8788
  bottom:0;
8785
- left:0;
8786
- -webkit-overflow-scrolling:touch;
8787
8789
  flex-direction:column;
8790
+ left:0;
8788
8791
  overflow:hidden;
8792
+ -webkit-overflow-scrolling:touch;
8789
8793
  position:fixed;
8790
8794
  right:0;
8791
8795
  top:0;
@@ -9531,6 +9535,7 @@ hr.progress-stepper__separator{
9531
9535
  min-width:inherit;
9532
9536
  width:4px;
9533
9537
  }
9538
+
9534
9539
  [dir=rtl] .progress-stepper__item:first-child .progress-stepper__text{
9535
9540
  text-align:right;
9536
9541
  }
@@ -9665,7 +9670,7 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
9665
9670
 
9666
9671
  div[role=region].section-notice,section.section-notice{
9667
9672
  display:grid;
9668
- grid-template-columns:32px auto auto auto;
9673
+ grid-template-columns:32px auto min-content min-content;
9669
9674
  }
9670
9675
  .section-notice--education{
9671
9676
  background-color:var(--section-notice-education-background-color, var(--color-background-education));
@@ -9757,15 +9762,13 @@ p.section-notice__cta{
9757
9762
  grid-column:4;
9758
9763
  grid-row:1;
9759
9764
  justify-self:flex-end;
9760
- margin-right:var(--spacing-200);
9761
9765
  margin-top:0;
9762
- padding-right:var(--spacing-200);
9763
9766
  }
9764
9767
  .section-notice__header~.section-notice__cta{
9765
- grid-column:4;
9768
+ grid-column:3;
9766
9769
  }
9767
9770
  .section-notice__footer{
9768
- padding-left:var(--spacing-200);
9771
+ padding-inline-start:var(--spacing-200);
9769
9772
  }
9770
9773
  }
9771
9774
  [dir=rtl] .section-notice__footer{
@@ -9773,15 +9776,10 @@ p.section-notice__cta{
9773
9776
  margin-left:0;
9774
9777
  margin-right:auto;
9775
9778
  padding-left:0;
9776
- padding-right:0;
9777
9779
  }
9778
9780
  [dir=rtl] .section-notice__main{
9779
9781
  padding-right:0;
9780
9782
  }
9781
- [dir=rtl] p.section-notice__cta{
9782
- margin-left:16px;
9783
- padding-left:16px;
9784
- }
9785
9783
  .section-notice__header:has(svg[class*="24"]){
9786
9784
  height:var(--spacing-300);
9787
9785
  }
@@ -9962,7 +9960,6 @@ span.select{
9962
9960
 
9963
9961
  .select select{
9964
9962
  -webkit-appearance:none;
9965
- -moz-appearance:none;
9966
9963
  appearance:none;
9967
9964
  background-color:var(--select-background-color, var(--color-background-secondary));
9968
9965
  border-color:var(--select-border-color, var(--color-stroke-default));
@@ -10085,9 +10082,7 @@ span.select{
10085
10082
  justify-content:space-between;
10086
10083
  max-width:296px;
10087
10084
  min-width:32px;
10088
- overflow:hidden;
10089
10085
  padding:0 var(--spacing-150);
10090
- position:relative;
10091
10086
  text-decoration:none;
10092
10087
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
10093
10088
  vertical-align:bottom;
@@ -10095,6 +10090,10 @@ span.select{
10095
10090
  .selection-chip:active{
10096
10091
  transform:scale(.97);
10097
10092
  }
10093
+ .selection-chip{
10094
+ overflow:hidden;
10095
+ position:relative;
10096
+ }
10098
10097
  .selection-chip:after{
10099
10098
  background-color:var(--state-layer-neutral);
10100
10099
  content:"";
@@ -11025,7 +11024,6 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
11025
11024
  gap:var(--spacing-100);
11026
11025
  overflow:hidden;
11027
11026
  position:relative;
11028
- width:-moz-fit-content;
11029
11027
  width:fit-content;
11030
11028
  }
11031
11029
  .textbox button.icon-btn{
@@ -11081,7 +11079,6 @@ input.textbox__control:last-child:not([readonly]){
11081
11079
 
11082
11080
  input.textbox__control,textarea.textbox__control{
11083
11081
  -webkit-appearance:none;
11084
- -moz-appearance:none;
11085
11082
  appearance:none;
11086
11083
  flex-grow:1;
11087
11084
  font-size:1em;