@ebay/skin 19.12.1 → 19.13.0

package/dist/alert-dialog/alert-dialog.css

@@ -10,7 +10,6 @@
     -webkit-overflow-scrolling: touch;
     align-items: flex-start;
     justify-content: center;
-    overflow-y: auto;
     position: fixed;
     right: 0;
     top: 0;

package/dist/bundles/skin-default.css

@@ -311,12 +311,19 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
   --color-marketing-magenta-foreground-4:var(--color-neutral-100);
   --color-marketing-magenta-background-4:var(--color-pink-400);
   --state-layer-neutral:rgb(var(--color-neutral-900-rgb), 0);
+  --state-layer-neutral-on-strong:rgb(var(--color-neutral-100-rgb), 0);
   --state-layer-focus:rgb(var(--color-neutral-900-rgb), var(--opacity-50));
   --state-layer-hover:rgb(var(--color-neutral-900-rgb), var(--opacity-50));
   --state-layer-pressed:rgb(
       var(--color-neutral-900-rgb),
       var(--opacity-100)
   );
+  --state-layer-focus-on-strong:rgb(var(--color-neutral-100-rgb), var(--opacity-150));
+  --state-layer-hover-on-strong:rgb(var(--color-neutral-100-rgb), var(--opacity-150));
+  --state-layer-pressed-on-strong:rgb(
+      var(--color-neutral-100-rgb),
+      var(--opacity-200)
+  );
   --state-layer-drag:rgb(var(--color-neutral-900-rgb), var(--opacity-150));
   --color-ai-gradient-full-spectrum:linear-gradient(
       223deg,
@@ -679,7 +686,6 @@ ul.accordion--large summary.details__summary{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -2749,7 +2755,6 @@ span.combobox{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -3179,7 +3184,6 @@ details.details summary:focus:not(:focus-visible){
   left:0;
   -webkit-overflow-scrolling:touch;
   align-items:flex-end;
-  overflow-y:auto;
   overflow:hidden;
   position:fixed;
   right:0;
@@ -4133,7 +4137,9 @@ a.filter-chip,button.filter-chip{
   justify-content:space-between;
   max-width:296px;
   min-width:32px;
+  overflow:hidden;
   padding:0 var(--spacing-150);
+  position:relative;
   text-decoration:none;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
   vertical-align:bottom;
@@ -4141,6 +4147,22 @@ a.filter-chip,button.filter-chip{
 a.filter-chip:active,button.filter-chip:active{
   transform:scale(.97);
 }
+a.filter-chip:after,button.filter-chip:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):hover:after,a.filter-chip[href]:hover:after,button.filter-chip:not([disabled],[aria-disabled=true]):hover:after,button.filter-chip[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):focus:after,a.filter-chip[href]:focus:after,button.filter-chip:not([disabled],[aria-disabled=true]):focus:after,button.filter-chip[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):active:after,a.filter-chip[href]:active:after,button.filter-chip:not([disabled],[aria-disabled=true]):active:after,button.filter-chip[href]:active:after{
+  background-color:var(--state-layer-pressed);
+}
 
 a.filter-chip--expressive,button.filter-chip--expressive{
   border-radius:var(--border-radius-150);
@@ -4182,6 +4204,24 @@ a.filter-chip--selected,button.filter-chip[aria-pressed=true]{
   animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
   background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
   color:var(--color-foreground-on-strong);
+  overflow:hidden;
+  position:relative;
+}
+a.filter-chip--selected:after,button.filter-chip[aria-pressed=true]:after{
+  background-color:var(--state-layer-neutral-on-strong);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):hover:after,a.filter-chip--selected[href]:hover:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):hover:after,button.filter-chip[aria-pressed=true][href]:hover:after{
+  background-color:var(--state-layer-hover-on-strong);
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):focus:after,a.filter-chip--selected[href]:focus:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):focus:after,button.filter-chip[aria-pressed=true][href]:focus:after{
+  background-color:var(--state-layer-focus-on-strong);
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):active:after,a.filter-chip--selected[href]:active:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):active:after,button.filter-chip[aria-pressed=true][href]:active:after{
+  background-color:var(--state-layer-pressed-on-strong);
 }
 
 button.filter-chip--animated[aria-pressed=true]{
@@ -5845,7 +5885,6 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
   bottom:0;
   left:0;
   -webkit-overflow-scrolling:touch;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -7522,7 +7561,6 @@ span.inline-notice{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -9177,7 +9215,6 @@ nav.pagination--fluid ol.pagination__items li{
   left:0;
   -webkit-overflow-scrolling:touch;
   flex-direction:column;
-  overflow-y:auto;
   overflow:hidden;
   position:fixed;
   right:0;
@@ -10478,7 +10515,9 @@ span.select{
   justify-content:space-between;
   max-width:296px;
   min-width:32px;
+  overflow:hidden;
   padding:0 var(--spacing-150);
+  position:relative;
   text-decoration:none;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
   vertical-align:bottom;
@@ -10486,6 +10525,22 @@ span.select{
 .selection-chip:active{
   transform:scale(.97);
 }
+.selection-chip:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+.selection-chip:not([disabled],[aria-disabled=true]):hover:after,.selection-chip[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+.selection-chip:not([disabled],[aria-disabled=true]):focus:after,.selection-chip[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+.selection-chip:not([disabled],[aria-disabled=true]):active:after,.selection-chip[href]:active:after{
+  background-color:var(--state-layer-pressed);
+}
 
 .selection-chip--animated .selection-chip__trailing{
   transition:rotate var(--motion-duration-medium-3) var(--motion-easing-standard);
@@ -10499,6 +10554,24 @@ span.select{
   animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
   background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
   color:var(--color-foreground-on-strong);
+  overflow:hidden;
+  position:relative;
+}
+.selection-chip[aria-pressed=true]:after{
+  background-color:var(--state-layer-neutral-on-strong);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):hover:after,.selection-chip[aria-pressed=true][href]:hover:after{
+  background-color:var(--state-layer-hover-on-strong);
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):focus:after,.selection-chip[aria-pressed=true][href]:focus:after{
+  background-color:var(--state-layer-focus-on-strong);
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):active:after,.selection-chip[aria-pressed=true][href]:active:after{
+  background-color:var(--state-layer-pressed-on-strong);
 }
 
 .selection-chip--animated[aria-pressed=true]{
@@ -11550,7 +11623,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 }
 
 .toast-dialog__window{
-  margin:var(--spacing-100) var(--spacing-200) var(--spacing-200);
+  padding:var(--spacing-100) var(--spacing-200) var(--spacing-200);
 }
 
 .toast-dialog__header{
@@ -11560,7 +11633,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 .toast-dialog__header h2,.toast-dialog__title{
   margin:0;
 }
-button.toast-dialog__close{
+button.icon-btn.toast-dialog__close{
   align-self:flex-start;
   border:0;
   color:var(--toast-dialog-foreground-color, var(--color-foreground-on-information));
@@ -11568,14 +11641,14 @@ button.toast-dialog__close{
   margin-inline-start:auto;
   padding:0;
 }
-button.toast-dialog__close:focus{
+button.icon-btn.toast-dialog__close:focus{
   outline:2px solid var(--color-foreground-on-information);
 }
-button.toast-dialog__close:focus,button.toast-dialog__close:hover{
+button.icon-btn.toast-dialog__close:focus,button.icon-btn.toast-dialog__close:hover{
   color:var(--color-state-primary-hover);
 }
 
-button.toast-dialog__close>svg{
+button.icon-btn.toast-dialog__close>svg{
   fill:currentColor;
 }
 
@@ -11631,7 +11704,7 @@ button.toast-dialog__close>svg{
     width:auto;
   }
   .toast-dialog__window{
-    margin:var(--spacing-200) var(--spacing-300) var(--spacing-300);
+    padding:var(--spacing-200) var(--spacing-300) var(--spacing-300);
   }
 }
 :root{

package/dist/bundles/skin-full.css

@@ -311,12 +311,19 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
   --color-marketing-magenta-foreground-4:var(--color-neutral-100);
   --color-marketing-magenta-background-4:var(--color-pink-400);
   --state-layer-neutral:rgb(var(--color-neutral-900-rgb), 0);
+  --state-layer-neutral-on-strong:rgb(var(--color-neutral-100-rgb), 0);
   --state-layer-focus:rgb(var(--color-neutral-900-rgb), var(--opacity-50));
   --state-layer-hover:rgb(var(--color-neutral-900-rgb), var(--opacity-50));
   --state-layer-pressed:rgb(
       var(--color-neutral-900-rgb),
       var(--opacity-100)
   );
+  --state-layer-focus-on-strong:rgb(var(--color-neutral-100-rgb), var(--opacity-150));
+  --state-layer-hover-on-strong:rgb(var(--color-neutral-100-rgb), var(--opacity-150));
+  --state-layer-pressed-on-strong:rgb(
+      var(--color-neutral-100-rgb),
+      var(--opacity-200)
+  );
   --state-layer-drag:rgb(var(--color-neutral-900-rgb), var(--opacity-150));
   --color-ai-gradient-full-spectrum:linear-gradient(
       223deg,
@@ -515,6 +522,7 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
     --color-scrim-image:rgba(255, 255, 255, 0.12);
     --color-scrim-background:rgba(0, 0, 0, 0.64);
     --state-layer-neutral:rgb(var(--color-neutral-100-rgb), 0);
+    --state-layer-neutral-on-strong:rgb(var(--color-neutral-900-rgb), 0);
     --state-layer-focus:rgb(
         var(--color-neutral-100-rgb),
         var(--opacity-50)
@@ -527,6 +535,12 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
         var(--color-neutral-100-rgb),
         var(--opacity-100)
     );
+    --state-layer-focus-on-strong:rgb(var(--color-neutral-900-rgb), var(--opacity-100));
+    --state-layer-hover-on-strong:rgb(var(--color-neutral-900-rgb), var(--opacity-100));
+    --state-layer-pressed-on-strong:rgb(
+        var(--color-neutral-900-rgb),
+        var(--opacity-150)
+    );
     --state-layer-drag:rgb(
         var(--color-neutral-100-rgb),
         var(--opacity-150)
@@ -875,7 +889,6 @@ ul.accordion--large summary.details__summary{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -2945,7 +2958,6 @@ span.combobox{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -3375,7 +3387,6 @@ details.details summary:focus:not(:focus-visible){
   left:0;
   -webkit-overflow-scrolling:touch;
   align-items:flex-end;
-  overflow-y:auto;
   overflow:hidden;
   position:fixed;
   right:0;
@@ -4329,7 +4340,9 @@ a.filter-chip,button.filter-chip{
   justify-content:space-between;
   max-width:296px;
   min-width:32px;
+  overflow:hidden;
   padding:0 var(--spacing-150);
+  position:relative;
   text-decoration:none;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
   vertical-align:bottom;
@@ -4337,6 +4350,22 @@ a.filter-chip,button.filter-chip{
 a.filter-chip:active,button.filter-chip:active{
   transform:scale(.97);
 }
+a.filter-chip:after,button.filter-chip:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):hover:after,a.filter-chip[href]:hover:after,button.filter-chip:not([disabled],[aria-disabled=true]):hover:after,button.filter-chip[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):focus:after,a.filter-chip[href]:focus:after,button.filter-chip:not([disabled],[aria-disabled=true]):focus:after,button.filter-chip[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):active:after,a.filter-chip[href]:active:after,button.filter-chip:not([disabled],[aria-disabled=true]):active:after,button.filter-chip[href]:active:after{
+  background-color:var(--state-layer-pressed);
+}
 
 a.filter-chip--expressive,button.filter-chip--expressive{
   border-radius:var(--border-radius-150);
@@ -4378,6 +4407,24 @@ a.filter-chip--selected,button.filter-chip[aria-pressed=true]{
   animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
   background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
   color:var(--color-foreground-on-strong);
+  overflow:hidden;
+  position:relative;
+}
+a.filter-chip--selected:after,button.filter-chip[aria-pressed=true]:after{
+  background-color:var(--state-layer-neutral-on-strong);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):hover:after,a.filter-chip--selected[href]:hover:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):hover:after,button.filter-chip[aria-pressed=true][href]:hover:after{
+  background-color:var(--state-layer-hover-on-strong);
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):focus:after,a.filter-chip--selected[href]:focus:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):focus:after,button.filter-chip[aria-pressed=true][href]:focus:after{
+  background-color:var(--state-layer-focus-on-strong);
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):active:after,a.filter-chip--selected[href]:active:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):active:after,button.filter-chip[aria-pressed=true][href]:active:after{
+  background-color:var(--state-layer-pressed-on-strong);
 }
 
 button.filter-chip--animated[aria-pressed=true]{
@@ -6041,7 +6088,6 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
   bottom:0;
   left:0;
   -webkit-overflow-scrolling:touch;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -7718,7 +7764,6 @@ span.inline-notice{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -9373,7 +9418,6 @@ nav.pagination--fluid ol.pagination__items li{
   left:0;
   -webkit-overflow-scrolling:touch;
   flex-direction:column;
-  overflow-y:auto;
   overflow:hidden;
   position:fixed;
   right:0;
@@ -10674,7 +10718,9 @@ span.select{
   justify-content:space-between;
   max-width:296px;
   min-width:32px;
+  overflow:hidden;
   padding:0 var(--spacing-150);
+  position:relative;
   text-decoration:none;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
   vertical-align:bottom;
@@ -10682,6 +10728,22 @@ span.select{
 .selection-chip:active{
   transform:scale(.97);
 }
+.selection-chip:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+.selection-chip:not([disabled],[aria-disabled=true]):hover:after,.selection-chip[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+.selection-chip:not([disabled],[aria-disabled=true]):focus:after,.selection-chip[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+.selection-chip:not([disabled],[aria-disabled=true]):active:after,.selection-chip[href]:active:after{
+  background-color:var(--state-layer-pressed);
+}
 
 .selection-chip--animated .selection-chip__trailing{
   transition:rotate var(--motion-duration-medium-3) var(--motion-easing-standard);
@@ -10695,6 +10757,24 @@ span.select{
   animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
   background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
   color:var(--color-foreground-on-strong);
+  overflow:hidden;
+  position:relative;
+}
+.selection-chip[aria-pressed=true]:after{
+  background-color:var(--state-layer-neutral-on-strong);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):hover:after,.selection-chip[aria-pressed=true][href]:hover:after{
+  background-color:var(--state-layer-hover-on-strong);
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):focus:after,.selection-chip[aria-pressed=true][href]:focus:after{
+  background-color:var(--state-layer-focus-on-strong);
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):active:after,.selection-chip[aria-pressed=true][href]:active:after{
+  background-color:var(--state-layer-pressed-on-strong);
 }
 
 .selection-chip--animated[aria-pressed=true]{
@@ -11746,7 +11826,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 }
 
 .toast-dialog__window{
-  margin:var(--spacing-100) var(--spacing-200) var(--spacing-200);
+  padding:var(--spacing-100) var(--spacing-200) var(--spacing-200);
 }
 
 .toast-dialog__header{
@@ -11756,7 +11836,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 .toast-dialog__header h2,.toast-dialog__title{
   margin:0;
 }
-button.toast-dialog__close{
+button.icon-btn.toast-dialog__close{
   align-self:flex-start;
   border:0;
   color:var(--toast-dialog-foreground-color, var(--color-foreground-on-information));
@@ -11764,14 +11844,14 @@ button.toast-dialog__close{
   margin-inline-start:auto;
   padding:0;
 }
-button.toast-dialog__close:focus{
+button.icon-btn.toast-dialog__close:focus{
   outline:2px solid var(--color-foreground-on-information);
 }
-button.toast-dialog__close:focus,button.toast-dialog__close:hover{
+button.icon-btn.toast-dialog__close:focus,button.icon-btn.toast-dialog__close:hover{
   color:var(--color-state-primary-hover);
 }
 
-button.toast-dialog__close>svg{
+button.icon-btn.toast-dialog__close>svg{
   fill:currentColor;
 }
 
@@ -11827,7 +11907,7 @@ button.toast-dialog__close>svg{
     width:auto;
   }
   .toast-dialog__window{
-    margin:var(--spacing-200) var(--spacing-300) var(--spacing-300);
+    padding:var(--spacing-200) var(--spacing-300) var(--spacing-300);
   }
 }
 :root{

package/dist/bundles/skin-headless.css

@@ -256,7 +256,6 @@ ul.accordion--large summary.details__summary{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -2326,7 +2325,6 @@ span.combobox{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -2756,7 +2754,6 @@ details.details summary:focus:not(:focus-visible){
   left:0;
   -webkit-overflow-scrolling:touch;
   align-items:flex-end;
-  overflow-y:auto;
   overflow:hidden;
   position:fixed;
   right:0;
@@ -3710,7 +3707,9 @@ a.filter-chip,button.filter-chip{
   justify-content:space-between;
   max-width:296px;
   min-width:32px;
+  overflow:hidden;
   padding:0 var(--spacing-150);
+  position:relative;
   text-decoration:none;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
   vertical-align:bottom;
@@ -3718,6 +3717,22 @@ a.filter-chip,button.filter-chip{
 a.filter-chip:active,button.filter-chip:active{
   transform:scale(.97);
 }
+a.filter-chip:after,button.filter-chip:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):hover:after,a.filter-chip[href]:hover:after,button.filter-chip:not([disabled],[aria-disabled=true]):hover:after,button.filter-chip[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):focus:after,a.filter-chip[href]:focus:after,button.filter-chip:not([disabled],[aria-disabled=true]):focus:after,button.filter-chip[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+a.filter-chip:not([disabled],[aria-disabled=true]):active:after,a.filter-chip[href]:active:after,button.filter-chip:not([disabled],[aria-disabled=true]):active:after,button.filter-chip[href]:active:after{
+  background-color:var(--state-layer-pressed);
+}
 
 a.filter-chip--expressive,button.filter-chip--expressive{
   border-radius:var(--border-radius-150);
@@ -3759,6 +3774,24 @@ a.filter-chip--selected,button.filter-chip[aria-pressed=true]{
   animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
   background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
   color:var(--color-foreground-on-strong);
+  overflow:hidden;
+  position:relative;
+}
+a.filter-chip--selected:after,button.filter-chip[aria-pressed=true]:after{
+  background-color:var(--state-layer-neutral-on-strong);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):hover:after,a.filter-chip--selected[href]:hover:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):hover:after,button.filter-chip[aria-pressed=true][href]:hover:after{
+  background-color:var(--state-layer-hover-on-strong);
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):focus:after,a.filter-chip--selected[href]:focus:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):focus:after,button.filter-chip[aria-pressed=true][href]:focus:after{
+  background-color:var(--state-layer-focus-on-strong);
+}
+a.filter-chip--selected:not([disabled],[aria-disabled=true]):active:after,a.filter-chip--selected[href]:active:after,button.filter-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):active:after,button.filter-chip[aria-pressed=true][href]:active:after{
+  background-color:var(--state-layer-pressed-on-strong);
 }
 
 button.filter-chip--animated[aria-pressed=true]{
@@ -5422,7 +5455,6 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
   bottom:0;
   left:0;
   -webkit-overflow-scrolling:touch;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -7099,7 +7131,6 @@ span.inline-notice{
   -webkit-overflow-scrolling:touch;
   align-items:flex-start;
   justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -8754,7 +8785,6 @@ nav.pagination--fluid ol.pagination__items li{
   left:0;
   -webkit-overflow-scrolling:touch;
   flex-direction:column;
-  overflow-y:auto;
   overflow:hidden;
   position:fixed;
   right:0;
@@ -10055,7 +10085,9 @@ span.select{
   justify-content:space-between;
   max-width:296px;
   min-width:32px;
+  overflow:hidden;
   padding:0 var(--spacing-150);
+  position:relative;
   text-decoration:none;
   transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
   vertical-align:bottom;
@@ -10063,6 +10095,22 @@ span.select{
 .selection-chip:active{
   transform:scale(.97);
 }
+.selection-chip:after{
+  background-color:var(--state-layer-neutral);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+.selection-chip:not([disabled],[aria-disabled=true]):hover:after,.selection-chip[href]:hover:after{
+  background-color:var(--state-layer-hover);
+}
+.selection-chip:not([disabled],[aria-disabled=true]):focus:after,.selection-chip[href]:focus:after{
+  background-color:var(--state-layer-focus);
+}
+.selection-chip:not([disabled],[aria-disabled=true]):active:after,.selection-chip[href]:active:after{
+  background-color:var(--state-layer-pressed);
+}
 
 .selection-chip--animated .selection-chip__trailing{
   transition:rotate var(--motion-duration-medium-3) var(--motion-easing-standard);
@@ -10076,6 +10124,24 @@ span.select{
   animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
   background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
   color:var(--color-foreground-on-strong);
+  overflow:hidden;
+  position:relative;
+}
+.selection-chip[aria-pressed=true]:after{
+  background-color:var(--state-layer-neutral-on-strong);
+  content:"";
+  inset:0;
+  pointer-events:none;
+  position:absolute;
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):hover:after,.selection-chip[aria-pressed=true][href]:hover:after{
+  background-color:var(--state-layer-hover-on-strong);
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):focus:after,.selection-chip[aria-pressed=true][href]:focus:after{
+  background-color:var(--state-layer-focus-on-strong);
+}
+.selection-chip[aria-pressed=true]:not([disabled],[aria-disabled=true]):active:after,.selection-chip[aria-pressed=true][href]:active:after{
+  background-color:var(--state-layer-pressed-on-strong);
 }
 
 .selection-chip--animated[aria-pressed=true]{
@@ -11127,7 +11193,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 }
 
 .toast-dialog__window{
-  margin:var(--spacing-100) var(--spacing-200) var(--spacing-200);
+  padding:var(--spacing-100) var(--spacing-200) var(--spacing-200);
 }
 
 .toast-dialog__header{
@@ -11137,7 +11203,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
 .toast-dialog__header h2,.toast-dialog__title{
   margin:0;
 }
-button.toast-dialog__close{
+button.icon-btn.toast-dialog__close{
   align-self:flex-start;
   border:0;
   color:var(--toast-dialog-foreground-color, var(--color-foreground-on-information));
@@ -11145,14 +11211,14 @@ button.toast-dialog__close{
   margin-inline-start:auto;
   padding:0;
 }
-button.toast-dialog__close:focus{
+button.icon-btn.toast-dialog__close:focus{
   outline:2px solid var(--color-foreground-on-information);
 }
-button.toast-dialog__close:focus,button.toast-dialog__close:hover{
+button.icon-btn.toast-dialog__close:focus,button.icon-btn.toast-dialog__close:hover{
   color:var(--color-state-primary-hover);
 }
 
-button.toast-dialog__close>svg{
+button.icon-btn.toast-dialog__close>svg{
   fill:currentColor;
 }
 
@@ -11208,7 +11274,7 @@ button.toast-dialog__close>svg{
     width:auto;
   }
   .toast-dialog__window{
-    margin:var(--spacing-200) var(--spacing-300) var(--spacing-300);
+    padding:var(--spacing-200) var(--spacing-300) var(--spacing-300);
   }
 }
 :root{

package/dist/confirm-dialog/confirm-dialog.css

@@ -10,7 +10,6 @@
     -webkit-overflow-scrolling: touch;
     align-items: flex-start;
     justify-content: center;
-    overflow-y: auto;
     position: fixed;
     right: 0;
     top: 0;