@ebay/skin 19.12.0 → 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,
@@ -352,7 +359,7 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
   --color-ai-gradient-blue-subtle:linear-gradient(
       270deg,
       var(--color-ai-solid-green-subtle) -36%,
-      var(--color-ai-solid-blue-subtle) -46.87%,
+      var(--color-ai-solid-blue-subtle) 38.5%,
       var(--color-ai-solid-purple-subtle) 113%
   );
   --color-ai-gradient-green-subtle:linear-gradient(
@@ -387,27 +394,19 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
   );
   --color-loading-ai-gradient-purple-subtle:linear-gradient(
       270deg,
-      var(--color-ai-solid-red-subtle) 0%,
-      var(--color-ai-solid-red-subtle) 34%,
-      var(--color-ai-solid-purple-subtle) 50%,
-      var(--color-ai-solid-red-subtle) 66%,
+      var(--color-ai-solid-purple-subtle) 0%,
       var(--color-ai-solid-red-subtle) 100%
   );
   --color-loading-ai-gradient-blue-subtle:linear-gradient(
       270deg,
-      var(--color-ai-solid-blue-subtle) 0%,
-      var(--color-ai-solid-blue-subtle) 34%,
-      var(--color-ai-solid-purple-subtle) 50%,
-      var(--color-ai-solid-blue-subtle) 66%,
-      var(--color-ai-solid-blue-subtle) 100%
+      var(--color-ai-solid-green-subtle) -36%,
+      var(--color-ai-solid-blue-subtle) 38.5%,
+      var(--color-ai-solid-purple-subtle) 113%
   );
   --color-loading-ai-gradient-green-subtle:linear-gradient(
       270deg,
       var(--color-ai-solid-green-subtle) 0%,
-      var(--color-ai-solid-green-subtle) 34%,
-      var(--color-ai-solid-blue-subtle) 50%,
-      var(--color-ai-solid-green-subtle) 66%,
-      var(--color-ai-solid-green-subtle) 100%
+      var(--color-ai-solid-blue-subtle) 154.5%
   );
   --color-media-disabled-filter:grayscale(1) opacity(0.25);
   --motion-easing-standard:cubic-bezier(0.3, 0, 0, 1);
@@ -687,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;
@@ -2757,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;
@@ -3187,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;
@@ -4141,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;
@@ -4149,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);
@@ -4190,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]{
@@ -5853,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;
@@ -7530,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;
@@ -9185,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;
@@ -10486,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;
@@ -10494,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);
@@ -10507,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]{
@@ -11558,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{
@@ -11568,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));
@@ -11576,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;
 }
 
@@ -11639,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,
@@ -352,7 +359,7 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
   --color-ai-gradient-blue-subtle:linear-gradient(
       270deg,
       var(--color-ai-solid-green-subtle) -36%,
-      var(--color-ai-solid-blue-subtle) -46.87%,
+      var(--color-ai-solid-blue-subtle) 38.5%,
       var(--color-ai-solid-purple-subtle) 113%
   );
   --color-ai-gradient-green-subtle:linear-gradient(
@@ -387,27 +394,19 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
   );
   --color-loading-ai-gradient-purple-subtle:linear-gradient(
       270deg,
-      var(--color-ai-solid-red-subtle) 0%,
-      var(--color-ai-solid-red-subtle) 34%,
-      var(--color-ai-solid-purple-subtle) 50%,
-      var(--color-ai-solid-red-subtle) 66%,
+      var(--color-ai-solid-purple-subtle) 0%,
       var(--color-ai-solid-red-subtle) 100%
   );
   --color-loading-ai-gradient-blue-subtle:linear-gradient(
       270deg,
-      var(--color-ai-solid-blue-subtle) 0%,
-      var(--color-ai-solid-blue-subtle) 34%,
-      var(--color-ai-solid-purple-subtle) 50%,
-      var(--color-ai-solid-blue-subtle) 66%,
-      var(--color-ai-solid-blue-subtle) 100%
+      var(--color-ai-solid-green-subtle) -36%,
+      var(--color-ai-solid-blue-subtle) 38.5%,
+      var(--color-ai-solid-purple-subtle) 113%
   );
   --color-loading-ai-gradient-green-subtle:linear-gradient(
       270deg,
       var(--color-ai-solid-green-subtle) 0%,
-      var(--color-ai-solid-green-subtle) 34%,
-      var(--color-ai-solid-blue-subtle) 50%,
-      var(--color-ai-solid-green-subtle) 66%,
-      var(--color-ai-solid-green-subtle) 100%
+      var(--color-ai-solid-blue-subtle) 154.5%
   );
   --color-media-disabled-filter:grayscale(1) opacity(0.25);
   --motion-easing-standard:cubic-bezier(0.3, 0, 0, 1);
@@ -523,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)
@@ -535,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)
@@ -577,7 +583,7 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
     --color-ai-gradient-blue-subtle:linear-gradient(
         270deg,
         var(--color-ai-solid-green-subtle) -36%,
-        var(--color-ai-solid-blue-subtle) -46.87%,
+        var(--color-ai-solid-blue-subtle) 38.5%,
         var(--color-ai-solid-purple-subtle) 113%
     );
     --color-ai-gradient-green-subtle:linear-gradient(
@@ -610,27 +616,19 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
     );
     --color-loading-ai-gradient-purple-subtle:linear-gradient(
         270deg,
-        var(--color-ai-solid-red-subtle-dark) 0%,
-        var(--color-ai-solid-red-subtle-dark) 34%,
-        var(--color-ai-solid-purple-subtle-dark) 50%,
-        var(--color-ai-solid-red-subtle-dark) 66%,
+        var(--color-ai-solid-purple-subtle-dark) 0%,
         var(--color-ai-solid-red-subtle-dark) 100%
     );
     --color-loading-ai-gradient-blue-subtle:linear-gradient(
         270deg,
-        var(--color-ai-solid-blue-subtle-dark) 0%,
-        var(--color-ai-solid-blue-subtle-dark) 34%,
-        var(--color-ai-solid-purple-subtle-dark) 50%,
-        var(--color-ai-solid-blue-subtle-dark) 66%,
-        var(--color-ai-solid-blue-subtle-dark) 100%
+        var(--color-ai-solid-green-subtle-dark) -36%,
+        var(--color-ai-solid-blue-subtle-dark) 38.5%,
+        var(--color-ai-solid-purple-subtle-dark) 113%
     );
     --color-loading-ai-gradient-green-subtle:linear-gradient(
         270deg,
         var(--color-ai-solid-green-subtle-dark) 0%,
-        var(--color-ai-solid-green-subtle-dark) 34%,
-        var(--color-ai-solid-blue-subtle-dark) 50%,
-        var(--color-ai-solid-green-subtle-dark) 66%,
-        var(--color-ai-solid-green-subtle-dark) 100%
+        var(--color-ai-solid-blue-subtle-dark) 154.5%
     );
   }
 }
@@ -891,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;
@@ -2961,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;
@@ -3391,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;
@@ -4345,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;
@@ -4353,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);
@@ -4394,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]{
@@ -6057,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;
@@ -7734,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;
@@ -9389,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;
@@ -10690,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;
@@ -10698,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);
@@ -10711,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]{
@@ -11762,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{
@@ -11772,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));
@@ -11780,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;
 }
 
@@ -11843,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{