@ebay/skin 19.5.1 → 19.6.0

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,
@@ -7662,7 +7666,7 @@ span.listbox-button{
   padding-right:15px;
 }
 
-span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn{
+span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn,span.listbox-button--fluid div.listbox-button__listbox{
   width:100%;
 }
 
@@ -9876,6 +9880,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 +10009,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 +10022,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 +10050,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);
 }

package/dist/bundles/skin-full.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,
@@ -580,6 +584,10 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
         var(--color-ai-solid-blue-subtle) 154.5%
     );
     --color-loading-overlay:var(--color-neutral-900-rgb), 0.7;
+    --color-loading-first:var(--color-neutral-800);
+    --color-loading-second:var(--color-neutral-700);
+    --color-loading-on-secondary-first:var(--color-neutral-700);
+    --color-loading-on-secondary-second:var(--color-neutral-600);
     --color-loading-fill:#2d2d2d;
     --color-loading-shimmer:linear-gradient(
         270deg,
@@ -7861,7 +7869,7 @@ span.listbox-button{
   padding-right:15px;
 }
 
-span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn{
+span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn,span.listbox-button--fluid div.listbox-button__listbox{
   width:100%;
 }
 
@@ -10075,6 +10083,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;
@@ -10180,14 +10212,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);
 }
@@ -10201,29 +10225,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){
@@ -10231,9 +10253,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);
 }

package/dist/bundles/skin-headless.css

@@ -7236,7 +7236,7 @@ span.listbox-button{
   padding-right:15px;
 }
 
-span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn{
+span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn,span.listbox-button--fluid div.listbox-button__listbox{
   width:100%;
 }
 
@@ -9450,6 +9450,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 +9579,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 +9592,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 +9620,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);
 }

package/dist/listbox-button/listbox-button.css

@@ -18,7 +18,8 @@ span.listbox-button {
 
 span.listbox-button--fluid,
 span.listbox-button--fluid .btn,
-span.listbox-button--fluid .expand-btn {
+span.listbox-button--fluid .expand-btn,
+span.listbox-button--fluid div.listbox-button__listbox {
     width: 100%;
 }
 

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);
 }

package/dist/tokens/evo-dark.css

@@ -152,7 +152,12 @@
             var(--color-ai-solid-blue-subtle) 154.5%
         );
         --color-loading-overlay: var(--color-neutral-900-rgb), 0.7;
+        --color-loading-first: var(--color-neutral-800);
+        --color-loading-second: var(--color-neutral-700);
+        --color-loading-on-secondary-first: var(--color-neutral-700);
+        --color-loading-on-secondary-second: var(--color-neutral-600);
         --color-loading-fill: #2d2d2d;
+        /* Deprecated */
         --color-loading-shimmer: linear-gradient(
             270deg,
             var(--color-loading-fill) 0%,
@@ -161,7 +166,9 @@
             var(--color-loading-fill) 66%,
             var(--color-loading-fill) 100%
         );
+        /* Deprecated */
         --color-loading-fill-on-secondary: #353535;
+        /* Deprecated */
         --color-loading-shimmer-on-secondary: linear-gradient(
             270deg,
             var(--color-loading-fill-on-secondary) 0%,

package/dist/tokens/evo-light.css

@@ -156,7 +156,13 @@
     --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);
+    /* Deprecated */
     --color-loading-fill: #ededed;
+    /* Deprecated */
     --color-loading-shimmer: linear-gradient(
         270deg,
         var(--color-loading-fill) 0%,
@@ -165,7 +171,9 @@
         var(--color-loading-fill) 66%,
         var(--color-loading-fill) 100%
     );
+    /* Deprecated */
     --color-loading-fill-on-secondary: #e4e4e4;
+    /* Deprecated */
     --color-loading-shimmer-on-secondary: linear-gradient(
         270deg,
         var(--color-loading-fill-on-secondary) 0%,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.5.1",
+    "version": "19.6.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",