@ebay/skin 19.12.1 → 19.14.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.
Files changed (78) hide show
  1. package/dist/alert-dialog/alert-dialog.css +2 -3
  2. package/dist/bundles/skin-default.css +177 -97
  3. package/dist/bundles/skin-full.css +184 -97
  4. package/dist/bundles/skin-headless.css +170 -97
  5. package/dist/button/button.css +26 -44
  6. package/dist/combobox/combobox.css +5 -20
  7. package/dist/confirm-dialog/confirm-dialog.css +2 -3
  8. package/dist/drawer-dialog/drawer-dialog.css +2 -3
  9. package/dist/filter-button/filter-button.css +2 -12
  10. package/dist/filter-chip/filter-chip.css +69 -1
  11. package/dist/filter-menu-button/filter-menu-button.css +10 -20
  12. package/dist/fullscreen-dialog/fullscreen-dialog.css +0 -1
  13. package/dist/icon-button/icon-button.css +22 -68
  14. package/dist/lightbox-dialog/lightbox-dialog.css +2 -3
  15. package/dist/listbox/listbox.css +4 -13
  16. package/dist/listbox-button/listbox-button.css +5 -20
  17. package/dist/menu-button/menu-button.css +2 -8
  18. package/dist/panel-dialog/panel-dialog.css +2 -3
  19. package/dist/progress-stepper/progress-stepper.css +1 -0
  20. package/dist/section-notice/section-notice.css +3 -10
  21. package/dist/selection-chip/selection-chip.css +53 -0
  22. package/dist/svg/icon/icon-afterpay-logo-24-colored.svg +13 -0
  23. package/dist/svg/icon/icon-ai-camera-16.svg +5 -0
  24. package/dist/svg/icon/icon-ai-camera-20.svg +5 -0
  25. package/dist/svg/icon/icon-ai-camera-24.svg +5 -0
  26. package/dist/svg/icon/icon-ai-search-16.svg +5 -0
  27. package/dist/svg/icon/icon-ai-search-20.svg +5 -0
  28. package/dist/svg/icon/icon-ai-search-24.svg +5 -0
  29. package/dist/svg/icon/icon-ai-shirt-16.svg +5 -0
  30. package/dist/svg/icon/icon-ai-shirt-20.svg +5 -0
  31. package/dist/svg/icon/icon-ai-shirt-24.svg +5 -0
  32. package/dist/svg/icon/icon-attention-triangle-16.svg +5 -0
  33. package/dist/svg/icon/icon-attention-triangle-24.svg +5 -0
  34. package/dist/svg/icon/icon-attention-triangle-filled-16.svg +5 -0
  35. package/dist/svg/icon/icon-attention-triangle-filled-24.svg +5 -0
  36. package/dist/svg/icon/icon-bank-group-logo-24-colored.svg +67 -0
  37. package/dist/svg/icon/icon-clock-12.svg +9 -0
  38. package/dist/svg/icon/icon-closed-caption-16.svg +2 -7
  39. package/dist/svg/icon/icon-closed-caption-24.svg +5 -0
  40. package/dist/svg/icon/icon-closed-caption-filled-16.svg +2 -4
  41. package/dist/svg/icon/icon-closed-caption-filled-24.svg +5 -0
  42. package/dist/svg/icon/icon-credit-card-20.svg +5 -0
  43. package/dist/svg/icon/icon-credit-card-24.svg +1 -3
  44. package/dist/svg/icon/icon-credit-card-cvv-back-20.svg +5 -0
  45. package/dist/svg/icon/icon-credit-card-cvv-back-24.svg +5 -0
  46. package/dist/svg/icon/icon-credit-card-cvv-front-20.svg +5 -0
  47. package/dist/svg/icon/icon-credit-card-cvv-front-24.svg +5 -0
  48. package/dist/svg/icon/icon-density-row-compact-16.svg +5 -0
  49. package/dist/svg/icon/icon-density-row-compact-24.svg +5 -0
  50. package/dist/svg/icon/icon-density-row-relaxed-16.svg +5 -0
  51. package/dist/svg/icon/icon-density-row-relaxed-24.svg +5 -0
  52. package/dist/svg/icon/icon-fingerprint-16.svg +5 -0
  53. package/dist/svg/icon/icon-information-20.svg +5 -0
  54. package/dist/svg/icon/icon-information-filled-20.svg +5 -0
  55. package/dist/svg/icon/icon-note-16.svg +5 -0
  56. package/dist/svg/icon/icon-note-24.svg +5 -0
  57. package/dist/svg/icon/icon-notification-filled-16.svg +5 -0
  58. package/dist/svg/icon/icon-notification-filled-20.svg +5 -0
  59. package/dist/svg/icon/icon-pay-by-bank-12-colored.svg +7 -0
  60. package/dist/svg/icon/icon-pay-by-bank-18-colored.svg +7 -0
  61. package/dist/svg/icon/icon-pay-by-bank-24-colored.svg +7 -0
  62. package/dist/svg/icon/icon-pay-by-bank-32-colored.svg +7 -0
  63. package/dist/svg/icon/icon-payout-16.svg +5 -0
  64. package/dist/svg/icon/icon-payout-24.svg +5 -0
  65. package/dist/svg/icon/icon-secure-purchase-16.svg +5 -0
  66. package/dist/svg/icon/icon-secure-purchase-24.svg +5 -0
  67. package/dist/svg/icon/icon-shopping-event-16.svg +5 -0
  68. package/dist/svg/icon/icon-shopping-event-24.svg +5 -0
  69. package/dist/svg/icon/icon-wallet-16.svg +5 -0
  70. package/dist/svg/icon/icon-zip-pay-12-colored.svg +12 -0
  71. package/dist/svg/icon/icon-zip-pay-18-colored.svg +12 -0
  72. package/dist/svg/icon/icon-zip-pay-24-colored.svg +12 -0
  73. package/dist/svg/icon/icon-zip-pay-32-colored.svg +15 -0
  74. package/dist/svg/icons.svg +364 -12
  75. package/dist/toast-dialog/toast-dialog.css +7 -7
  76. package/dist/tokens/evo-dark.css +7 -0
  77. package/dist/tokens/evo-light.css +8 -0
  78. package/package.json +8 -7
