@ebay/skin 18.3.2 → 18.4.0

package/dist/bundles/skin-default.css

@@ -207,6 +207,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-background-primary:var(--color-neutral-100);
   --color-background-secondary:var(--color-neutral-200);
   --color-background-tertiary:var(--color-neutral-300);
+  --color-background-faint:rgba(var(--color-neutral-900-rgb), 0.05);
   --color-background-disabled:var(--color-neutral-400);
   --color-background-inverse:var(--color-neutral-700);
   --color-background-attention:var(--color-red-600);
@@ -542,6 +543,34 @@ a:not([href]),a[aria-disabled=true]{
   text-overflow:ellipsis;
   white-space:nowrap;
 }
+
+.scrollbars-permanent{
+  -webkit-overflow-scrolling:touch;
+  scroll-behavior:smooth;
+  scroll-snap-type:proximity;
+  scroll-snap-type:x proximity;
+}
+
+.scrollbars-permanent::-webkit-scrollbar{
+  background-color:var(--color-background-faint);
+  border-radius:12px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar:vertical{
+  width:6px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar:horizontal{
+  height:6px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar-thumb{
+  background-color:var(--color-foreground-secondary);
+  border-color:transparent;
+  border-radius:12px;
+  border-right-style:inset;
+  box-shadow:none;
+}
 .alert-dialog[role=alertdialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -2886,7 +2915,7 @@ button.icon-btn.drawer-dialog__close{
   display:inline-flex;
   font-family:Arial,sans-serif;
   font-weight:700;
-  height:28px;
+  height:24px;
   position:relative;
 }
 
@@ -2899,7 +2928,7 @@ button.icon-btn.drawer-dialog__close{
 }
 
 .eek .icon--eek-arrow{
-  width:11px;
+  width:9px;
 }
 
 .eek__arrow{
@@ -2990,7 +3019,7 @@ button.icon-btn.drawer-dialog__close{
   border-radius:1px 0 0 1px;
   display:inline-flex;
   flex-direction:column;
-  height:24px;
+  height:20px;
   margin:1px;
   padding:0 1px;
 }
@@ -3153,119 +3182,132 @@ div.field__description{
   text-align:left;
 }
 .file-preview-card{
+  display:flex;
+  flex-direction:column;
+}
+
+.file-preview-card__body{
   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%;
+  display:flex;
   max-width:396px;
+  min-height:120px;
   min-width:120px;
-  width:100%;
+  position:relative;
 }
 
-.file-preview-card__body{
-  align-items:center;
-  display:flex;
-  grid-area:1/1/4/4;
-  justify-content:center;
+.file-preview-card__asset{
+  margin:auto;
 }
 
-.file-preview-card__body img,.file-preview-card__body video{
+img.file-preview-card__asset,video.file-preview-card__asset{
+  align-self:center;
   border-radius:var(--file-preview-card-border-radius, var(--border-radius-100));
   height:100%;
   object-fit:contain;
   width:100%;
 }
 
-.file-preview-card__body--fade{
+.file-preview-card__asset--fade{
+  background-color:inherit;
   opacity:.5;
 }
 
-.file-preview-card__document-icon.icon{
+.file-preview-card__asset.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{
+.file-preview-card__body .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__body>.file-preview-card__action{
+  position:absolute;
+  right:var(--spacing-100);
+  top:var(--spacing-100);
+  z-index:1;
 }
 
-.file-preview-card__preview-action{
-  align-self:end;
-  grid-area:label;
-  z-index:1;
+.file-preview-card__body>.file-preview-card__action:dir(rtl){
+  left:var(--spacing-100);
+  right:auto;
 }
 
-.file-preview-card__preview-action .icon-btn{
+.icon-btn.file-preview-card__action:not(:hover){
+  background-color:var(--file-preview-card-action-background-color, var(--color-background-primary));
+}
+
+.file-preview-card__info{
   align-items:center;
-  background-color:var(--file-preview-card-label-background-color, var(--color-background-primary));
+  background-color:var(--file-preview-card-info-background-color, var(--color-background-primary));
+  border-radius:1em;
+  bottom:var(--spacing-100);
   display:flex;
-  flex-direction:row;
+  font-size:var(--font-size-12);
+  font-weight:400;
   gap:var(--spacing-50);
-  height:var(--spacing-250);
-  margin:var(--spacing-100);
-  padding:var(--spacing-25) var(--spacing-100);
-  width:max-content;
+  left:var(--spacing-100);
+  padding:var(--spacing-50) var(--spacing-100);
+  position:absolute;
+  z-index:1;
 }
 
-.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__info:dir(rtl){
+  left:auto;
+  right:var(--spacing-100);
 }
 
-.file-preview-card__video-icon.icon{
+.file-preview-card__info>.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{
+.file-preview-card__see-more{
   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));
+  background-color:rgba(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
+  border:none;
+  border-radius:50%;
+  color:var(--file-preview-card-see-more-color, var(--color-foreground-on-strong));
+  font-family:inherit;
   font-size:var(--font-size-14);
   font-weight:700;
-  height:-moz-fit-content;
-  height:fit-content;
+  left:50%;
   line-height:var(--spacing-250);
   padding:var(--spacing-100);
-  width:-moz-fit-content;
-  width:fit-content;
+  position:absolute;
+  top:50%;
+  transform:translate(-50%, -50%);
+  z-index:1;
+}
+
+.file-preview-card__see-more:active,.file-preview-card__see-more:focus-visible,.file-preview-card__see-more:hover{
+  color:var(--file-preview-card-see-more-interactive-color, var(--color-foreground-primary));
 }
 
-.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__see-more:focus-visible,.file-preview-card__see-more:hover{
+  background-color:rgba(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
 }
 
-.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__see-more:active{
+  background-color:rgba(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-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);
+.file-preview-card__footer{
+  display:grid;
+}
+
+.file-preview-card__footer>*{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.file-preview-card__footer>:not(:first-child){
+  color:var(--color-foreground-secondary);
+  font-size:var(--font-size-small);
 }
 div.file-preview-card-group{
   container:file-preview-cards-container/inline-size;
@@ -5967,6 +6009,66 @@ button.fake-link:hover{
 button.fake-link[aria-disabled=true],button.fake-link[disabled]{
   color:var(--fake-link-foreground-disabled-color, var(--color-foreground-disabled));
 }
+.list{
+  max-width:480px;
+}
+
+.list ul{
+  list-style:none;
+  margin:0;
+  padding:0;
+}
+
+.list ul li>*{
+  align-items:center;
+  background-color:var(--list-background-color, var(--color-background-primary));
+  box-sizing:border-box;
+  color:var(--color-foreground-on-primary);
+  display:inline-flex;
+  font-size:var(--font-size-16);
+  margin-block:1px;
+  min-height:var(--spacing-600);
+  padding:var(--spacing-150) var(--spacing-200);
+  width:100%;
+}
+
+.list__leading{
+  margin-inline-end:var(--spacing-200);
+}
+
+.list__trailing{
+  margin-inline-start:var(--spacing-200);
+}
+
+.list__body{
+  flex:1;
+}
+
+.list li>a,.list li>button{
+  border:none;
+  text-align:left;
+  text-decoration:none;
+}
+
+.list li>a:focus,.list li>a:hover,.list li>button:focus,.list li>button:hover{
+  color:var(--color-foreground-on-primary);
+}
+
+.list li>a:active,.list li>a:focus,.list li>a:hover,.list li>button:active,.list li>button:focus,.list li>button:hover{
+  background-color:var(--list-background-hover-color, var(--color-state-primary-hover));
+}
+
+.list hr{
+  border:0;
+  border-top:1px solid var(--color-stroke-subtle);
+  height:1px;
+  margin-inline:var(--spacing-200);
+  padding:0;
+}
+
+[dir=rtl] .list li>a,[dir=rtl] .list li>button{
+  text-align:right;
+}
 div.listbox{
   margin:var(--spacing-200) 0;
 }
@@ -8703,10 +8805,35 @@ span.switch__control:focus:not(:focus-visible){
 .table{
   overflow-x:auto;
   position:relative;
+  -webkit-overflow-scrolling:touch;
+  scroll-behavior:smooth;
+  scroll-snap-type:proximity;
+  scroll-snap-type:x proximity;
+}
+
+.table::-webkit-scrollbar{
+  background-color:var(--color-background-faint);
+  border-radius:12px;
+}
+
+.table::-webkit-scrollbar:vertical{
+  width:6px;
+}
+
+.table::-webkit-scrollbar:horizontal{
+  height:6px;
+}
+
+.table::-webkit-scrollbar-thumb{
+  background-color:var(--color-foreground-secondary);
+  border-color:transparent;
+  border-radius:12px;
+  border-right-style:inset;
+  box-shadow:none;
 }
 
 .table table{
-  border-collapse:collapse;
+  border-collapse:initial;
   border-spacing:0;
   width:100%;
 }
@@ -8738,8 +8865,30 @@ span.switch__control:focus:not(:focus-visible){
   padding:16px;
 }
 
-.table th button{
+.table--frozen-header thead{
+  position:sticky;
+  top:0;
+  z-index:3;
+}
+
+.table--freeze-column-1 tr td:nth-child(-n+1),.table--freeze-column-1 tr th:nth-child(-n+1),.table--freeze-column-2 tr td:nth-child(-n+2),.table--freeze-column-2 tr th:nth-child(-n+2),.table--freeze-column-3 tr td:nth-child(-n+3),.table--freeze-column-3 tr th:nth-child(-n+3){
+  left:0;
+  position:sticky;
+}
+
+.table--full-height{
+  max-height:unset;
+}
+
+.table--constrained-height{
+  max-height:90vh;
+}
+
+.table th a,.table th button{
+  align-items:center;
+  display:flex;
   font-weight:700;
+  text-decoration:none;
 }
 
 .table tbody tr:last-child td,.table tbody tr:last-child th{
@@ -8798,6 +8947,9 @@ span.switch__control:focus:not(:focus-visible){
   text-align:center;
   width:48px;
 }
+.table--mode-selection tr:has(input:checked) :where(td,th){
+  background-color:var(--color-background-secondary);
+}
 
 .table tbody th{
   font-weight:400;