@ebay/skin 19.3.0 → 19.5.0

package/dist/bundles/skin-headless.css

@@ -251,11 +251,11 @@ ul.accordion--large summary.details__summary{
 
 .alert-dialog__window{
   background-color:var(--dialog-window-background-color, var(--color-background-primary));
-  border-radius:var(--lightbox-border-radius, var(--border-radius-150));
+  border-radius:var(--lightbox-border-radius, var(--border-radius-100));
   display:flex;
   flex:1 0 auto;
   flex-direction:column;
-  margin:auto auto 16px;
+  margin:auto;
   margin-left:var(--spacing-200);
   margin-right:var(--spacing-200);
   max-height:90%;
@@ -297,6 +297,30 @@ ul.accordion--large summary.details__summary{
 .alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--fade{
   transition:opacity .16s ease-out;
 }
+.alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow{
+  transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.alert-dialog--hide .alert-dialog__window--fade{
+  transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.alert-dialog--hide .alert-dialog__window--animate{
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.alert-dialog--hide .alert-dialog__window--animate>*{
+  transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
+}
+.alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
+  transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.alert-dialog--show .alert-dialog__window--fade{
+  transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.alert-dialog--show .alert-dialog__window--animate{
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.alert-dialog--show .alert-dialog__window--animate>*{
+  transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
+}
 
 .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{
   display:flex;
@@ -304,7 +328,7 @@ ul.accordion--large summary.details__summary{
 .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{
   background-color:var(--dialog-scrim-color-hide);
 }
-.alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show-init .alert-dialog__window--fade{
+.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{
   opacity:0;
 }
 
@@ -314,14 +338,45 @@ ul.accordion--large summary.details__summary{
 .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{
   background-color:var(--dialog-scrim-color-show);
 }
-.alert-dialog--hide-init .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--fade{
+.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{
   opacity:1;
 }
 
+@media (prefers-reduced-motion){
+  .alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow{
+    transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
+  }
+  .alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--hide .alert-dialog__window--fade{
+    transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
+  }
+  .alert-dialog--hide .alert-dialog__window--animate>*{
+    transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
+  }
+  .alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
+    transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
+  }
+  .alert-dialog--show .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--fade{
+    transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
+  }
+  .alert-dialog--show .alert-dialog__window--animate>*{
+    transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
+  }
+}
+.alert-dialog--hide-init .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--animate{
+  transform:scale(1);
+}
+
+.alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--show-init .alert-dialog__window--animate{
+  transform:scale(.75);
+}
+
+@media (prefers-reduced-motion){
+  .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{
+    transform:scale(1);
+  }
+}
 @media (min-width:768px){
   .alert-dialog__window{
-    border-radius:var(--lightbox-border-radius, var(--border-radius-100));
-    margin:auto;
     max-width:calc(88% - var(--spacing-400));
   }
 }
@@ -1303,14 +1358,19 @@ span.carousel,span.carousel__container{
 .carousel--hidden-scrollbar .carousel__control--next{
   right:0;
 }
+@font-face{
+  font-family:Reddit Sans Condensed Bold;
+  src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
+}
 .ccd{
   display:inline-flex;
+  font-family:Reddit Sans Condensed Bold,Market Sans,Arial,sans-serif;
   gap:8px;
 }
 
 .ccd__charger-icon{
-  height:78px;
-  width:58px;
+  height:57px;
+  width:42px;
 }
 
 .ccd__description-figure{
@@ -1318,12 +1378,12 @@ span.carousel,span.carousel__container{
   display:flex;
   flex-direction:column;
   justify-content:center;
-  width:55px;
+  width:39px;
 }
 
 .ccd__top-icon{
-  height:24px;
-  width:35px;
+  height:18px;
+  width:27px;
 }
 
 .ccd__body{
@@ -1334,12 +1394,11 @@ span.carousel,span.carousel__container{
   flex-direction:column;
   font-size:.4375rem;
   font-weight:var(--font-weight-bold);
-  gap:2px;
-  height:53px;
+  height:37px;
   justify-content:center;
   overflow:hidden;
   text-align:center;
-  width:53px;
+  width:39px;
 }
 .calendar{
   color:var(--calendar-color-token, var(--color-foreground-primary));
@@ -1694,10 +1753,8 @@ button.chip__button>svg{
   border:1px solid var(--color-stroke-default);
   border-radius:var(--border-radius-50);
   display:inline-block;
-  padding-bottom:var(--spacing-100);
-  padding-inline-end:var(--spacing-200);
-  padding-inline-start:var(--spacing-100);
-  padding-top:var(--spacing-100);
+  padding-block:var(--spacing-100);
+  padding-inline:var(--spacing-100) var(--spacing-200);
   position:relative;
 }
 
@@ -2070,11 +2127,11 @@ span.combobox{
 
 .confirm-dialog__window{
   background-color:var(--dialog-window-background-color, var(--color-background-primary));
-  border-radius:var(--lightbox-border-radius, var(--border-radius-150));
+  border-radius:var(--lightbox-border-radius, var(--border-radius-100));
   display:flex;
   flex:1 0 auto;
   flex-direction:column;
-  margin:auto auto 16px;
+  margin:auto;
   margin-left:var(--spacing-200);
   margin-right:var(--spacing-200);
   max-height:90%;
@@ -2110,15 +2167,29 @@ span.combobox{
 a.confirm-dialog__confirm,button.confirm-dialog__confirm{
   margin-left:var(--spacing-100);
 }
-
-.confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade{
-  transition:background-color .16s ease-out;
+.confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow{
+  transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
 }
-.confirm-dialog--hide.confirm-dialog--mask-fade-slow,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
-  transition:background-color .32s ease-out;
+.confirm-dialog--hide .confirm-dialog__window--fade{
+  transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
 }
-.confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--fade{
-  transition:opacity .16s ease-out;
+.confirm-dialog--hide .confirm-dialog__window--animate{
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.confirm-dialog--hide .confirm-dialog__window--animate>*{
+  transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
+}
+.confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
+  transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.confirm-dialog--show .confirm-dialog__window--fade{
+  transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.confirm-dialog--show .confirm-dialog__window--animate{
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.confirm-dialog--show .confirm-dialog__window--animate>*{
+  transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
 
 .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{
@@ -2127,7 +2198,7 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
 .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{
   background-color:var(--dialog-scrim-color-hide);
 }
-.confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show-init .confirm-dialog__window--fade{
+.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{
   opacity:0;
 }
 
@@ -2137,14 +2208,45 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
 .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{
   background-color:var(--dialog-scrim-color-show);
 }
-.confirm-dialog--hide-init .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--fade{
+.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{
   opacity:1;
 }
 
+@media (prefers-reduced-motion){
+  .confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow{
+    transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
+  }
+  .confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--hide .confirm-dialog__window--fade{
+    transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
+  }
+  .confirm-dialog--hide .confirm-dialog__window--animate>*{
+    transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
+  }
+  .confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
+    transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
+  }
+  .confirm-dialog--show .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--fade{
+    transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
+  }
+  .confirm-dialog--show .confirm-dialog__window--animate>*{
+    transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
+  }
+}
+.confirm-dialog--hide-init .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--animate{
+  transform:scale(1);
+}
+
+.confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--show-init .confirm-dialog__window--animate{
+  transform:scale(.75);
+}
+
+@media (prefers-reduced-motion){
+  .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{
+    transform:scale(1);
+  }
+}
 @media (min-width:768px){
   .confirm-dialog__window{
-    border-radius:var(--lightbox-border-radius, var(--border-radius-100));
-    margin:auto;
     max-width:calc(88% - var(--spacing-400));
   }
 }
@@ -3049,7 +3151,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
 
 .file-preview-card__see-more{
   aspect-ratio:1/1;
-  background-color:rgba(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
   border:none;
   border-radius:50%;
   color:var(--file-preview-card-see-more-color, var(--color-foreground-on-strong));
@@ -3070,11 +3172,11 @@ img.file-preview-card__asset,video.file-preview-card__asset{
 }
 
 .file-preview-card__see-more:focus-visible,.file-preview-card__see-more:hover{
-  background-color:rgba(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
 }
 
 .file-preview-card__see-more:active{
-  background-color:rgba(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
+  background-color:rgb(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
 }
 
 .file-preview-card__footer{
@@ -3348,6 +3450,60 @@ a.filter-link--selected:not([href]):hover,a.filter-link--selected[aria-disabled=
 a.filter-link:focus:not(:focus-visible),button.filter-button:focus:not(:focus-visible){
   outline:none;
 }
+
+.filter-input{
+  display:inline-block;
+  width:100%;
+}
+
+.filter-input__clear-btn{
+  display:none;
+}
+
+.filter-input .textbox{
+  border-radius:var(--border-radius-150);
+  max-width:480px;
+  min-width:200px;
+}
+
+.filter-input .textbox__control{
+  height:40px;
+}
+
+.filter-input .textbox__control:not(:placeholder-shown)~.filter-input__clear-btn{
+  display:block;
+}
+
+.filter-input .textbox__control::-webkit-search-cancel-button{
+  -webkit-appearance:none;
+  display:none;
+}
+
+.filter-input .textbox button.icon-btn.icon-btn--transparent.icon-btn--small{
+  min-width:32px;
+}
+
+.filter-input .textbox .icon-btn:last-child{
+  flex-shrink:0;
+  margin-inline-end:var(--spacing-50);
+  margin-inline-start:0;
+}
+
+.filter-input--small .textbox .icon-btn:last-child{
+  margin-inline-end:0;
+}
+
+.filter-input--large .textbox .icon-btn:last-child{
+  margin-inline-end:var(--spacing-100);
+}
+
+.filter-input--small .textbox__control{
+  height:32px;
+}
+
+.filter-input--large .textbox__control{
+  height:48px;
+}
 .filter-menu,.filter-menu-form{
   background-color:var(--filter-menu-item-background-color, var(--color-background-primary));
   min-width:144px;
@@ -6708,18 +6864,29 @@ button.icon-btn.lightbox-dialog__prev{
 .lightbox-dialog__title--center{
   text-align:center;
 }
-
-.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade{
-  transition:background-color .16s ease-out;
+.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow{
+  transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
-  transition:background-color .32s ease-out;
+.lightbox-dialog--hide .lightbox-dialog__window--fade{
+  transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
-  transition:opacity .16s ease-out;
+.lightbox-dialog--hide .lightbox-dialog__window--animate{
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.lightbox-dialog--hide .lightbox-dialog__window--animate>*{
+  transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
+}
+.lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
+  transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
 }
-.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
-  transition:opacity .16s ease-out,transform .32s ease-out;
+.lightbox-dialog--show .lightbox-dialog__window--fade{
+  transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.lightbox-dialog--show .lightbox-dialog__window--animate{
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+.lightbox-dialog--show .lightbox-dialog__window--animate>*{
+  transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
 }
 
 .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{
@@ -6728,12 +6895,8 @@ button.icon-btn.lightbox-dialog__prev{
 .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{
   background-color:var(--dialog-scrim-color-hide);
 }
-.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
-  opacity:0;
-}
-.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
+.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{
   opacity:0;
-  transform:translateY(100%);
 }
 
 .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{
@@ -6742,13 +6905,37 @@ button.icon-btn.lightbox-dialog__prev{
 .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{
   background-color:var(--dialog-scrim-color-show);
 }
-.lightbox-dialog--hide-init .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
+.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{
   opacity:1;
 }
+
+@media (prefers-reduced-motion){
+  .lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow{
+    transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
+  }
+  .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--hide .lightbox-dialog__window--fade{
+    transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
+  }
+  .lightbox-dialog--hide .lightbox-dialog__window--animate>*{
+    transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
+  }
+  .lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
+    transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
+  }
+  .lightbox-dialog--show .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--fade{
+    transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
+  }
+  .lightbox-dialog--show .lightbox-dialog__window--animate>*{
+    transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
+  }
+}
 .lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
-  opacity:1;
   transform:translateY(0);
 }
+
+.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
+  transform:translateY(100%);
+}
 .lightbox-dialog__handle:after{
   background-color:var(--dialog-handle-color, var(--color-stroke-default));
   border-radius:3px;
@@ -6801,8 +6988,16 @@ button.icon-btn.lightbox-dialog__prev{
     margin-left:var(--spacing-100);
     margin-top:0;
   }
+  .lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
+    transform:scale(1);
+  }
+  .lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
+    transform:scale(.75);
+  }
+}
+@media (min-width:512px) and (prefers-reduced-motion){
   .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{
-    transform:translateY(0);
+    transform:scale(1);
   }
 }
 @media (min-width:768px){
@@ -7240,6 +7435,53 @@ span.listbox-button__value{
   margin-left:3px;
   margin-right:0;
 }
+.number-input .textbox{
+  background:transparent;
+}
+
+.number-input label:first-child{
+  flex-grow:1;
+  padding-left:var(--spacing-200);
+}
+
+.number-input label:first-child~input.textbox__control{
+  flex-grow:0;
+}
+
+.icon-btn.number-input__delete{
+  display:none;
+  margin-inline-end:calc(var(--spacing-100)*-1);
+  order:-1;
+  padding-inline-start:var(--spacing-200);
+}
+
+.number-input--show-delete .number-input__delete{
+  display:block;
+}
+
+.number-input--show-delete .number-input__decrement{
+  display:none;
+}
+
+.number-input .textbox .textbox__control{
+  font-weight:700;
+  text-align:center;
+  width:48px;
+}
+.number-input .textbox .textbox__control::-webkit-inner-spin-button,.number-input .textbox .textbox__control::-webkit-outer-spin-button{
+  -webkit-appearance:none;
+  margin:0;
+}
+.number-input .textbox .textbox__control[type=number]{
+  -moz-appearance:textfield;
+  -webkit-appearance:textfield;
+          appearance:textfield;
+}
+
+.number-input .textbox .icon-btn:not(:disabled) svg{
+  color:var(--color-foreground-primary);
+  fill:currentColor;
+}
 .fake-menu__items,.menu__items{
   background-color:var(--menu-background-color, var(--color-background-primary));
   cursor:default;
@@ -8879,7 +9121,7 @@ span[role=region].section-notice{
   margin-inline-end:var(--spacing-200);
 }
 
-.section-notice__header+.section-notice__main{
+.section-notice__header+.section-notice__main,.section-notice__header~.section-notice__cta{
   grid-column:2;
 }
 
@@ -8896,10 +9138,10 @@ span[role=region].section-notice{
 }
 
 p.section-notice__cta{
-  grid-column:2;
+  grid-column:1 /  3;
   grid-row:2;
   justify-self:flex-start;
-  margin-right:var(--spacing-200);
+  margin-bottom:0;
   margin-top:var(--spacing-200);
 }
 .section-notice__main .section-notice__title~p{
@@ -8913,10 +9155,13 @@ p.section-notice__cta{
     grid-column:4;
     grid-row:1;
     justify-self:flex-end;
-    margin-bottom:0;
+    margin-right:var(--spacing-200);
     margin-top:0;
     padding-right:var(--spacing-200);
   }
+  .section-notice__header~.section-notice__cta{
+    grid-column:4;
+  }
   .section-notice__footer{
     padding-left:var(--spacing-200);
   }
@@ -9737,6 +9982,10 @@ span.switch__control:focus:not(:focus-visible){
   padding:16px;
 }
 
+.table--frozen-header{
+  max-height:90vh;
+}
+
 .table--frozen-header thead{
   position:sticky;
   top:0;
@@ -10149,11 +10398,11 @@ input.textbox__control{
   display:inline-flex;
   height:1lh;
   pointer-events:none;
-  width:14px;
   fill:var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox>span:first-child,.textbox>svg:first-child{
+  flex-shrink:0;
   margin-inline-start:var(--spacing-200);
 }
 
@@ -10177,8 +10426,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   width:100%;
 }
 :root{
-  --dialog-scrim-color-hide:rgba(17, 24, 32, 0);
-  --dialog-scrim-color-show:rgba(17, 24, 32, 0.7);
+  --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
+  --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
   --dialog-lightbox-max-width:616px;
 }
 .toast-dialog{
@@ -11279,7 +11528,7 @@ button.tooltip__close{
   }
 }
 :root{
-  --bubble-shadow:0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+  --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .tourtip{
   position:relative;

package/dist/ccd/ccd.css

@@ -1,11 +1,20 @@
+@font-face {
+    font-family: Reddit Sans Condensed Bold;
+    src: url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
+}
 .ccd {
     display: inline-flex;
+    font-family:
+        Reddit Sans Condensed Bold,
+        Market Sans,
+        Arial,
+        sans-serif;
     gap: 8px;
 }
 
 .ccd__charger-icon {
-    height: 78px;
-    width: 58px;
+    height: 57px;
+    width: 42px;
 }
 
 .ccd__description-figure {
@@ -13,12 +22,12 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: 55px;
+    width: 39px;
 }
 
 .ccd__top-icon {
-    height: 24px;
-    width: 35px;
+    height: 18px;
+    width: 27px;
 }
 
 .ccd__body {
@@ -29,10 +38,9 @@
     flex-direction: column;
     font-size: 0.4375rem;
     font-weight: var(--font-weight-bold);
-    gap: 2px;
-    height: 53px;
+    height: 37px;
     justify-content: center;
     overflow: hidden;
     text-align: center;
-    width: 53px;
+    width: 39px;
 }

package/dist/chips-combobox/chips-combobox.css

@@ -3,10 +3,8 @@
     border: 1px solid var(--color-stroke-default);
     border-radius: var(--border-radius-50);
     display: inline-block;
-    padding-bottom: var(--spacing-100);
-    padding-inline-end: var(--spacing-200);
-    padding-inline-start: var(--spacing-100);
-    padding-top: var(--spacing-100);
+    padding-block: var(--spacing-100);
+    padding-inline: var(--spacing-100) var(--spacing-200);
     position: relative;
 }
 

package/dist/combobox/combobox.css

@@ -1,6 +1,5 @@
 :root {
-    --bubble-shadow:
-        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
+    --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
 }
 .combobox {
     box-sizing: border-box;