@ebay/skin 19.12.1 → 19.14.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,
@@ -673,13 +680,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;
@@ -1202,17 +1208,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:"";
@@ -1235,13 +1243,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;
@@ -1264,8 +1272,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{
@@ -1318,15 +1326,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:"";
@@ -1375,13 +1385,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:"";
@@ -2512,8 +2524,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;
@@ -2550,11 +2562,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;
@@ -2571,7 +2583,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;
@@ -2743,13 +2755,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;
@@ -3174,13 +3185,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;
@@ -4029,12 +4039,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;
@@ -4141,6 +4150,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);
@@ -4149,8 +4178,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;
@@ -4182,6 +4211,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]{
@@ -4446,12 +4493,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;
@@ -4471,7 +4517,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{
@@ -4593,8 +4639,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{
@@ -4609,6 +4653,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);
 }
@@ -4641,8 +4689,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));
@@ -5845,7 +5894,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;
@@ -6098,10 +6146,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;
@@ -6111,7 +6161,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;
 }
@@ -6126,17 +6176,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{
@@ -6162,7 +6212,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{
@@ -6174,11 +6224,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{
@@ -6207,12 +6257,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{
@@ -6222,8 +6272,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{
@@ -6239,11 +6289,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{
@@ -6255,12 +6305,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{
@@ -7516,13 +7566,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;
@@ -7950,11 +7999,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;
@@ -7973,7 +8022,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;
@@ -7991,12 +8040,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]{
@@ -8030,8 +8079,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;
@@ -8160,11 +8209,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;
@@ -8184,7 +8233,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;
@@ -8572,8 +8621,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;
@@ -9174,11 +9223,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;
@@ -9924,6 +9972,7 @@ hr.progress-stepper__separator{
   min-width:inherit;
   width:4px;
 }
+
 [dir=rtl] .progress-stepper__item:first-child .progress-stepper__text{
   text-align:right;
 }
@@ -10058,7 +10107,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));
@@ -10150,15 +10199,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{
@@ -10166,15 +10213,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);
 }
@@ -10486,6 +10528,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);
@@ -10499,6 +10561,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 +11630,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 +11640,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 +11648,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 +11711,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{