@ebay/skin 19.12.1 → 19.14.0

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)
@@ -869,13 +883,12 @@ ul.accordion--large summary.details__summary{
   --dialog-lightbox-max-width:616px;
 }
 .alert-dialog[role=alertdialog]{
+  align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
+  justify-content:center;
   left:0;
   -webkit-overflow-scrolling:touch;
-  align-items:flex-start;
-  justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -1398,17 +1411,19 @@ a.fake-btn__cell--fixed-height svg.icon,button.btn__cell--fixed-height svg.icon{
 }
 
 a.fake-btn--primary,button.btn--primary{
-  background-color:var(--btn-primary-background-color, var(--color-background-accent));
-  border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
-  color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
+  background-color:var(--color-background-accent);
+  border-color:var(--color-stroke-accent);
+  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,button.btn--primary{
+  overflow:hidden;
+  position:relative;
+}
 a.fake-btn--primary:after,button.btn--primary:after{
   background-color:var(--state-layer-neutral);
   content:"";
@@ -1431,13 +1446,13 @@ a.fake-btn--primary{
 }
 
 a.fake-btn--primary:visited{
-  color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
+  color:var(--color-foreground-on-accent);
 }
 
 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));
+  background-color:var(--color-background-attention);
+  border-color:var(--color-stroke-attention);
+  color:var(--color-foreground-on-attention);
   font-weight:700;
   overflow:hidden;
   position:relative;
@@ -1460,8 +1475,8 @@ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):a
 }
 
 button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
