@ebay/skin 18.2.3 → 18.3.0

package/dist/bundles/skin-default.css

@@ -12,12 +12,14 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-neutral-100:#fff;
   --color-neutral-100-rgb:255, 255, 255;
   --color-neutral-200:#f7f7f7;
+  --color-neutral-200-rgb:247, 247, 247;
   --color-neutral-300:#e5e5e5;
   --color-neutral-400:#c7c7c7;
   --color-neutral-500:#8f8f8f;
   --color-neutral-600:#707070;
   --color-neutral-700:#363636;
   --color-neutral-800:#191919;
+  --color-neutral-800-rgb:25, 25, 25;
   --color-neutral-900:#000;
   --color-neutral-900-rgb:0, 0, 0;
   --color-orange-100:#fffaf5;
@@ -214,6 +216,8 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-background-accent:var(--color-blue-500);
   --color-background-invalid:var(--color-red-200);
   --color-background-elevated:var(--color-neutral-100);
+  --color-background-strong:var(--color-neutral-800);
+  --color-background-strong-rgb:var(--color-neutral-800-rgb);
   --color-foreground-primary:var(--color-neutral-800);
   --color-foreground-secondary:var(--color-neutral-600);
   --color-foreground-disabled:var(--color-neutral-400);
@@ -230,6 +234,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-foreground-on-attention:var(--color-neutral-100);
   --color-foreground-on-confirmation:var(--color-neutral-100);
   --color-foreground-on-information:var(--color-neutral-100);
+  --color-foreground-on-strong:var(--color-neutral-100);
   --color-stroke-default:var(--color-neutral-500);
   --color-stroke-accent:var(--color-blue-500);
   --color-stroke-attention:var(--color-red-500);
@@ -243,7 +248,9 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-state-primary-hover:#f5f5f5;
   --color-state-primary-active:#ebebeb;
   --color-state-secondary-hover:#ededed;
+  --color-state-secondary-hover-rgb:237, 237, 237;
   --color-state-secondary-active:#e3e3e3;
+  --color-state-secondary-active-rgb:227, 227, 227;
   --color-state-inverse-hover:#343434;
   --color-state-inverse-active:#323232;
   --color-state-accent-hover:#2854d9;
