@ebay/skin 19.8.1 → 19.10.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;
@@ -1126,6 +1104,161 @@ button.btn--floating-label .btn__floating-label--inline{
   border-left-color:var(--btn-primary-border-color, var(--color-stroke-accent));
   border-right-color:var(--primary-border-split-color, var(--color-stroke-subtle));
 }
+
+.card{
+  background-color:var(--color-background-secondary);
+  border:none;
+  border-radius:var(--border-radius-150);
+  color:var(--color-foreground-primary);
+  display:flex;
+  flex-direction:column;
+  max-width:400px;
+  min-width:200px;
+  outline:6px solid transparent;
+  outline-offset:4px;
+  padding-block-end:var(--spacing-150);
+}
+
+.card--outlined{
+  background-color:inherit;
+  border:1px solid var(--color-stroke-subtle);
+}
+
+a.card{
+  color:inherit;
+  text-decoration:none;
+}
+
+button.card{
+  font-size:inherit;
+  line-height:inherit;
+  padding:0;
+  padding-block-end:var(--spacing-150);
+  text-align:start;
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-quick-enter), box-shadow var(--motion-duration-medium-3) var(--motion-easing-quick-enter);
+}
+
+.card[disabled],.card[href=""]{
+  filter:grayscale(1);
+  opacity:.5;
+  pointer-events:none;
+}
+
+button.card:hover{
+  cursor:pointer;
+}
+
+.card:hover .card__hero-image{
+  transform:scale3d(1.01, 1.01, 1);
+}
+
+.card:focus-visible{
+  animation:card-focus-animation var(--motion-duration-short-3) var(--motion-easing-quick-enter) forwards;
+}
+
+.card__media{
+  aspect-ratio:1/1;
+  margin:var(--spacing-150);
+  margin-block-end:var(--spacing-200);
+  overflow:hidden;
+}
+
+.card__hero-image,.card__media{
+  border-radius:var(--border-radius-100);
+}
+
+.card__hero-image{
+  display:block;
+  height:100%;
+  object-fit:cover;
+  transition:transform var(--motion-duration-long-3) var(--motion-easing-quick-enter);
+  width:100%;
+}
+
+.card--full-hero .card__hero-image,.card--full-hero .card__media{
+  border-bottom-left-radius:0;
+  border-bottom-right-radius:0;
+}
+
+.card__main{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  margin-inline:var(--spacing-150);
+}
+
+.card__overline{
+  align-items:center;
+  display:flex;
+  font-weight:700;
+  gap:var(--spacing-100);
+  margin-block-end:var(--spacing-100);
+}
+
+.card__title{
+  font-size:var(--font-size-large-1);
+  font-weight:700;
+  margin:0;
+  margin-block-end:var(--spacing-50);
+}
+
+.card__description{
+  flex:1;
+}
+
+.card__action{
+  margin-block-start:var(--spacing-200);
+}
+
+.card--horizontal{
+  flex-direction:row;
+  max-width:100%;
+  width:100%;
+}
+
+.card--horizontal .card__media{
+  aspect-ratio:1/1;
+  margin-block-end:0;
+  max-width:160px;
+  min-width:90px;
+  width:25%;
+}
+
+.card--horizontal .card__hero-image{
+  aspect-ratio:1/1;
+  height:auto;
+}
+
+.card--horizontal .card__main{
+  margin-block-start:var(--spacing-150);
+  margin-inline-start:0;
+}
+
+.card--full-hero .card__media{
+  margin:0;
+  margin-block-end:var(--spacing-200);
+}
+
+.card--aspect-5-4 .card__media{
+  aspect-ratio:5/4;
+}
+
+.card--aspect-16-9 .card__media{
+  aspect-ratio:16/9;
+}
+
+@keyframes card-focus-animation{
+  0%{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:4px;
+    outline-width:6px;
+  }
+  to{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:0;
+    outline-width:2px;
+  }
+}
 .carousel{
   position:relative;
 }
@@ -1735,17 +1868,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 +1891,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 +3621,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 +7277,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 +7307,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 +7316,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 +9871,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/card/card.css

@@ -0,0 +1,163 @@
+.card {
+    background-color: var(--color-background-secondary);
+    border: none;
+    border-radius: var(--border-radius-150);
+    color: var(--color-foreground-primary);
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    min-width: 200px;
+    outline: 6px solid transparent;
+    outline-offset: 4px;
+    padding-block-end: var(--spacing-150);
+}
+
+.card--outlined {
+    background-color: inherit;
+    border: 1px solid var(--color-stroke-subtle);
+}
+
+a.card {
+    color: inherit;
+    text-decoration: none;
+}
+
+button.card {
+    font-size: inherit;
+    line-height: inherit;
+    padding: 0;
+    padding-block-end: var(--spacing-150);
+    text-align: start;
+    transition:
+        transform var(--motion-duration-medium-3)
+            var(--motion-easing-quick-enter),
+        box-shadow var(--motion-duration-medium-3)
+            var(--motion-easing-quick-enter);
+}
+
+.card[disabled],
+.card[href=""] {
+    filter: grayscale(1);
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+button.card:hover {
+    cursor: pointer;
+}
+
+.card:hover .card__hero-image {
+    transform: scale3d(1.01, 1.01, 1);
+}
+
+.card:focus-visible {
+    animation: card-focus-animation var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter) forwards;
+}
+
+.card__media {
+    aspect-ratio: 1/1;
+    margin: var(--spacing-150);
+    margin-block-end: var(--spacing-200);
+    overflow: hidden;
+}
+
+.card__hero-image,
+.card__media {
+    border-radius: var(--border-radius-100);
+}
+
+.card__hero-image {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    transition: transform var(--motion-duration-long-3)
+        var(--motion-easing-quick-enter);
+    width: 100%;
+}
+
+.card--full-hero .card__hero-image,
+.card--full-hero .card__media {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.card__main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    margin-inline: var(--spacing-150);
+}
+
+.card__overline {
+    align-items: center;
+    display: flex;
+    font-weight: 700;
+    gap: var(--spacing-100);
+    margin-block-end: var(--spacing-100);
+}
+
+.card__title {
+    font-size: var(--font-size-large-1);
+    font-weight: 700;
+    margin: 0;
+    margin-block-end: var(--spacing-50);
+}
+
+.card__description {
+    flex: 1;
+}
+
+.card__action {
+    margin-block-start: var(--spacing-200);
+}
+
+.card--horizontal {
+    flex-direction: row;
+    max-width: 100%;
+    width: 100%;
+}
+
+.card--horizontal .card__media {
+    aspect-ratio: 1/1;
+    margin-block-end: 0;
+    max-width: 160px;
+    min-width: 90px;
+    width: 25%;
+}
+
+.card--horizontal .card__hero-image {
+    aspect-ratio: 1/1;
+    height: auto;
+}
+
+.card--horizontal .card__main {
+    margin-block-start: var(--spacing-150);
+    margin-inline-start: 0;
+}
+
+.card--full-hero .card__media {
+    margin: 0;
+    margin-block-end: var(--spacing-200);
+}
+
+.card--aspect-5-4 .card__media {
+    aspect-ratio: 5/4;
+}
+
+.card--aspect-16-9 .card__media {
+    aspect-ratio: 16/9;
+}
+
+@keyframes card-focus-animation {
+    0% {
+        outline-color: var(--color-stroke-accent);
+        outline-offset: 4px;
+        outline-width: 6px;
+    }
+    to {
+        outline-color: var(--color-stroke-accent);
+        outline-offset: 0;
+        outline-width: 2px;
+    }
+}

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