-  background-color:var(--btn-primary-destructive-disabled-background, var(--color-background-disabled));
-  border-color:var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
+  background-color:var(--color-background-disabled);
+  border-color:var(--color-stroke-disabled);
 }
 
 button.btn .progress-spinner{
@@ -1514,15 +1529,17 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
 
 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;
+  border-color:var(--color-stroke-accent);
+  color:var(--color-foreground-accent);
   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,button.btn--secondary{
+  overflow:hidden;
+  position:relative;
+}
 a.fake-btn--secondary:after,button.btn--secondary:after{
   background-color:var(--state-layer-neutral);
   content:"";
@@ -1571,13 +1588,15 @@ 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,button.btn--tertiary{
+  overflow:hidden;
+  position:relative;
+}
 a.fake-btn--tertiary:after,button.btn--tertiary:after{
   background-color:var(--state-layer-neutral);
   content:"";
@@ -2708,8 +2727,8 @@ span.combobox{
 }
 
 .combobox__listbox{
-  background-color:var(--combobox-listbox-background-color, var(--color-background-elevated));
-  border-radius:var(--combobox-listbox-border-radius, var(--border-radius-50));
+  background-color:var(--color-background-elevated);
+  border-radius:var(--border-radius-50);
   box-shadow:var(--bubble-shadow);
   box-sizing:border-box;
   display:none;
@@ -2746,11 +2765,11 @@ span.combobox{
 
 .combobox__option[role^=option]{
   background-color:initial;
-  border-color:var(--listbox-option-border-color, var(--color-background-primary));
+  border-color:var(--color-background-primary);
   border-style:solid;
   border-width:1px;
   box-sizing:border-box;
-  color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
+  color:var(--color-foreground-primary);
   cursor:default;
   display:inline-grid;
   font-family:inherit;
@@ -2767,7 +2786,7 @@ span.combobox{
   display:none;
 }
 .combobox__option[role^=option]:hover{
-  color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
+  color:var(--color-foreground-primary);
 }
 .combobox__option[role^=option]:active{
   font-weight:700;
@@ -2939,13 +2958,12 @@ span.combobox{
 }
 
 .confirm-dialog[role=dialog]{
+  align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
+  justify-content:center;
   left:0;
   -webkit-overflow-scrolling:touch;
-  align-items:flex-start;
-  justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -3370,13 +3388,12 @@ details.details summary:focus:not(:focus-visible){
 }
 /*! DEPRECATED COMPONENT. Will be removed next major version */
 .drawer-dialog[role=dialog]{
+  align-items:flex-end;
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
   left:0;
-  -webkit-overflow-scrolling:touch;
-  align-items:flex-end;
-  overflow-y:auto;
   overflow:hidden;
+  -webkit-overflow-scrolling:touch;
   position:fixed;
   right:0;
   top:0;
@@ -4225,12 +4242,11 @@ span.file-input__content-cta{
 
 a.filter-link,button.filter-button{
   align-items:center;
-  background-color:var(--filter-button-background-color, var(--color-background-secondary));
+  background-color:var(--color-background-secondary);
   border:1px solid transparent;
-  border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
   border-radius:16px;
   box-sizing:border-box;
-  color:var(--filter-button-foreground-color, var(--color-foreground-primary));
+  color:var(--color-foreground-primary);
   display:inline-flex;
   flex:0 1 auto;
   flex-direction:column;
@@ -4337,6 +4353,26 @@ a.filter-chip,button.filter-chip{
 a.filter-chip:active,button.filter-chip:active{
   transform:scale(.97);
 }
+a.filter-chip,button.filter-chip{
+  overflow:hidden;
+  position:relative;
+}
+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);
@@ -4345,8 +4381,8 @@ a.filter-chip--expressive,button.filter-chip--expressive{
 
 .filter-chip__media{
   align-items:center;
-  border-radius:8px;
   border-radius:var(--spacing-400);
+  border-radius:8px;
   display:flex;
   justify-content:center;
   margin-inline-start:-8px;
@@ -4378,6 +4414,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]{
@@ -4642,12 +4696,11 @@ span.filter-menu-button+span.filter-menu-button{
 
 button.filter-menu-button__button{
   align-items:center;
-  background-color:var(--filter-button-background-color, var(--color-background-secondary));
+  background-color:var(--color-background-secondary);
   border:1px solid transparent;
-  border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
   border-radius:16px;
   box-sizing:border-box;
-  color:var(--filter-button-foreground-color, var(--color-foreground-primary));
+  color:var(--color-foreground-primary);
   display:inline-flex;
   flex:0 1 auto;
   flex-direction:column;
@@ -4667,7 +4720,7 @@ button.filter-menu-button__button+button.filter-menu-button__button{
   margin-left:8px;
 }
 button.filter-menu-button__button:active,button.filter-menu-button__button:focus,button.filter-menu-button__button:hover{
-  background-color:var(--filter-button-background-color, var(--color-state-secondary-hover));
+  background-color:var(--color-state-secondary-hover);
 }
 
 .filter-menu-button__button-cell{
@@ -4789,8 +4842,6 @@ span.filter-menu-button__radio svg.icon--checked{
   justify-content:space-between;
   line-height:1.4em;
   margin:0;
-  outline-offset:-4px;
-  padding:8px 16px;
   width:100%;
 }
 .filter-menu-button__item:hover{
@@ -4805,6 +4856,10 @@ span.filter-menu-button__radio svg.icon--checked{
 .filter-menu-button__item:disabled:hover,.filter-menu-button__item[aria-disabled=true]:hover{
   background-color:inherit;
 }
+.filter-menu-button__item{
+  outline-offset:-4px;
+  padding:8px 16px;
+}
 .filter-menu-button__item:hover{
   background-color:var(--color-state-primary-hover);
 }
@@ -4837,8 +4892,9 @@ span.filter-menu-button__item{
 button.filter-menu-button__footer{
   background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
   border:none;
-  border-top:1px solid;
-  border-color:var(--filter-menu-border-color, var(--color-stroke-subtle));
+  border-color:var(--color-stroke-subtle);
+  border-top-style:solid;
+  border-top-width:1px;
   bottom:0;
   box-sizing:border-box;
   color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -6041,7 +6097,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;
@@ -6294,10 +6349,12 @@ a.icon-link>svg{
 }
 
 a.icon-link,button.icon-btn{
-  background-color:var(--icon-button-background-color, var(--color-background-secondary));
+  align-items:center;
+  background-color:var(--color-background-secondary);
   border:2px solid transparent;
   border-radius:50px;
   box-sizing:border-box;
+  display:inline-flex;
   font-family:inherit;
   height:40px;
   justify-content:center;
@@ -6307,7 +6364,7 @@ a.icon-link,button.icon-btn{
   width:40px;
 }
 a.icon-link>svg,button.icon-btn>svg{
-  fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
+  fill:var(--color-foreground-primary);
   max-width:75%;
   position:relative;
 }
@@ -6322,17 +6379,17 @@ a.icon-link:not(:focus-visible),button.icon-btn:not(:focus-visible){
 }
 
 a.icon-link.icon-link--primary,button.icon-btn.icon-btn--primary{
-  background-color:var(--btn-primary-background-color, var(--color-background-accent));
-  border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
-  color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
+  background-color:var(--color-background-accent);
+  border-color:var(--color-stroke-accent);
+  color:var(--color-foreground-on-accent);
 }
 
 a.icon-link.icon-link--primary>svg,button.icon-btn.icon-btn--primary>svg{
-  fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
+  fill:var(--color-foreground-on-accent);
 }
 
 a.icon-link.icon-link--secondary>svg,button.icon-btn.icon-btn--secondary>svg{
-  fill:var(--icon-button-icon-foreground-color, var(--color-foreground-accent));
+  fill:var(--color-foreground-accent);
 }
 
 a.icon-link.icon-link--small .progress-spinner,button.icon-btn.icon-btn--small .progress-spinner{
@@ -6358,7 +6415,7 @@ a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparen
 }
 
 a.icon-link:visited>svg{
-  fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
+  fill:var(--color-foreground-primary);
 }
 
 a:not([href]).icon-link>svg,a[aria-disabled=true].icon-link>svg,button[aria-disabled=true].icon-btn>svg,button[disabled].icon-btn>svg{
@@ -6370,11 +6427,11 @@ a:not([href]).icon-link:focus>svg,a:not([href]).icon-link:hover>svg,a[aria-disab
 }
 
 a.icon-link:visited:focus>svg,a.icon-link:visited:hover>svg{
-  fill:var(--icon-button-icon-hover-foreground-color, var(--color-foreground-primary));
+  fill:var(--color-foreground-primary);
 }
 
 a.icon-link.icon-link--primary:visited>svg{
-  fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
+  fill:var(--color-foreground-on-accent);
 }
 
 a.icon-link--badged,button.icon-btn--badged{
@@ -6403,12 +6460,12 @@ a.icon-link.icon-link--primary,a.icon-link.icon-link--secondary,a.icon-link.icon
 }
 
 a:not([href]).icon-link.icon-link--primary,a[aria-disabled=true].icon-link.icon-link--primary,button[aria-disabled=true].icon-btn.icon-btn--primary,button[disabled].icon-btn.icon-btn--primary{
-  background-color:var(--icon-button-disabled-background-color, var(--color-background-disabled));
-  border-color:var(--btn-primary-disabled-border-color, var(--color-stroke-disabled));
+  background-color:var(--color-background-disabled);
+  border-color:var(--color-stroke-disabled);
 }
 
 a:not([href]).icon-link.icon-link--primary>svg,a[aria-disabled=true].icon-link.icon-link--primary>svg,button[aria-disabled=true].icon-btn.icon-btn--primary>svg,button[disabled].icon-btn.icon-btn--primary>svg{
-  fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
+  fill:var(--color-foreground-on-accent);
 }
 
 a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--primary .progress-spinner{
@@ -6418,8 +6475,8 @@ a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--prima
 
 a.icon-link.icon-link--secondary,button.icon-btn.icon-btn--secondary{
   background-color:initial;
-  border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
-  color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
+  border-color:var(--color-stroke-accent);
+  color:var(--color-foreground-accent);
 }
 
 a.icon-link.icon-link--primary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--primary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--primary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--primary:not([disabled],[aria-disabled=true]):hover{
@@ -6435,11 +6492,11 @@ a.icon-link.icon-link--secondary .progress-spinner,a.icon-link.icon-link--tertia
 }
 
 a:not([href]).icon-link.icon-link--secondary,a[aria-disabled=true].icon-link.icon-link--secondary,button[aria-disabled=true].icon-btn.icon-btn--secondary,button[disabled].icon-btn.icon-btn--secondary{
-  border-color:var(--btn-secondary-disabled-border-color, var(--color-stroke-disabled));
+  border-color:var(--color-stroke-disabled);
 }
 
 a:not([href]).icon-link.icon-blinktn--secondary>svg,a[aria-disabled=true].icon-link.icon-link--secondary>svg,button[aria-disabled=true].icon-btn.icon-btn--secondary>svg,button[disabled].icon-btn.icon-btn--secondary>svg{
-  fill:var(--icon-button-icon-foreground-color, var(--color-foreground-disabled));
+  fill:var(--color-foreground-disabled);
 }
 
 a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--secondary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--secondary:not([disabled],[aria-disabled=true]):hover{
@@ -6451,12 +6508,12 @@ a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):active,but
 
 a.icon-link.icon-link--tertiary,button.icon-btn.icon-btn--tertiary{
   background-color:initial;
-  border-color:var(--btn-primary-border-color, var(--color-stroke-default));
-  color:var(--btn-primary-foreground-color, var(--color-foreground-accent));
+  border-color:var(--color-stroke-default);
+  color:var(--color-foreground-accent);
 }
 
 a:not([href]).icon-link.icon-link--tertiary,a[aria-disabled=true].icon-link.icon-link--tertiary,button[aria-disabled=true].icon-btn.icon-btn--tertiary,button[disabled].icon-btn.icon-btn--tertiary{
-  border-color:var(--btn-tertiary-disabled-border-color, var(--color-stroke-disabled));
+  border-color:var(--color-stroke-disabled);
 }
 
 a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):hover{
@@ -7712,13 +7769,12 @@ span.inline-notice{
 }
 
 .lightbox-dialog[role=dialog]{
+  align-items:flex-start;
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
+  justify-content:center;
   left:0;
   -webkit-overflow-scrolling:touch;
-  align-items:flex-start;
-  justify-content:center;
-  overflow-y:auto;
   position:fixed;
   right:0;
   top:0;
@@ -8146,11 +8202,11 @@ div.listbox__options--reverse[role=listbox]{
 
 div.listbox__option[role=option]{
   background-color:initial;
-  border-color:var(--listbox-option-border-color, var(--color-background-primary));
+  border-color:var(--color-background-primary);
   border-style:solid;
   border-width:1px;
   box-sizing:border-box;
-  color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
+  color:var(--color-foreground-primary);
   display:inline-grid;
   font-family:inherit;
   grid-template-columns:auto auto;
@@ -8169,7 +8225,7 @@ div.listbox__option[role=option][hidden]{
 }
 div.listbox__option[role=option]:hover{
   background-color:var(--color-state-primary-hover);
-  color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
+  color:var(--color-foreground-primary);
 }
 div.listbox__option[role=option]:active{
   font-weight:700;
@@ -8187,12 +8243,12 @@ span.listbox__value{
 
 div.listbox__option svg.icon{
   align-self:center;
+  margin-inline-start:var(--spacing-100);
   fill:currentColor;
   margin:0 auto;
   opacity:0;
   stroke:currentColor;
   stroke-width:0;
-  margin-inline-start:var(--spacing-100);
 }
 
 div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
@@ -8226,8 +8282,8 @@ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--
 }
 
 div.listbox-button__listbox{
-  background-color:var(--listbox-button-listbox-background-color, var(--color-background-elevated));
-  border-radius:var(--listbox-button-listbox-border-radius, var(--border-radius-50));
+  background-color:var(--color-background-elevated);
+  border-radius:var(--border-radius-50);
   box-shadow:var(--bubble-shadow);
   box-sizing:border-box;
   display:none;
@@ -8356,11 +8412,11 @@ div.listbox-button__option[role=option][aria-selected=true] svg.icon{
 
 div.listbox-button__option[role=option]{
   background-color:initial;
-  border-color:var(--listbox-option-border-color, var(--color-background-primary));
+  border-color:var(--color-background-primary);
   border-style:solid;
   border-width:1px;
   box-sizing:border-box;
-  color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
+  color:var(--color-foreground-primary);
   cursor:default;
   display:inline-grid;
   font-family:inherit;
@@ -8380,7 +8436,7 @@ div.listbox-button__option[role=option][hidden]{
 }
 div.listbox-button__option[role=option]:hover{
   background-color:var(--color-state-primary-hover);
-  color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
+  color:var(--color-foreground-primary);
 }
 div.listbox-button__option[role=option]:active{
   font-weight:700;
@@ -8768,8 +8824,8 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
 }
 
 .fake-menu-button__menu,.menu-button__menu{
-  background-color:var(--menu-button-menu-background-color, var(--color-background-elevated));
-  border-radius:var(--menu-button-menu-border-radius, var(--border-radius-50));
+  background-color:var(--color-background-elevated);
+  border-radius:var(--border-radius-50);
   box-shadow:var(--bubble-shadow);
   box-sizing:border-box;
   display:none;
@@ -9370,11 +9426,10 @@ nav.pagination--fluid ol.pagination__items li{
 .panel-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
-  left:0;
-  -webkit-overflow-scrolling:touch;
   flex-direction:column;
-  overflow-y:auto;
+  left:0;
   overflow:hidden;
+  -webkit-overflow-scrolling:touch;
   position:fixed;
   right:0;
   top:0;
@@ -10120,6 +10175,7 @@ hr.progress-stepper__separator{
   min-width:inherit;
   width:4px;
 }
+
 [dir=rtl] .progress-stepper__item:first-child .progress-stepper__text{
   text-align:right;
 }
@@ -10254,7 +10310,7 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
 
 div[role=region].section-notice,section.section-notice{
   display:grid;
-  grid-template-columns:32px auto auto auto;
+  grid-template-columns:32px auto min-content min-content;
 }
 .section-notice--education{
   background-color:var(--section-notice-education-background-color, var(--color-background-education));
@@ -10346,15 +10402,13 @@ p.section-notice__cta{
     grid-column:4;
     grid-row:1;
     justify-self:flex-end;
-    margin-right:var(--spacing-200);
     margin-top:0;
-    padding-right:var(--spacing-200);
   }
   .section-notice__header~.section-notice__cta{
-    grid-column:4;
+    grid-column:3;
   }
   .section-notice__footer{
-    padding-left:var(--spacing-200);
+    padding-inline-start:var(--spacing-200);
   }
 }
 [dir=rtl] .section-notice__footer{
@@ -10362,15 +10416,10 @@ p.section-notice__cta{
   margin-left:0;
   margin-right:auto;
   padding-left:0;
-  padding-right:0;
 }
 [dir=rtl] .section-notice__main{
   padding-right:0;
 }
-[dir=rtl] p.section-notice__cta{
-  margin-left:16px;
-  padding-left:16px;
-}
 .section-notice__header:has(svg[class*="24"]){
   height:var(--spacing-300);
 }
@@ -10682,6 +10731,26 @@ span.select{
 .selection-chip:active{
   transform:scale(.97);
 }
+.selection-chip{
+  overflow:hidden;
+  position:relative;
+}
+.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 +10764,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 +11833,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 +11843,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 +11851,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 +11914,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{