@ebay/skin 19.10.0 → 19.12.0

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;
@@ -244,6 +244,11 @@ ul.accordion--large summary.details__summary{
     opacity:1;
   }
 }
+:root{
+  --dialog-scrim-color-hide:rgb(17 24 32 / 0);
+  --dialog-scrim-color-show:rgb(17 24 32 / 0.7);
+  --dialog-lightbox-max-width:616px;
+}
 .alert-dialog[role=alertdialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -532,6 +537,7 @@ ul.accordion--large summary.details__summary{
   line-height:128px;
   width:128px;
 }
+
 .badge{
   align-items:center;
   background-color:var(--badge-background-color, var(--color-background-attention));
@@ -546,6 +552,7 @@ ul.accordion--large summary.details__summary{
   padding:2px 6px;
   white-space:nowrap;
 }
+
 nav.breadcrumbs{
   color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
   font-size:var(--font-size-small);
@@ -652,6 +659,8 @@ nav.breadcrumbs .fake-menu-button__menu,nav.breadcrumbs .menu-button__menu{
   }
 }
 a.fake-btn,button.btn{
+  align-content:center;
+  align-items:center;
   background-color:initial;
   border:1px solid;
   border-radius:var(--btn-border-radius, 20px);
@@ -663,7 +672,7 @@ a.fake-btn,button.btn{
   margin:0;
   min-height:40px;
   min-width:88px;
-  padding:9.5px 20px;
+  padding:0 20px;
   text-align:center;
   text-decoration:none;
   vertical-align:bottom;
@@ -774,11 +783,29 @@ a.fake-btn--primary,button.btn--primary{
   border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
   color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
   font-weight:700;
+  overflow:hidden;
+  position:relative;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
 }
 a.fake-btn--primary:active,button.btn--primary:active{
   transform:scale(.97);
 }
+a.fake-btn--primary:after,button.btn--primary:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.fake-btn--primary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--primary[href]:hover:after,button.btn--primary:not([disabled],[aria-disabled=true]):hover:after,button.btn--primary[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+a.fake-btn--primary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--primary[href]:focus:after,button.btn--primary:not([disabled],[aria-disabled=true]):focus:after,button.btn--primary[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+a.fake-btn--primary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--primary[href]:active:after,button.btn--primary:not([disabled],[aria-disabled=true]):active:after,button.btn--primary[href]:active:after{
+  background-color:var(--state-layer-pressed);
+}
 
 a.fake-btn--primary{
   outline-color:var(--color-foreground-primary);
@@ -788,19 +815,29 @@ a.fake-btn--primary:visited{
   color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
 }
 
-a.fake-btn--primary[href]:focus,a.fake-btn--primary[href]:hover,button.btn--primary:not([disabled],[aria-disabled=true]):focus,button.btn--primary:not([disabled],[aria-disabled=true]):hover{
-  background-blend-mode:multiply;
-  filter:brightness(96%);
-}
-a.fake-btn--primary[href]:active,button.btn--primary:not([disabled],[aria-disabled=true]):active{
-  filter:brightness(92%);
-}
-
 a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
   background-color:var(--btn-primary-destructive-background-color, var(--color-background-attention));
   border-color:var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
   color:var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
   font-weight:700;
+  overflow:hidden;
+  position:relative;
+}
+a.fake-btn--primary.fake-btn--destructive:after,button.btn--primary.btn--destructive:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--primary.fake-btn--destructive[href]:hover:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):hover:after,button.btn--primary.btn--destructive[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--primary.fake-btn--destructive[href]:focus:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):focus:after,button.btn--primary.btn--destructive[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--primary.fake-btn--destructive[href]:active:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):active:after,button.btn--primary.btn--destructive[href]:active:after{
+  background-color:var(--state-layer-pressed);
 }
 
 button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
@@ -808,13 +845,6 @@ button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn
   border-color:var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
 }
 
-a.fake-btn--primary.fake-btn--destructive[href]:focus,a.fake-btn--primary.fake-btn--destructive[href]:hover,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
-  background-color:var(--color-state-attention-hover);
-}
-a.fake-btn--primary.fake-btn--destructive[href]:active,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):active{
-  background-color:var(--color-state-attention-active);
-}
-
 button.btn .progress-spinner{
   height:24px;
   margin:-4px 0;
@@ -841,11 +871,11 @@ a.fake-btn[aria-expanded=true] svg.icon--12,button.btn[aria-expanded=true] svg.i
 }
 
 a.fake-btn--large svg.icon,button.btn--large svg.icon{
-  max-height:22px;
+  max-height:48px;
 }
 
 a.fake-btn--small svg.icon,button.btn--small svg.icon{
-  max-height:20px;
+  max-height:32px;
 }
 
 button.btn--primary[aria-disabled=true],button.btn--primary[disabled]{
@@ -867,44 +897,40 @@ a.fake-btn--secondary,button.btn--secondary{
   background-color:var(--btn-secondary-background-color, transparent);
   border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
   color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
+  overflow:hidden;
+  position:relative;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
 }
 a.fake-btn--secondary:active,button.btn--secondary:active{
   transform:scale(.97);
 }
+a.fake-btn--secondary:after,button.btn--secondary:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.fake-btn--secondary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--secondary[href]:hover:after,button.btn--secondary:not([disabled],[aria-disabled=true]):hover:after,button.btn--secondary[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+a.fake-btn--secondary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--secondary[href]:focus:after,button.btn--secondary:not([disabled],[aria-disabled=true]):focus:after,button.btn--secondary[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--secondary[href]:active:after,button.btn--secondary:not([disabled],[aria-disabled=true]):active:after,button.btn--secondary[href]:active:after{
+  background-color:var(--state-layer-pressed);
+}
 
 a.fake-btn--secondary:visited{
   color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
 }
 
-a.fake-btn--secondary[href]:active,button.btn--secondary:not([disabled],[aria-disabled=true]):active{
-  background-color:var(--color-state-primary-active);
-  border-color:var(--color-state-active-foreground-on-secondary);
-  color:var(--color-state-active-foreground-on-secondary);
-}
-a.fake-btn--secondary[href]:focus,a.fake-btn--secondary[href]:hover,button.btn--secondary:not([disabled],[aria-disabled=true]):focus,button.btn--secondary:not([disabled],[aria-disabled=true]):hover{
-  background-color:var(--color-state-primary-hover);
-  border-color:var(--color-state-hover-foreground-on-secondary);
-  color:var(--color-state-hover-foreground-on-secondary);
-}
-
 a.fake-btn--secondary.fake-btn--destructive,button.btn--secondary.btn--destructive{
   background-color:var(--btn-secondary-destructive-background-color, transparent);
   border-color:var(--btn-secondary-destructive-border-color, var(--color-stroke-attention));
   color:var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention));
 }
 
-a.fake-btn--secondary.fake-btn--destructive[href]:focus,a.fake-btn--secondary.fake-btn--destructive[href]:hover,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
-  background-color:var(--color-state-primary-hover);
-  border-color:var(--color-state-hover-foreground-on-secondary-desctructive);
-  color:var(--color-state-hover-foreground-on-secondary-desctructive);
-}
-a.fake-btn--secondary.fake-btn--destructive[href]:active,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):active{
-  background-color:var(--color-state-primary-active);
-  border-color:var(--color-state-active-foreground-on-secondary-desctructive);
-  color:var(--color-state-active-foreground-on-secondary-desctructive);
-}
-
 button.btn--secondary.btn--destructive .progress-spinner{
   --color-spinner-icon-background:#f39fb0;
   --color-spinner-icon-foreground:#e0103a;
@@ -926,17 +952,28 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
 
 a.fake-btn--tertiary,button.btn--tertiary{
   border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
+  overflow:hidden;
+  position:relative;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
 }
 a.fake-btn--tertiary:active,button.btn--tertiary:active{
   transform:scale(.97);
 }
-
-a.fake-btn--tertiary[href]:focus,a.fake-btn--tertiary[href]:hover,button.btn--tertiary:not([disabled],[aria-disabled=true]):focus,button.btn--tertiary:not([disabled],[aria-disabled=true]):hover{
-  background-color:var(--color-state-secondary-hover);
+a.fake-btn--tertiary:after,button.btn--tertiary:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
 }
-a.fake-btn--tertiary[href]:active,button.btn--tertiary:not([disabled],[aria-disabled=true]):active{
-  background-color:var(--color-state-secondary-active);
+a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--tertiary[href]:hover:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):hover:after,button.btn--tertiary[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--tertiary[href]:focus:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):focus:after,button.btn--tertiary[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--tertiary[href]:active:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):active:after,button.btn--tertiary[href]:active:after{
+  background-color:var(--state-layer-pressed);
 }
 
 a.fake-btn--tertiary:not([href]),a.fake-btn--tertiary[aria-disabled=true],button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
@@ -948,13 +985,6 @@ a.fake-btn--tertiary.fake-btn--destructive,button.btn--tertiary.btn--destructive
   border-color:var(--btn-tertiary-destructive-foreground-color, var(--color-stroke-subtle));
 }
 
-a.fake-btn--tertiary.fake-btn--destructive[href]:focus,a.fake-btn--tertiary.fake-btn--destructive[href]:hover,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
-  background-color:var(--color-state-secondary-hover);
-}
-a.fake-btn--tertiary.fake-btn--destructive[href]:active,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):active{
-  background-color:var(--color-state-secondary-active);
-}
-
 button.btn--tertiary.btn--destructive[aria-disabled=true],button.btn--tertiary.btn--destructive[disabled]{
   color:var(--btn-tertiary-destructive-disabled-foreground-color, var(--color-foreground-disabled));
 }
