@ebay/skin 18.2.3 → 18.3.0

package/dist/bundles/skin-full.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;
@@ -403,6 +410,8 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
     --color-background-accent:var(--color-blue-400);
     --color-background-invalid:var(--color-red-200);
     --color-background-elevated:var(--color-neutral-800);
+    --color-background-strong:var(--color-neutral-200);
+    --color-background-strong-rgb:var(--color-neutral-200-rgb);
     --color-foreground-primary:var(--color-neutral-200);
     --color-foreground-secondary:var(--color-neutral-500);
     --color-foreground-disabled:var(--color-neutral-500);
@@ -419,6 +428,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
     --color-foreground-on-attention:var(--color-neutral-800);
     --color-foreground-on-confirmation:var(--color-neutral-800);
     --color-foreground-on-information:var(--color-neutral-800);
+    --color-foreground-on-strong:var(--color-neutral-800);
     --color-stroke-default:var(--color-neutral-600);
     --color-stroke-accent:var(--color-blue-400);
     --color-stroke-attention:var(--color-red-400);
@@ -431,7 +441,9 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
     --color-state-primary-hover:#17212c;
     --color-state-primary-active:#1e2a38;
     --color-state-secondary-hover:#3e3e3e;
+    --color-state-secondary-hover-rgb:62, 62, 62;
     --color-state-secondary-active:#464646;
+    --color-state-secondary-active-rgb:70, 70, 70;
     --color-state-inverse-hover:#f7f7f7;
     --color-state-inverse-active:#f8f8f8;
     --color-state-accent-hover:#6ba2ff;
@@ -1068,6 +1080,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;
 }
@@ -1145,12 +1162,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;
@@ -1611,13 +1626,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));
@@ -1929,8 +1942,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;
 }
 
@@ -2083,8 +2095,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);
 }
@@ -2110,10 +2121,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;
 }
@@ -2155,8 +2164,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));
 }
 
@@ -2264,8 +2272,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]{
@@ -2580,6 +2587,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;
 }
@@ -2632,12 +2644,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;
@@ -2733,8 +2743,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;
@@ -2869,8 +2878,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{
@@ -3018,8 +3026,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{
@@ -3027,8 +3034,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{
@@ -3187,7 +3193,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;
@@ -3228,8 +3234,7 @@ div.field--table{
 }
 
 .field__description--group>:last-child{
-  -webkit-margin-start:5px;
-          margin-inline-start:5px;
+  margin-inline-start:5px;
   text-align:right;
 }
 
@@ -3337,6 +3342,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;
@@ -3481,9 +3791,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));
@@ -3583,8 +3892,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{
@@ -3742,9 +4050,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));
@@ -4984,8 +5291,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{
@@ -5250,12 +5556,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;
 }
 
@@ -5545,8 +5846,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);
 }
 
@@ -5607,8 +5907,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{
@@ -5627,6 +5926,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;
@@ -5673,8 +5973,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{
@@ -5804,7 +6103,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);
@@ -5941,8 +6239,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]{
@@ -6080,8 +6377,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{
@@ -6662,8 +6958,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{
@@ -6761,13 +7056,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{
@@ -6902,8 +7195,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{
@@ -7016,8 +7308,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{
@@ -7029,12 +7320,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);
@@ -7553,15 +7842,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;
 }
 
@@ -7587,8 +7874,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;
@@ -7791,19 +8077,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{
@@ -7894,8 +8177,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;
 }
 
@@ -7979,8 +8261,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{
@@ -8009,12 +8290,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;
@@ -8230,13 +8509,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);
@@ -8349,8 +8626,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{
@@ -8358,8 +8634,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{
@@ -8615,12 +8890,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;
@@ -8636,41 +8905,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);
 }
@@ -8700,8 +9129,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{
@@ -8814,13 +9242,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{
@@ -8866,30 +9292,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{
@@ -8960,13 +9382,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);
@@ -8997,11 +9417,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);
@@ -10032,8 +10451,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;
 }
 
@@ -10048,7 +10467,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;
@@ -10077,9 +10496,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);
@@ -10175,19 +10597,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;
 }
 
@@ -10341,8 +10767,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{