@ebay/skin 19.9.0 → 19.11.0

package/card.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./card.js"] }

package/card.css

@@ -0,0 +1 @@
+@import "./dist/card/card.css";

package/card.js

@@ -0,0 +1 @@
+require('./dist/card/card.css');

package/card.mjs

@@ -0,0 +1 @@
+import './dist/card/card.css';

package/dist/bundles/skin-default.css

@@ -487,7 +487,7 @@ a:not([href]),a[aria-disabled=true]{
 }
 .clipped{
   border:0;
-  clip:rect(1px, 1px, 1px, 1px);
+  clip-path:inset(50%);
   height:1px;
   overflow:hidden;
   padding:0;
@@ -496,7 +496,7 @@ a:not([href]),a[aria-disabled=true]{
   width:1px;
 }
 .clipped--stealth:focus{
-  clip:auto;
+  clip-path:none;
   height:auto;
   overflow:visible;
   white-space:normal;
@@ -1534,6 +1534,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;
 }
@@ -1772,7 +1927,8 @@ span.carousel,span.carousel__container{
   }
   .carousel__snap-point{
     scroll-snap-align:flex-start;
-    scroll-snap-coordinate:0 0;
+    -webkit-scroll-snap-coordinate:0 0;
+    -ms-scroll-snap-coordinate:0 0;
   }
   @media (min-width:512px){
     div.carousel{
@@ -8283,6 +8439,33 @@ a.fake-menu__item--badged span.badge,button.fake-menu__item--badged span.badge,d
   z-index:1;
 }
 
+.menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,.menu__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
+  display:none;
+}
+.menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,.menu__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
+  display:block;
+}
+.menu__item[role=menuitemcheckbox] svg.icon--unchecked{
+  color:var(--color-foreground-secondary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemcheckbox] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemradio] svg.icon--unchecked{
+  color:var(--color-foreground-primary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemradio] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+
 .menu__items--scroll[role=menu]{
   overflow-y:scroll;
 }
@@ -8311,6 +8494,22 @@ hr.menu__separator{
   border-style:solid;
   border-width:1px;
 }
+
+.menu__footer{
+  align-items:center;
+  background-color:var(--color-background-elevated);
+  border:none;
+  border-color:var(--color-stroke-subtle);
+  border-top-style:solid;
+  border-top-width:1px;
+  display:flex;
+  justify-content:center;
+  padding:var(--spacing-200);
+}
+
+.menu--filter div.menu__item[role^=menuitem]{
+  justify-content:flex-start;
+}
 div.menu__item[role^=menuitem]:focus:not(:focus-visible){
   outline:none;
 }
@@ -8432,6 +8631,33 @@ a.fake-menu-button__item[aria-current=page] svg.icon--16,button.fake-menu-button
   opacity:1;
 }
 
