@ebay/skin 19.6.0 → 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

@@ -454,6 +454,10 @@ body{
   -webkit-text-size-adjust:100%;
 }
 
+button{
+  font-family:inherit;
+}
+
 fieldset{
   border:0;
   padding:0;
@@ -605,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;
@@ -627,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;
@@ -656,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]{
@@ -1911,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);
@@ -6152,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{
@@ -6208,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;
@@ -7865,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);
@@ -7908,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;
@@ -9734,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);
@@ -11013,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);

package/dist/bundles/skin-full.css

@@ -657,6 +657,10 @@ body{
   -webkit-text-size-adjust:100%;
 }
 
+button{
+  font-family:inherit;
+}
+
 fieldset{
   border:0;
   padding:0;
@@ -808,6 +812,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;
@@ -830,21 +856,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;
@@ -859,9 +886,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]{
@@ -2114,7 +2151,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);
@@ -6355,7 +6392,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{
@@ -6411,9 +6448,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;
@@ -8068,10 +8114,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);
@@ -8111,10 +8249,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;
@@ -9937,6 +10096,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);
@@ -11216,6 +11376,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);