@ebay/skin 18.4.0 → 18.5.0-next.0

package/accordion.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./accordion.js"] }

package/accordion.css

@@ -0,0 +1 @@
+@import "./dist/accordion/accordion.css";

package/accordion.js

@@ -0,0 +1 @@
+require('./dist/accordion/accordion.css');

package/accordion.mjs

@@ -0,0 +1 @@
+import './dist/accordion/accordion.css';

package/ccd.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./ccd.js"] }

package/ccd.css

@@ -0,0 +1 @@
+@import "./dist/ccd/ccd.css";

package/ccd.js

@@ -0,0 +1 @@
+require('./dist/ccd/ccd.css');

package/ccd.mjs

@@ -0,0 +1 @@
+import './dist/ccd/ccd.css';

package/dist/accordion/accordion.css

@@ -0,0 +1,58 @@
+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 0.5s cubic-bezier(0.3, 0, 0, 1),
+        transform 0.5s cubic-bezier(0.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;
+    }
+}

package/dist/bundles/skin-default.css

@@ -571,6 +571,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;
@@ -1606,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;
@@ -2919,6 +3010,10 @@ button.icon-btn.drawer-dialog__close{
   position:relative;
 }
 
+.eek--large{
+  height:32px;
+}
+
 .eek__container{
   align-items:center;
   border:1px solid #000;
@@ -2931,6 +3026,10 @@ button.icon-btn.drawer-dialog__close{
   width:9px;
 }
 
+.eek--large .icon--eek-arrow{
+  width:12.5px;
+}
+
 .eek__arrow{
   overflow:hidden;
   width:17px;
@@ -3013,6 +3112,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;
@@ -3024,13 +3127,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){
@@ -3041,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;
 }
@@ -3640,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;
@@ -3674,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{
@@ -6013,13 +6170,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;
@@ -6044,6 +6201,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;
@@ -8873,6 +9040,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;
 }
 
@@ -8942,6 +9110,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/bundles/skin-full.css

@@ -762,6 +762,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;
@@ -1797,6 +1850,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;
@@ -3110,6 +3201,10 @@ button.icon-btn.drawer-dialog__close{
   position:relative;
 }
 
+.eek--large{
+  height:32px;
+}
+
 .eek__container{
   align-items:center;
   border:1px solid #000;
@@ -3122,6 +3217,10 @@ button.icon-btn.drawer-dialog__close{
   width:9px;
 }
 
+.eek--large .icon--eek-arrow{
+  width:12.5px;
+}
+
 .eek__arrow{
   overflow:hidden;
   width:17px;
@@ -3204,6 +3303,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;
@@ -3215,13 +3318,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){
@@ -3232,6 +3350,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;
 }
@@ -3831,6 +3956,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;
@@ -3865,7 +4022,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{
@@ -6204,13 +6361,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;
@@ -6235,6 +6392,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;
@@ -9064,6 +9231,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;
 }
 
@@ -9133,6 +9301,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;