@ebay/skin 19.3.0 → 19.5.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 (72) hide show
  1. package/dist/alert-dialog/alert-dialog.css +96 -6
  2. package/dist/bundles/skin-default.css +308 -59
  3. package/dist/bundles/skin-full.css +308 -59
  4. package/dist/bundles/skin-headless.css +308 -59
  5. package/dist/ccd/ccd.css +16 -8
  6. package/dist/chips-combobox/chips-combobox.css +2 -4
  7. package/dist/combobox/combobox.css +1 -2
  8. package/dist/confirm-dialog/confirm-dialog.css +90 -13
  9. package/dist/date-textbox/date-textbox.css +1 -2
  10. package/dist/drawer-dialog/drawer-dialog.css +2 -2
  11. package/dist/file-preview-card/file-preview-card.css +3 -3
  12. package/dist/filter-input/filter-input.css +55 -0
  13. package/dist/filter-menu-button/filter-menu-button.css +1 -2
  14. package/dist/fullscreen-dialog/fullscreen-dialog.css +2 -2
  15. package/dist/infotip/infotip.css +1 -2
  16. package/dist/lightbox-dialog/lightbox-dialog.css +84 -19
  17. package/dist/listbox/listbox.css +1 -2
  18. package/dist/listbox-button/listbox-button.css +1 -2
  19. package/dist/menu/menu.css +1 -2
  20. package/dist/menu-button/menu-button.css +1 -2
  21. package/dist/mixins/_utility-mixins.scss +1 -1
  22. package/dist/number-input/number-input.css +48 -0
  23. package/dist/panel-dialog/panel-dialog.css +2 -2
  24. package/dist/section-notice/section-notice.css +8 -4
  25. package/dist/snackbar-dialog/snackbar-dialog.css +2 -2
  26. package/dist/svg/icon/icon-audio-high-20.svg +7 -0
  27. package/dist/svg/icon/icon-audio-high-24.svg +7 -0
  28. package/dist/svg/icon/icon-audio-off-20.svg +7 -0
  29. package/dist/svg/icon/icon-audio-off-24.svg +7 -0
  30. package/dist/svg/icon/icon-card-stack-64.svg +7 -0
  31. package/dist/svg/icon/icon-coupon-16.svg +7 -0
  32. package/dist/svg/icon/icon-coupon-24.svg +7 -0
  33. package/dist/svg/icon/icon-discount-16.svg +1 -1
  34. package/dist/svg/icon/icon-discount-24.svg +1 -1
  35. package/dist/svg/icon/icon-discount-auto-16.svg +7 -0
  36. package/dist/svg/icon/icon-discount-auto-24.svg +7 -0
  37. package/dist/svg/icon/icon-dollar-off-24.svg +7 -0
  38. package/dist/svg/icon/icon-feedback-error-16.svg +7 -0
  39. package/dist/svg/icon/icon-feedback-error-24.svg +7 -0
  40. package/dist/svg/icon/icon-hand-swipe-40.svg +7 -0
  41. package/dist/svg/icon/icon-package-error-24.svg +7 -0
  42. package/dist/svg/icon/icon-pause-20.svg +7 -0
  43. package/dist/svg/icon/icon-pencil-signed-24.svg +7 -0
  44. package/dist/svg/icon/icon-play-20.svg +5 -0
  45. package/dist/svg/icon/icon-psa-logo-16.svg +7 -0
  46. package/dist/svg/icon/icon-psa-logo-color-16-colored.svg +10 -0
  47. package/dist/svg/icon/icon-psa-vault-16.svg +7 -2
  48. package/dist/svg/icon/icon-psa-vault-24.svg +12 -0
  49. package/dist/svg/icon/icon-psa-vault-logo-16.svg +7 -0
  50. package/dist/svg/icon/icon-psa-vault-logo-color-16-colored.svg +14 -0
  51. package/dist/svg/icon/icon-refresh-20.svg +7 -0
  52. package/dist/svg/icon/icon-trading-card-edition-24.svg +7 -0
  53. package/dist/svg/icons.svg +249 -63
  54. package/dist/table/table.css +4 -0
  55. package/dist/textbox/textbox.css +1 -1
  56. package/dist/toast-dialog/toast-dialog.css +2 -2
  57. package/dist/tooltip/tooltip.css +1 -2
  58. package/dist/tourtip/tourtip.css +1 -2
  59. package/eslint.config.mjs +4 -4
  60. package/filter-input.browser.json +1 -0
  61. package/filter-input.css +1 -0
  62. package/filter-input.js +1 -0
  63. package/filter-input.mjs +1 -0
  64. package/index.browser.json +2 -0
  65. package/index.css +2 -0
  66. package/index.js +2 -0
  67. package/index.mjs +83 -81
  68. package/number-input.browser.json +1 -0
  69. package/number-input.css +1 -0
  70. package/number-input.js +1 -0
  71. package/number-input.mjs +1 -0
  72. package/package.json +49 -49
