@ebay/skin 18.3.2 → 18.5.0-next.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,87 @@ 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;
+}
+ul.accordion{
+  margin:0;
+  padding:0;
+  width:100%;
+}
+ul.accordion ::marker{
+  font-size:0;
+}
+
+ul.accordion li:not(:last-child){
+  border-bottom:1px solid var(--color-stroke-subtle);
+}
+
+ul.accordion summary.details__summary{
+  border-radius:0;
+  display:flex;
+  font-size:var(--font-size-medium);
+  justify-content:space-between;
+  min-height:48px;
+  padding:12px 16px;
+}
+
+ul.accordion details .details__content{
+  margin:0 16px 6px;
+  opacity:0;
+  transform:scaleY(0);
+  transform-origin:top;
+  transition:opacity .5s cubic-bezier(.3, 0, 0, 1),transform .5s cubic-bezier(.3, 0, 0, 1);
+}
+
+ul.accordion details[open] .details__content{
+  opacity:1;
+  transform:scaleY(1);
+}
+
+ul.accordion--large summary.details__summary{
+  font-size:var(--font-size-large-1);
+  min-height:52px;
+}
+
+ul.accordion details svg.details__expand,ul.accordion details[open] svg.details__collapse{
+  display:inline-block;
+}
+
+ul.accordion details svg.details__collapse,ul.accordion details[open] svg.details__expand{
+  display:none;
+}
+
+@media (prefers-reduced-motion){
+  ul.accordion details .details__content,ul.accordion details[open] .details__content{
+    transition:none;
+  }
+}
 .alert-dialog[role=alertdialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -1577,6 +1659,44 @@ span.carousel,span.carousel__container{
 .carousel--hidden-scrollbar .carousel__control--next{
   right:0;
 }
+.ccd{
+  display:inline-flex;
+  gap:8px;
+}
+
+.ccd__charger-icon{
+  height:78px;
+  width:58px;
+}
+
+.ccd__description-figure{
+  align-items:center;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  width:55px;
+}
+
+.ccd__top-icon{
+  height:24px;
+  width:35px;
+}
+
+.ccd__body{
+  align-items:center;
+  border:1px solid var(--color-foreground-primary);
+  border-radius:1.5px;
+  display:flex;
+  flex-direction:column;
+  font-size:.4375rem;
+  font-weight:var(--font-weight-bold);
+  gap:2px;
+  height:53px;
+  justify-content:center;
+  overflow:hidden;
+  text-align:center;
+  width:53px;
+}
 .calendar{
   color:var(--calendar-color-token, var(--color-foreground-primary));
   display:table;
@@ -2886,10 +3006,14 @@ button.icon-btn.drawer-dialog__close{
   display:inline-flex;
   font-family:Arial,sans-serif;
   font-weight:700;
-  height:28px;
+  height:24px;
   position:relative;
 }
 
+.eek--large{
+  height:32px;
+}
+
 .eek__container{
   align-items:center;
   border:1px solid #000;
@@ -2899,7 +3023,11 @@ button.icon-btn.drawer-dialog__close{
 }
 
 .eek .icon--eek-arrow{
-  width:11px;
+  width:9px;
+}
+
+.eek--large .icon--eek-arrow{
+  width:12.5px;
 }
 
 .eek__arrow{
@@ -2984,24 +3112,43 @@ button.icon-btn.drawer-dialog__close{
   text-shadow:-.5px .5px 0 #000, .5px .5px 0 #000, .5px -.5px 0 #000, -.5px -.5px 0 #000;
 }
 
+.eek--large .eek__rating{
+  font-size:24px;
+}
+
 .eek__rating-range{
   align-items:center;
   background-color:#fff;
   border-radius:1px 0 0 1px;
   display:inline-flex;
   flex-direction:column;
-  height:24px;
+  height:20px;
   margin:1px;
   padding:0 1px;
 }
 
+.eek--large .eek__rating-range{
+  height:28px;
+}
+
 .eek__rating-range>.icon--eek-range-arrow{
   height:6px;
   width:5px;
 }
 
+.eek--large .eek__rating-range>.icon--eek-range-arrow{
+  height:7px;
+  width:6px;
+}
+
 .eek__rating-range>span{
   font-size:8px;
+  height:8px;
+}
+
+.eek--large .eek__rating-range>span{
+  font-size:10px;
+  height:10px;
 }
 @media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){
   @supports (-webkit-appearance:none){
@@ -3012,6 +3159,13 @@ button.icon-btn.drawer-dialog__close{
     }
   }
 }
+[dir=rtl] .eek .icon--eek-arrow{
+  transform:rotate(180deg);
+}
+[dir=rtl] .eek__container{
+  border-left:none;
+  border-right:1px solid #000;
+}
 span.field{
   display:inline-block;
 }
@@ -3153,119 +3307,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__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__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,.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__footer{
+  display:grid;
 }
 
-.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__footer>*{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 
-.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>: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;
@@ -3598,6 +3765,38 @@ span.filter-menu-form__item,span.filter-menu__item[role^=menuitem]{
   margin-bottom:8px;
 }
 
+.filter-menu__header{
+  align-items:center;
+  background-color:var(--color-background-secondary);
+  display:flex;
+  gap:var(--spacing-100);
+  padding:14px var(--spacing-200);
+}
+
+.filter-menu__header svg{
+  color:var(--color-foreground-secondary);
+}
+
+.filter-menu__header input{
+  background-color:inherit;
+  border:none;
+  color:var(--color-foreground-primary);
+  flex-grow:1;
+  font-size:var(--font-size-default);
+}
+
+.filter-menu__header button.btn{
+  border:none;
+  min-height:var(--spacing-250);
+  min-width:var(--spacing-250);
+  padding:0;
+  width:var(--spacing-250);
+}
+
+.filter-menu__header button:focus-visible{
+  outline-style:solid;
+}
+
 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;
@@ -3632,7 +3831,7 @@ button.filter-menu-form__footer[type=submit]:hover,button.filter-menu__footer:ho
 
 .filter-menu-form__text,.filter-menu__text{
   flex-grow:1;
-  margin-left:8px;
+  margin-inline-start:8px;
 }
 
 .filter-menu__item[role=menuitemcheckbox] svg.icon--checked,.filter-menu__item[role=menuitemradio] svg.icon--checked{
@@ -5967,6 +6166,76 @@ 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 ol,.list ul{
+  list-style:none;
+  margin:0;
+  padding:0;
+}
+
+.list fieldset>*,.list 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 ol li{
+  counter-increment:item;
+}
+
+.list ol li>:before{
+  content:counter(item) ".";
+  margin-inline-end:var(--spacing-200);
+  width:var(--spacing-300);
+}
+
+.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 +8972,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 +9032,31 @@ 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;
+  max-width:124px;
+  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{
@@ -8793,11 +9110,41 @@ span.switch__control:focus:not(:focus-visible){
   padding-inline-end:0;
 }
 
+.table--loading-state{
+  overflow:hidden;
+}
+
+.table--loading-state table{
+  opacity:.15;
+  -webkit-user-select:none;
+          user-select:none;
+}
+
+.table--loading-state .signal,.table--loading-state img{
+  filter:var(--color-media-disabled-filter);
+}
+
+.table--loading-state a{
+  cursor:default;
+  pointer-events:none;
+  text-decoration:none;
+}
+
+.table--loading-state .progress-bar-expressive{
+  bottom:50%;
+  left:0;
+  position:absolute;
+  right:0;
+}
+
 .table--mode-selection td:first-child,.table--mode-selection th:first-child{
   min-width:48px;
   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;