@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
@@ -677,11 +677,11 @@ ul.accordion--large summary.details__summary{
677
677
 
678
678
  .alert-dialog__window{
679
679
  background-color:var(--dialog-window-background-color, var(--color-background-primary));
680
- border-radius:var(--lightbox-border-radius, var(--border-radius-150));
680
+ border-radius:var(--lightbox-border-radius, var(--border-radius-100));
681
681
  display:flex;
682
682
  flex:1 0 auto;
683
683
  flex-direction:column;
684
- margin:auto auto 16px;
684
+ margin:auto;
685
685
  margin-left:var(--spacing-200);
686
686
  margin-right:var(--spacing-200);
687
687
  max-height:90%;
@@ -723,6 +723,30 @@ ul.accordion--large summary.details__summary{
723
723
  .alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--fade{
724
724
  transition:opacity .16s ease-out;
725
725
  }
726
+ .alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow{
727
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
728
+ }
729
+ .alert-dialog--hide .alert-dialog__window--fade{
730
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
731
+ }
732
+ .alert-dialog--hide .alert-dialog__window--animate{
733
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
734
+ }
735
+ .alert-dialog--hide .alert-dialog__window--animate>*{
736
+ transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
737
+ }
738
+ .alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
739
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
740
+ }
741
+ .alert-dialog--show .alert-dialog__window--fade{
742
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
743
+ }
744
+ .alert-dialog--show .alert-dialog__window--animate{
745
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
746
+ }
747
+ .alert-dialog--show .alert-dialog__window--animate>*{
748
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
749
+ }
726
750
 
727
751
  .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{
728
752
  display:flex;
@@ -730,7 +754,7 @@ ul.accordion--large summary.details__summary{
730
754
  .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{
731
755
  background-color:var(--dialog-scrim-color-hide);
732
756
  }
733
- .alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show-init .alert-dialog__window--fade{
757
+ .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{
734
758
  opacity:0;
735
759
  }
736
760
 
@@ -740,14 +764,45 @@ ul.accordion--large summary.details__summary{
740
764
  .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{
741
765
  background-color:var(--dialog-scrim-color-show);
742
766
  }
743
- .alert-dialog--hide-init .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--fade{
767
+ .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{
744
768
  opacity:1;
745
769
  }
746
770
 
771
+ @media (prefers-reduced-motion){
772
+ .alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow{
773
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
774
+ }
775
+ .alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--hide .alert-dialog__window--fade{
776
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
777
+ }
778
+ .alert-dialog--hide .alert-dialog__window--animate>*{
779
+ transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
780
+ }
781
+ .alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
782
+ transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
783
+ }
784
+ .alert-dialog--show .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--fade{
785
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
786
+ }
787
+ .alert-dialog--show .alert-dialog__window--animate>*{
788
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
789
+ }
790
+ }
791
+ .alert-dialog--hide-init .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--animate{
792
+ transform:scale(1);
793
+ }
794
+
795
+ .alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--show-init .alert-dialog__window--animate{
796
+ transform:scale(.75);
797
+ }
798
+
799
+ @media (prefers-reduced-motion){
800
+ .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{
801
+ transform:scale(1);
802
+ }
803
+ }
747
804
  @media (min-width:768px){
748
805
  .alert-dialog__window{
749
- border-radius:var(--lightbox-border-radius, var(--border-radius-100));
750
- margin:auto;
751
806
  max-width:calc(88% - var(--spacing-400));
752
807
  }
753
808
  }
@@ -1729,14 +1784,19 @@ span.carousel,span.carousel__container{
1729
1784
  .carousel--hidden-scrollbar .carousel__control--next{
1730
1785
  right:0;
1731
1786
  }
1787
+ @font-face{
1788
+ font-family:Reddit Sans Condensed Bold;
1789
+ src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
1790
+ }
1732
1791
  .ccd{
1733
1792
  display:inline-flex;
1793
+ font-family:Reddit Sans Condensed Bold,Market Sans,Arial,sans-serif;
1734
1794
  gap:8px;
1735
1795
  }
1736
1796
 
1737
1797
  .ccd__charger-icon{
1738
- height:78px;
1739
- width:58px;
1798
+ height:57px;
1799
+ width:42px;
1740
1800
  }
1741
1801
 
1742
1802
  .ccd__description-figure{
@@ -1744,12 +1804,12 @@ span.carousel,span.carousel__container{
1744
1804
  display:flex;
1745
1805
  flex-direction:column;
1746
1806
  justify-content:center;
1747
- width:55px;
1807
+ width:39px;
1748
1808
  }
1749
1809
 
1750
1810
  .ccd__top-icon{
1751
- height:24px;
1752
- width:35px;
1811
+ height:18px;
1812
+ width:27px;
1753
1813
  }
1754
1814
 
1755
1815
  .ccd__body{
@@ -1760,12 +1820,11 @@ span.carousel,span.carousel__container{
1760
1820
  flex-direction:column;
1761
1821
  font-size:.4375rem;
1762
1822
  font-weight:var(--font-weight-bold);
1763
- gap:2px;
1764
- height:53px;
1823
+ height:37px;
1765
1824
  justify-content:center;
1766
1825
  overflow:hidden;
1767
1826
  text-align:center;
1768
- width:53px;
1827
+ width:39px;
1769
1828
  }
1770
1829
  .calendar{
1771
1830
  color:var(--calendar-color-token, var(--color-foreground-primary));
@@ -2120,10 +2179,8 @@ button.chip__button>svg{
2120
2179
  border:1px solid var(--color-stroke-default);
2121
2180
  border-radius:var(--border-radius-50);
2122
2181
  display:inline-block;
2123
- padding-bottom:var(--spacing-100);
2124
- padding-inline-end:var(--spacing-200);
2125
- padding-inline-start:var(--spacing-100);
2126
- padding-top:var(--spacing-100);
2182
+ padding-block:var(--spacing-100);
2183
+ padding-inline:var(--spacing-100) var(--spacing-200);
2127
2184
  position:relative;
2128
2185
  }
2129
2186
 
@@ -2496,11 +2553,11 @@ span.combobox{
2496
2553
 
2497
2554
  .confirm-dialog__window{
2498
2555
  background-color:var(--dialog-window-background-color, var(--color-background-primary));
2499
- border-radius:var(--lightbox-border-radius, var(--border-radius-150));
2556
+ border-radius:var(--lightbox-border-radius, var(--border-radius-100));
2500
2557
  display:flex;
2501
2558
  flex:1 0 auto;
2502
2559
  flex-direction:column;
2503
- margin:auto auto 16px;
2560
+ margin:auto;
2504
2561
  margin-left:var(--spacing-200);
2505
2562
  margin-right:var(--spacing-200);
2506
2563
  max-height:90%;
@@ -2536,15 +2593,29 @@ span.combobox{
2536
2593
  a.confirm-dialog__confirm,button.confirm-dialog__confirm{
2537
2594
  margin-left:var(--spacing-100);
2538
2595
  }
2539
-
2540
- .confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade{
2541
- transition:background-color .16s ease-out;
2596
+ .confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow{
2597
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
2542
2598
  }
2543
- .confirm-dialog--hide.confirm-dialog--mask-fade-slow,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
2544
- transition:background-color .32s ease-out;
2599
+ .confirm-dialog--hide .confirm-dialog__window--fade{
2600
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
2545
2601
  }
2546
- .confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--fade{
2547
- transition:opacity .16s ease-out;
2602
+ .confirm-dialog--hide .confirm-dialog__window--animate{
2603
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
2604
+ }
2605
+ .confirm-dialog--hide .confirm-dialog__window--animate>*{
2606
+ transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
2607
+ }
2608
+ .confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
2609
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
2610
+ }
2611
+ .confirm-dialog--show .confirm-dialog__window--fade{
2612
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
2613
+ }
2614
+ .confirm-dialog--show .confirm-dialog__window--animate{
2615
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
2616
+ }
2617
+ .confirm-dialog--show .confirm-dialog__window--animate>*{
2618
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
2548
2619
  }
2549
2620
 
2550
2621
  .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{
@@ -2553,7 +2624,7 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
2553
2624
  .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{
2554
2625
  background-color:var(--dialog-scrim-color-hide);
2555
2626
  }
2556
- .confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show-init .confirm-dialog__window--fade{
2627
+ .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{
2557
2628
  opacity:0;
2558
2629
  }
2559
2630
 
@@ -2563,14 +2634,45 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
2563
2634
  .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{
2564
2635
  background-color:var(--dialog-scrim-color-show);
2565
2636
  }
2566
- .confirm-dialog--hide-init .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--fade{
2637
+ .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{
2567
2638
  opacity:1;
2568
2639
  }
2569
2640
 
2641
+ @media (prefers-reduced-motion){
2642
+ .confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow{
2643
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
2644
+ }
2645
+ .confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--hide .confirm-dialog__window--fade{
2646
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
2647
+ }
2648
+ .confirm-dialog--hide .confirm-dialog__window--animate>*{
2649
+ transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
2650
+ }
2651
+ .confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
2652
+ transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
2653
+ }
2654
+ .confirm-dialog--show .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--fade{
2655
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
2656
+ }
2657
+ .confirm-dialog--show .confirm-dialog__window--animate>*{
2658
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
2659
+ }
2660
+ }
2661
+ .confirm-dialog--hide-init .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--animate{
2662
+ transform:scale(1);
2663
+ }
2664
+
2665
+ .confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--show-init .confirm-dialog__window--animate{
2666
+ transform:scale(.75);
2667
+ }
2668
+
2669
+ @media (prefers-reduced-motion){
2670
+ .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{
2671
+ transform:scale(1);
2672
+ }
2673
+ }
2570
2674
  @media (min-width:768px){
2571
2675
  .confirm-dialog__window{
2572
- border-radius:var(--lightbox-border-radius, var(--border-radius-100));
2573
- margin:auto;
2574
2676
  max-width:calc(88% - var(--spacing-400));
2575
2677
  }
2576
2678
  }
@@ -3475,7 +3577,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
3475
3577
 
3476
3578
  .file-preview-card__see-more{
3477
3579
  aspect-ratio:1/1;
3478
- background-color:rgba(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
3580
+ background-color:rgb(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
3479
3581
  border:none;
3480
3582
  border-radius:50%;
3481
3583
  color:var(--file-preview-card-see-more-color, var(--color-foreground-on-strong));
@@ -3496,11 +3598,11 @@ img.file-preview-card__asset,video.file-preview-card__asset{
3496
3598
  }
3497
3599
 
3498
3600
  .file-preview-card__see-more:focus-visible,.file-preview-card__see-more:hover{
3499
- background-color:rgba(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
3601
+ background-color:rgb(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
3500
3602
  }
3501
3603
 
3502
3604
  .file-preview-card__see-more:active{
3503
- background-color:rgba(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
3605
+ background-color:rgb(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
3504
3606
  }
3505
3607
 
3506
3608
  .file-preview-card__footer{
@@ -3774,6 +3876,60 @@ a.filter-link--selected:not([href]):hover,a.filter-link--selected[aria-disabled=
3774
3876
  a.filter-link:focus:not(:focus-visible),button.filter-button:focus:not(:focus-visible){
3775
3877
  outline:none;
3776
3878
  }
3879
+
3880
+ .filter-input{
3881
+ display:inline-block;
3882
+ width:100%;
3883
+ }
3884
+
3885
+ .filter-input__clear-btn{
3886
+ display:none;
3887
+ }
3888
+
3889
+ .filter-input .textbox{
3890
+ border-radius:var(--border-radius-150);
3891
+ max-width:480px;
3892
+ min-width:200px;
3893
+ }
3894
+
3895
+ .filter-input .textbox__control{
3896
+ height:40px;
3897
+ }
3898
+
3899
+ .filter-input .textbox__control:not(:placeholder-shown)~.filter-input__clear-btn{
3900
+ display:block;
3901
+ }
3902
+
3903
+ .filter-input .textbox__control::-webkit-search-cancel-button{
3904
+ -webkit-appearance:none;
3905
+ display:none;
3906
+ }
3907
+
3908
+ .filter-input .textbox button.icon-btn.icon-btn--transparent.icon-btn--small{
3909
+ min-width:32px;
3910
+ }
3911
+
3912
+ .filter-input .textbox .icon-btn:last-child{
3913
+ flex-shrink:0;
3914
+ margin-inline-end:var(--spacing-50);
3915
+ margin-inline-start:0;
3916
+ }
3917
+
3918
+ .filter-input--small .textbox .icon-btn:last-child{
3919
+ margin-inline-end:0;
3920
+ }
3921
+
3922
+ .filter-input--large .textbox .icon-btn:last-child{
3923
+ margin-inline-end:var(--spacing-100);
3924
+ }
3925
+
3926
+ .filter-input--small .textbox__control{
3927
+ height:32px;
3928
+ }
3929
+
3930
+ .filter-input--large .textbox__control{
3931
+ height:48px;
3932
+ }
3777
3933
  .filter-menu,.filter-menu-form{
3778
3934
  background-color:var(--filter-menu-item-background-color, var(--color-background-primary));
3779
3935
  min-width:144px;
@@ -7134,18 +7290,29 @@ button.icon-btn.lightbox-dialog__prev{
7134
7290
  .lightbox-dialog__title--center{
7135
7291
  text-align:center;
7136
7292
  }
7137
-
7138
- .lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade{
7139
- transition:background-color .16s ease-out;
7293
+ .lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow{
7294
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
7140
7295
  }
7141
- .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
7142
- transition:background-color .32s ease-out;
7296
+ .lightbox-dialog--hide .lightbox-dialog__window--fade{
7297
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
7143
7298
  }
7144
- .lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
7145
- transition:opacity .16s ease-out;
7299
+ .lightbox-dialog--hide .lightbox-dialog__window--animate{
7300
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
7301
+ }
7302
+ .lightbox-dialog--hide .lightbox-dialog__window--animate>*{
7303
+ transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
7304
+ }
7305
+ .lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
7306
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
7146
7307
  }
7147
- .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
7148
- transition:opacity .16s ease-out,transform .32s ease-out;
7308
+ .lightbox-dialog--show .lightbox-dialog__window--fade{
7309
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
7310
+ }
7311
+ .lightbox-dialog--show .lightbox-dialog__window--animate{
7312
+ transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
7313
+ }
7314
+ .lightbox-dialog--show .lightbox-dialog__window--animate>*{
7315
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
7149
7316
  }
7150
7317
 
7151
7318
  .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{
@@ -7154,12 +7321,8 @@ button.icon-btn.lightbox-dialog__prev{
7154
7321
  .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{
7155
7322
  background-color:var(--dialog-scrim-color-hide);
7156
7323
  }
7157
- .lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
7158
- opacity:0;
7159
- }
7160
- .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
7324
+ .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{
7161
7325
  opacity:0;
7162
- transform:translateY(100%);
7163
7326
  }
7164
7327
 
7165
7328
  .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{
@@ -7168,13 +7331,37 @@ button.icon-btn.lightbox-dialog__prev{
7168
7331
  .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{
7169
7332
  background-color:var(--dialog-scrim-color-show);
7170
7333
  }
7171
- .lightbox-dialog--hide-init .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
7334
+ .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{
7172
7335
  opacity:1;
7173
7336
  }
7337
+
7338
+ @media (prefers-reduced-motion){
7339
+ .lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow{
7340
+ transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
7341
+ }
7342
+ .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--hide .lightbox-dialog__window--fade{
7343
+ transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
7344
+ }
7345
+ .lightbox-dialog--hide .lightbox-dialog__window--animate>*{
7346
+ transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
7347
+ }
7348
+ .lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
7349
+ transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
7350
+ }
7351
+ .lightbox-dialog--show .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--fade{
7352
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
7353
+ }
7354
+ .lightbox-dialog--show .lightbox-dialog__window--animate>*{
7355
+ transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
7356
+ }
7357
+ }
7174
7358
  .lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
7175
- opacity:1;
7176
7359
  transform:translateY(0);
7177
7360
  }
7361
+
7362
+ .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
7363
+ transform:translateY(100%);
7364
+ }
7178
7365
  .lightbox-dialog__handle:after{
7179
7366
  background-color:var(--dialog-handle-color, var(--color-stroke-default));
7180
7367
  border-radius:3px;
@@ -7227,8 +7414,16 @@ button.icon-btn.lightbox-dialog__prev{
7227
7414
  margin-left:var(--spacing-100);
7228
7415
  margin-top:0;
7229
7416
  }
7417
+ .lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
7418
+ transform:scale(1);
7419
+ }
7420
+ .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
7421
+ transform:scale(.75);
7422
+ }
7423
+ }
7424
+ @media (min-width:512px) and (prefers-reduced-motion){
7230
7425
  .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{
7231
- transform:translateY(0);
7426
+ transform:scale(1);
7232
7427
  }
7233
7428
  }
7234
7429
  @media (min-width:768px){
@@ -7666,6 +7861,53 @@ span.listbox-button__value{
7666
7861
  margin-left:3px;
7667
7862
  margin-right:0;
7668
7863
  }
7864
+ .number-input .textbox{
7865
+ background:transparent;
7866
+ }
7867
+
7868
+ .number-input label:first-child{
7869
+ flex-grow:1;
7870
+ padding-left:var(--spacing-200);
7871
+ }
7872
+
7873
+ .number-input label:first-child~input.textbox__control{
7874
+ flex-grow:0;
7875
+ }
7876
+
7877
+ .icon-btn.number-input__delete{
7878
+ display:none;
7879
+ margin-inline-end:calc(var(--spacing-100)*-1);
7880
+ order:-1;
7881
+ padding-inline-start:var(--spacing-200);
7882
+ }
7883
+
7884
+ .number-input--show-delete .number-input__delete{
7885
+ display:block;
7886
+ }
7887
+
7888
+ .number-input--show-delete .number-input__decrement{
7889
+ display:none;
7890
+ }
7891
+
7892
+ .number-input .textbox .textbox__control{
7893
+ font-weight:700;
7894
+ text-align:center;
7895
+ width:48px;
7896
+ }
7897
+ .number-input .textbox .textbox__control::-webkit-inner-spin-button,.number-input .textbox .textbox__control::-webkit-outer-spin-button{
7898
+ -webkit-appearance:none;
7899
+ margin:0;
7900
+ }
7901
+ .number-input .textbox .textbox__control[type=number]{
7902
+ -moz-appearance:textfield;
7903
+ -webkit-appearance:textfield;
7904
+ appearance:textfield;
7905
+ }
7906
+
7907
+ .number-input .textbox .icon-btn:not(:disabled) svg{
7908
+ color:var(--color-foreground-primary);
7909
+ fill:currentColor;
7910
+ }
7669
7911
  .fake-menu__items,.menu__items{
7670
7912
  background-color:var(--menu-background-color, var(--color-background-primary));
7671
7913
  cursor:default;
@@ -9305,7 +9547,7 @@ span[role=region].section-notice{
9305
9547
  margin-inline-end:var(--spacing-200);
9306
9548
  }
9307
9549
 
9308
- .section-notice__header+.section-notice__main{
9550
+ .section-notice__header+.section-notice__main,.section-notice__header~.section-notice__cta{
9309
9551
  grid-column:2;
9310
9552
  }
9311
9553
 
@@ -9322,10 +9564,10 @@ span[role=region].section-notice{
9322
9564
  }
9323
9565
 
9324
9566
  p.section-notice__cta{
9325
- grid-column:2;
9567
+ grid-column:1 / 3;
9326
9568
  grid-row:2;
9327
9569
  justify-self:flex-start;
9328
- margin-right:var(--spacing-200);
9570
+ margin-bottom:0;
9329
9571
  margin-top:var(--spacing-200);
9330
9572
  }
9331
9573
  .section-notice__main .section-notice__title~p{
@@ -9339,10 +9581,13 @@ p.section-notice__cta{
9339
9581
  grid-column:4;
9340
9582
  grid-row:1;
9341
9583
  justify-self:flex-end;
9342
- margin-bottom:0;
9584
+ margin-right:var(--spacing-200);
9343
9585
  margin-top:0;
9344
9586
  padding-right:var(--spacing-200);
9345
9587
  }
9588
+ .section-notice__header~.section-notice__cta{
9589
+ grid-column:4;
9590
+ }
9346
9591
  .section-notice__footer{
9347
9592
  padding-left:var(--spacing-200);
9348
9593
  }
@@ -10163,6 +10408,10 @@ span.switch__control:focus:not(:focus-visible){
10163
10408
  padding:16px;
10164
10409
  }
10165
10410
 
10411
+ .table--frozen-header{
10412
+ max-height:90vh;
10413
+ }
10414
+
10166
10415
  .table--frozen-header thead{
10167
10416
  position:sticky;
10168
10417
  top:0;
@@ -10575,11 +10824,11 @@ input.textbox__control{
10575
10824
  display:inline-flex;
10576
10825
  height:1lh;
10577
10826
  pointer-events:none;
10578
- width:14px;
10579
10827
  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
10580
10828
  }
10581
10829
 
10582
10830
  .textbox>span:first-child,.textbox>svg:first-child{
10831
+ flex-shrink:0;
10583
10832
  margin-inline-start:var(--spacing-200);
10584
10833
  }
10585
10834
 
@@ -10603,8 +10852,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
10603
10852
  width:100%;
10604
10853
  }
10605
10854
  :root{
10606
- --dialog-scrim-color-hide:rgba(17, 24, 32, 0);
10607
- --dialog-scrim-color-show:rgba(17, 24, 32, 0.7);
10855
+ --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
10856
+ --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
10608
10857
  --dialog-lightbox-max-width:616px;
10609
10858
  }
10610
10859
  .toast-dialog{
@@ -11705,7 +11954,7 @@ button.tooltip__close{
11705
11954
  }
11706
11955
  }
11707
11956
  :root{
11708
- --bubble-shadow:0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
11957
+ --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
11709
11958
  }
11710
11959
  .tourtip{
11711
11960
  position:relative;