@ebay/skin 18.4.0 → 18.5.0-next.0

package/dist/bundles/skin-headless.css

@@ -174,6 +174,59 @@ a:not([href]),a[aria-disabled=true]{
   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;
@@ -1209,6 +1262,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;
@@ -2522,6 +2613,10 @@ button.icon-btn.drawer-dialog__close{
   position:relative;
 }
 
+.eek--large{
+  height:32px;
+}
+
 .eek__container{
   align-items:center;
   border:1px solid #000;
@@ -2534,6 +2629,10 @@ button.icon-btn.drawer-dialog__close{
   width:9px;
 }
 
+.eek--large .icon--eek-arrow{
+  width:12.5px;
+}
+
 .eek__arrow{
   overflow:hidden;
   width:17px;
@@ -2616,6 +2715,10 @@ 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;
@@ -2627,13 +2730,28 @@ button.icon-btn.drawer-dialog__close{
   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){
@@ -2644,6 +2762,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;
 }
@@ -3243,6 +3368,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;
@@ -3277,7 +3434,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{
@@ -5616,13 +5773,13 @@ button.fake-link[aria-disabled=true],button.fake-link[disabled]{
   max-width:480px;
 }
 
-.list ul{
+.list ol,.list ul{
   list-style:none;
   margin:0;
   padding:0;
 }
 
-.list ul li>*{
+.list fieldset>*,.list li>*{
   align-items:center;
   background-color:var(--list-background-color, var(--color-background-primary));
   box-sizing:border-box;
@@ -5647,6 +5804,16 @@ button.fake-link[aria-disabled=true],button.fake-link[disabled]{
   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;
@@ -8476,6 +8643,7 @@ span.switch__control:focus:not(:focus-visible){
 
 .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;
 }
 
@@ -8545,6 +8713,33 @@ 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;

package/dist/ccd/ccd.css

@@ -0,0 +1,38 @@
+.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: 0.4375rem;
+    font-weight: var(--font-weight-bold);
+    gap: 2px;
+    height: 53px;
+    justify-content: center;
+    overflow: hidden;
+    text-align: center;
+    width: 53px;
+}

package/dist/eek/eek.css

@@ -7,6 +7,10 @@
     position: relative;
 }
 
+.eek--large {
+    height: 32px;
+}
+
 .eek__container {
     align-items: center;
     border: 1px solid #000;
@@ -19,6 +23,10 @@
     width: 9px;
 }
 
+.eek--large .icon--eek-arrow {
+    width: 12.5px;
+}
+
 .eek__arrow {
     overflow: hidden;
     width: 17px;
@@ -105,6 +113,10 @@
         -0.5px -0.5px 0 #000;
 }
 
+.eek--large .eek__rating {
+    font-size: 24px;
+}
+
 .eek__rating-range {
     align-items: center;
     background-color: #fff;
@@ -116,13 +128,28 @@
     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) {
@@ -134,3 +161,10 @@
         }
     }
 }
+[dir="rtl"] .eek .icon--eek-arrow {
+    transform: rotate(180deg);
+}
+[dir="rtl"] .eek__container {
+    border-left: none;
+    border-right: 1px solid #000;
+}

package/dist/filter-menu/filter-menu.css

@@ -114,6 +114,38 @@ 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(
@@ -176,7 +208,7 @@ button.filter-menu__footer:hover {
 .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,

package/dist/list/list.css

@@ -2,13 +2,15 @@
     max-width: 480px;
 }
 
+.list ol,
 .list ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
-.list ul li > * {
+.list fieldset > *,
+.list li > * {
     align-items: center;
     background-color: var(
         --list-background-color,
@@ -36,6 +38,16 @@
     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;

package/dist/svg/icon/icon-ccd-charger-included.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 58 78" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0 0h58v78H0V0Zm1 1v76h56V1H1Zm7 28.75c0-.966.784-1.75 1.75-1.75H15V18h5V8h4v10h10V8h4v10h5v10h5.25c.967 0 1.75.784 1.75 1.75v38.5A1.75 1.75 0 0 1 48.25 70H9.75A1.75 1.75 0 0 1 8 68.25v-38.5ZM23 18V9h-2v9h2Zm14 0h-2V9h2v9Zm5 10v-9H16v9h26ZM9.75 29a.75.75 0 0 0-.75.75v38.5c0 .414.336.75.75.75h38.5a.75.75 0 0 0 .75-.75v-38.5a.75.75 0 0 0-.75-.75H9.75Z"
+  />
+</svg>

package/dist/svg/icon/icon-ccd-charger-not-included.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 58 78" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M.5 0H0v78h58V0H.5ZM1 2.686V77h54.758l-5.914-8.026A1.75 1.75 0 0 1 48.25 70H9.75A1.75 1.75 0 0 1 8 68.25v-38.5c0-.966.784-1.75 1.75-1.75H15v-6.314l-14-19Zm15 20.357V28h3.653L16 23.043ZM22.137 28 16 19.671V19h26v9H22.137Zm-1.748 1H9.75a.75.75 0 0 0-.75.75v38.5c0 .414.336.75.75.75h38.5a.75.75 0 0 0 .75-.75v-.421L20.39 29ZM49 64.457 22.874 29H48.25a.75.75 0 0 1 .75.75v34.707Zm1 1.357V29.75A1.75 1.75 0 0 0 48.25 28H43V18h-5V8h-4v10H24V8h-4v10h-5v.314L2.242 1H57v74.314l-7-9.5ZM37 9v9h-2V9h2Zm-16 9h2V9h-2v9Z"
+  />
+</svg>

package/dist/svg/icon/icon-ccd-top.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 35 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.5 25V13.5H34.5V25" stroke-width="1" />
+  <path d="M6.5 13V0.5H10.5V13" stroke-width="1" />
+  <path d="M24.5 13V0.5H28.5V13" stroke-width="1" />
+</svg>

package/dist/svg/icons.svg

@@ -2,11 +2,11 @@
 <svg xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient
-      id="ref-ai-spectrum-20-colored"
-      x1="26.984"
-      y1="14.065"
-      x2="14.21"
-      y2="27.71"
+      id="ref-ai-spectrum-16-colored"
+      x1="21.21"
+      y1="11.161"
+      x2="11.274"
+      y2="21.774"
       gradientUnits="userSpaceOnUse"
     >
       <stop offset=".098" stop-color="#FFD80E" />
@@ -16,7 +16,7 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-16-colored"
+      id="ref-ai-spectrum-filled-16-colored"
       x1="21.21"
       y1="11.161"
       x2="11.274"
@@ -43,6 +43,20 @@
       <stop offset=".562" stop-color="#0968F6" />
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
+    <linearGradient
+      id="ref-ai-spectrum-20-colored"
+      x1="26.984"
+      y1="14.065"
+      x2="14.21"
+      y2="27.71"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
     <linearGradient
       id="ref-ai-spectrum-24-colored"
       x1="32.758"
@@ -58,7 +72,7 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-filled-16-colored"
+      id="ref-ai-spectrum-thin-16-colored"
       x1="21.21"
       y1="11.161"
       x2="11.274"
@@ -86,25 +100,11 @@
       <stop offset=".785" stop-color="#4EE04B" />
     </linearGradient>
     <linearGradient
-      id="ref-ai-spectrum-thin-16-colored"
-      x1="21.21"
-      y1="11.161"
-      x2="11.274"
-      y2="21.774"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop offset=".098" stop-color="#FFD80E" />
-      <stop offset=".267" stop-color="#FF4242" />
-      <stop offset=".418" stop-color="#993EE0" />
-      <stop offset=".562" stop-color="#0968F6" />
-      <stop offset=".785" stop-color="#4EE04B" />
-    </linearGradient>
-    <linearGradient
-      id="ref-cb-32-colored"
-      x1="50"
+      id="ref-cb-24-colored"
+      x1="38"
       y1="0"
-      x2="-.978"
-      y2="32"
+      x2="-.452"
+      y2="24.459"
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="#192660" />
@@ -130,11 +130,11 @@
       <stop offset="1" stop-color="#03944B" />
     </linearGradient>
     <linearGradient
-      id="ref-cb-24-colored"
-      x1="38"
+      id="ref-cb-12-colored"
+      x1="20"
       y1="0"
-      x2="-.452"
-      y2="24.459"
+      x2=".373"
+      y2="13.142"
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="#192660" />
@@ -145,11 +145,11 @@
       <stop offset="1" stop-color="#03944B" />
     </linearGradient>
     <linearGradient
-      id="ref-cb-12-colored"
-      x1="20"
+      id="ref-cb-32-colored"
+      x1="50"
       y1="0"
-      x2=".373"
-      y2="13.142"
+      x2="-.978"
+      y2="32"
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="#192660" />
@@ -1305,6 +1305,25 @@
       fill="#fff"
     />
   </symbol>
+  <symbol viewBox="0 0 58 78" id="icon-ccd-charger-included">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 0h58v78H0V0Zm1 1v76h56V1H1Zm7 28.75c0-.966.784-1.75 1.75-1.75H15V18h5V8h4v10h10V8h4v10h5v10h5.25c.967 0 1.75.784 1.75 1.75v38.5A1.75 1.75 0 0 1 48.25 70H9.75A1.75 1.75 0 0 1 8 68.25v-38.5ZM23 18V9h-2v9h2Zm14 0h-2V9h2v9Zm5 10v-9H16v9h26ZM9.75 29a.75.75 0 0 0-.75.75v38.5c0 .414.336.75.75.75h38.5a.75.75 0 0 0 .75-.75v-38.5a.75.75 0 0 0-.75-.75H9.75Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 58 78" id="icon-ccd-charger-not-included">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M.5 0H0v78h58V0H.5ZM1 2.686V77h54.758l-5.914-8.026A1.75 1.75 0 0 1 48.25 70H9.75A1.75 1.75 0 0 1 8 68.25v-38.5c0-.966.784-1.75 1.75-1.75H15v-6.314l-14-19Zm15 20.357V28h3.653L16 23.043ZM22.137 28 16 19.671V19h26v9H22.137Zm-1.748 1H9.75a.75.75 0 0 0-.75.75v38.5c0 .414.336.75.75.75h38.5a.75.75 0 0 0 .75-.75v-.421L20.39 29ZM49 64.457 22.874 29H48.25a.75.75 0 0 1 .75.75v34.707Zm1 1.357V29.75A1.75 1.75 0 0 0 48.25 28H43V18h-5V8h-4v10H24V8h-4v10h-5v.314L2.242 1H57v74.314l-7-9.5ZM37 9v9h-2V9h2Zm-16 9h2V9h-2v9Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 35 25" fill="none" id="icon-ccd-top">
+    <path d="M0.5 25V13.5H34.5V25" stroke-width="1" />
+    <path d="M6.5 13V0.5H10.5V13" stroke-width="1" />
+    <path d="M24.5 13V0.5H28.5V13" stroke-width="1" />
+  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-certified-recycled-16">
     <path
       d="M12.845 5.55a.989.989 0 0 0-.02-.036l-2.202-3.968C9.48-.513 6.52-.513 5.377 1.546L4.285 3.515a1 1 0 0 0 1.748.97l1.093-1.968a1 1 0 0 1 1.748 0l2.172 3.913a1 1 0 0 0-.365 1.958l2.04.572a1 1 0 0 0 1.226-.636l.73-1.978a1 1 0 0 0-1.832-.795ZM14.726 10a1 1 0 0 0-.874 1.485l.016.03A1 1 0 0 1 12.994 13H3.006a1 1 0 0 1-.874-1.485l1.134-2.043a1 1 0 0 0 1.833-.78l-.646-1.993a1 1 0 0 0-1.19-.671l-2.067.503a1 1 0 0 0 .322 1.968L.383 10.544C-.727 12.544.72 15 3.006 15h9.988c2.287 0 3.733-2.456 2.623-4.456l-.016-.03a1 1 0 0 0-.875-.514Z"

package/dist/table/table.css

@@ -77,6 +77,7 @@
 .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;
 }
 
@@ -149,6 +150,34 @@
     padding-inline-end: 0;
 }
 
+.table--loading-state {
+    overflow: hidden;
+}
+
+.table--loading-state table {
+    opacity: 0.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;