@@ -250,13 +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
- overflow-y:auto;
260
259
  position:fixed;
261
260
  right:0;
262
261
  top:0;
@@ -779,17 +778,19 @@ a.fake-btn__cell--fixed-height svg.icon,button.btn__cell--fixed-height svg.icon{
779
778
  }
780
779
 
781
780
  a.fake-btn--primary,button.btn--primary{
782
- background-color:var(--btn-primary-background-color, var(--color-background-accent));
783
- border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
784
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
781
+ background-color:var(--color-background-accent);
782
+ border-color:var(--color-stroke-accent);
783
+ color:var(--color-foreground-on-accent);
785
784
  font-weight:700;
786
- overflow:hidden;
787
- position:relative;
788
785
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
789
786
  }
790
787
  a.fake-btn--primary:active,button.btn--primary:active{
791
788
  transform:scale(.97);
792
789
  }
790
+ a.fake-btn--primary,button.btn--primary{
791
+ overflow:hidden;
792
+ position:relative;
793
+ }
793
794
  a.fake-btn--primary:after,button.btn--primary:after{
794
795
  background-color:var(--state-layer-neutral);
795
796
  content:"";
@@ -812,13 +813,13 @@ a.fake-btn--primary{
812
813
  }
813
814
 
814
815
  a.fake-btn--primary:visited{
815
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
816
+ color:var(--color-foreground-on-accent);
816
817
  }
817
818
 
818
819
  a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
819
- background-color:var(--btn-primary-destructive-background-color, var(--color-background-attention));
820
- border-color:var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
821
- color:var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
820
+ background-color:var(--color-background-attention);
821
+ border-color:var(--color-stroke-attention);
822
+ color:var(--color-foreground-on-attention);
822
823
  font-weight:700;
823
824
  overflow:hidden;
824
825
  position:relative;
@@ -841,8 +842,8 @@ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):a
841
842
  }
842
843
 
843
844
  button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
844
- background-color:var(--btn-primary-destructive-disabled-background, var(--color-background-disabled));
845
- border-color:var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
845
+ background-color:var(--color-background-disabled);
846
+ border-color:var(--color-stroke-disabled);
846
847
  }
847
848
 
