@ebay/skin 19.4.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));
   }
 }
@@ -2072,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%;
@@ -2112,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{
@@ -2129,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;
 }
 
@@ -2139,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));
   }
 }
@@ -3350,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;
@@ -6710,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{
@@ -6730,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{
@@ -6744,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;
@@ -6803,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){
@@ -7242,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;
@@ -9742,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;
@@ -10154,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);
 }
 

package/dist/confirm-dialog/confirm-dialog.css

@@ -26,11 +26,11 @@
         --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%;
@@ -67,18 +67,41 @@ 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 0.16s ease-out;
+.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--hide .confirm-dialog__window--fade {
+    transition: opacity var(--motion-duration-short-3)
+        var(--motion-easing-continuous);
+}
+.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 0.32s ease-out;
+    transition: background-color 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 0.16s ease-out;
+    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,
@@ -93,7 +116,11 @@ button.confirm-dialog__confirm {
 .confirm-dialog--show-init.confirm-dialog--mask-fade-slow {
     background-color: var(--dialog-scrim-color-hide);
 }
+.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;
 }
@@ -110,15 +137,65 @@ button.confirm-dialog__confirm {
 .confirm-dialog--show.confirm-dialog--mask-fade-slow {
     background-color: var(--dialog-scrim-color-show);
 }
+.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(0.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));
     }
 }

package/dist/filter-input/filter-input.css

@@ -0,0 +1,55 @@
+.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;
+}