@ebay/skin 19.5.2 → 19.7.0

package/dist/accordion/accordion.css

@@ -1,3 +1,25 @@
+@keyframes chevron-bounce-open {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-7px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+@keyframes chevron-bounce-close {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(7px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
 ul.accordion {
     margin: 0;
     padding: 0;
@@ -20,26 +42,27 @@ ul.accordion summary.details__summary {
     padding: 12px 16px;
 }
 
+ul.accordion details {
+    overflow: hidden;
+}
+
+ul.accordion details .details__content {
+    margin: 0 16px 6px;
+    overflow: hidden;
+}
+
 ul.accordion summary.details__summary span.details__icon svg {
     fill: var(
         --details-secondary-foreground-color,
         var(--color-foreground-secondary)
     );
+    animation: chevron-bounce-close var(--motion-duration-medium-1)
+        var(--motion-easing-standard);
 }
 
-ul.accordion details .details__content {
-    margin: 0 16px 6px;
-    opacity: 0;
-    transform: scaleY(0);
-    transform-origin: top;
-    transition:
-        opacity var(--motion-duration-medium-3) var(--motion-easing-standard),
-        transform var(--motion-duration-medium-3) var(--motion-easing-standard);
-}
-
-ul.accordion details[open] .details__content {
-    opacity: 1;
-    transform: scaleY(1);
+ul.accordion details[open] summary.details__summary span.details__icon svg {
+    animation: chevron-bounce-open var(--motion-duration-medium-1)
+        var(--motion-easing-standard) var(--motion-duration-short-1);
 }
 ul.accordion details svg.details__expand,
 ul.accordion details[open] svg.details__collapse {
@@ -56,9 +79,24 @@ ul.accordion--large summary.details__summary {
     min-height: 52px;
 }
 
-@media (prefers-reduced-motion) {
-    ul.accordion details .details__content,
-    ul.accordion details[open] .details__content {
-        transition: none;
+@supports selector(::details-content) and (interpolate-size: allow-keywords) and
+    (transition: allow-discrete) {
+    :root {
+        interpolate-size: allow-keywords;
+    }
+    ul.accordion details::details-content {
+        height: 0;
+        opacity: 0;
+        overflow: clip;
+        transition:
+            height var(--motion-duration-medium-3) var(--motion-easing-standard),
+            content-visibility var(--motion-duration-medium-2)
+                var(--motion-easing-continuous) allow-discrete,
+            opacity var(--motion-duration-medium-2)
+                var(--motion-easing-continuous);
+    }
+    ul.accordion details[open]::details-content {
+        height: auto;
+        opacity: 1;
     }
 }

package/dist/bundles/skin-default.css

@@ -362,6 +362,10 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --shadow-subtle:0px 4px 12px 0px rgba(0, 0, 0, 0.07);
   --shadow-strong:0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
   --color-loading-overlay:var(--color-neutral-100-rgb), 0.7;
+  --color-loading-first:var(--color-neutral-200);
+  --color-loading-second:var(--color-neutral-300);
+  --color-loading-on-secondary-first:var(--color-neutral-300);
+  --color-loading-on-secondary-second:var(--color-neutral-400);
   --color-loading-fill:#ededed;
   --color-loading-shimmer:linear-gradient(
       270deg,
@@ -450,6 +454,10 @@ body{
   -webkit-text-size-adjust:100%;
 }
 
+button{
+  font-family:inherit;
+}
+
 fieldset{
   border:0;
   padding:0;
@@ -601,6 +609,28 @@ a:not([href]),a[aria-disabled=true]{
   border-right-style:inset;
   box-shadow:none;
 }
+@keyframes chevron-bounce-open{
+  0%{
+    transform:translateY(0);
+  }
+  50%{
+    transform:translateY(-7px);
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes chevron-bounce-close{
+  0%{
+    transform:translateY(0);
+  }
+  50%{
+    transform:translateY(7px);
+  }
+  to{
+    transform:translateY(0);
+  }
+}
 ul.accordion{
   margin:0;
   padding:0;
@@ -623,21 +653,22 @@ ul.accordion summary.details__summary{
   padding:12px 16px;
 }
 
-ul.accordion summary.details__summary span.details__icon svg{
-  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
+ul.accordion details{
+  overflow:hidden;
 }
 
 ul.accordion details .details__content{
   margin:0 16px 6px;
-  opacity:0;
-  transform:scaleY(0);
-  transform-origin:top;
-  transition:opacity var(--motion-duration-medium-3) var(--motion-easing-standard), transform var(--motion-duration-medium-3) var(--motion-easing-standard);
+  overflow:hidden;
 }
 
-ul.accordion details[open] .details__content{
-  opacity:1;
-  transform:scaleY(1);
+ul.accordion summary.details__summary span.details__icon svg{
+  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
+  animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
+}
+
+ul.accordion details[open] summary.details__summary span.details__icon svg{
+  animation:chevron-bounce-open var(--motion-duration-medium-1) var(--motion-easing-standard) var(--motion-duration-short-1);
 }
 ul.accordion details svg.details__expand,ul.accordion details[open] svg.details__collapse{
   display:inline-block;
@@ -652,9 +683,19 @@ ul.accordion--large summary.details__summary{
   min-height:52px;
 }
 
-@media (prefers-reduced-motion){
-  ul.accordion details .details__content,ul.accordion details[open] .details__content{
-    transition:none;
+@supports selector(::details-content) and (interpolate-size:allow-keywords) and (transition:allow-discrete){
+  :root{
+    interpolate-size:allow-keywords;
+  }
+  ul.accordion details::details-content{
+    height:0;
+    opacity:0;
+    overflow:clip;
+    transition:height var(--motion-duration-medium-3) var(--motion-easing-standard), content-visibility var(--motion-duration-medium-2) var(--motion-easing-continuous) allow-discrete, opacity var(--motion-duration-medium-2) var(--motion-easing-continuous);
+  }
+  ul.accordion details[open]::details-content{
+    height:auto;
+    opacity:1;
   }
 }
 .alert-dialog[role=alertdialog]{
@@ -1907,7 +1948,7 @@ span.carousel,span.carousel__container{
   box-sizing:border-box;
   color:inherit;
   display:inline-flex;
-  font:inherit;
+  font-family:inherit;
   height:var(--spacing-400);
   justify-content:center;
   width:var(--spacing-400);
@@ -6148,7 +6189,7 @@ span.inline-notice{
   display:grid;
   grid-area:body;
   grid-template-areas:"section-primary" "section-secondary" "section-tertiary";
-  grid-template-rows:25px .75fr 1fr;
+  grid-template-rows:25px 90px 1fr;
 }
 
 .item-tile--list-view .item-tile__header{
@@ -6204,9 +6245,18 @@ span.inline-notice{
 }
 
 .item-tile__subtitle{
+  -webkit-box-orient:vertical;
   color:var(--color-foreground-secondary);
+  display:-webkit-box;
+  -webkit-line-clamp:1;
+  overflow:hidden;
 }
 
+@media (min-width:768px){
+  .item-tile__body{
+    grid-template-rows:25px 70px 1fr;
+  }
+}
 .layout-grid.item-tile-group{
   --layout-grid-columns-min:2;
   --layout-grid-columns-xs:2;
@@ -7861,10 +7911,102 @@ span.listbox-button__value{
   margin-left:3px;
   margin-right:0;
 }
+@keyframes number-input-decrement-before{
+  0%{
+    transform:translateY(0);
+  }
+  to{
+    transform:translateY(5px);
+  }
+}
+@keyframes number-input-decrement-after{
+  0%{
+    transform:translateY(-10px);
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes number-input-increment-before{
+  0%{
+    transform:translateY(0);
+  }
+  to{
+    transform:translateY(-5px);
+  }
+}
+@keyframes number-input-increment-after{
+  0%{
+    transform:translateY(10px);
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes number-input-increment-after-disabled{
+  0%{
+    transform:translateY(10px);
+  }
+  33%{
+    transform:translateY(-5px);
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes number-input-decrement-after-disabled{
+  0%{
+    transform:translateY(-10px);
+  }
+  33%{
+    transform:translateY(5px);
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes number-increment-disabled{
+  0%{
+    transform:translateX(0);
+  }
+  33%{
+    transform:translateX(10px);
+  }
+  to{
+    transform:translateX(0);
+  }
+}
+@keyframes number-decrement-disabled{
+  0%{
+    transform:translateX(0);
+  }
+  50%{
+    transform:translateX(-10px);
+  }
+  to{
+    transform:translateX(0);
+  }
+}
 .number-input .textbox{
   background:transparent;
 }
 
+.number-input--increment .textbox__control{
+  animation:number-input-increment-before var(--motion-duration-short-2) var(--motion-easing-soft-exit), number-input-increment-after var(--motion-duration-medium-1) var(--motion-easing-quick-enter) var(--motion-duration-short-2);
+}
+
+.number-input--decrement .textbox__control{
+  animation:number-input-decrement-before var(--motion-duration-short-2) var(--motion-easing-soft-exit), number-input-decrement-after var(--motion-duration-medium-1) var(--motion-easing-quick-enter) var(--motion-duration-short-2);
+}
+
+.number-input--decrement-disabled .textbox__control{
+  animation:number-input-decrement-before var(--motion-duration-short-2) var(--motion-easing-soft-exit), number-input-decrement-after-disabled var(--motion-duration-medium-2) var(--motion-easing-standard) var(--motion-duration-short-2);
+}
+
+.number-input--increment-disabled .textbox__control{
+  animation:number-input-increment-before var(--motion-duration-short-2) var(--motion-easing-soft-exit), number-input-increment-after-disabled var(--motion-duration-medium-2) var(--motion-easing-standard) var(--motion-duration-short-2);
+}
+
 .number-input label:first-child{
   flex-grow:1;
   padding-left:var(--spacing-200);
@@ -7904,10 +8046,31 @@ span.listbox-button__value{
           appearance:textfield;
 }
 
+.number-input .icon-btn{
+  transform:scale(1);
+  transition:transform var(--motion-duration-short-3) var(--motion-easing-standard);
+}
+
+.number-input .icon-btn:hover:not(:disabled){
+  background-color:var(--state-layer-hover);
+}
+
+.number-input .icon-btn:active{
+  transform:scale(.97);
+}
+
 .number-input .textbox .icon-btn:not(:disabled) svg{
   color:var(--color-foreground-primary);
   fill:currentColor;
 }
+
+.number-input__decrement:disabled{
+  animation:number-decrement-disabled var(--motion-duration-short-2) var(--motion-easing-standard);
+}
+
+.number-input__increment:disabled{
+  animation:number-increment-disabled var(--motion-duration-short-2) var(--motion-easing-standard);
+}
 .fake-menu__items,.menu__items{
   background-color:var(--menu-background-color, var(--color-background-primary));
   cursor:default;
@@ -9730,6 +9893,7 @@ p.section-notice__cta{
   border:none;
   border-radius:var(--btn-border-radius, 20px);
   color:var(--color-foreground-on-primary);
+  font-family:inherit;
   font-size:var(--font-size-default);
   min-height:calc(40px - var(--spacing-50)*2);
   padding:var(--spacing-100) var(--spacing-200);
@@ -9876,6 +10040,30 @@ span.select{
   left:0;
   right:auto;
 }
+@keyframes skeleton-fade-out{
+  0%{
+    opacity:1;
+  }
+  to{
+    opacity:0;
+  }
+}
+@keyframes skeleton-fade-in{
+  0%{
+    opacity:0;
+  }
+  to{
+    opacity:1;
+  }
+}
+::view-transition-new(skeleton-transition-*){
+  animation:skeleton-fade-in var(--motion-duration-medium-2) var(--motion-easing-continuous);
+}
+
+::view-transition-old(skeleton-transition-*){
+  animation:skeleton-fade-out var(--motion-duration-short-3) var(--motion-easing-continuous);
+}
+
 .skeleton{
   container-name:skeleton-container;
   container-type:inline-size;
@@ -9981,14 +10169,6 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
   --skeleton-background:var(--color-loading-fill-on-secondary);
 }
 
-@media screen and (max-width:512px){
-  .skeleton{
-    --skeleton-background:var(--color-loading-shimmer);
-  }
-  .skeleton--on-secondary{
-    --skeleton-background:var(--color-loading-shimmer-on-secondary);
-  }
-}
 .skeleton--purple{
   --skeleton-background:var(--color-loading-ai-gradient-purple-subtle);
 }
@@ -10002,29 +10182,27 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
 }
 
 @media (prefers-reduced-motion:no-preference){
-  @keyframes loading-frames{
+  @keyframes on-primary{
     0%{
-      background-position:0 0;
-    }
-    50%{
-      background-position:45% 0;
+      background-color:var(--color-loading-first);
     }
     to{
-      background-position:90% 0;
+      background-color:var(--color-loading-second);
     }
   }
-  @keyframes fade-in{
+  @keyframes on-secondary{
     0%{
-      opacity:0;
+      background-color:var(--color-loading-on-secondary-first);
     }
     to{
-      opacity:1;
+      background-color:var(--color-loading-on-secondary-second);
     }
   }
   .skeleton__avatar,.skeleton__button,.skeleton__image,.skeleton__text,.skeleton__textbox{
-    animation:fade-in .5s forwards,loading-frames 833ms linear 667ms 6;
-    animation-fill-mode:both;
-    background-size:200%;
+    animation:var(--motion-duration-long-3) var(--motion-easing-continuous) infinite alternate on-primary;
+  }
+  .skeleton--on-secondary .skeleton__avatar,.skeleton--on-secondary .skeleton__button,.skeleton--on-secondary .skeleton__image,.skeleton--on-secondary .skeleton__text,.skeleton--on-secondary .skeleton__textbox{
+    animation:var(--motion-duration-long-3) var(--motion-easing-continuous) infinite alternate on-secondary;
   }
 }
 @container skeleton-container (width > 79px){
@@ -10032,9 +10210,6 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
     border-radius:var(--image-border-radius, var(--border-radius-100));
   }
 }
-[dir=rtl] .skeleton__avatar,[dir=rtl] .skeleton__button,[dir=rtl] .skeleton__image,[dir=rtl] .skeleton__text,[dir=rtl] .skeleton__textbox{
-  animation-direction:normal, reverse;
-}
 [dir=rtl] .skeleton__text--multiline:after{
   left:var(--spacing-700);
 }
@@ -10998,6 +11173,7 @@ button.toast-dialog__close>svg{
   box-shadow:0 0 0 1px transparent;
   color:var(--color-foreground-primary);
   display:inline-flex;
+  font-family:inherit;
   font-size:var(--font-size-default);
   justify-content:center;
   margin-right:var(--spacing-100);