@ebay/skin 19.5.2 → 19.7.0

package/dist/bundles/skin-headless.css

@@ -24,6 +24,10 @@ body{
   -webkit-text-size-adjust:100%;
 }
 
+button{
+  font-family:inherit;
+}
+
 fieldset{
   border:0;
   padding:0;
@@ -175,6 +179,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;
@@ -197,21 +223,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;
@@ -226,9 +253,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]{
@@ -1481,7 +1518,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);
@@ -5722,7 +5759,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{
@@ -5778,9 +5815,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;
@@ -7435,10 +7481,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);
@@ -7478,10 +7616,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;
@@ -9304,6 +9463,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);
@@ -9450,6 +9610,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;
@@ -9555,14 +9739,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);
 }
@@ -9576,29 +9752,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){
@@ -9606,9 +9780,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);
 }
@@ -10572,6 +10743,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/calendar/calendar.css

@@ -79,7 +79,7 @@
     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);

package/dist/global/global.css

@@ -10,6 +10,10 @@ body {
     -webkit-text-size-adjust: 100%;
 }
 
+button {
+    font-family: inherit;
+}
+
 fieldset {
     border: 0;
     padding: 0;

package/dist/item-tile/item-tile.css

@@ -33,7 +33,7 @@
     display: grid;
     grid-area: body;
     grid-template-areas: "section-primary" "section-secondary" "section-tertiary";
-    grid-template-rows: 25px 0.75fr 1fr;
+    grid-template-rows: 25px 90px 1fr;
 }
 
 .item-tile--list-view .item-tile__header {
@@ -90,5 +90,15 @@
 }
 
 .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;
+    }
 }

package/dist/number-input/number-input.css

@@ -1,7 +1,115 @@
+@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);
@@ -42,7 +150,31 @@
     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(0.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);
+}

package/dist/segmented-buttons/segmented-buttons.css

@@ -27,6 +27,7 @@
     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);

package/dist/skeleton/skeleton.css

@@ -1,3 +1,29 @@
+@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;
@@ -119,14 +145,6 @@ div.skeleton__textbox:not(:last-child) {
     --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);
 }
@@ -140,23 +158,20 @@ div.skeleton__textbox:not(:last-child) {
 }
 
 @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,
@@ -164,11 +179,16 @@ div.skeleton__textbox:not(:last-child) {
     .skeleton__image,
     .skeleton__text,
     .skeleton__textbox {
-        animation:
-            fade-in 0.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) {
@@ -176,13 +196,6 @@ div.skeleton__textbox:not(:last-child) {
         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);
 }