@@ -876,11 +876,11 @@ ul.accordion--large summary.details__summary{
876
876
 
877
877
  .alert-dialog__window{
878
878
  background-color:var(--dialog-window-background-color, var(--color-background-primary));
879
- border-radius:var(--lightbox-border-radius, var(--border-radius-150));
879
+ border-radius:var(--lightbox-border-radius, var(--border-radius-100));
880
880
  display:flex;
881
881
  flex:1 0 auto;
882
882
  flex-direction:column;
883
- margin:auto auto 16px;
883
+ margin:auto;
884
884
  margin-left:var(--spacing-200);
885
885
  margin-right:var(--spacing-200);
886
886
  max-height:90%;
@@ -922,6 +922,30 @@ ul.accordion--large summary.details__summary{
922
922
  .alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--fade{
923
923
  transition:opacity .16s ease-out;
924
924
  }
925
+ .alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow{
926
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
927
+ }
928
+ .alert-dialog--hide .alert-dialog__window--fade{
929
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
930
+ }
931
+ .alert-dialog--hide .alert-dialog__window--animate{
932
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
933
+ }
934
+ .alert-dialog--hide .alert-dialog__window--animate>*{
935
+ transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
936
+ }
937
+ .alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
938
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
939
+ }
940
+ .alert-dialog--show .alert-dialog__window--fade{
941
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
942
+ }
943
+ .alert-dialog--show .alert-dialog__window--animate{
944
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
945
+ }
946
+ .alert-dialog--show .alert-dialog__window--animate>*{
947
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
948
+ }
925
949
 
926
950
  .alert-dialog--hide.alert-dialog--hide,.alert-dialog--hide.alert-dialog--show-init,.alert-dialog--show-init.alert-dialog--hide,.alert-dialog--show-init.alert-dialog--show-init{
927
951
  display:flex;
@@ -929,7 +953,7 @@ ul.accordion--large summary.details__summary{
929
953
  .alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow,.alert-dialog--show-init.alert-dialog--mask-fade,.alert-dialog--show-init.alert-dialog--mask-fade-slow{
930
954
  background-color:var(--dialog-scrim-color-hide);
931
955
  }
932
- .alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show-init .alert-dialog__window--fade{
956
+ .alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--hide .alert-dialog__window--animate>*,.alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show-init .alert-dialog__window--animate,.alert-dialog--show-init .alert-dialog__window--animate>*,.alert-dialog--show-init .alert-dialog__window--fade{
933
957
  opacity:0;
934
958
  }
935
959
 
@@ -939,14 +963,45 @@ ul.accordion--large summary.details__summary{
939
963
  .alert-dialog--hide-init.alert-dialog--mask-fade,.alert-dialog--hide-init.alert-dialog--mask-fade-slow,.alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
940
964
  background-color:var(--dialog-scrim-color-show);
941
965
  }
942
- .alert-dialog--hide-init .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--fade{
966
+ .alert-dialog--hide-init .alert-dialog__window--animate,.alert-dialog--hide-init .alert-dialog__window--animate>*,.alert-dialog--hide-init .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--animate>*,.alert-dialog--show .alert-dialog__window--fade{
943
967
  opacity:1;
944
968
  }
945
969
 
970
+ @media (prefers-reduced-motion){
971
+ .alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow{
972
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
973
+ }
974
+ .alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--hide .alert-dialog__window--fade{
975
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
976
+ }
977
+ .alert-dialog--hide .alert-dialog__window--animate>*{
978
+ transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
979
+ }
980
+ .alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
981
+ transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
982
+ }
983
+ .alert-dialog--show .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--fade{
984
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
985
+ }
986
+ .alert-dialog--show .alert-dialog__window--animate>*{
987
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
988
+ }
989
+ }
990
+ .alert-dialog--hide-init .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--animate{
991
+ transform:scale(1);
992
+ }
993
+
994
+ .alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--show-init .alert-dialog__window--animate{
995
+ transform:scale(.75);
996
+ }
997
+
998
+ @media (prefers-reduced-motion){
999
+ .alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--hide-init .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--animate,.alert-dialog--show-init .alert-dialog__window--animate{
1000
+ transform:scale(1);
1001
+ }
1002
+ }
946
1003
  @media (min-width:768px){
947
1004
  .alert-dialog__window{
948
- border-radius:var(--lightbox-border-radius, var(--border-radius-100));
949
- margin:auto;
950
1005
  max-width:calc(88% - var(--spacing-400));
951
1006
  }
952
1007
  }
@@ -1928,14 +1983,19 @@ span.carousel,span.carousel__container{
1928
1983
  .carousel--hidden-scrollbar .carousel__control--next{
1929
1984
  right:0;
1930
1985
  }
1986
+ @font-face{
1987
+ font-family:Reddit Sans Condensed Bold;
1988
+ src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
1989
+ }
1931
1990
  .ccd{
1932
1991
  display:inline-flex;
1992
+ font-family:Reddit Sans Condensed Bold,Market Sans,Arial,sans-serif;
1933
1993
  gap:8px;
1934
1994
  }
1935
1995
 
1936
1996
  .ccd__charger-icon{
1937
- height:78px;
1938
- width:58px;
1997
+ height:57px;
1998
+ width:42px;
1939
1999
  }
1940
2000
 
1941
2001
  .ccd__description-figure{
@@ -1943,12 +2003,12 @@ span.carousel,span.carousel__container{
1943
2003
  display:flex;
1944
2004
  flex-direction:column;
1945
2005
  justify-content:center;
1946
- width:55px;
2006
+ width:39px;
1947
2007
  }
1948
2008
 
1949
2009
  .ccd__top-icon{
1950
- height:24px;
1951
- width:35px;
2010
+ height:18px;
2011
+ width:27px;
1952
2012
  }
1953
2013
 
1954
2014
  .ccd__body{
@@ -1959,12 +2019,11 @@ span.carousel,span.carousel__container{
1959
2019
  flex-direction:column;
1960
2020
  font-size:.4375rem;
1961
2021
  font-weight:var(--font-weight-bold);
1962
- gap:2px;
1963
- height:53px;
2022
+ height:37px;
1964
2023
  justify-content:center;
1965
2024
  overflow:hidden;
1966
2025
  text-align:center;
1967
- width:53px;
2026
+ width:39px;
1968
2027
  }
1969
2028
  .calendar{
1970
2029
  color:var(--calendar-color-token, var(--color-foreground-primary));
@@ -2319,10 +2378,8 @@ button.chip__button>svg{
2319
2378
  border:1px solid var(--color-stroke-default);
2320
2379
  border-radius:var(--border-radius-50);
2321
2380
  display:inline-block;
2322
- padding-bottom:var(--spacing-100);
2323
- padding-inline-end:var(--spacing-200);
2324
- padding-inline-start:var(--spacing-100);
2325
- padding-top:var(--spacing-100);
2381
+ padding-block:var(--spacing-100);
2382
+ padding-inline:var(--spacing-100) var(--spacing-200);
2326
2383
  position:relative;
2327
2384
  }
2328
2385
 
@@ -2695,11 +2752,11 @@ span.combobox{
2695
2752
 
2696
2753
  .confirm-dialog__window{
2697
2754
  background-color:var(--dialog-window-background-color, var(--color-background-primary));
2698
- border-radius:var(--lightbox-border-radius, var(--border-radius-150));
2755
+ border-radius:var(--lightbox-border-radius, var(--border-radius-100));
2699
2756
  display:flex;
2700
2757
  flex:1 0 auto;
2701
2758
  flex-direction:column;
2702
- margin:auto auto 16px;
2759
+ margin:auto;
2703
2760
  margin-left:var(--spacing-200);
2704
2761
  margin-right:var(--spacing-200);
2705
2762
  max-height:90%;
@@ -2735,15 +2792,29 @@ span.combobox{
2735
2792
  a.confirm-dialog__confirm,button.confirm-dialog__confirm{
2736
2793
  margin-left:var(--spacing-100);
2737
2794
  }
2738
-
2739
- .confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade{
2740
- transition:background-color .16s ease-out;
2795
+ .confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow{
2796
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
2741
2797
  }
2742
- .confirm-dialog--hide.confirm-dialog--mask-fade-slow,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
2743
- transition:background-color .32s ease-out;
2798
+ .confirm-dialog--hide .confirm-dialog__window--fade{
2799
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
2744
2800
  }
2745
- .confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--fade{
2746
- transition:opacity .16s ease-out;
2801
+ .confirm-dialog--hide .confirm-dialog__window--animate{
2802
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
2803
+ }
2804
+ .confirm-dialog--hide .confirm-dialog__window--animate>*{
2805
+ transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
2806
+ }
2807
+ .confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
2808
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
2809
+ }
2810
+ .confirm-dialog--show .confirm-dialog__window--fade{
2811
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
2812
+ }
2813
+ .confirm-dialog--show .confirm-dialog__window--animate{
2814
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
2815
+ }
2816
+ .confirm-dialog--show .confirm-dialog__window--animate>*{
2817
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
2747
2818
  }
2748
2819
 
2749
2820
  .confirm-dialog--hide.confirm-dialog--hide,.confirm-dialog--hide.confirm-dialog--show-init,.confirm-dialog--show-init.confirm-dialog--hide,.confirm-dialog--show-init.confirm-dialog--show-init{
@@ -2752,7 +2823,7 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
2752
2823
  .confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow,.confirm-dialog--show-init.confirm-dialog--mask-fade,.confirm-dialog--show-init.confirm-dialog--mask-fade-slow{
2753
2824
  background-color:var(--dialog-scrim-color-hide);
2754
2825
  }
2755
- .confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show-init .confirm-dialog__window--fade{
2826
+ .confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--hide .confirm-dialog__window--animate>*,.confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show-init .confirm-dialog__window--animate,.confirm-dialog--show-init .confirm-dialog__window--animate>*,.confirm-dialog--show-init .confirm-dialog__window--fade{
2756
2827
  opacity:0;
2757
2828
  }
2758
2829
 
@@ -2762,14 +2833,45 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
2762
2833
  .confirm-dialog--hide-init.confirm-dialog--mask-fade,.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow,.confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
2763
2834
  background-color:var(--dialog-scrim-color-show);
2764
2835
  }
2765
- .confirm-dialog--hide-init .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--fade{
2836
+ .confirm-dialog--hide-init .confirm-dialog__window--animate,.confirm-dialog--hide-init .confirm-dialog__window--animate>*,.confirm-dialog--hide-init .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--animate>*,.confirm-dialog--show .confirm-dialog__window--fade{
2766
2837
  opacity:1;
2767
2838
  }
2768
2839
 
2840
+ @media (prefers-reduced-motion){
2841
+ .confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow{
2842
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
2843
+ }
2844
+ .confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--hide .confirm-dialog__window--fade{
2845
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
2846
+ }
2847
+ .confirm-dialog--hide .confirm-dialog__window--animate>*{
2848
+ transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
2849
+ }
2850
+ .confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
2851
+ transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
2852
+ }
2853
+ .confirm-dialog--show .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--fade{
2854
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
2855
+ }
2856
+ .confirm-dialog--show .confirm-dialog__window--animate>*{
2857
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
2858
+ }
2859
+ }
2860
+ .confirm-dialog--hide-init .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--animate{
2861
+ transform:scale(1);
2862
+ }
2863
+
2864
+ .confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--show-init .confirm-dialog__window--animate{
2865
+ transform:scale(.75);
2866
+ }
2867
+
2868
+ @media (prefers-reduced-motion){
2869
+ .confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--hide-init .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--animate,.confirm-dialog--show-init .confirm-dialog__window--animate{
2870
+ transform:scale(1);
2871
+ }
2872
+ }
2769
2873
  @media (min-width:768px){
2770
2874
  .confirm-dialog__window{
2771
- border-radius:var(--lightbox-border-radius, var(--border-radius-100));
2772
- margin:auto;
2773
2875
  max-width:calc(88% - var(--spacing-400));
2774
2876
  }
2775
2877
  }
@@ -3674,7 +3776,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
3674
3776
 
3675
3777
  .file-preview-card__see-more{
3676
3778
  aspect-ratio:1/1;
3677
- background-color:rgba(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
3779
+ background-color:rgb(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
3678
3780
  border:none;
3679
3781
  border-radius:50%;
3680
3782
  color:var(--file-preview-card-see-more-color, var(--color-foreground-on-strong));
@@ -3695,11 +3797,11 @@ img.file-preview-card__asset,video.file-preview-card__asset{
3695
3797
  }
3696
3798
 
3697
3799
  .file-preview-card__see-more:focus-visible,.file-preview-card__see-more:hover{
3698
- background-color:rgba(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
3800
+ background-color:rgb(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
3699
3801
  }
3700
3802
 
3701
3803
  .file-preview-card__see-more:active{
3702
- background-color:rgba(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
3804
+ background-color:rgb(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
3703
3805
  }
3704
3806
 
3705
3807
  .file-preview-card__footer{
@@ -3973,6 +4075,60 @@ a.filter-link--selected:not([href]):hover,a.filter-link--selected[aria-disabled=
3973
4075
  a.filter-link:focus:not(:focus-visible),button.filter-button:focus:not(:focus-visible){
3974
4076
  outline:none;
3975
4077
  }
4078
+
4079
+ .filter-input{
4080
+ display:inline-block;
4081
+ width:100%;
4082
+ }
4083
+
4084
+ .filter-input__clear-btn{
4085
+ display:none;
4086
+ }
4087
+
4088
+ .filter-input .textbox{
4089
+ border-radius:var(--border-radius-150);
4090
+ max-width:480px;
4091
+ min-width:200px;
4092
+ }
4093
+
4094
+ .filter-input .textbox__control{
4095
+ height:40px;
4096
+ }
4097
+
4098
+ .filter-input .textbox__control:not(:placeholder-shown)~.filter-input__clear-btn{
4099
+ display:block;
4100
+ }
4101
+
4102
+ .filter-input .textbox__control::-webkit-search-cancel-button{
4103
+ -webkit-appearance:none;
4104
+ display:none;
4105
+ }
4106
+
4107
+ .filter-input .textbox button.icon-btn.icon-btn--transparent.icon-btn--small{
4108
+ min-width:32px;
4109
+ }
4110
+
4111
+ .filter-input .textbox .icon-btn:last-child{
4112
+ flex-shrink:0;
4113
+ margin-inline-end:var(--spacing-50);
4114
+ margin-inline-start:0;
4115
+ }
4116
+
4117
+ .filter-input--small .textbox .icon-btn:last-child{
4118
+ margin-inline-end:0;
4119
+ }
4120
+
4121
+ .filter-input--large .textbox .icon-btn:last-child{
4122
+ margin-inline-end:var(--spacing-100);
4123
+ }
4124
+
4125
+ .filter-input--small .textbox__control{
4126
+ height:32px;
4127
+ }
4128
+
4129
+ .filter-input--large .textbox__control{
4130
+ height:48px;
4131
+ }
3976
4132
  .filter-menu,.filter-menu-form{
3977
4133
  background-color:var(--filter-menu-item-background-color, var(--color-background-primary));
3978
4134
  min-width:144px;
@@ -7333,18 +7489,29 @@ button.icon-btn.lightbox-dialog__prev{
7333
7489
  .lightbox-dialog__title--center{
7334
7490
  text-align:center;
7335
7491
  }
7336
-
7337
- .lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade{
7338
- transition:background-color .16s ease-out;
7492
+ .lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow{
7493
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
7339
7494
  }
7340
- .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
7341
- transition:background-color .32s ease-out;
7495
+ .lightbox-dialog--hide .lightbox-dialog__window--fade{
7496
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
7342
7497
  }
7343
- .lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
7344
- transition:opacity .16s ease-out;
7498
+ .lightbox-dialog--hide .lightbox-dialog__window--animate{
7499
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
7500
+ }
7501
+ .lightbox-dialog--hide .lightbox-dialog__window--animate>*{
7502
+ transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
7503
+ }
7504
+ .lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
7505
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
7345
7506
  }
7346
- .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
7347
- transition:opacity .16s ease-out,transform .32s ease-out;
7507
+ .lightbox-dialog--show .lightbox-dialog__window--fade{
7508
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
7509
+ }
7510
+ .lightbox-dialog--show .lightbox-dialog__window--animate{
7511
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
7512
+ }
7513
+ .lightbox-dialog--show .lightbox-dialog__window--animate>*{
7514
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
7348
7515
  }
7349
7516
 
7350
7517
  .lightbox-dialog--hide.lightbox-dialog--hide,.lightbox-dialog--hide.lightbox-dialog--show-init,.lightbox-dialog--show-init.lightbox-dialog--hide,.lightbox-dialog--show-init.lightbox-dialog--show-init{
@@ -7353,12 +7520,8 @@ button.icon-btn.lightbox-dialog__prev{
7353
7520
  .lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show-init.lightbox-dialog--mask-fade,.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow{
7354
7521
  background-color:var(--dialog-scrim-color-hide);
7355
7522
  }
7356
- .lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
7357
- opacity:0;
7358
- }
7359
- .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
7523
+ .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--hide .lightbox-dialog__window--animate>*,.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate>*,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
7360
7524
  opacity:0;
7361
- transform:translateY(100%);
7362
7525
  }
7363
7526
 
7364
7527
  .lightbox-dialog--hide-init.lightbox-dialog--hide-init,.lightbox-dialog--hide-init.lightbox-dialog--show,.lightbox-dialog--show.lightbox-dialog--hide-init,.lightbox-dialog--show.lightbox-dialog--show{
@@ -7367,13 +7530,37 @@ button.icon-btn.lightbox-dialog__prev{
7367
7530
  .lightbox-dialog--hide-init.lightbox-dialog--mask-fade,.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
7368
7531
  background-color:var(--dialog-scrim-color-show);
7369
7532
  }
7370
- .lightbox-dialog--hide-init .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
7533
+ .lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--hide-init .lightbox-dialog__window--animate>*,.lightbox-dialog--hide-init .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate>*,.lightbox-dialog--show .lightbox-dialog__window--fade{
7371
7534
  opacity:1;
7372
7535
  }
7536
+
7537
+ @media (prefers-reduced-motion){
7538
+ .lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow{
7539
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
7540
+ }
7541
+ .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--hide .lightbox-dialog__window--fade{
7542
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
7543
+ }
7544
+ .lightbox-dialog--hide .lightbox-dialog__window--animate>*{
7545
+ transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
7546
+ }
7547
+ .lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
7548
+ transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
7549
+ }
7550
+ .lightbox-dialog--show .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--fade{
7551
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
7552
+ }
7553
+ .lightbox-dialog--show .lightbox-dialog__window--animate>*{
7554
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
7555
+ }
7556
+ }
7373
7557
  .lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
7374
- opacity:1;
7375
7558
  transform:translateY(0);
7376
7559
  }
7560
+
7561
+ .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
7562
+ transform:translateY(100%);
7563
+ }
7377
7564
  .lightbox-dialog__handle:after{
7378
7565
  background-color:var(--dialog-handle-color, var(--color-stroke-default));
7379
7566
  border-radius:3px;
@@ -7426,8 +7613,16 @@ button.icon-btn.lightbox-dialog__prev{
7426
7613
  margin-left:var(--spacing-100);
7427
7614
  margin-top:0;
7428
7615
  }
7616
+ .lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
7617
+ transform:scale(1);
7618
+ }
7619
+ .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
7620
+ transform:scale(.75);
7621
+ }
7622
+ }
7623
+ @media (min-width:512px) and (prefers-reduced-motion){
7429
7624
  .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
7430
- transform:translateY(0);
7625
+ transform:scale(1);
7431
7626
  }
7432
7627
  }
7433
7628
  @media (min-width:768px){
@@ -7865,6 +8060,53 @@ span.listbox-button__value{
7865
8060
  margin-left:3px;
7866
8061
  margin-right:0;
7867
8062
  }
8063
+ .number-input .textbox{
8064
+ background:transparent;
8065
+ }
8066
+
8067
+ .number-input label:first-child{
8068
+ flex-grow:1;
8069
+ padding-left:var(--spacing-200);
8070
+ }
8071
+
8072
+ .number-input label:first-child~input.textbox__control{
8073
+ flex-grow:0;
8074
+ }
8075
+
8076
+ .icon-btn.number-input__delete{
8077
+ display:none;
8078
+ margin-inline-end:calc(var(--spacing-100)*-1);
8079
+ order:-1;
8080
+ padding-inline-start:var(--spacing-200);
8081
+ }
8082
+
8083
+ .number-input--show-delete .number-input__delete{
8084
+ display:block;
8085
+ }
8086
+
8087
+ .number-input--show-delete .number-input__decrement{
8088
+ display:none;
8089
+ }
8090
+
8091
+ .number-input .textbox .textbox__control{
8092
+ font-weight:700;
8093
+ text-align:center;
8094
+ width:48px;
8095
+ }
8096
+ .number-input .textbox .textbox__control::-webkit-inner-spin-button,.number-input .textbox .textbox__control::-webkit-outer-spin-button{
8097
+ -webkit-appearance:none;
8098
+ margin:0;
8099
+ }
8100
+ .number-input .textbox .textbox__control[type=number]{
8101
+ -moz-appearance:textfield;
8102
+ -webkit-appearance:textfield;
8103
+ appearance:textfield;
8104
+ }
8105
+
8106
+ .number-input .textbox .icon-btn:not(:disabled) svg{
8107
+ color:var(--color-foreground-primary);
8108
+ fill:currentColor;
8109
+ }
7868
8110
  .fake-menu__items,.menu__items{
7869
8111
  background-color:var(--menu-background-color, var(--color-background-primary));
7870
8112
  cursor:default;
@@ -9504,7 +9746,7 @@ span[role=region].section-notice{
9504
9746
  margin-inline-end:var(--spacing-200);
9505
9747
  }
9506
9748
 
9507
- .section-notice__header+.section-notice__main{
9749
+ .section-notice__header+.section-notice__main,.section-notice__header~.section-notice__cta{
9508
9750
  grid-column:2;
9509
9751
  }
9510
9752
 
@@ -9521,10 +9763,10 @@ span[role=region].section-notice{
9521
9763
  }
9522
9764
 
9523
9765
  p.section-notice__cta{
9524
- grid-column:2;
9766
+ grid-column:1 / 3;
9525
9767
  grid-row:2;
9526
9768
  justify-self:flex-start;
9527
- margin-right:var(--spacing-200);
9769
+ margin-bottom:0;
9528
9770
  margin-top:var(--spacing-200);
9529
9771
  }
9530
9772
  .section-notice__main .section-notice__title~p{
@@ -9538,10 +9780,13 @@ p.section-notice__cta{
9538
9780
  grid-column:4;
9539
9781
  grid-row:1;
9540
9782
  justify-self:flex-end;
9541
- margin-bottom:0;
9783
+ margin-right:var(--spacing-200);
9542
9784
  margin-top:0;
9543
9785
  padding-right:var(--spacing-200);
9544
9786
  }
9787
+ .section-notice__header~.section-notice__cta{
9788
+ grid-column:4;
9789
+ }
9545
9790
  .section-notice__footer{
9546
9791
  padding-left:var(--spacing-200);
9547
9792
  }
@@ -10362,6 +10607,10 @@ span.switch__control:focus:not(:focus-visible){
10362
10607
  padding:16px;
10363
10608
  }
10364
10609
 
10610
+ .table--frozen-header{
10611
+ max-height:90vh;
10612
+ }
10613
+
10365
10614
  .table--frozen-header thead{
10366
10615
  position:sticky;
10367
10616
  top:0;
@@ -10774,11 +11023,11 @@ input.textbox__control{
10774
11023
  display:inline-flex;
10775
11024
  height:1lh;
10776
11025
  pointer-events:none;
10777
- width:14px;
10778
11026
  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
10779
11027
  }
10780
11028
 
10781
11029
  .textbox>span:first-child,.textbox>svg:first-child{
11030
+ flex-shrink:0;
10782
11031
  margin-inline-start:var(--spacing-200);
10783
11032
  }
10784
11033
 
@@ -10802,8 +11051,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
10802
11051
  width:100%;
10803
11052
  }
10804
11053
  :root{
10805
- --dialog-scrim-color-hide:rgba(17, 24, 32, 0);
10806
- --dialog-scrim-color-show:rgba(17, 24, 32, 0.7);
11054
+ --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
11055
+ --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
10807
11056
  --dialog-lightbox-max-width:616px;
10808
11057
  }
10809
11058
  .toast-dialog{
@@ -11904,7 +12153,7 @@ button.tooltip__close{
11904
12153
  }
11905
12154
  }
11906
12155
  :root{
11907
- --bubble-shadow:0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
12156
+ --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
11908
12157
  }
11909
12158
  .tourtip{
11910
12159
  position:relative;