@ebay/skin 19.8.1 → 19.9.0

package/dist/bundles/skin-headless.css

@@ -177,28 +177,6 @@ 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;
@@ -1735,17 +1713,20 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
 }
 .chip{
   align-items:center;
-  background-color:var(--color-background-tertiary);
-  border-radius:var(--spacing-400);
-  color:var(--color-foreground-primary);
+  background-color:var(--color-background-strong);
+  border-radius:var(--border-radius-50);
+  box-sizing:border-box;
+  color:var(--color-foreground-on-strong);
   display:inline-flex;
   font-size:var(--font-size-default);
-  gap:2px;
+  gap:var(--spacing-75);
+  height:var(--spacing-400);
   justify-content:space-between;
   max-width:296px;
-  min-height:var(--spacing-250);
   min-width:32px;
   padding:0 var(--spacing-150);
+  text-decoration:none;
+  vertical-align:bottom;
 }
 
 .chip__text{
@@ -1755,34 +1736,34 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
   white-space:nowrap;
 }
 
-button.chip__button{
+.chip button.chip__button{
+  align-items:center;
   background-color:initial;
   border:none;
   border-radius:50px;
   box-sizing:border-box;
+  color:var(--color-foreground-on-strong);
+  display:flex;
   flex-shrink:0;
   height:var(--spacing-300);
+  justify-content:center;
   line-height:0;
   margin-inline-end:-8px;
   padding:0;
   width:var(--spacing-300);
 }
 
-button.chip__button:focus-visible{
+.chip button.chip__button:focus-visible{
   background-color:var(--state-layer-focus);
-  outline-color:var(--color-state-focus-stroke);
+  outline-color:var(--color-foreground-on-strong);
   outline-offset:-2px;
   outline-style:solid;
   outline-width:2px;
 }
 
-button.chip__button:hover{
+.chip button.chip__button:hover{
   background-color:var(--state-layer-hover);
 }
-
-button.chip__button>svg{
-  fill:var(--color-foreground-on-primary);
-}
 .chips-combobox{
   background-color:var(--color-background-secondary);
   border:1px solid var(--color-stroke-default);
@@ -3485,6 +3466,128 @@ 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;
 }
+@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);
+  }
+}
+a.filter-chip,button.filter-chip{
+  align-items:center;
+  background-color:var(--color-background-primary);
+  background-position:50%;
+  background-repeat:no-repeat;
+  background-size:0 100%;
+  border:1px solid var(--color-stroke-default);
+  border-radius:var(--border-radius-100);
+  box-shadow:none;
+  box-sizing:border-box;
+  color:var(--color-foreground-primary);
+  display:inline-flex;
+  font-size:var(--font-size-default);
+  gap:var(--spacing-75);
+  height:var(--spacing-400);
+  justify-content:space-between;
+  max-width:296px;
+  min-width:32px;
+  padding:0 var(--spacing-150);
+  text-decoration:none;
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+  vertical-align:bottom;
+}
+a.filter-chip:active,button.filter-chip:active{
+  transform:scale(.97);
+}
+
+a.filter-chip--expressive,button.filter-chip--expressive{
+  border-radius:var(--border-radius-150);
+  height:40px;
+}
+
+.filter-chip__media{
+  align-items:center;
+  border-radius:8px;
+  border-radius:var(--spacing-400);
+  display:flex;
+  justify-content:center;
+  margin-inline-start:-8px;
+  overflow:hidden;
+  position:relative;
+}
+.filter-chip__media:after{
+  background:rgba(0, 0, 0, .05);
+  bottom:0;
+  content:"";
+  display:block;
+  left:0;
+  pointer-events:none;
+  position:absolute;
+  right:0;
+  top:0;
+}
+.filter-chip__media>img{
+  display:inline-block;
+  height:var(--spacing-400);
+  max-height:100%;
+  max-width:100%;
+  object-fit:contain;
+  object-fit:cover;
+  width:var(--spacing-400);
+}
+
+a.filter-chip--selected,button.filter-chip[aria-pressed=true]{
+  animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
+  background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
+  color:var(--color-foreground-on-strong);
+}
+
+button.filter-chip--animated[aria-pressed=true]{
+  animation-duration:var(--motion-duration-medium-2);
+  transition:color var(--motion-duration-instant) var(--motion-easing-standard);
+}
+
+button.filter-chip[aria-expanded=false]:active .filter-chip__trailing{
+  animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
+  rotate:180deg;
+}
+
+button.filter-chip[aria-expanded=false] .filter-chip__trailing{
+  rotate:0deg;
+  transition:none;
+}
+
+button.filter-chip[aria-expanded=true]:active .filter-chip__trailing{
+  animation:chevron-bounce-open var(--motion-duration-medium-1) var(--motion-easing-standard) var(--motion-duration-short-1);
+  rotate:0deg;
+}
+
+button.filter-chip[aria-expanded=true] .filter-chip__trailing{
+  rotate:180deg;
+  transition:none;
+}
+
+.filter-chip__text{
+  overflow:hidden;
+  padding:var(--spacing-75) 0;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
 
 .filter-input{
   display:inline-block;
@@ -7019,7 +7122,7 @@ button.icon-btn.lightbox-dialog__prev{
   .lightbox-dialog__window{
     border-radius:var(--lightbox-border-radius, var(--border-radius-100));
     margin:auto;
-    max-width:calc(88% - var(--spacing-400));
+    max-width:88%;
   }
   .lightbox-dialog--narrow .lightbox-dialog__window{
     max-width:var(--dialog-lightbox-narrow-max-width);
@@ -7049,7 +7152,7 @@ button.icon-btn.lightbox-dialog__prev{
     max-width:var(--dialog-lightbox-max-width);
   }
   .lightbox-dialog--wide .lightbox-dialog__window{
-    max-width:var(--dialog-lightbox-wide-max-width);
+    max-width:88%;
   }
   .lightbox-dialog--wide .lightbox-dialog__image{
     height:256px;
@@ -7058,6 +7161,11 @@ button.icon-btn.lightbox-dialog__prev{
     margin-top:256px;
   }
 }
+@media (min-width:1024px){
+  .lightbox-dialog--wide .lightbox-dialog__window{
+    max-width:var(--dialog-lightbox-wide-max-width);
+  }
+}
 a.nav-link,a.standalone-link{
   color:var(--nav-link-foreground-color, var(--color-foreground-link-primary));
   text-decoration:none;
@@ -9608,6 +9716,74 @@ span.select{
   left:0;
   right:auto;
 }
+@keyframes fill-horizontal-background{
+  0%{
+    background-size:0 100%;
+  }
+  99%{
+    background-color:var(--color-background-primary);
+  }
+  to{
+    background-color:var(--color-background-strong);
+    background-size:100% 100%;
+  }
+}
+.selection-chip{
+  align-items:center;
+  background-color:var(--color-background-primary);
+  background-position:50%;
+  background-repeat:no-repeat;
+  background-size:0 100%;
+  border:1px solid var(--color-stroke-default);
+  border-radius:var(--border-radius-50);
+  box-shadow:none;
+  box-sizing:border-box;
+  color:var(--color-foreground-primary);
+  display:inline-flex;
+  font-size:var(--font-size-default);
+  gap:var(--spacing-75);
+  height:var(--spacing-400);
+  justify-content:space-between;
+  max-width:296px;
+  min-width:32px;
+  padding:0 var(--spacing-150);
+  text-decoration:none;
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+  vertical-align:bottom;
+}
+.selection-chip:active{
+  transform:scale(.97);
+}
+
+.selection-chip--animated .selection-chip__trailing{
+  transition:rotate var(--motion-duration-medium-3) var(--motion-easing-standard);
+}
+
+.selection-chip__trailing{
+  rotate:-225deg;
+}
+
+.selection-chip[aria-pressed=true]{
+  animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
+  background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
+  color:var(--color-foreground-on-strong);
+}
+
+.selection-chip--animated[aria-pressed=true]{
+  animation-duration:var(--motion-duration-medium-2);
+  transition:color var(--motion-duration-instant) var(--motion-easing-standard);
+}
+
+.selection-chip[aria-pressed=true] .selection-chip__trailing{
+  rotate:0deg;
+}
+
+.selection-chip__text{
+  overflow:hidden;
+  padding:var(--spacing-75) 0;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
 @keyframes skeleton-fade-out{
   0%{
     opacity:1;

package/dist/chip/chip.css

@@ -1,16 +1,19 @@
 .chip {
     align-items: center;
-    background-color: var(--color-background-tertiary);
-    border-radius: var(--spacing-400);
-    color: var(--color-foreground-primary);
+    background-color: var(--color-background-strong);
+    border-radius: var(--border-radius-50);
+    box-sizing: border-box;
+    color: var(--color-foreground-on-strong);
     display: inline-flex;
     font-size: var(--font-size-default);
-    gap: 2px;
+    gap: var(--spacing-75);
+    height: var(--spacing-400);
     justify-content: space-between;
     max-width: 296px;
-    min-height: var(--spacing-250);
     min-width: 32px;
     padding: 0 var(--spacing-150);
+    text-decoration: none;
+    vertical-align: bottom;
 }
 
 .chip__text {
@@ -20,31 +23,31 @@
     white-space: nowrap;
 }
 
-button.chip__button {
+.chip button.chip__button {
+    align-items: center;
     background-color: initial;
     border: none;
     border-radius: 50px;
     box-sizing: border-box;
+    color: var(--color-foreground-on-strong);
+    display: flex;
     flex-shrink: 0;
     height: var(--spacing-300);
+    justify-content: center;
     line-height: 0;
     margin-inline-end: -8px;
     padding: 0;
     width: var(--spacing-300);
 }
 
-button.chip__button:focus-visible {
+.chip button.chip__button:focus-visible {
     background-color: var(--state-layer-focus);
-    outline-color: var(--color-state-focus-stroke);
+    outline-color: var(--color-foreground-on-strong);
     outline-offset: -2px;
     outline-style: solid;
     outline-width: 2px;
 }
 
-button.chip__button:hover {
+.chip button.chip__button:hover {
     background-color: var(--state-layer-hover);
 }
-
-button.chip__button > svg {
-    fill: var(--color-foreground-on-primary);
-}

package/dist/filter-chip/filter-chip.css

@@ -0,0 +1,147 @@
+@keyframes fill-horizontal-background {
+    0% {
+        background-size: 0 100%;
+    }
+    99% {
+        background-color: var(--color-background-primary);
+    }
+    to {
+        background-color: var(--color-background-strong);
+        background-size: 100% 100%;
+    }
+}
+@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);
+    }
+}
+a.filter-chip,
+button.filter-chip {
+    align-items: center;
+    background-color: var(--color-background-primary);
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 0 100%;
+    border: 1px solid var(--color-stroke-default);
+    border-radius: var(--border-radius-100);
+    box-shadow: none;
+    box-sizing: border-box;
+    color: var(--color-foreground-primary);
+    display: inline-flex;
+    font-size: var(--font-size-default);
+    gap: var(--spacing-75);
+    height: var(--spacing-400);
+    justify-content: space-between;
+    max-width: 296px;
+    min-width: 32px;
+    padding: 0 var(--spacing-150);
+    text-decoration: none;
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+    vertical-align: bottom;
+}
+a.filter-chip:active,
+button.filter-chip:active {
+    transform: scale(0.97);
+}
+
+a.filter-chip--expressive,
+button.filter-chip--expressive {
+    border-radius: var(--border-radius-150);
+    height: 40px;
+}
+
+.filter-chip__media {
+    align-items: center;
+    border-radius: 8px;
+    border-radius: var(--spacing-400);
+    display: flex;
+    justify-content: center;
+    margin-inline-start: -8px;
+    overflow: hidden;
+    position: relative;
+}
+.filter-chip__media:after {
+    background: rgba(0, 0, 0, 0.05);
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.filter-chip__media > img {
+    display: inline-block;
+    height: var(--spacing-400);
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+    object-fit: cover;
+    width: var(--spacing-400);
+}
+
+a.filter-chip--selected,
+button.filter-chip[aria-pressed="true"] {
+    animation: fill-horizontal-background 0s var(--motion-easing-quick-enter)
+        forwards;
+    background-image: linear-gradient(
+        to right,
+        var(--color-background-strong) 0,
+        var(--color-background-strong) 100%
+    );
+    color: var(--color-foreground-on-strong);
+}
+
+button.filter-chip--animated[aria-pressed="true"] {
+    animation-duration: var(--motion-duration-medium-2);
+    transition: color var(--motion-duration-instant)
+        var(--motion-easing-standard);
+}
+
+button.filter-chip[aria-expanded="false"]:active .filter-chip__trailing {
+    animation: chevron-bounce-close var(--motion-duration-medium-1)
+        var(--motion-easing-standard);
+    rotate: 180deg;
+}
+
+button.filter-chip[aria-expanded="false"] .filter-chip__trailing {
+    rotate: 0deg;
+    transition: none;
+}
+
+button.filter-chip[aria-expanded="true"]:active .filter-chip__trailing {
+    animation: chevron-bounce-open var(--motion-duration-medium-1)
+        var(--motion-easing-standard) var(--motion-duration-short-1);
+    rotate: 0deg;
+}
+
+button.filter-chip[aria-expanded="true"] .filter-chip__trailing {
+    rotate: 180deg;
+    transition: none;
+}
+
+.filter-chip__text {
+    overflow: hidden;
+    padding: var(--spacing-75) 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -306,7 +306,7 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window {
         border-radius: var(--lightbox-border-radius, var(--border-radius-100));
         margin: auto;
-        max-width: calc(88% - var(--spacing-400));
+        max-width: 88%;
     }
     .lightbox-dialog--narrow .lightbox-dialog__window {
         max-width: var(--dialog-lightbox-narrow-max-width);
@@ -341,7 +341,7 @@ button.icon-btn.lightbox-dialog__prev {
         max-width: var(--dialog-lightbox-max-width);
     }
     .lightbox-dialog--wide .lightbox-dialog__window {
-        max-width: var(--dialog-lightbox-wide-max-width);
+        max-width: 88%;
     }
     .lightbox-dialog--wide .lightbox-dialog__image {
         height: 256px;
@@ -352,3 +352,8 @@ button.icon-btn.lightbox-dialog__prev {
         margin-top: 256px;
     }
 }
+@media (min-width: 1024px) {
+    .lightbox-dialog--wide .lightbox-dialog__window {
+        max-width: var(--dialog-lightbox-wide-max-width);
+    }
+}

package/dist/mixins/_animation-mixins.scss

@@ -0,0 +1,41 @@
+@mixin chevron-keyframes() {
+    @keyframes chevron-bounce-open {
+        0% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(-7px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes chevron-bounce-close {
+        0% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(7px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+}
+
+// This is used for when the animations are loading so that there are no animations happening on page load.
+@mixin loading() {
+    animation: none;
+    transition: none;
+}
+
+@mixin chevron-open() {
+    animation: chevron-bounce-open var(--motion-duration-medium-1)
+        var(--motion-easing-standard) var(--motion-duration-short-1);
+}
+
+@mixin chevron-close() {
+    animation: chevron-bounce-close var(--motion-duration-medium-1)
+        var(--motion-easing-standard);
+}

package/dist/selection-chip/selection-chip.css

@@ -0,0 +1,76 @@
+@keyframes fill-horizontal-background {
+    0% {
+        background-size: 0 100%;
+    }
+    99% {
+        background-color: var(--color-background-primary);
+    }
+    to {
+        background-color: var(--color-background-strong);
+        background-size: 100% 100%;
+    }
+}
+.selection-chip {
+    align-items: center;
+    background-color: var(--color-background-primary);
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 0 100%;
+    border: 1px solid var(--color-stroke-default);
+    border-radius: var(--border-radius-50);
+    box-shadow: none;
+    box-sizing: border-box;
+    color: var(--color-foreground-primary);
+    display: inline-flex;
+    font-size: var(--font-size-default);
+    gap: var(--spacing-75);
+    height: var(--spacing-400);
+    justify-content: space-between;
+    max-width: 296px;
+    min-width: 32px;
+    padding: 0 var(--spacing-150);
+    text-decoration: none;
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+    vertical-align: bottom;
+}
+.selection-chip:active {
+    transform: scale(0.97);
+}
+
+.selection-chip--animated .selection-chip__trailing {
+    transition: rotate var(--motion-duration-medium-3)
+        var(--motion-easing-standard);
+}
+
+.selection-chip__trailing {
+    rotate: -225deg;
+}
+
+.selection-chip[aria-pressed="true"] {
+    animation: fill-horizontal-background 0s var(--motion-easing-quick-enter)
+        forwards;
+    background-image: linear-gradient(
+        to right,
+        var(--color-background-strong) 0,
+        var(--color-background-strong) 100%
+    );
+    color: var(--color-foreground-on-strong);
+}
+
+.selection-chip--animated[aria-pressed="true"] {
+    animation-duration: var(--motion-duration-medium-2);
+    transition: color var(--motion-duration-instant)
+        var(--motion-easing-standard);
+}
+
+.selection-chip[aria-pressed="true"] .selection-chip__trailing {
+    rotate: 0deg;
+}
+
+.selection-chip__text {
+    overflow: hidden;
+    padding: var(--spacing-75) 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/dist/svg/icon/icon-ebay-balance-12-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icon/icon-ebay-balance-18-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"

package/dist/svg/icon/icon-ebay-balance-24-colored.svg

@@ -7,6 +7,7 @@
     rx="1.5"
     fill="#fff"
     stroke="#191919"
+    stroke-width="1"
   />
   <path
     fill-rule="evenodd"