848
849
  button.btn .progress-spinner{
@@ -895,15 +896,17 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
895
896
 
896
897
  a.fake-btn--secondary,button.btn--secondary{
897
898
  background-color:var(--btn-secondary-background-color, transparent);
898
- border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
899
- color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
900
- overflow:hidden;
901
- position:relative;
899
+ border-color:var(--color-stroke-accent);
900
+ color:var(--color-foreground-accent);
902
901
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
903
902
  }
904
903
  a.fake-btn--secondary:active,button.btn--secondary:active{
905
904
  transform:scale(.97);
906
905
  }
906
+ a.fake-btn--secondary,button.btn--secondary{
907
+ overflow:hidden;
908
+ position:relative;
909
+ }
907
910
  a.fake-btn--secondary:after,button.btn--secondary:after{
908
911
  background-color:var(--state-layer-neutral);
909
912
  content:"";
@@ -952,13 +955,15 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
952
955
 
953
956
  a.fake-btn--tertiary,button.btn--tertiary{
954
957
  border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
955
- overflow:hidden;
956
- position:relative;
957
958
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
958
959
  }
959
960
  a.fake-btn--tertiary:active,button.btn--tertiary:active{
960
961
  transform:scale(.97);
961
962
  }
963
+ a.fake-btn--tertiary,button.btn--tertiary{
964
+ overflow:hidden;
965
+ position:relative;
966
+ }
962
967
  a.fake-btn--tertiary:after,button.btn--tertiary:after{
963
968
  background-color:var(--state-layer-neutral);
964
969
  content:"";
@@ -2089,8 +2094,8 @@ span.combobox{
2089
2094
  }
2090
2095
 
2091
2096
  .combobox__listbox{
2092
- background-color:var(--combobox-listbox-background-color, var(--color-background-elevated));
2093
- border-radius:var(--combobox-listbox-border-radius, var(--border-radius-50));
2097
+ background-color:var(--color-background-elevated);
2098
+ border-radius:var(--border-radius-50);
2094
2099
  box-shadow:var(--bubble-shadow);
2095
2100
  box-sizing:border-box;
2096
2101
  display:none;
@@ -2127,11 +2132,11 @@ span.combobox{
2127
2132
 
2128
2133
  .combobox__option[role^=option]{
2129
2134
  background-color:initial;
2130
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
2135
+ border-color:var(--color-background-primary);
2131
2136
  border-style:solid;
2132
2137
  border-width:1px;
2133
2138
  box-sizing:border-box;
2134
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
2139
+ color:var(--color-foreground-primary);
2135
2140
  cursor:default;
2136
2141
  display:inline-grid;
2137
2142
  font-family:inherit;
@@ -2148,7 +2153,7 @@ span.combobox{
2148
2153
  display:none;
2149
2154
  }
2150
2155
  .combobox__option[role^=option]:hover{
2151
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
2156
+ color:var(--color-foreground-primary);
2152
2157
  }
2153
2158
  .combobox__option[role^=option]:active{
2154
2159
  font-weight:700;
@@ -2320,13 +2325,12 @@ span.combobox{
2320
2325
  }
2321
2326
 
2322
2327
  .confirm-dialog[role=dialog]{
2328
+ align-items:flex-start;
2323
2329
  background-color:var(--dialog-scrim-color-show);
2324
2330
  bottom:0;
2331
+ justify-content:center;
2325
2332
  left:0;
2326
2333
  -webkit-overflow-scrolling:touch;
2327
- align-items:flex-start;
2328
- justify-content:center;
2329
- overflow-y:auto;
2330
2334
  position:fixed;
2331
2335
  right:0;
2332
2336
  top:0;
@@ -2751,13 +2755,12 @@ details.details summary:focus:not(:focus-visible){
2751
2755
  }
2752
2756
  /*! DEPRECATED COMPONENT. Will be removed next major version */
2753
2757
  .drawer-dialog[role=dialog]{
2758
+ align-items:flex-end;
2754
2759
  background-color:var(--dialog-scrim-color-show);
2755
2760
  bottom:0;
2756
2761
  left:0;
2757
- -webkit-overflow-scrolling:touch;
2758
- align-items:flex-end;
2759
- overflow-y:auto;
2760
2762
  overflow:hidden;
2763
+ -webkit-overflow-scrolling:touch;
2761
2764
  position:fixed;
2762
2765
  right:0;
2763
2766
  top:0;
@@ -3606,12 +3609,11 @@ span.file-input__content-cta{
3606
3609
 
3607
3610
  a.filter-link,button.filter-button{
3608
3611
  align-items:center;
3609
- background-color:var(--filter-button-background-color, var(--color-background-secondary));
3612
+ background-color:var(--color-background-secondary);
3610
3613
  border:1px solid transparent;
3611
- border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
3612
3614
  border-radius:16px;
3613
3615
  box-sizing:border-box;
3614
- color:var(--filter-button-foreground-color, var(--color-foreground-primary));
3616
+ color:var(--color-foreground-primary);
3615
3617
  display:inline-flex;
3616
3618
  flex:0 1 auto;
3617
3619
  flex-direction:column;
@@ -3718,6 +3720,26 @@ a.filter-chip,button.filter-chip{
3718
3720
  a.filter-chip:active,button.filter-chip:active{
3719
3721
  transform:scale(.97);
3720
3722
  }
3723
+ a.filter-chip,button.filter-chip{
3724
+ overflow:hidden;
3725
+ position:relative;
3726
+ }
3727
+ a.filter-chip:after,button.filter-chip:after{
3728
+ background-color:var(--state-layer-neutral);
3729
+ content:"";
3730
+ inset:0;
3731
+ pointer-events:none;
3732
+ position:absolute;
3733
+ }
3734
+ a.filter-chip:not([disabled],[aria-disabled=true]):hover:after,a.filter-chip[href]:hover:after,button.filter-chip:not([disabled],[aria-disabled=true]):hover:after,button.filter-chip[href]:hover:after{
3735
+ background-color:var(--state-layer-hover);
3736
+ }
3737
+ a.filter-chip:not([disabled],[aria-disabled=true]):focus:after,a.filter-chip[href]:focus:after,button.filter-chip:not([disabled],[aria-disabled=true]):focus:after,button.filter-chip[href]:focus:after{
3738
+ background-color:var(--state-layer-focus);
3739
+ }
3740
+ a.filter-chip:not([disabled],[aria-disabled=true]):active:after,a.filter-chip[href]:active:after,button.filter-chip:not([disabled],[aria-disabled=true]):active:after,button.filter-chip[href]:active:after{
3741
+ background-color:var(--state-layer-pressed);
3742
+ }
3721
3743
 
3722
3744
  a.filter-chip--expressive,button.filter-chip--expressive{
3723
3745
  border-radius:var(--border-radius-150);
@@ -3726,8 +3748,8 @@ a.filter-chip--expressive,button.filter-chip--expressive{
3726
3748
 
3727
3749
  .filter-chip__media{
3728
3750
  align-items:center;
3729
- border-radius:8px;
3730
3751
  border-radius:var(--spacing-400);
3752
+ border-radius:8px;
3731
3753
  display:flex;
3732
3754
  justify-content:center;
3733
3755
  margin-inline-start:-8px;
@@ -3759,6 +3781,24 @@ a.filter-chip--selected,button.filter-chip[aria-pressed=true]{
3759
3781
  animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
3760
3782
  background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
3761
3783
  color:var(--color-foreground-on-strong);
3784
+ overflow:hidden;
3785
+ position:relative;
3786
+ }
3787
+ a.filter-chip--selected:after,button.filter-chip[aria-pressed=true]:after{
3788
+ background-color:var(--state-layer-neutral-on-strong);
3789
+ content:"";
3790
+ inset:0;
3791
+ pointer-events:none;
3792
+ position:absolute;
3793
+ }
3794
+ a.filter-chip--selected:not([disabled],[aria-disabled=true]):hover:after,a.filter-chip--selected[href]:hover:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):hover:after,button.filter-chip[aria-pressed=true][href]:hover:after{
3795
+ background-color:var(--state-layer-hover-on-strong);
3796
+ }
3797
+ a.filter-chip--selected:not([disabled],[aria-disabled=true]):focus:after,a.filter-chip--selected[href]:focus:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):focus:after,button.filter-chip[aria-pressed=true][href]:focus:after{
3798
+ background-color:var(--state-layer-focus-on-strong);
3799
+ }
3800
+ a.filter-chip--selected:not([disabled],[aria-disabled=true]):active:after,a.filter-chip--selected[href]:active:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):active:after,button.filter-chip[aria-pressed=true][href]:active:after{
3801
+ background-color:var(--state-layer-pressed-on-strong);
3762
3802
  }
3763
3803
 
3764
3804
  button.filter-chip--animated[aria-pressed=true]{
@@ -4023,12 +4063,11 @@ span.filter-menu-button+span.filter-menu-button{
4023
4063
 
4024
4064
  button.filter-menu-button__button{
4025
4065
  align-items:center;
4026
- background-color:var(--filter-button-background-color, var(--color-background-secondary));
4066
+ background-color:var(--color-background-secondary);
4027
4067
  border:1px solid transparent;
4028
- border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
4029
4068
  border-radius:16px;
4030
4069
  box-sizing:border-box;
4031
- color:var(--filter-button-foreground-color, var(--color-foreground-primary));
4070
+ color:var(--color-foreground-primary);
4032
4071
  display:inline-flex;
4033
4072
  flex:0 1 auto;
4034
4073
  flex-direction:column;
@@ -4048,7 +4087,7 @@ button.filter-menu-button__button+button.filter-menu-button__button{
4048
4087
  margin-left:8px;
4049
4088
  }
4050
4089
  button.filter-menu-button__button:active,button.filter-menu-button__button:focus,button.filter-menu-button__button:hover{
4051
- background-color:var(--filter-button-background-color, var(--color-state-secondary-hover));
4090
+ background-color:var(--color-state-secondary-hover);
4052
4091
  }
4053
4092
 
4054
4093
  .filter-menu-button__button-cell{
@@ -4170,8 +4209,6 @@ span.filter-menu-button__radio svg.icon--checked{
4170
4209
  justify-content:space-between;
4171
4210
  line-height:1.4em;
4172
4211
  margin:0;
4173
- outline-offset:-4px;
4174
- padding:8px 16px;
4175
4212
  width:100%;
4176
4213
  }
4177
4214
  .filter-menu-button__item:hover{
@@ -4186,6 +4223,10 @@ span.filter-menu-button__radio svg.icon--checked{
4186
4223
  .filter-menu-button__item:disabled:hover,.filter-menu-button__item[aria-disabled=true]:hover{
4187
4224
  background-color:inherit;
4188
4225
  }
4226
+ .filter-menu-button__item{
4227
+ outline-offset:-4px;
4228
+ padding:8px 16px;
4229
+ }
4189
4230
  .filter-menu-button__item:hover{
4190
4231
  background-color:var(--color-state-primary-hover);
4191
4232
  }
@@ -4218,8 +4259,9 @@ span.filter-menu-button__item{
4218
4259
  button.filter-menu-button__footer{
4219
4260
  background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
4220
4261
  border:none;
4221
- border-top:1px solid;
4222
- border-color:var(--filter-menu-border-color, var(--color-stroke-subtle));
4262
+ border-color:var(--color-stroke-subtle);
4263
+ border-top-style:solid;
4264
+ border-top-width:1px;
4223
4265
  bottom:0;
4224
4266
  box-sizing:border-box;
4225
4267
  color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -5422,7 +5464,6 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
5422
5464
  bottom:0;
5423
5465
  left:0;
5424
5466
  -webkit-overflow-scrolling:touch;
5425
- overflow-y:auto;
5426
5467
  position:fixed;
5427
5468
  right:0;
5428
5469
  top:0;
@@ -5675,10 +5716,12 @@ a.icon-link>svg{
5675
5716
  }
5676
5717
 
5677
5718
  a.icon-link,button.icon-btn{
5678
- background-color:var(--icon-button-background-color, var(--color-background-secondary));
5719
+ align-items:center;
5720
+ background-color:var(--color-background-secondary);
5679
5721
  border:2px solid transparent;
5680
5722
  border-radius:50px;
5681
5723
  box-sizing:border-box;
5724
+ display:inline-flex;
5682
5725
  font-family:inherit;
5683
5726
  height:40px;
5684
5727
  justify-content:center;
@@ -5688,7 +5731,7 @@ a.icon-link,button.icon-btn{
5688
5731
  width:40px;
5689
5732
  }
5690
5733
  a.icon-link>svg,button.icon-btn>svg{
5691
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
5734
+ fill:var(--color-foreground-primary);
5692
5735
  max-width:75%;
5693
5736
  position:relative;
5694
5737
  }
@@ -5703,17 +5746,17 @@ a.icon-link:not(:focus-visible),button.icon-btn:not(:focus-visible){
5703
5746
  }
5704
5747
 
5705
5748
  a.icon-link.icon-link--primary,button.icon-btn.icon-btn--primary{
5706
- background-color:var(--btn-primary-background-color, var(--color-background-accent));
5707
- border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
5708
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
5749
+ background-color:var(--color-background-accent);
5750
+ border-color:var(--color-stroke-accent);
5751
+ color:var(--color-foreground-on-accent);
5709
5752
  }
5710
5753
 
5711
5754
  a.icon-link.icon-link--primary>svg,button.icon-btn.icon-btn--primary>svg{
5712
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
5755
+ fill:var(--color-foreground-on-accent);
5713
5756
  }
5714
5757
 
5715
5758
  a.icon-link.icon-link--secondary>svg,button.icon-btn.icon-btn--secondary>svg{
5716
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-accent));
5759
+ fill:var(--color-foreground-accent);
5717
5760
  }
5718
5761
 
5719
5762
  a.icon-link.icon-link--small .progress-spinner,button.icon-btn.icon-btn--small .progress-spinner{
@@ -5739,7 +5782,7 @@ a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparen
5739
5782
  }
5740
5783
 
5741
5784
  a.icon-link:visited>svg{
5742
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
5785
+ fill:var(--color-foreground-primary);
5743
5786
  }
5744
5787
 
5745
5788
  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{
@@ -5751,11 +5794,11 @@ a:not([href]).icon-link:focus>svg,a:not([href]).icon-link:hover>svg,a[aria-disab
5751
5794
  }
5752
5795
 
5753
5796
  a.icon-link:visited:focus>svg,a.icon-link:visited:hover>svg{
5754
- fill:var(--icon-button-icon-hover-foreground-color, var(--color-foreground-primary));
5797
+ fill:var(--color-foreground-primary);
5755
5798
  }
5756
5799
 
5757
5800
  a.icon-link.icon-link--primary:visited>svg{
5758
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
5801
+ fill:var(--color-foreground-on-accent);
5759
5802
  }
5760
5803
 
5761
5804
  a.icon-link--badged,button.icon-btn--badged{
@@ -5784,12 +5827,12 @@ a.icon-link.icon-link--primary,a.icon-link.icon-link--secondary,a.icon-link.icon
5784
5827
  }
5785
5828
 
5786
5829
  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{
5787
- background-color:var(--icon-button-disabled-background-color, var(--color-background-disabled));
5788
- border-color:var(--btn-primary-disabled-border-color, var(--color-stroke-disabled));
5830
+ background-color:var(--color-background-disabled);
5831
+ border-color:var(--color-stroke-disabled);
5789
5832
  }
5790
5833
 
5791
5834
  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{
5792
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
5835
+ fill:var(--color-foreground-on-accent);
5793
5836
  }
5794
5837
 
5795
5838
  a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--primary .progress-spinner{
@@ -5799,8 +5842,8 @@ a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--prima
5799
5842
 
5800
5843
  a.icon-link.icon-link--secondary,button.icon-btn.icon-btn--secondary{
5801
5844
  background-color:initial;
5802
- border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
5803
- color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
5845
+ border-color:var(--color-stroke-accent);
5846
+ color:var(--color-foreground-accent);
5804
5847
  }
5805
5848
 
5806
5849
  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{
@@ -5816,11 +5859,11 @@ a.icon-link.icon-link--secondary .progress-spinner,a.icon-link.icon-link--tertia
5816
5859
  }
5817
5860
 
5818
5861
  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{
5819
- border-color:var(--btn-secondary-disabled-border-color, var(--color-stroke-disabled));
5862
+ border-color:var(--color-stroke-disabled);
5820
5863
  }
5821
5864
 
5822
5865
  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{
5823
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-disabled));
5866
+ fill:var(--color-foreground-disabled);
5824
5867
  }
5825
5868
 
5826
5869
  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{
@@ -5832,12 +5875,12 @@ a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):active,but
5832
5875
 
5833
5876
  a.icon-link.icon-link--tertiary,button.icon-btn.icon-btn--tertiary{
5834
5877
  background-color:initial;
5835
- border-color:var(--btn-primary-border-color, var(--color-stroke-default));
5836
- color:var(--btn-primary-foreground-color, var(--color-foreground-accent));
5878
+ border-color:var(--color-stroke-default);
5879
+ color:var(--color-foreground-accent);
5837
5880
  }
5838
5881
 
5839
5882
  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{
5840
- border-color:var(--btn-tertiary-disabled-border-color, var(--color-stroke-disabled));
5883
+ border-color:var(--color-stroke-disabled);
5841
5884
  }
5842
5885
 
5843
5886
  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{
@@ -7093,13 +7136,12 @@ span.inline-notice{
7093
7136
  }
7094
7137
 
7095
7138
  .lightbox-dialog[role=dialog]{
7139
+ align-items:flex-start;
7096
7140
  background-color:var(--dialog-scrim-color-show);
7097
7141
  bottom:0;
7142
+ justify-content:center;
7098
7143
  left:0;
7099
7144
  -webkit-overflow-scrolling:touch;
7100
- align-items:flex-start;
7101
- justify-content:center;
7102
- overflow-y:auto;
7103
7145
  position:fixed;
7104
7146
  right:0;
7105
7147
  top:0;
@@ -7527,11 +7569,11 @@ div.listbox__options--reverse[role=listbox]{
7527
7569
 
7528
7570
  div.listbox__option[role=option]{
7529
7571
  background-color:initial;
7530
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
7572
+ border-color:var(--color-background-primary);
7531
7573
  border-style:solid;
7532
7574
  border-width:1px;
7533
7575
  box-sizing:border-box;
7534
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
7576
+ color:var(--color-foreground-primary);
7535
7577
  display:inline-grid;
7536
7578
  font-family:inherit;
7537
7579
  grid-template-columns:auto auto;
@@ -7550,7 +7592,7 @@ div.listbox__option[role=option][hidden]{
7550
7592
  }
7551
7593
  div.listbox__option[role=option]:hover{
7552
7594
  background-color:var(--color-state-primary-hover);
7553
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
7595
+ color:var(--color-foreground-primary);
7554
7596
  }
7555
7597
  div.listbox__option[role=option]:active{
7556
7598
  font-weight:700;
@@ -7568,12 +7610,12 @@ span.listbox__value{
7568
7610
 
7569
7611
  div.listbox__option svg.icon{
7570
7612
  align-self:center;
7613
+ margin-inline-start:var(--spacing-100);
7571
7614
  fill:currentColor;
7572
7615
  margin:0 auto;
7573
7616
  opacity:0;
7574
7617
  stroke:currentColor;
7575
7618
  stroke-width:0;
7576
- margin-inline-start:var(--spacing-100);
7577
7619
  }
7578
7620
 
7579
7621
  div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
@@ -7607,8 +7649,8 @@ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--
7607
7649
  }
7608
7650
 
7609
7651
  div.listbox-button__listbox{
7610
- background-color:var(--listbox-button-listbox-background-color, var(--color-background-elevated));
7611
- border-radius:var(--listbox-button-listbox-border-radius, var(--border-radius-50));
7652
+ background-color:var(--color-background-elevated);
7653
+ border-radius:var(--border-radius-50);
7612
7654
  box-shadow:var(--bubble-shadow);
7613
7655
  box-sizing:border-box;
7614
7656
  display:none;
@@ -7737,11 +7779,11 @@ div.listbox-button__option[role=option][aria-selected=true] svg.icon{
7737
7779
 
7738
7780
  div.listbox-button__option[role=option]{
7739
7781
  background-color:initial;
7740
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
7782
+ border-color:var(--color-background-primary);
7741
7783
  border-style:solid;
7742
7784
  border-width:1px;
7743
7785
  box-sizing:border-box;
7744
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
7786
+ color:var(--color-foreground-primary);
7745
7787
  cursor:default;
7746
7788
  display:inline-grid;
7747
7789
  font-family:inherit;
@@ -7761,7 +7803,7 @@ div.listbox-button__option[role=option][hidden]{
7761
7803
  }
7762
7804
  div.listbox-button__option[role=option]:hover{
7763
7805
  background-color:var(--color-state-primary-hover);
7764
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
7806
+ color:var(--color-foreground-primary);
7765
7807
  }
7766
7808
  div.listbox-button__option[role=option]:active{
7767
7809
  font-weight:700;
@@ -8149,8 +8191,8 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
8149
8191
  }
8150
8192
 
8151
8193
  .fake-menu-button__menu,.menu-button__menu{
8152
- background-color:var(--menu-button-menu-background-color, var(--color-background-elevated));
8153
- border-radius:var(--menu-button-menu-border-radius, var(--border-radius-50));
8194
+ background-color:var(--color-background-elevated);
8195
+ border-radius:var(--border-radius-50);
8154
8196
  box-shadow:var(--bubble-shadow);
8155
8197
  box-sizing:border-box;
8156
8198
  display:none;
@@ -8751,11 +8793,10 @@ nav.pagination--fluid ol.pagination__items li{
8751
8793
  .panel-dialog[role=dialog]{
8752
8794
  background-color:var(--dialog-scrim-color-show);
8753
8795
  bottom:0;
8754
- left:0;
8755
- -webkit-overflow-scrolling:touch;
8756
8796
  flex-direction:column;
8757
- overflow-y:auto;
8797
+ left:0;
8758
8798
  overflow:hidden;
8799
+ -webkit-overflow-scrolling:touch;
8759
8800
  position:fixed;
8760
8801
  right:0;
8761
8802
  top:0;
@@ -9501,6 +9542,7 @@ hr.progress-stepper__separator{
9501
9542
  min-width:inherit;
9502
9543
  width:4px;
9503
9544
  }
9545
+
9504
9546
  [dir=rtl] .progress-stepper__item:first-child .progress-stepper__text{
9505
9547
  text-align:right;
9506
9548
  }
@@ -9635,7 +9677,7 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
9635
9677
 
9636
9678
  div[role=region].section-notice,section.section-notice{
9637
9679
  display:grid;
9638
- grid-template-columns:32px auto auto auto;
9680
+ grid-template-columns:32px auto min-content min-content;
9639
9681
  }
9640
9682
  .section-notice--education{
9641
9683
  background-color:var(--section-notice-education-background-color, var(--color-background-education));
@@ -9727,15 +9769,13 @@ p.section-notice__cta{
9727
9769
  grid-column:4;
9728
9770
  grid-row:1;
9729
9771
  justify-self:flex-end;
9730
- margin-right:var(--spacing-200);
9731
9772
  margin-top:0;
9732
- padding-right:var(--spacing-200);
9733
9773
  }
9734
9774
  .section-notice__header~.section-notice__cta{
9735
- grid-column:4;
9775
+ grid-column:3;
9736
9776
  }
9737
9777
  .section-notice__footer{
9738
- padding-left:var(--spacing-200);
9778
+ padding-inline-start:var(--spacing-200);
9739
9779
  }
9740
9780
  }
9741
9781
  [dir=rtl] .section-notice__footer{
@@ -9743,15 +9783,10 @@ p.section-notice__cta{
9743
9783
  margin-left:0;
9744
9784
  margin-right:auto;
9745
9785
  padding-left:0;
9746
- padding-right:0;
9747
9786
  }
9748
9787
  [dir=rtl] .section-notice__main{
9749
9788
  padding-right:0;
9750
9789
  }
9751
- [dir=rtl] p.section-notice__cta{
9752
- margin-left:16px;
9753
- padding-left:16px;
9754
- }
9755
9790
  .section-notice__header:has(svg[class*="24"]){
9756
9791
  height:var(--spacing-300);
9757
9792
  }
@@ -10063,6 +10098,26 @@ span.select{
10063
10098
  .selection-chip:active{
10064
10099
  transform:scale(.97);
10065
10100
  }
10101
+ .selection-chip{
10102
+ overflow:hidden;
10103
+ position:relative;
10104
+ }
10105
+ .selection-chip:after{
10106
+ background-color:var(--state-layer-neutral);
10107
+ content:"";
10108
+ inset:0;
10109
+ pointer-events:none;
10110
+ position:absolute;
10111
+ }
10112
+ .selection-chip:not([disabled],[aria-disabled=true]):hover:after,.selection-chip[href]:hover:after{
10113
+ background-color:var(--state-layer-hover);
10114
+ }
10115
+ .selection-chip:not([disabled],[aria-disabled=true]):focus:after,.selection-chip[href]:focus:after{
10116
+ background-color:var(--state-layer-focus);
10117
+ }
10118
+ .selection-chip:not([disabled],[aria-disabled=true]):active:after,.selection-chip[href]:active:after{
10119
+ background-color:var(--state-layer-pressed);
10120
+ }
10066
10121
 
10067
10122
  .selection-chip--animated .selection-chip__trailing{
10068
10123
  transition:rotate var(--motion-duration-medium-3) var(--motion-easing-standard);
@@ -10076,6 +10131,24 @@ span.select{
10076
10131
  animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
10077
10132
  background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
10078
10133
  color:var(--color-foreground-on-strong);
10134
+ overflow:hidden;
10135
+ position:relative;
10136
+ }
10137
+ .selection-chip[aria-pressed=true]:after{
10138
+ background-color:var(--state-layer-neutral-on-strong);
10139
+ content:"";
10140
+ inset:0;
10141
+ pointer-events:none;
10142
+ position:absolute;
10143
+ }
10144
+ .selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):hover:after,.selection-chip[aria-pressed=true][href]:hover:after{
10145
+ background-color:var(--state-layer-hover-on-strong);
10146
+ }
10147
+ .selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):focus:after,.selection-chip[aria-pressed=true][href]:focus:after{
10148
+ background-color:var(--state-layer-focus-on-strong);
10149
+ }
10150
+ .selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):active:after,.selection-chip[aria-pressed=true][href]:active:after{
10151
+ background-color:var(--state-layer-pressed-on-strong);
10079
10152
  }
10080
10153
 
10081
10154
  .selection-chip--animated[aria-pressed=true]{
@@ -11127,7 +11200,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
11127
11200
  }
11128
11201
 
11129
11202
  .toast-dialog__window{
11130
- margin:var(--spacing-100) var(--spacing-200) var(--spacing-200);
11203
+ padding:var(--spacing-100) var(--spacing-200) var(--spacing-200);
11131
11204
  }
11132
11205
 
11133
11206
  .toast-dialog__header{
@@ -11137,7 +11210,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
11137
11210
  .toast-dialog__header h2,.toast-dialog__title{
11138
11211
  margin:0;
11139
11212
  }
11140
- button.toast-dialog__close{
11213
+ button.icon-btn.toast-dialog__close{
11141
11214
  align-self:flex-start;
11142
11215
  border:0;
11143
11216
  color:var(--toast-dialog-foreground-color, var(--color-foreground-on-information));
@@ -11145,14 +11218,14 @@ button.toast-dialog__close{
11145
11218
  margin-inline-start:auto;
11146
11219
  padding:0;
11147
11220
  }
11148
- button.toast-dialog__close:focus{
11221
+ button.icon-btn.toast-dialog__close:focus{
11149
11222
  outline:2px solid var(--color-foreground-on-information);
11150
11223
  }
11151
- button.toast-dialog__close:focus,button.toast-dialog__close:hover{
11224
+ button.icon-btn.toast-dialog__close:focus,button.icon-btn.toast-dialog__close:hover{
11152
11225
  color:var(--color-state-primary-hover);
11153
11226
  }
11154
11227
 
11155
- button.toast-dialog__close>svg{
11228
+ button.icon-btn.toast-dialog__close>svg{
11156
11229
  fill:currentColor;
11157
11230
  }
11158
11231
 
@@ -11208,7 +11281,7 @@ button.toast-dialog__close>svg{
11208
11281
  width:auto;
11209
11282
  }
11210
11283
  .toast-dialog__window{
11211
- margin:var(--spacing-200) var(--spacing-300) var(--spacing-300);
11284
+ padding:var(--spacing-200) var(--spacing-300) var(--spacing-300);
11212
11285
  }
11213
11286
  }
11214
11287
  :root{