@ebay/skin 18.3.2 → 18.4.0

package/dist/bundles/skin-headless.css

@@ -146,6 +146,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;
@@ -2490,7 +2518,7 @@ button.icon-btn.drawer-dialog__close{
   display:inline-flex;
   font-family:Arial,sans-serif;
   font-weight:700;
-  height:28px;
+  height:24px;
   position:relative;
 }
 
@@ -2503,7 +2531,7 @@ button.icon-btn.drawer-dialog__close{
 }
 
 .eek .icon--eek-arrow{
-  width:11px;
+  width:9px;
 }
 
 .eek__arrow{
@@ -2594,7 +2622,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;
 }
@@ -2757,119 +2785,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;
@@ -5571,6 +5612,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;
 }
@@ -8307,10 +8408,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%;
 }
@@ -8342,8 +8468,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{
@@ -8402,6 +8550,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;

package/dist/eek/eek.css

@@ -3,7 +3,7 @@
     display: inline-flex;
     font-family: Arial, sans-serif;
     font-weight: 700;
-    height: 28px;
+    height: 24px;
     position: relative;
 }
 
@@ -16,7 +16,7 @@
 }
 
 .eek .icon--eek-arrow {
-    width: 11px;
+    width: 9px;
 }
 
 .eek__arrow {
@@ -111,7 +111,7 @@
     border-radius: 1px 0 0 1px;
     display: inline-flex;
     flex-direction: column;
-    height: 24px;
+    height: 20px;
     margin: 1px;
     padding: 0 1px;
 }

package/dist/file-preview-card/file-preview-card.css

@@ -1,4 +1,9 @@
 .file-preview-card {
+    display: flex;
+    flex-direction: column;
+}
+
+.file-preview-card__body {
     aspect-ratio: 1/1;
     background-color: var(
         --file-preview-card-background-color,
@@ -8,26 +13,20 @@
         --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)
@@ -37,125 +36,136 @@
     width: 100%;
 }
 
-.file-preview-card__body--fade {
+.file-preview-card__asset--fade {
+    background-color: inherit;
     opacity: 0.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;
+.file-preview-card__body .icon-btn {
+    height: var(--spacing-400);
+    width: var(--spacing-400);
+}
+
+.file-preview-card__body > .file-preview-card__action {
+    position: absolute;
+    right: var(--spacing-100);
+    top: var(--spacing-100);
     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__body > .file-preview-card__action:dir(rtl) {
+    left: var(--spacing-100);
+    right: auto;
 }
 
-.file-preview-card .file-preview-card__menu-action .icon-btn:not(:hover) {
+.icon-btn.file-preview-card__action:not(:hover) {
     background-color: var(
-        --file-preview-card-menu-action-background-color,
+        --file-preview-card-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 {
+.file-preview-card__info {
     align-items: center;
     background-color: var(
-        --file-preview-card-label-background-color,
+        --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,
+            --file-preview-card-see-more-background-color-rgb,
             var(--color-background-strong-rgb)
         ),
         0.5
     );
+    border: none;
+    border-radius: 50%;
     color: var(
-        --file-preview-card-center-action-color,
+        --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__body-action .icon-btn:active,
-.file-preview-card__body-action .icon-btn:focus,
-.file-preview-card__body-action .icon-btn:hover {
+.file-preview-card__see-more:active,
+.file-preview-card__see-more:focus-visible,
+.file-preview-card__see-more:hover {
     color: var(
-        --file-preview-card-center-action-interactive-color,
+        --file-preview-card-see-more-interactive-color,
         var(--color-foreground-primary)
     );
 }
 
-.file-preview-card__body-action .icon-btn:focus,
-.file-preview-card__body-action .icon-btn:hover {
+.file-preview-card__see-more:focus-visible,
+.file-preview-card__see-more:hover {
     background-color: rgba(
         var(
-            --file-preview-card-center-action-interactive-background-color-rgb,
+            --file-preview-card-see-more-interactive-background-color-rgb,
             var(--color-state-secondary-hover-rgb)
         ),
         0.5
     );
 }
 
-.file-preview-card__body-action .icon-btn:active {
+.file-preview-card__see-more:active {
     background-color: rgba(
         var(
-            --file-preview-card-center-action-interactive-active-background-color-rgb,
+            --file-preview-card-see-more-interactive-active-background-color-rgb,
             var(--color-state-secondary-active-rgb)
         ),
         0.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);
+}