@ebay/skin 19.10.0 → 19.11.0

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;
@@ -1927,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{
@@ -8438,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;
 }
@@ -8466,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;
 }
@@ -8587,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));
@@ -8669,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;
 }
 
@@ -8687,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;
@@ -2130,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{
@@ -8641,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;
 }
@@ -8669,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;
 }
@@ -8790,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));
@@ -8872,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;
 }
 
@@ -8890,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;
@@ -1497,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{
@@ -8008,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;
 }
@@ -8036,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;
 }
@@ -8157,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));
@@ -8239,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;
 }
 
@@ -8257,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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.10.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"