+.menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,.menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
+  display:none;
+}
+.menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,.menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
+  display:block;
+}
+.menu-button__item[role=menuitemcheckbox] svg.icon--unchecked{
+  color:var(--color-foreground-secondary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemcheckbox] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemradio] svg.icon--unchecked{
+  color:var(--color-foreground-primary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemradio] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+
 .fake-menu-button__menu a.fake-menu-button__item,.fake-menu-button__menu button.fake-menu-button__item{
   background-color:initial;
   border-color:var(--menu-button-menuitem-border-color, var(--color-background-primary));
@@ -8514,11 +8740,11 @@ a.fake-menu-button__item--badged .badge,button.fake-menu-button__item--badged .b
   right:unset;
 }
 
-.fake-menu-button .btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button .expand-btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button__button[aria-expanded=true]~.fake-menu-button__menu,.menu-button .btn[aria-expanded=true]~.menu-button__menu,.menu-button .expand-btn[aria-expanded=true]~.menu-button__menu,.menu-button__button[aria-expanded=true]~.menu-button__menu{
+.fake-menu-button .btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button .expand-btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button__button[aria-expanded=true]~.fake-menu-button__menu,.menu-button .btn[aria-expanded=true]~.menu-button__menu,.menu-button .expand-btn[aria-expanded=true]~.menu-button__menu,.menu-button .filter-chip[aria-expanded=true]~.menu-button__menu,.menu-button__button[aria-expanded=true]~.menu-button__menu{
   display:block;
 }
 
-.btn~.fake-menu-button__menu--static,.btn~.menu-button__menu--static,.expand-btn~.menu-button__menu--static,.expand_btn~.fake-menu-button__menu--static,.fake-menu-button__button~.fake-menu-button__menu--static,.menu-button__button~.menu-button__menu--static{
+.btn~.fake-menu-button__menu--static,.btn~.menu-button__menu--static,.expand-btn~.menu-button__menu--static,.expand_btn~.fake-menu-button__menu--static,.fake-menu-button__button~.fake-menu-button__menu--static,.filter-chip~.fake-menu-button__menu--static,.menu-button__button~.menu-button__menu--static{
   position:static;
 }
 
@@ -8532,6 +8758,22 @@ hr.menu-button__separator{
   border-width:1px;
   margin:0;
 }
+
+.menu-button__footer{
+  align-items:center;
+  background-color:var(--color-background-elevated);
+  border:none;
+  border-color:var(--color-stroke-subtle);
+  border-top-style:solid;
+  border-top-width:1px;
+  display:flex;
+  justify-content:center;
+  padding:var(--spacing-200);
+}
+
+.menu-button--filter div.menu-button__item[role^=menuitem]{
+  justify-content:flex-start;
+}
 div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
   outline:none;
 }

package/dist/bundles/skin-full.css

@@ -690,7 +690,7 @@ a:not([href]),a[aria-disabled=true]{
 }
 .clipped{
   border:0;
-  clip:rect(1px, 1px, 1px, 1px);
+  clip-path:inset(50%);
   height:1px;
   overflow:hidden;
   padding:0;
@@ -699,7 +699,7 @@ a:not([href]),a[aria-disabled=true]{
   width:1px;
 }
 .clipped--stealth:focus{
-  clip:auto;
+  clip-path:none;
   height:auto;
   overflow:visible;
   white-space:normal;
@@ -1737,6 +1737,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;
 }
@@ -1975,7 +2130,8 @@ span.carousel,span.carousel__container{
   }
   .carousel__snap-point{
     scroll-snap-align:flex-start;
-    scroll-snap-coordinate:0 0;
+    -webkit-scroll-snap-coordinate:0 0;
+    -ms-scroll-snap-coordinate:0 0;
   }
   @media (min-width:512px){
     div.carousel{
@@ -8486,6 +8642,33 @@ a.fake-menu__item--badged span.badge,button.fake-menu__item--badged span.badge,d
   z-index:1;
 }
 
+.menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,.menu__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
+  display:none;
+}
+.menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,.menu__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
+  display:block;
+}
+.menu__item[role=menuitemcheckbox] svg.icon--unchecked{
+  color:var(--color-foreground-secondary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemcheckbox] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemradio] svg.icon--unchecked{
+  color:var(--color-foreground-primary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemradio] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+
 .menu__items--scroll[role=menu]{
   overflow-y:scroll;
 }
@@ -8514,6 +8697,22 @@ hr.menu__separator{
   border-style:solid;
   border-width:1px;
 }
+
+.menu__footer{
+  align-items:center;
+  background-color:var(--color-background-elevated);
+  border:none;
+  border-color:var(--color-stroke-subtle);
+  border-top-style:solid;
+  border-top-width:1px;
+  display:flex;
+  justify-content:center;
+  padding:var(--spacing-200);
+}
+
+.menu--filter div.menu__item[role^=menuitem]{
+  justify-content:flex-start;
+}
 div.menu__item[role^=menuitem]:focus:not(:focus-visible){
   outline:none;
 }
@@ -8635,6 +8834,33 @@ a.fake-menu-button__item[aria-current=page] svg.icon--16,button.fake-menu-button
   opacity:1;
 }
 
+.menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,.menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
+  display:none;
+}
+.menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,.menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
+  display:block;
+}
+.menu-button__item[role=menuitemcheckbox] svg.icon--unchecked{
+  color:var(--color-foreground-secondary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemcheckbox] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemradio] svg.icon--unchecked{
+  color:var(--color-foreground-primary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemradio] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+
 .fake-menu-button__menu a.fake-menu-button__item,.fake-menu-button__menu button.fake-menu-button__item{
   background-color:initial;
   border-color:var(--menu-button-menuitem-border-color, var(--color-background-primary));
@@ -8717,11 +8943,11 @@ a.fake-menu-button__item--badged .badge,button.fake-menu-button__item--badged .b
   right:unset;
 }
 
-.fake-menu-button .btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button .expand-btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button__button[aria-expanded=true]~.fake-menu-button__menu,.menu-button .btn[aria-expanded=true]~.menu-button__menu,.menu-button .expand-btn[aria-expanded=true]~.menu-button__menu,.menu-button__button[aria-expanded=true]~.menu-button__menu{
+.fake-menu-button .btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button .expand-btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button__button[aria-expanded=true]~.fake-menu-button__menu,.menu-button .btn[aria-expanded=true]~.menu-button__menu,.menu-button .expand-btn[aria-expanded=true]~.menu-button__menu,.menu-button .filter-chip[aria-expanded=true]~.menu-button__menu,.menu-button__button[aria-expanded=true]~.menu-button__menu{
   display:block;
 }
 
-.btn~.fake-menu-button__menu--static,.btn~.menu-button__menu--static,.expand-btn~.menu-button__menu--static,.expand_btn~.fake-menu-button__menu--static,.fake-menu-button__button~.fake-menu-button__menu--static,.menu-button__button~.menu-button__menu--static{
+.btn~.fake-menu-button__menu--static,.btn~.menu-button__menu--static,.expand-btn~.menu-button__menu--static,.expand_btn~.fake-menu-button__menu--static,.fake-menu-button__button~.fake-menu-button__menu--static,.filter-chip~.fake-menu-button__menu--static,.menu-button__button~.menu-button__menu--static{
   position:static;
 }
 
@@ -8735,6 +8961,22 @@ hr.menu-button__separator{
   border-width:1px;
   margin:0;
 }
+
+.menu-button__footer{
+  align-items:center;
+  background-color:var(--color-background-elevated);
+  border:none;
+  border-color:var(--color-stroke-subtle);
+  border-top-style:solid;
+  border-top-width:1px;
+  display:flex;
+  justify-content:center;
+  padding:var(--spacing-200);
+}
+
+.menu-button--filter div.menu-button__item[role^=menuitem]{
+  justify-content:flex-start;
+}
 div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
   outline:none;
 }

package/dist/bundles/skin-headless.css

@@ -57,7 +57,7 @@ a:not([href]),a[aria-disabled=true]{
 }
 .clipped{
   border:0;
-  clip:rect(1px, 1px, 1px, 1px);
+  clip-path:inset(50%);
   height:1px;
   overflow:hidden;
   padding:0;
@@ -66,7 +66,7 @@ a:not([href]),a[aria-disabled=true]{
   width:1px;
 }
 .clipped--stealth:focus{
-  clip:auto;
+  clip-path:none;
   height:auto;
   overflow:visible;
   white-space:normal;
@@ -1104,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;
 }
@@ -1342,7 +1497,8 @@ span.carousel,span.carousel__container{
   }
   .carousel__snap-point{
     scroll-snap-align:flex-start;
-    scroll-snap-coordinate:0 0;
+    -webkit-scroll-snap-coordinate:0 0;
+    -ms-scroll-snap-coordinate:0 0;
   }
   @media (min-width:512px){
     div.carousel{
@@ -7853,6 +8009,33 @@ a.fake-menu__item--badged span.badge,button.fake-menu__item--badged span.badge,d
   z-index:1;
 }
 
+.menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,.menu__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
+  display:none;
+}
+.menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,.menu__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
+  display:block;
+}
+.menu__item[role=menuitemcheckbox] svg.icon--unchecked{
+  color:var(--color-foreground-secondary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemcheckbox] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemradio] svg.icon--unchecked{
+  color:var(--color-foreground-primary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu__item[role=menuitemradio] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+
 .menu__items--scroll[role=menu]{
   overflow-y:scroll;
 }
@@ -7881,6 +8064,22 @@ hr.menu__separator{
   border-style:solid;
   border-width:1px;
 }
+
+.menu__footer{
+  align-items:center;
+  background-color:var(--color-background-elevated);
+  border:none;
+  border-color:var(--color-stroke-subtle);
+  border-top-style:solid;
+  border-top-width:1px;
+  display:flex;
+  justify-content:center;
+  padding:var(--spacing-200);
+}
+
+.menu--filter div.menu__item[role^=menuitem]{
+  justify-content:flex-start;
+}
 div.menu__item[role^=menuitem]:focus:not(:focus-visible){
   outline:none;
 }
@@ -8002,6 +8201,33 @@ a.fake-menu-button__item[aria-current=page] svg.icon--16,button.fake-menu-button
   opacity:1;
 }
 
+.menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,.menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
+  display:none;
+}
+.menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,.menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
+  display:block;
+}
+.menu-button__item[role=menuitemcheckbox] svg.icon--unchecked{
+  color:var(--color-foreground-secondary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemcheckbox] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemradio] svg.icon--unchecked{
+  color:var(--color-foreground-primary);
+  display:block;
+  margin-right:var(--spacing-100);
+}
+.menu-button__item[role=menuitemradio] svg.icon--checked{
+  color:var(--color-foreground-primary);
+  display:none;
+  margin-right:var(--spacing-100);
+}
+
 .fake-menu-button__menu a.fake-menu-button__item,.fake-menu-button__menu button.fake-menu-button__item{
   background-color:initial;
   border-color:var(--menu-button-menuitem-border-color, var(--color-background-primary));
@@ -8084,11 +8310,11 @@ a.fake-menu-button__item--badged .badge,button.fake-menu-button__item--badged .b
   right:unset;
 }
 
-.fake-menu-button .btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button .expand-btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button__button[aria-expanded=true]~.fake-menu-button__menu,.menu-button .btn[aria-expanded=true]~.menu-button__menu,.menu-button .expand-btn[aria-expanded=true]~.menu-button__menu,.menu-button__button[aria-expanded=true]~.menu-button__menu{
+.fake-menu-button .btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button .expand-btn[aria-expanded=true]~.fake-menu-button__menu,.fake-menu-button__button[aria-expanded=true]~.fake-menu-button__menu,.menu-button .btn[aria-expanded=true]~.menu-button__menu,.menu-button .expand-btn[aria-expanded=true]~.menu-button__menu,.menu-button .filter-chip[aria-expanded=true]~.menu-button__menu,.menu-button__button[aria-expanded=true]~.menu-button__menu{
   display:block;
 }
 
-.btn~.fake-menu-button__menu--static,.btn~.menu-button__menu--static,.expand-btn~.menu-button__menu--static,.expand_btn~.fake-menu-button__menu--static,.fake-menu-button__button~.fake-menu-button__menu--static,.menu-button__button~.menu-button__menu--static{
+.btn~.fake-menu-button__menu--static,.btn~.menu-button__menu--static,.expand-btn~.menu-button__menu--static,.expand_btn~.fake-menu-button__menu--static,.fake-menu-button__button~.fake-menu-button__menu--static,.filter-chip~.fake-menu-button__menu--static,.menu-button__button~.menu-button__menu--static{
   position:static;
 }
 
@@ -8102,6 +8328,22 @@ hr.menu-button__separator{
   border-width:1px;
   margin:0;
 }
+
+.menu-button__footer{
+  align-items:center;
+  background-color:var(--color-background-elevated);
+  border:none;
+  border-color:var(--color-stroke-subtle);
+  border-top-style:solid;
+  border-top-width:1px;
+  display:flex;
+  justify-content:center;
+  padding:var(--spacing-200);
+}
+
+.menu-button--filter div.menu-button__item[role^=menuitem]{
+  justify-content:flex-start;
+}
 div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
   outline:none;
 }

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/carousel/carousel.css

@@ -280,7 +280,8 @@ span.carousel__container {
     }
     .carousel__snap-point {
         scroll-snap-align: flex-start;
-        scroll-snap-coordinate: 0 0;
+        -webkit-scroll-snap-coordinate: 0 0;
+        -ms-scroll-snap-coordinate: 0 0;
     }
     @media (min-width: 512px) {
         div.carousel {

package/dist/menu/menu.css

@@ -148,6 +148,35 @@ div.menu__item--badged[role^="menuitem"] span.badge {
     z-index: 1;
 }
 
+.menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--unchecked,
+.menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--unchecked {
+    display: none;
+}
+.menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checked,
+.menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--checked {
+    display: block;
+}
+.menu__item[role="menuitemcheckbox"] svg.icon--unchecked {
+    color: var(--color-foreground-secondary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemcheckbox"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemradio"] svg.icon--unchecked {
+    color: var(--color-foreground-primary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu__item[role="menuitemradio"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+
 .menu__items--scroll[role="menu"] {
     overflow-y: scroll;
 }
@@ -180,6 +209,22 @@ hr.menu__separator {
     border-style: solid;
     border-width: 1px;
 }
+
+.menu__footer {
+    align-items: center;
+    background-color: var(--color-background-elevated);
+    border: none;
+    border-color: var(--color-stroke-subtle);
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: flex;
+    justify-content: center;
+    padding: var(--spacing-200);
+}
+
+.menu--filter div.menu__item[role^="menuitem"] {
+    justify-content: flex-start;
+}
 div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }

package/dist/menu-button/menu-button.css

@@ -160,6 +160,39 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--16 {
     opacity: 1;
 }
 
+.menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
+    svg.icon--unchecked,
+.menu-button__item[role="menuitemradio"][aria-checked="true"]
+    svg.icon--unchecked {
+    display: none;
+}
+.menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
+    svg.icon--checked,
+.menu-button__item[role="menuitemradio"][aria-checked="true"]
+    svg.icon--checked {
+    display: block;
+}
+.menu-button__item[role="menuitemcheckbox"] svg.icon--unchecked {
+    color: var(--color-foreground-secondary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemcheckbox"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemradio"] svg.icon--unchecked {
+    color: var(--color-foreground-primary);
+    display: block;
+    margin-right: var(--spacing-100);
+}
+.menu-button__item[role="menuitemradio"] svg.icon--checked {
+    color: var(--color-foreground-primary);
+    display: none;
+    margin-right: var(--spacing-100);
+}
+
 .fake-menu-button__menu a.fake-menu-button__item,
 .fake-menu-button__menu button.fake-menu-button__item {
     background-color: initial;
@@ -289,6 +322,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 .fake-menu-button__button[aria-expanded="true"] ~ .fake-menu-button__menu,
 .menu-button .btn[aria-expanded="true"] ~ .menu-button__menu,
 .menu-button .expand-btn[aria-expanded="true"] ~ .menu-button__menu,
+.menu-button .filter-chip[aria-expanded="true"] ~ .menu-button__menu,
 .menu-button__button[aria-expanded="true"] ~ .menu-button__menu {
     display: block;
 }
@@ -298,6 +332,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 .expand-btn ~ .menu-button__menu--static,
 .expand_btn ~ .fake-menu-button__menu--static,
 .fake-menu-button__button ~ .fake-menu-button__menu--static,
+.filter-chip ~ .fake-menu-button__menu--static,
 .menu-button__button ~ .menu-button__menu--static {
     position: static;
 }
@@ -315,6 +350,22 @@ hr.menu-button__separator {
     border-width: 1px;
     margin: 0;
 }
+
+.menu-button__footer {
+    align-items: center;
+    background-color: var(--color-background-elevated);
+    border: none;
+    border-color: var(--color-stroke-subtle);
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: flex;
+    justify-content: center;
+    padding: var(--spacing-200);
+}
+
+.menu-button--filter div.menu-button__item[role^="menuitem"] {
+    justify-content: flex-start;
+}
 div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }

package/dist/mixins/_utility-mixins.scss

@@ -1,6 +1,6 @@
 @mixin clipped() {
     border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
     height: 1px;
     overflow: hidden;
     padding: 0;
@@ -10,7 +10,7 @@
 }
 
 @mixin unclipped() {
-    clip: auto;
+    clip-path: none;
     height: auto;
     overflow: visible;
     white-space: normal;

package/dist/mixins/utility-mixins.less

@@ -1,6 +1,6 @@
 .clipped() {
     border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
     height: 1px;
     overflow: hidden;
     padding: 0;
@@ -10,7 +10,7 @@
 }
 
 .unclipped() {
-    clip: auto;
+    clip-path: none;
     height: auto;
     overflow: visible;
     white-space: normal;

package/dist/utility/utility.css

@@ -9,7 +9,7 @@
 }
 .clipped {
     border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
     height: 1px;
     overflow: hidden;
     padding: 0;
@@ -18,7 +18,7 @@
     width: 1px;
 }
 .clipped--stealth:focus {
-    clip: auto;
+    clip-path: none;
     height: auto;
     overflow: visible;
     white-space: normal;

package/index.browser.json

@@ -7,6 +7,7 @@
     "require: ./breadcrumbs.js",
     "require: ./button.js",
     "require: ./calendar.js",
+    "require: ./card.js",
     "require: ./carousel.js",
     "require: ./ccd.js",
     "require: ./chart-legend.js",

package/index.css

@@ -5,6 +5,7 @@
 @import "./breadcrumbs.css";
 @import "./button.css";
 @import "./calendar.css";
+@import "./card.css";
 @import "./carousel.css";
 @import "./ccd.css";
 @import "./chart-legend.css";

package/index.js

@@ -5,6 +5,7 @@ require('./badge.js');
 require('./breadcrumbs.js');
 require('./button.js');
 require('./calendar.js');
+require('./card.js');
 require('./carousel.js');
 require('./ccd.js');
 require('./chart-legend.js');

package/index.mjs

@@ -5,6 +5,7 @@ import './dist/badge/badge.css';
 import './dist/breadcrumbs/breadcrumbs.css';
 import './dist/button/button.css';
 import './dist/calendar/calendar.css';
+import './dist/card/card.css';
 import './dist/carousel/carousel.css';
 import './dist/ccd/ccd.css';
 import './dist/chart-legend/chart-legend.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.9.0",
+    "version": "19.11.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",
@@ -83,7 +83,7 @@
         "extends @ebay/browserslist-config"
     ],
     "devDependencies": {
-        "@marko/run-adapter-static": "^2.0.1"
+        "@marko/run-adapter-static": "^2.0.2"
     },
     "publishConfig": {
         "registry": "https://registry.npmjs.org"