@@ -968,48 +998,54 @@ a.fake-btn--large,button.btn--large{
   border-radius:var(--btn-border-radius, 24px);
   font-size:var(--font-size-medium);
   min-height:48px;
-  padding:13px 20px;
+  padding:0 20px;
 }
 
 a.fake-btn--small,button.btn--small{
   border-radius:var(--btn-border-radius, 16px);
   font-size:var(--font-size-default);
   min-height:32px;
-  padding:6px 16px;
+  padding:0 16px;
 }
 
 a.fake-btn--form,button.btn--form{
   border-color:inherit;
   border-radius:var(--expand-btn-border-radius, var(--border-radius-50));
   max-width:100%;
+  overflow:hidden;
+  position:relative;
 }
-
-a.fake-btn--form:not([href]):focus,a.fake-btn--form:not([href]):hover,button.btn--form:not([disabled],[aria-disabled=true]):focus,button.btn--form:not([disabled],[aria-disabled=true]):hover{
-  background-color:var(--color-state-primary-hover);
+a.fake-btn--form:after,button.btn--form:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
 }
-a.fake-btn--form:not([href]):active,button.btn--form:not([disabled],[aria-disabled=true]):active{
-  background-color:var(--color-state-primary-active);
+a.fake-btn--form:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--form[href]:hover:after,button.btn--form:not([disabled],[aria-disabled=true]):hover:after,button.btn--form[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+a.fake-btn--form:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--form[href]:focus:after,button.btn--form:not([disabled],[aria-disabled=true]):focus:after,button.btn--form[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+a.fake-btn--form:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--form[href]:active:after,button.btn--form:not([disabled],[aria-disabled=true]):active:after,button.btn--form[href]:active:after{
+  background-color:var(--state-layer-pressed);
 }
 
 button.btn--form.btn--large{
-  padding:13px 20px;
+  padding:0 20px;
 }
 
 button.btn--form.btn--small{
-  padding:6px 16px;
+  padding:0 16px;
 }
 a.fake-btn--transparent,a.fake-btn--transparent:focus,a.fake-btn--transparent:hover,button.btn--transparent,button.btn--transparent:focus,button.btn--transparent:hover{
   background-color:initial;
 }
 
-a.fake-btn--fixed-height,button.btn--fixed-height{
-  padding-top:calc(21.5px - .75em);
-}
-
 a.fake-btn--large-fixed-height,button.btn--large-fixed-height{
   height:48px;
   min-height:48px;
-  padding-top:calc(27px - .75em);
 }
 
 a.fake-btn--truncated,a.fake-btn--truncated span,button.btn--truncated,button.btn--truncated span{
@@ -1023,7 +1059,7 @@ a.fake-btn--large-truncated,button.btn--large-truncated{
   font-size:var(--font-size-medium);
   height:48px;
   min-height:48px;
-  padding:13px 20px;
+  padding:0 20px;
 }
 a.fake-btn--large-truncated,a.fake-btn--large-truncated span,button.btn--large-truncated,button.btn--large-truncated span{
   line-height:1.4em;
@@ -1043,10 +1079,6 @@ a.fake-btn--split-end,button.btn--split-end{
   padding-left:8px;
   padding-right:8px;
 }
-
-a.fake-btn.fake-btn--tertiary.fake-btn--split-end,button.btn.btn--tertiary.btn--split-end{
-  margin-left:-2px;
-}
 a.fake-btn.fake-btn--primary.fake-btn--split-end,a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,button.btn.btn--primary.btn--split-end,button.btn.btn--primary.btn--split-end:focus,button.btn.btn--primary.btn--split-end:hover{
   border-left-color:var(--btn-primary-border-split-color, var(--color-background-primary));
 }
@@ -1497,7 +1529,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{
@@ -1526,6 +1559,7 @@ span.carousel,span.carousel__container{
 .carousel--hidden-scrollbar .carousel__control--next{
   right:0;
 }
+
 @font-face{
   font-family:Reddit Sans Condensed Bold;
   src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
@@ -1568,6 +1602,7 @@ span.carousel,span.carousel__container{
   text-align:center;
   width:39px;
 }
+
 .calendar{
   color:var(--calendar-color-token, var(--color-foreground-primary));
   display:table;
@@ -1866,6 +1901,7 @@ input.checkbox__control[type=checkbox]:focus+span.checkbox__icon{
 input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__icon{
   outline:none;
 }
+
 .chip{
   align-items:center;
   background-color:var(--color-background-strong);
@@ -1919,6 +1955,7 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
 .chip button.chip__button:hover{
   background-color:var(--state-layer-hover);
 }
+
 .chips-combobox{
   background-color:var(--color-background-secondary);
   border:1px solid var(--color-stroke-default);
@@ -2026,6 +2063,9 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
 [dir=rtl] .chips-combobox .combobox__control>input{
   padding:var(--spacing-75) 0;
 }
+:root{
+  --bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
+}
 .combobox{
   box-sizing:border-box;
   line-height:normal;
@@ -2278,6 +2318,7 @@ span.combobox{
   left:1px;
   right:inherit;
 }
+
 .confirm-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -2427,6 +2468,8 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
   }
 }
 a.cta-btn{
+  align-content:center;
+  align-items:center;
   background-color:var(--cta-btn-background-color, var(--color-background-primary));
   border:1px solid;
   border-radius:var(--cta-btn-border-radius, 20px);
@@ -2437,7 +2480,8 @@ a.cta-btn{
   font-size:var(--font-size-default);
   margin:0;
   max-width:100%;
-  padding:9.5px 20px;
+  min-height:40px;
+  padding:0 20px;
   text-align:center;
   text-decoration:none;
   vertical-align:bottom;
@@ -2535,6 +2579,7 @@ a.cta-btn--large{
 [dir=rtl] a.cta-btn svg.icon--arrow-right-24{
   transform:rotate(180deg);
 }
+
 .date-textbox{
   --calendar-month-width:311px;
   display:inline-block;
@@ -2617,6 +2662,7 @@ details.details[open] summary.details__summary:before{
 details.details summary:focus:not(:focus-visible){
   outline:none;
 }
+
 :root{
   --donut-chart-max-width:600px;
   --donut-chart-graph-size-sm:140px;
@@ -2864,6 +2910,7 @@ button.icon-btn.drawer-dialog__close{
 .drawer-dialog__handle:focus:not(:focus-visible){
   outline:none;
 }
+
 .education-notice{
   background-color:var(--education-notice-default-background-color, var(--color-background-secondary));
   border-radius:var(--education-notice-border-radius, var(--border-radius-100));
@@ -3236,6 +3283,7 @@ div.field__description{
 [dir=rtl] .field__description--group>:last-child{
   text-align:left;
 }
+
 .file-preview-card{
   display:flex;
   flex-direction:column;
@@ -3364,6 +3412,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
   color:var(--color-foreground-secondary);
   font-size:var(--font-size-small);
 }
+
 div.file-preview-card-group{
   container:file-preview-cards-container/inline-size;
 }
@@ -3797,6 +3846,7 @@ button.filter-chip[aria-expanded=true] .filter-chip__trailing{
 .filter-input--large .textbox__control{
   height:48px;
 }
+
 .filter-menu,.filter-menu-form{
   background-color:var(--filter-menu-item-background-color, var(--color-background-primary));
   min-width:144px;
@@ -5256,6 +5306,7 @@ For complete information visit: www.freakflagsprite.com
   height:37px;
   width:60px;
 }
+
 .floating-label{
   position:relative;
 }
@@ -5499,6 +5550,7 @@ button.fullscreen-dialog__back,button.fullscreen-dialog__close{
 .fullscreen-dialog--hide-init .fullscreen-dialog__window--slide,.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide-end,.fullscreen-dialog--show .fullscreen-dialog__window--slide,.fullscreen-dialog--show .fullscreen-dialog__window--slide-end{
   transform:translateX(0);
 }
+
 .signal{
   border:1px solid;
   border-radius:var(--border-radius-100);
@@ -5529,6 +5581,7 @@ button.fullscreen-dialog__back,button.fullscreen-dialog__close{
 .signal--neutral{
   color:var(--signal-neutral-color, var(--color-foreground-secondary));
 }
+
 svg.icon{
   display:inline-block;
   fill:currentColor;
@@ -5612,6 +5665,7 @@ svg.icon--confirmation-filled{
 svg.icon--information-filled{
   color:var(--color-foreground-information);
 }
+
 a.icon-link{
   align-items:center;
   display:inline-flex;
@@ -5792,12 +5846,14 @@ a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):focus,a.ico
 a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):active,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):active{
   background-color:var(--color-state-secondary-active);
 }
+
 svg.image-placeholder{
   color:var(--color-foreground-primary);
   fill:currentColor;
   height:inherit;
   width:inherit;
 }
+
 .infotip{
   position:relative;
 }
@@ -7359,6 +7415,7 @@ a.legal-link,button.legal-link{
 a.legal-link,a.legal-link:hover,a.legal-link:visited,button.legal-link,button.legal-link:hover,button.legal-link:visited{
   color:var(--legal-link-foreground-color, var(--color-foreground-link-legal));
 }
+
 .list{
   max-width:480px;
 }
@@ -7433,6 +7490,7 @@ a.legal-link,a.legal-link:hover,a.legal-link:visited,button.legal-link,button.le
 [dir=rtl] .list li>a,[dir=rtl] .list li>button{
   text-align:right;
 }
+
 div.listbox{
   margin:var(--spacing-200) 0;
 }
@@ -7528,6 +7586,7 @@ div.listbox__option[aria-selected=true] svg.icon{
 .listbox__options:focus:not(:focus-visible){
   outline:none;
 }
+
 .listbox-button{
   line-height:normal;
   position:relative;
@@ -7902,6 +7961,7 @@ span.listbox-button__value{
 .number-input__increment:disabled{
   animation:number-increment-disabled var(--motion-duration-short-2) var(--motion-easing-standard);
 }
+
 .fake-menu__items,.menu__items{
   background-color:var(--menu-background-color, var(--color-background-primary));
   cursor:default;
@@ -8008,6 +8068,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,9 +8123,26 @@ 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;
 }
+
 .fake-menu-button,.menu-button{
   line-height:normal;
   position:relative;
@@ -8157,6 +8261,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 +8370,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,9 +8388,26 @@ 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;
 }
+
 :root{
   --page-grid-number-cols:8;
   --page-grid-outside-margins:16px;
@@ -8317,6 +8465,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
   --debug-grid-gutter-color:transparent;
   background:repeating-linear-gradient(90deg, var(--debug-grid-col-color) 0, var(--debug-grid-col-color) var(--page-grid-column-widths), var(--debug-grid-gutter-color) var(--page-grid-column-widths), var(--debug-grid-gutter-color) calc(var(--page-grid-column-widths) + var(--page-grid-column-gaps)));
 }
+
 .page-notice{
   background-color:var(--page-notice-general-background-color, var(--color-background-inverse));
   border-color:var(--page-notice-general-border-color, var(--color-background-inverse));
@@ -8469,6 +8618,7 @@ p.page-notice__cta{
   padding-left:0;
   padding-right:16px;
 }
+
 nav.pagination{
   align-items:center;
   color:var(--pagination-item-foreground-color, var(--color-foreground-secondary));
@@ -8873,6 +9023,7 @@ button.icon-btn.panel-dialog__prev{
 [dir=rtl] .phone-input .listbox-button__value span:last-child,[dir=rtl] .phone-input .listbox__value span:last-child{
   direction:ltr;
 }
+
 .progress-bar{
   border:none;
   color:var(--progress-bar-foreground-color, var(--color-foreground-accent));
@@ -9473,6 +9624,7 @@ input.radio__control[type=radio]:focus+span.radio__icon{
 input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
   outline:none;
 }
+
 .section-notice{
   background-color:var(--section-notice-default-background-color, var(--color-background-secondary));
   border-radius:var(--section-notice-border-radius, var(--border-radius-50));
@@ -9606,6 +9758,7 @@ p.section-notice__cta{
 .section-notice__header:has(svg[class*="24"])+.section-notice__main{
   padding-top:2px;
 }
+
 .section-title{
   align-items:baseline;
   display:flex;
@@ -9766,6 +9919,7 @@ p.section-notice__cta{
 .segmented-buttons__button:not([aria-current]):focus,.segmented-buttons__button:not([aria-current]):hover{
   background-color:var(--color-state-primary-hover);
 }
+
 .select{
   color:var(--select-foreground-color, var(--color-foreground-primary));
   font-size:var(--font-size-default);
@@ -9939,6 +10093,7 @@ span.select{
   text-overflow:ellipsis;
   white-space:nowrap;
 }
+
 @keyframes skeleton-fade-out{
   0%{
     opacity:1;
@@ -10112,6 +10267,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
 [dir=rtl] .skeleton__text--multiline:after{
   left:var(--spacing-700);
 }
+
 .snackbar-dialog{
   background-color:var(--snackbar-dialog-background-color, var(--color-background-inverse));
   border-radius:var(--snackbar-dialog-border-radius, var(--border-radius-100));
@@ -10191,6 +10347,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
   left:auto;
   right:0;
 }
+
 .split-button{
   display:inline-flex;
 }
@@ -10314,6 +10471,7 @@ div.star-rating-select input.star-rating-select__control--filled+span.star-ratin
       var(--color-foreground-primary)
   );
 }
+
 .switch{
   box-sizing:border-box;
   height:40px;
@@ -10704,6 +10862,7 @@ span.switch__control:focus:not(:focus-visible){
 [dir=rtl] .table-cell--numeric{
   text-align:left;
 }
+
 .fake-tabs,.tabs{
   margin-top:var(--spacing-200);
 }
@@ -10780,6 +10939,7 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
 .fake-tabs__cell,.tabs__cell{
   margin:var(--spacing-200) 0;
 }
+
 :root{
   --input-default-height:40px;
   --input-large-height:48px;
@@ -10925,11 +11085,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 .textbox--fluid,.textbox--fluid .textbox__control{
   width:100%;
 }
-:root{
-  --dialog-scrim-color-hide:rgb(17 24 32 / 0);
-  --dialog-scrim-color-show:rgb(17 24 32 / 0.7);
-  --dialog-lightbox-max-width:616px;
-}
+
 .toast-dialog{
   background-color:var(--toast-dialog-background-color, var(--color-background-information));
   border-top-left-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
@@ -11258,6 +11414,7 @@ button.toast-dialog__close>svg{
 .toggle-button--gallery-layout .toggle-button__icon~.toggle-button__content{
   align-self:flex-start;
 }
+
 :root{
   --row-min-toggle-buttons-min:2;
   --row-min-toggle-buttons-xs:4;
@@ -12028,9 +12185,6 @@ button.tooltip__close{
     max-width:400px;
   }
 }
-:root{
-  --bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
-}
 .tourtip{
   position:relative;
 }