@@ -883,6 +890,11 @@ a.fake-btn,button.btn{
 a.fake-btn--fixed-height,a.fake-btn--truncated,button.btn--fixed-height,button.btn--truncated{
   height:40px;
 }
+a.fake-btn:focus-visible,button.btn:focus-visible{
+  outline-offset:var(--spacing-25);
+  outline-style:solid;
+  outline-width:var(--spacing-25);
+}
 a.fake-btn:focus:not(:focus-visible),button.btn:focus:not(:focus-visible){
   outline:none;
 }
@@ -960,12 +972,10 @@ a.fake-btn svg.icon,button.btn svg.icon{
   align-self:center;
 }
 a.fake-btn svg.icon:first-child,button.btn svg.icon:first-child{
-  -webkit-margin-end:8px;
-          margin-inline-end:8px;
+  margin-inline-end:8px;
 }
 a.fake-btn svg.icon:last-child,button.btn svg.icon:last-child{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 a.fake-btn svg.icon:only-child,button.btn svg.icon:only-child{
   margin:0;
@@ -1426,13 +1436,11 @@ div.carousel{
 }
 .carousel__control--prev{
   left:calc(var(--spacing-200)*-1);
-  -webkit-margin-end:1px;
-          margin-inline-end:1px;
+  margin-inline-end:1px;
 }
 .carousel__control--next{
+  margin-inline-start:1px;
   right:calc(var(--spacing-200)*-1);
-  -webkit-margin-start:1px;
-          margin-inline-start:1px;
 }
 .carousel__control svg{
   color:var(--carousel-paddle-foreground-color, var(--color-foreground-primary));
@@ -1744,8 +1752,7 @@ span.carousel,span.carousel__container{
   content:"";
   display:inline-block;
   height:10px;
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
   width:10px;
 }
 
@@ -1898,8 +1905,7 @@ button.chip__button{
   flex-shrink:0;
   height:var(--spacing-300);
   line-height:0;
-  -webkit-margin-end:-8px;
-          margin-inline-end:-8px;
+  margin-inline-end:-8px;
   padding:0;
   width:var(--spacing-300);
 }
@@ -1925,10 +1931,8 @@ button.chip__button>svg{
   border-radius:var(--border-radius-50);
   display:inline-block;
   padding-bottom:var(--spacing-100);
-  -webkit-padding-end:var(--spacing-200);
-          padding-inline-end:var(--spacing-200);
-  -webkit-padding-start:var(--spacing-100);
-          padding-inline-start:var(--spacing-100);
+  padding-inline-end:var(--spacing-200);
+  padding-inline-start:var(--spacing-100);
   padding-top:var(--spacing-100);
   position:relative;
 }
@@ -1970,8 +1974,7 @@ button.chip__button>svg{
 }
 
 .chips-combobox .combobox{
-  -webkit-margin-start:calc(var(--spacing-100)*-1);
-          margin-inline-start:calc(var(--spacing-100)*-1);
+  margin-inline-start:calc(var(--spacing-100)*-1);
   width:calc(100% + var(--spacing-300));
 }
 
@@ -2079,8 +2082,7 @@ span.combobox{
 }
 
 .combobox__control>button,.combobox__control>svg.icon{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 
 .combobox__option[role^=option]{
@@ -2395,6 +2397,11 @@ a.cta-btn{
 a.cta-btn--fixed-height,a.cta-btn--truncated{
   height:40px;
 }
+a.cta-btn:focus-visible{
+  outline-offset:var(--spacing-25);
+  outline-style:solid;
+  outline-width:var(--spacing-25);
+}
 a.cta-btn:focus:not(:focus-visible){
   outline:none;
 }
@@ -2447,12 +2454,10 @@ a.cta-btn svg.icon{
   width:10px;
 }
 a.cta-btn svg.icon:first-child{
-  -webkit-margin-end:8px;
-          margin-inline-end:8px;
+  margin-inline-end:8px;
 }
 a.cta-btn svg.icon:last-child{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 a.cta-btn svg.icon:only-child{
   margin:0;
@@ -2548,8 +2553,7 @@ summary.details__summary--small{
 }
 
 span.details__icon{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 span.details__icon[hidden]{
   display:inline-flex;
@@ -2684,8 +2688,7 @@ details.details summary:focus:not(:focus-visible){
   overflow-wrap:anywhere;
 }
 .drawer-dialog__header>:last-child:not(:only-child){
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .drawer-dialog__header .fake-link{
@@ -2833,8 +2836,7 @@ button.icon-btn.drawer-dialog__close{
   font-weight:700;
   line-height:1.5em;
   margin:0;
-  -webkit-margin-start:var(--spacing-150);
-          margin-inline-start:var(--spacing-150);
+  margin-inline-start:var(--spacing-150);
 }
 
 .education-notice__main{
@@ -2842,8 +2844,7 @@ button.icon-btn.drawer-dialog__close{
 }
 
 .education-notice__dismiss{
-  -webkit-margin-start:var(--spacing-150);
-          margin-inline-start:var(--spacing-150);
+  margin-inline-start:var(--spacing-150);
 }
 
 .education-notice button.icon-btn{
@@ -3002,7 +3003,7 @@ button.icon-btn.drawer-dialog__close{
 .eek__rating-range>span{
   font-size:8px;
 }
-@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){
+@media not all and (-webkit-min-device-pixel-ratio:0),not all and (resolution >= 0.001dpcm){
   @supports (-webkit-appearance:none){
     .eek__rating{
       text-shadow:none;
@@ -3043,8 +3044,7 @@ div.field--table{
 }
 
 .field__description--group>:last-child{
-  -webkit-margin-start:5px;
-          margin-inline-start:5px;
+  margin-inline-start:5px;
   text-align:right;
 }
 
@@ -3152,6 +3152,311 @@ div.field__description{
 [dir=rtl] .field__description--group>:last-child{
   text-align:left;
 }
+.file-preview-card{
+  aspect-ratio:1/1;
+  background-color:var(--file-preview-card-background-color, var(--color-background-secondary));
+  border-radius:var(--file-preview-card-border-radius, var(--border-radius-100));
+  box-sizing:border-box;
+  display:grid;
+  grid-template-areas:" . . menu-action " " . center-action . " " label . . ";
+  grid-template-columns:repeat(3, 1fr);
+  grid-template-rows:repeat(3, 1fr);
+  height:100%;
+  max-width:396px;
+  min-width:120px;
+  width:100%;
+}
+
+.file-preview-card__body{
+  align-items:center;
+  display:flex;
+  grid-area:1/1/4/4;
+  justify-content:center;
+}
+
+.file-preview-card__body img,.file-preview-card__body video{
+  border-radius:var(--file-preview-card-border-radius, var(--border-radius-100));
+  height:100%;
+  object-fit:contain;
+  width:100%;
+}
+
+.file-preview-card__body--fade{
+  opacity:.5;
+}
+
+.file-preview-card__document-icon.icon{
+  height:40%;
+  width:40%;
+}
+
+.file-preview-card .file-preview-card__menu-action{
+  grid-area:menu-action;
+  justify-self:end;
+  z-index:1;
+}
+
+.file-preview-card .file-preview-card__menu-action .icon-btn{
+  height:var(--spacing-400);
+  margin:var(--spacing-100);
+  width:var(--spacing-400);
+}
+
+.file-preview-card .file-preview-card__menu-action .icon-btn:not(:hover){
+  background-color:var(--file-preview-card-menu-action-background-color, var(--color-background-primary));
+}
+
+.file-preview-card__preview-action{
+  align-self:end;
+  grid-area:label;
+  z-index:1;
+}
+
+.file-preview-card__preview-action .icon-btn{
+  align-items:center;
+  background-color:var(--file-preview-card-label-background-color, var(--color-background-primary));
+  display:flex;
+  flex-direction:row;
+  gap:var(--spacing-50);
+  height:var(--spacing-250);
+  margin:var(--spacing-100);
+  padding:var(--spacing-25) var(--spacing-100);
+  width:max-content;
+}
+
+.file-preview-card__preview-action-text{
+  color:var(--file-preview-card-label-text-color, var(--color-foreground-primary));
+  font-size:var(--font-size-12);
+  font-weight:400;
+}
+
+.file-preview-card__video-icon.icon{
+  height:var(--spacing-150);
+  width:var(--spacing-150);
+}
+
+.file-preview-card__body-action{
+  align-self:center;
+  grid-area:center-action;
+  justify-self:center;
+  z-index:1;
+}
+
+.file-preview-card__body-action .icon-btn{
+  aspect-ratio:1/1;
+  background-color:rgba(var(--file-preview-card-center-action-background-color-rgb, var(--color-background-strong-rgb)), .5);
+  color:var(--file-preview-card-center-action-color, var(--color-foreground-on-strong));
+  font-size:var(--font-size-14);
+  font-weight:700;
+  height:-moz-fit-content;
+  height:fit-content;
+  line-height:var(--spacing-250);
+  padding:var(--spacing-100);
+  width:-moz-fit-content;
+  width:fit-content;
+}
+
+.file-preview-card__body-action .icon-btn:active,.file-preview-card__body-action .icon-btn:focus,.file-preview-card__body-action .icon-btn:hover{
+  color:var(--file-preview-card-center-action-interactive-color, var(--color-foreground-primary));
+}
+
+.file-preview-card__body-action .icon-btn:focus,.file-preview-card__body-action .icon-btn:hover{
+  background-color:rgba(var(--file-preview-card-center-action-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
+}
+
+.file-preview-card__body-action .icon-btn:active{
+  background-color:rgba(var(--file-preview-card-center-action-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
+}
+div.file-preview-card-group{
+  container:file-preview-cards-container/inline-size;
+}
+
+div.file-preview-card-group ul{
+  display:grid;
+  gap:var(--spacing-100);
+  grid-template-columns:repeat(2, 1fr);
+  list-style:none;
+  margin:0;
+  padding:0;
+  width:100%;
+}
+
+div.file-preview-card-group ul li{
+  height:max-content;
+}
+
+@supports not (contain:inline-size){
+  @media (min-width:512px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-100);
+      grid-template-columns:repeat(4, 1fr);
+    }
+  }
+  @media (min-width:768px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(5, 1fr);
+    }
+  }
+  @media (min-width:1024px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(7, 1fr);
+    }
+  }
+  @media (min-width:1280px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(9, 1fr);
+    }
+  }
+  @media (min-width:1440px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(10, 1fr);
+    }
+  }
+  @media (min-width:1680px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(12, 1fr);
+    }
+  }
+  @media (min-width:1920px){
+    div.file-preview-card-group ul{
+      gap:var(--spacing-200);
+      grid-template-columns:repeat(14, 1fr);
+    }
+  }
+}
+@container file-preview-cards-container (inline-size >= 512px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-100);
+    grid-template-columns:repeat(4, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 768px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(5, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1024px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(7, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1280px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(9, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1440px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(10, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1680px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(12, 1fr);
+  }
+}
+@container file-preview-cards-container (inline-size >= 1920px){
+  div.file-preview-card-group ul{
+    gap:var(--spacing-200);
+    grid-template-columns:repeat(14, 1fr);
+  }
+}
+div.file-input{
+  display:grid;
+  grid-template-areas:"center";
+  grid-template-columns:1fr;
+  grid-template-rows:1fr;
+}
+
+div.file-input__container,input.file-input__input[type=file]{
+  border-radius:var(--file-input-border-radius, var(--border-radius-100));
+  grid-area:center;
+}
+
+div.file-input__container{
+  background-color:var(--file-input-background-color, var(--color-background-secondary));
+  border:1px dashed;
+  display:flex;
+  flex-direction:row;
+  gap:var(--spacing-100);
+  min-width:-moz-fit-content;
+  min-width:fit-content;
+  padding:var(--spacing-200);
+  pointer-events:none;
+  z-index:1;
+}
+
+div.file-input___container--dragged-over{
+  background-color:var(--file-input-dragged-over-background-color, var(--color-background-tertiary));
+}
+
+div.file-input__upload-icon{
+  align-self:center;
+  background-color:var(--file-input-upload-icon-background-color, var(--color-background-primary));
+  border-radius:99px;
+  padding:var(--spacing-150);
+}
+
+div.file-input__upload-icon svg{
+  fill:var(--file-input-upload-icon-fill, var(--color-foreground-primary));
+  height:var(--spacing-300);
+  width:var(--spacing-300);
+}
+
+div.file-input__content{
+  align-items:start;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  justify-content:center;
+}
+
+.file-input__content-header{
+  color:var(--file-input-content-header-color, var(--color-foreground-primary));
+  font-size:var(--font-size-14);
+  font-weight:700;
+  line-height:var(--spacing-250);
+  margin-block:0 var(--spacing-50);
+}
+
+span.file-input__content-subheader{
+  color:var(--file-input-content-subheader-color, var(--color-foreground-secondary));
+  font-size:var(--font-size-12);
+  font-weight:400;
+  line-height:var(--spacing-200);
+  margin-block-end:var(--spacing-100);
+}
+
+span.file-input__content-cta{
+  text-decoration-line:underline;
+}
+
+@media screen and (min-width:768px){
+  div.file-input__container{
+    gap:var(--spacing-300);
+  }
+  div.file-input__container,div.file-input__upload-icon{
+    padding:var(--spacing-300);
+  }
+  .file-input__content-header{
+    font-size:var(--font-size-16);
+    line-height:var(--spacing-300);
+  }
+  span.file-input__content-subheader{
+    font-size:var(--font-size-14);
+    line-height:var(--spacing-250);
+  }
+}
 
 a.filter-link,button.filter-button{
   align-items:center;
@@ -3296,9 +3601,8 @@ span.filter-menu-form__item,span.filter-menu__item[role^=menuitem]{
 button.filter-menu-form__footer[type=submit],button.filter-menu__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-top-style:solid;
-  border-top-width:1px;
   bottom:0;
   box-sizing:border-box;
   color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -3398,8 +3702,7 @@ button.filter-menu-button__button:active,button.filter-menu-button__button:focus
 .filter-menu-button__button-cell svg.icon--12{
   align-self:center;
   color:var(--filter-menu-button-icon-color, var(--color-foreground-primary));
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 
 .filter-menu-button__button-text{
@@ -3557,9 +3860,8 @@ 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-top-style:solid;
-  border-top-width:1px;
   bottom:0;
   box-sizing:border-box;
   color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -4799,8 +5101,7 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
   overflow-wrap:anywhere;
 }
 .fullscreen-dialog__header>:last-child:not(:only-child){
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .fullscreen-dialog__header .fake-link{
@@ -5065,12 +5366,7 @@ a.icon-link.icon-link--large,button.icon-btn.icon-btn--large{
   height:48px;
   width:48px;
 }
-
-a.icon-link--transparent,button.icon-btn--transparent{
-  background-color:initial;
-  outline-offset:-10px;
-}
-a.icon-link--transparent:active,a.icon-link--transparent:focus,a.icon-link--transparent:hover,button.icon-btn--transparent:active,button.icon-btn--transparent:focus,button.icon-btn--transparent:hover{
+a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparent:focus,a.icon-link--transparent:hover,button.icon-btn--transparent,button.icon-btn--transparent:active,button.icon-btn--transparent:focus,button.icon-btn--transparent:hover{
   background-color:initial;
 }
 
@@ -5360,8 +5656,7 @@ span.inline-notice{
 
 .inline-notice__header{
   display:flex;
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
   margin-top:var(--spacing-50);
 }
 
@@ -5422,8 +5717,7 @@ span.inline-notice{
   overflow-wrap:anywhere;
 }
 .lightbox-dialog__header>:last-child:not(:only-child){
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .lightbox-dialog__main{
@@ -5442,6 +5736,7 @@ span.inline-notice{
 }
 
 .lightbox-dialog__footer{
+  border-top:1px solid var(--dialog-lightbox-separator-color, var(--color-stroke-subtle));
   display:flex;
   flex-direction:column;
   justify-content:center;
@@ -5488,8 +5783,7 @@ button.icon-btn.lightbox-dialog__close,button.icon-btn.lightbox-dialog__prev{
 }
 
 button.icon-btn.lightbox-dialog__prev{
-  -webkit-margin-end:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
 }
 
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev{
@@ -5619,7 +5913,6 @@ button.icon-btn.lightbox-dialog__prev{
   .lightbox-dialog__window .lightbox-dialog__footer{
     flex-direction:row;
     justify-content:flex-end;
-    padding:0 var(--spacing-200) var(--spacing-200);
   }
   .lightbox-dialog__window .lightbox-dialog__footer>:not(:first-child){
     margin-left:var(--spacing-100);
@@ -5756,8 +6049,7 @@ div.listbox__option svg.icon{
   opacity:0;
   stroke:currentColor;
   stroke-width:0;
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
 }
 
 div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
@@ -5895,8 +6187,7 @@ div.listbox-button__listbox{
   opacity:0;
   stroke:currentColor;
   stroke-width:0;
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
 }
 
 div.listbox-button__option[role=option][aria-selected=true] svg.icon{
@@ -6477,8 +6768,7 @@ span[role=region].page-notice{
 
 .page-notice__header,.page-notice__main{
   grid-row:1;
-  -webkit-margin-end:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
 }
 
 .page-notice__main{
@@ -6576,13 +6866,11 @@ a.pagination__next,a.pagination__previous,button.pagination__next,button.paginat
 }
 
 a.pagination__next,button.pagination__next{
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
 }
 
 a.pagination__previous,button.pagination__previous{
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
 }
 
 .pagination__item{
@@ -6717,8 +7005,7 @@ nav.pagination--fluid ol.pagination__items li{
   overflow-wrap:anywhere;
 }
 .panel-dialog__header>:last-child:not(:only-child){
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .panel-dialog__header .fake-link{
@@ -6831,8 +7118,7 @@ button.icon-btn.panel-dialog__close{
 }
 
 .phone-input button.btn svg.icon:last-child{
-  -webkit-margin-start:var(--spacing-50);
-          margin-inline-start:var(--spacing-50);
+  margin-inline-start:var(--spacing-50);
 }
 
 .phone-input .listbox-button span.fflag,.phone-input .listbox-button svg.flag{
@@ -6844,12 +7130,10 @@ button.icon-btn.panel-dialog__close{
   display:inline-flex;
 }
 .phone-input .listbox-button__value svg,.phone-input .listbox__value svg{
-  -webkit-margin-end:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
 }
 .phone-input .listbox-button__value span,.phone-input .listbox__value span{
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
 }
 .phone-input .listbox-button__value span:last-child,.phone-input .listbox__value span:last-child{
   color:var(--color-foreground-secondary);
@@ -7368,15 +7652,13 @@ hr.progress-stepper__separator{
 
 .progress-stepper__item:first-child .progress-stepper__text{
   align-self:flex-start;
-  -webkit-margin-start:var(--spacing-50);
-          margin-inline-start:var(--spacing-50);
+  margin-inline-start:var(--spacing-50);
   text-align:left;
 }
 
 .progress-stepper__item:last-child .progress-stepper__text{
   align-self:flex-end;
-  -webkit-margin-end:var(--spacing-50);
-          margin-inline-end:var(--spacing-50);
+  margin-inline-end:var(--spacing-50);
   text-align:right;
 }
 
@@ -7402,8 +7684,7 @@ hr.progress-stepper__separator{
 
 .progress-stepper--vertical .progress-stepper__item .progress-stepper__text{
   align-self:center;
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
   margin-top:0;
   text-align:left;
   white-space:nowrap;
@@ -7606,19 +7887,16 @@ span[role=region].section-notice{
 
 .section-notice__header{
   grid-column:1;
+  grid-row:1;
   height:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
   margin-top:1px;
 }
 
-.section-notice__header,.section-notice__main{
-  grid-row:1;
-  -webkit-margin-end:var(--spacing-200);
-}
-
 .section-notice__main{
   grid-column:1 /  3;
-          margin-inline-end:var(--spacing-200);
+  grid-row:1;
+  margin-inline-end:var(--spacing-200);
 }
 
 .section-notice__header+.section-notice__main{
@@ -7709,8 +7987,7 @@ p.section-notice__cta{
 .section-title__title svg.icon{
   background-color:var(--color-background-secondary);
   border-radius:12px;
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
   padding:7px;
 }
 
@@ -7794,8 +8071,7 @@ p.section-notice__cta{
 }
 
 .segmented-buttons>ul>li:not(:first-child){
-  -webkit-margin-start:var(--spacing-100);
-          margin-inline-start:var(--spacing-100);
+  margin-inline-start:var(--spacing-100);
 }
 
 .segmented-buttons__button{
@@ -7824,12 +8100,10 @@ p.section-notice__cta{
   align-self:center;
 }
 .segmented-buttons__button svg.icon:first-child{
-  -webkit-margin-end:8px;
-          margin-inline-end:8px;
+  margin-inline-end:8px;
 }
 .segmented-buttons__button svg.icon:last-child{
-  -webkit-margin-start:8px;
-          margin-inline-start:8px;
+  margin-inline-start:8px;
 }
 .segmented-buttons__button svg.icon:only-child{
   margin:0;
@@ -8045,13 +8319,11 @@ span.skeleton__avatar,span.skeleton__button,span.skeleton__image,span.skeleton__
 }
 
 span.skeleton__avatar:not(:last-child),span.skeleton__button:not(:last-child),span.skeleton__image:not(:last-child),span.skeleton__text:not(:last-child),span.skeleton__textbox:not(:last-child){
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
 }
 
 div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.skeleton__image:not(:last-child),div.skeleton__text:not(:last-child),div.skeleton__textbox:not(:last-child){
-  -webkit-margin-after:var(--spacing-150);
-          margin-block-end:var(--spacing-150);
+  margin-block-end:var(--spacing-150);
 }
 .skeleton--elevated{
   --skeleton-background:var(--color-loading-fill-elevated);
@@ -8164,8 +8436,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
 }
 
 .snackbar-dialog__main{
-  -webkit-margin-end:var(--spacing-400);
-          margin-inline-end:var(--spacing-400);
+  margin-inline-end:var(--spacing-400);
 }
 
 .snackbar-dialog__main p{
@@ -8173,8 +8444,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
 }
 
 .snackbar-dialog__actions{
-  -webkit-margin-start:auto;
-          margin-inline-start:auto;
+  margin-inline-start:auto;
 }
 
 .snackbar-dialog__window--column .snackbar-dialog__actions{
@@ -8430,12 +8700,6 @@ span.switch__control:focus:not(:focus-visible){
     opacity:1;
   }
 }
-:root{
-  --density-compact-cell-height:36px;
-  --density-default-cell-height:48px;
-  --density-relaxed-cell-height:56px;
-}
-
 .table{
   overflow-x:auto;
   position:relative;
@@ -8451,41 +8715,201 @@ span.switch__control:focus:not(:focus-visible){
   background-color:var(--color-background-primary);
   border-bottom:1px solid var(--color-stroke-subtle);
   box-sizing:border-box;
-  height:var(--density-default-cell-height);
+  height:80px;
+  max-height:80px;
   max-width:400px;
   min-width:124px;
-  padding-block:var(--spacing-100);
-  padding-inline:var(--spacing-200);
+  padding:12px;
 }
 
+.table th{
+  white-space:nowrap;
+}
+
+.table--density-compact td,.table--density-compact th{
+  height:64px;
+  max-height:64px;
+  padding:12px;
+}
+
+.table--density-relaxed td,.table--density-relaxed th{
+  height:112px;
+  max-height:112px;
+  padding:16px;
+}
+
+.table th button{
+  font-weight:700;
+}
+
+.table tbody tr:last-child td,.table tbody tr:last-child th{
+  border-bottom:none;
+}
+
+.table-cell{
+  text-align:left;
+}
+
+.table-cell--numeric{
+  text-align:right;
+}
 .table__cell{
   text-align:left;
 }
 
-.table [data-type=numeric],.table__cell--numeric{
+.table__cell--numeric{
   text-align:right;
 }
 
-.table td:last-child,.table th:last-child{
-  -webkit-padding-end:0;
-          padding-inline-end:0;
+.table-cell--icon-action{
+  text-align:center;
+  width:64px;
 }
 
-.table--density-compact td,.table--density-compact th{
-  height:var(--density-compact-cell-height);
+.table [data-type=numeric]{
+  text-align:right;
 }
 
-.table--density-relaxed td,.table--density-relaxed th{
-  height:var(--density-relaxed-cell-height);
+.table-cell img{
+  max-height:56px;
+  max-width:56px;
+}
+
+.table--density-compact .table-cell img{
+  max-height:40px;
+  max-width:40px;
+}
+
+.table--density-relaxed .table-cell img{
+  max-height:72px;
+  max-width:72px;
+}
+
+.table th[scope=row]{
+  text-align:left;
+}
+
+.table td:last-child,.table th:last-child{
+  padding-inline-end:0;
 }
 
 .table--mode-selection td:first-child,.table--mode-selection th:first-child{
-  min-width:unset;
+  min-width:48px;
+  text-align:center;
+  width:48px;
 }
 
 .table tbody th{
   font-weight:400;
 }
+
+.table thead button{
+  background-color:initial;
+  border:1px solid transparent;
+  border-radius:10px;
+  box-sizing:border-box;
+  color:inherit;
+  display:inline-block;
+  font-family:inherit;
+  font-size:var(--font-size-default);
+  margin:0;
+  min-height:40px;
+  min-width:auto;
+  padding:3px;
+  text-align:center;
+  text-decoration:none;
+  transform:translateZ(0);
+  vertical-align:initial;
+  white-space:nowrap;
+}
+
+.table-cell__data{
+  line-height:var(--spacing-250);
+  max-width:400px;
+  min-width:124px;
+}
+
+.table-cell__data--secondary{
+  color:var(--color-foreground-secondary);
+  font-size:var(--font-size-12);
+  line-height:var(--spacing-200);
+}
+
+.table-cell__thumbnail{
+  align-items:center;
+  background-color:var(--color-background-tertiary);
+  border-radius:8px;
+  display:flex;
+  flex-wrap:nowrap;
+  height:56px;
+  justify-content:center;
+  overflow:hidden;
+  text-align:center;
+  width:56px;
+}
+
+.table--density-compact .table-cell__thumbnail{
+  border-radius:4px;
+  height:40px;
+  width:40px;
+}
+
+.table--density-relaxed .table-cell__thumbnail{
+  border-radius:8px;
+  height:72px;
+  width:72px;
+}
+
+.table-cell__layout{
+  align-items:center;
+  display:flex;
+  gap:var(--spacing-200);
+  width:max-content;
+}
+
+.table-cell__layout>*{
+  flex-shrink:0;
+}
+
+.table-cell__multiline{
+  max-height:80px;
+  max-width:304px;
+}
+
+.table--density-compact .table-cell__multiline{
+  max-height:64px;
+  max-width:320px;
+}
+
+.table--density-relaxed .table-cell__multiline{
+  max-height:112px;
+  max-width:272px;
+}
+
+.table-cell__layout .table-cell__multiline .table-cell__data{
+  margin-block-end:var(--spacing-50);
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.table-cell .textbox,.table-cell .textbox__control{
+  width:100%;
+}
+
+.table-cell--numeric .textbox__control{
+  text-align:right;
+}
+
+.table-cell .signal{
+  white-space:nowrap;
+}
+[dir=rtl] .table th[scope=row],[dir=rtl] .table-cell{
+  text-align:right;
+}
+[dir=rtl] .table-cell--numeric{
+  text-align:left;
+}
 .fake-tabs,.tabs{
   margin-top:var(--spacing-200);
 }
@@ -8515,8 +8939,7 @@ div.tabs__item[role=tab],li.fake-tabs__item{
   -webkit-tap-highlight-color:var(--color-background-secondary);
 }
 div.tabs__item[role=tab]:not(:last-child),li.fake-tabs__item:not(:last-child){
-  -webkit-margin-end:var(--spacing-450);
-          margin-inline-end:var(--spacing-450);
+  margin-inline-end:var(--spacing-450);
 }
 
 li.fake-tabs__item>a{
@@ -8629,13 +9052,11 @@ input.textbox__control{
 }
 
 input.textbox__control:first-child:not([readonly]){
-  -webkit-padding-start:var(--spacing-200);
-          padding-inline-start:var(--spacing-200);
+  padding-inline-start:var(--spacing-200);
 }
 
 input.textbox__control:last-child:not([readonly]){
-  -webkit-padding-end:var(--spacing-200);
-          padding-inline-end:var(--spacing-200);
+  padding-inline-end:var(--spacing-200);
 }
 
 input.textbox__control,textarea.textbox__control{
@@ -8681,30 +9102,26 @@ input.textbox__control{
 .textbox .icon-btn>svg,.textbox>svg{
   color:var(--textbox-icon-color, var(--color-foreground-secondary));
   display:inline-flex;
-  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
   height:1lh;
   pointer-events:none;
   width:14px;
+  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox>span:first-child,.textbox>svg:first-child{
-  -webkit-margin-start:var(--spacing-200);
-          margin-inline-start:var(--spacing-200);
+  margin-inline-start:var(--spacing-200);
 }
 
 .textbox>span:last-child,.textbox>svg:last-child{
-  -webkit-margin-end:var(--spacing-200);
-          margin-inline-end:var(--spacing-200);
+  margin-inline-end:var(--spacing-200);
 }
 
 .textbox .icon-btn:last-child{
-  -webkit-margin-start:calc(var(--spacing-100)*-1);
-          margin-inline-start:calc(var(--spacing-100)*-1);
+  margin-inline-start:calc(var(--spacing-100)*-1);
 }
 
 .textbox .icon-btn:first-child{
-  -webkit-margin-end:calc(var(--spacing-100)*-1);
-          margin-inline-end:calc(var(--spacing-100)*-1);
+  margin-inline-end:calc(var(--spacing-100)*-1);
 }
 
 input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus{
@@ -8775,13 +9192,11 @@ button.toast-dialog__close{
   border:0;
   color:var(--toast-dialog-foreground-color, var(--color-foreground-on-information));
   flex-shrink:0;
-  -webkit-margin-start:auto;
-          margin-inline-start:auto;
-  outline-offset:calc(var(--spacing-100)*-1);
+  margin-inline-start:auto;
   padding:0;
 }
 button.toast-dialog__close:focus{
-  outline:1px dashed white;
+  outline:2px solid var(--color-foreground-on-information);
 }
 button.toast-dialog__close:focus,button.toast-dialog__close:hover{
   color:var(--color-state-primary-hover);
@@ -8812,11 +9227,10 @@ button.toast-dialog__close>svg{
   background-color:initial;
   color:var(--toast-dialog-foreground-color, var(--color-background-primary));
   font-weight:700;
-  -webkit-margin-end:var(--spacing-100);
-          margin-inline-end:var(--spacing-100);
+  margin-inline-end:var(--spacing-100);
 }
 .toast-dialog__footer button.btn--primary:focus,.toast-dialog__footer button.btn--secondary:focus{
-  outline:1px dashed var(--color-foreground-on-information);
+  outline:2px solid var(--color-foreground-on-information);
 }
 .toast-dialog__footer button.btn--primary:not([disabled]):focus,.toast-dialog__footer button.btn--primary:not([disabled]):hover{
   background-color:var(--color-state-primary-hover);
@@ -9847,8 +10261,8 @@ span.tourtip{
 }
 
 .tourtip__mask{
-  background-color:var(--tourtip-background-color, var(--color-background-elevated));
-  color:var(--tourtip-foreground-color, var(--color-foreground-primary));
+  background-color:var(--tourtip-background-color, var(--color-background-inverse));
+  color:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
   position:relative;
 }
 
@@ -9863,7 +10277,7 @@ span.tourtip__mask{
   word-break:break-word;
 }
 .tourtip__cell a{
-  color:var(--tourtip-foreground-color, var(--color-foreground-primary));
+  color:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
 }
 .tourtip__cell a:focus{
   outline:1px dashed currentColor;
@@ -9892,9 +10306,12 @@ button.tourtip__close{
   white-space:nowrap;
   width:32px;
 }
+button.tourtip__close svg.icon{
+  fill:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
+}
 
 .tourtip__pointer{
-  background-color:var(--tourtip-background-color, var(--color-background-elevated));
+  background-color:var(--tourtip-background-color, var(--color-background-inverse));
   height:8px;
   position:absolute;
   transform:rotate(45deg);
@@ -9990,19 +10407,23 @@ button.tourtip__close{
   width:100%;
 }
 
+.tourtip__footer>button.btn--primary{
+  background-color:var(--tourtip-background-color, var(--color-foreground-on-inverse));
+  color:var(--tourtip-foreground-color, var(--color-background-inverse));
+}
+
 .tourtip__footer>a:not(:last-child),.tourtip__footer>button:not(:last-child){
-  margin-right:8px;
+  margin-right:var(--spacing-200);
 }
 .tourtip__footer>.fake-link,.tourtip__footer>a{
-  color:var(--color-foreground-primary);
+  color:var(--color-foreground-on-inverse);
   text-decoration:none;
 }
 .tourtip__footer>.fake-link:hover:not(:disabled),.tourtip__footer>a:hover:not(:disabled){
-  color:var(--color-foreground-primary);
+  color:var(--color-foreground-on-inverse);
   text-decoration:underline;
 }
 .tourtip__index{
-  color:var(--tourtip-index-color, var(--color-foreground-secondary));
   flex:1;
 }
 
@@ -10156,8 +10577,7 @@ button.tourtip__close{
 }
 
 .video-player__report-button>svg{
-  -webkit-margin-end:var(--spacing-50);
-          margin-inline-end:var(--spacing-50);
+  margin-inline-end:var(--spacing-50);
 }
 
 .video-player .shaka-overflow-menu svg{