@ebay/skin 19.1.3 → 19.3.0

package/dist/bundles/skin-full.css

@@ -68,6 +68,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-blue-400:#659eff;
   --color-blue-500:#3665f3;
   --color-blue-600:#382aef;
+  --color-blue-650:#003aa5;
   --color-blue-700:#002a69;
   --color-blue-800:#19133a;
   --color-violet-100:#f6f5fe;
@@ -238,7 +239,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-foreground-on-information:var(--color-neutral-100);
   --color-foreground-on-strong:var(--color-neutral-100);
   --color-foreground-link-visited:var(--color-pink-600);
-  --color-foreground-link-legal:var(--color-foreground-accent);
+  --color-foreground-link-legal:var(--color-blue-650);
   --color-foreground-link-primary:var(--color-foreground-primary);
   --color-stroke-default:var(--color-neutral-500);
   --color-stroke-accent:var(--color-blue-500);
@@ -460,7 +461,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
     --color-foreground-on-information:var(--color-neutral-800);
     --color-foreground-on-strong:var(--color-neutral-800);
     --color-foreground-link-visited:var(--color-pink-400);
-    --color-foreground-link-legal:var(--color-foreground-accent);
+    --color-foreground-link-legal:var(--color-blue-400);
     --color-foreground-link-primary:var(--color-foreground-primary);
     --color-stroke-default:var(--color-neutral-600);
     --color-stroke-accent:var(--color-blue-400);
@@ -808,7 +809,7 @@ ul.accordion ::marker{
   font-size:0;
 }
 
-ul.accordion li:not(:last-child){
+ul.accordion>li:not(:last-child){
   border-bottom:1px solid var(--color-stroke-subtle);
 }
 
@@ -821,6 +822,10 @@ ul.accordion summary.details__summary{
   padding:12px 16px;
 }
 
+ul.accordion summary.details__summary span.details__icon svg{
+  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
+}
+
 ul.accordion details .details__content{
   margin:0 16px 6px;
   opacity:0;
@@ -833,12 +838,6 @@ 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;
 }
@@ -847,6 +846,11 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   display:none;
 }
 
+ul.accordion--large summary.details__summary{
+  font-size:var(--font-size-large-1);
+  min-height:52px;
+}
+
 @media (prefers-reduced-motion){
   ul.accordion details .details__content,ul.accordion details[open] .details__content{
     transition:none;
@@ -1327,6 +1331,10 @@ a.fake-btn--primary,button.btn--primary{
   border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
   color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
   font-weight:700;
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+}
+a.fake-btn--primary:active,button.btn--primary:active{
+  transform:scale(.97);
 }
 
 a.fake-btn--primary{
@@ -1415,9 +1423,14 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
 a.fake-btn--secondary,button.btn--secondary{
   background-color:var(--btn-secondary-background-color, transparent);
   border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
+  color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+}
+a.fake-btn--secondary:active,button.btn--secondary:active{
+  transform:scale(.97);
 }
 
-a.fake-btn--secondary,a.fake-btn--secondary:visited,button.btn--secondary{
+a.fake-btn--secondary:visited{
   color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
 }
 
@@ -1470,6 +1483,10 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
 
 a.fake-btn--tertiary,button.btn--tertiary{
   border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+}
+a.fake-btn--tertiary:active,button.btn--tertiary:active{
+  transform:scale(.97);
 }
 
 a.fake-btn--tertiary[href]:focus,a.fake-btn--tertiary[href]:hover,button.btn--tertiary:not([disabled],[aria-disabled=true]):focus,button.btn--tertiary:not([disabled],[aria-disabled=true]):hover{
@@ -3046,6 +3063,7 @@ details.details summary:focus:not(:focus-visible){
   -webkit-overflow-scrolling:touch;
   align-items:flex-end;
   overflow-y:auto;
+  overflow:hidden;
   position:fixed;
   right:0;
   top:0;
@@ -3269,6 +3287,7 @@ button.icon-btn.drawer-dialog__close{
 .eek{
   align-items:stretch;
   display:inline-flex;
+  flex-direction:row-reverse;
   font-family:Arial,sans-serif;
   font-weight:700;
   height:24px;
@@ -3282,12 +3301,14 @@ button.icon-btn.drawer-dialog__close{
 .eek__container{
   align-items:center;
   border:1px solid #000;
-  border-radius:2px 0 0 2px;
-  border-right:none;
+  border-left:none;
+  border-radius:0 2px 2px 0;
   display:inline-flex;
+  flex-direction:row-reverse;
 }
 
 .eek .icon--eek-arrow{
+  rotate:180deg;
   width:9px;
 }
 
@@ -3306,7 +3327,7 @@ button.icon-btn.drawer-dialog__close{
   content:"";
   display:block;
   height:19.7989898732px;
-  margin-top:2.3px;
+  margin-block-start:2.3px;
   position:relative;
   right:12px;
   transform:rotate(45deg);
@@ -3373,7 +3394,7 @@ button.icon-btn.drawer-dialog__close{
   color:#fff;
   display:inline-block;
   font-size:18px;
-  margin-left:8px;
+  margin-inline-end:8px;
   text-shadow:-.5px .5px 0 #000, .5px .5px 0 #000, .5px -.5px 0 #000, -.5px -.5px 0 #000;
 }
 
@@ -3424,12 +3445,8 @@ 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;
+[dir=rtl] .eek{
+  direction:ltr;
 }
 span.field{
   display:inline-block;
@@ -5724,6 +5741,10 @@ svg.icon--32,svg.icon--32-fit{
   height:32px;
   width:32px;
 }
+svg.icon--48,svg.icon--48-fit{
+  height:48px;
+  width:48px;
+}
 svg.icon--64,svg.icon--64-fit{
   height:32px;
   width:64px;
@@ -6137,6 +6158,131 @@ span.inline-notice{
 .inline-notice a,.inline-notice button.fake-link{
   color:var(--color-foreground-primary);
 }
+
+.item-tile{
+  display:grid;
+  gap:var(--spacing-200);
+  grid-area:body;
+  grid-template-areas:"header" "body";
+  grid-template-rows:auto 1fr;
+}
+
+.item-tile--list-view{
+  display:flex;
+  flex-direction:row;
+  gap:var(--spacing-100);
+}
+
+.item-tile__header{
+  grid-area:header;
+}
+
+.item-tile__header .file-preview-card__body a{
+  display:block;
+  width:100%;
+}
+
+.item-tile__header .file-preview-card__body a:focus-visible{
+  border-radius:var(--item-tile-media-border-radius, var(--border-radius-100));
+  outline-offset:3px;
+}
+
+.item-tile__body{
+  display:grid;
+  grid-area:body;
+  grid-template-areas:"section-primary" "section-secondary" "section-tertiary";
+  grid-template-rows:25px .75fr 1fr;
+}
+
+.item-tile--list-view .item-tile__header{
+  max-width:200px;
+}
+
+.item-tile--list-view .item-tile__body{
+  display:flex;
+  flex-direction:column;
+}
+
+.item-tile__section-primary{
+  display:inline-block;
+  grid-area:section-primary;
+  margin-block-end:var(--spacing-50);
+}
+
+.item-tile__section-primary .signal{
+  margin:0;
+}
+
+.item-tile__section-secondary{
+  grid-area:section-secondary;
+}
+
+.item-tile__section-tertiary{
+  grid-area:section-tertiary;
+}
+.item-tile__section-tertiary p{
+  margin-block-end:.2143em;
+  margin-block-start:0;
+}
+
+.item-tile__section-tertiary a,.item-tile__title{
+  color:var(--color-foreground-link-primary);
+  text-decoration:none;
+}
+
+.item-tile__title{
+  -webkit-box-orient:vertical;
+  display:-webkit-box;
+  -webkit-line-clamp:3;
+  overflow:hidden;
+}
+
+.item-tile__title:hover{
+  color:var(--color-foreground-link-primary);
+  text-decoration:underline;
+}
+
+.item-tile__title:visited{
+  color:var(--color-foreground-link-visited);
+}
+
+.item-tile__subtitle{
+  color:var(--color-foreground-secondary);
+}
+
+.layout-grid.item-tile-group{
+  --layout-grid-columns-min:2;
+  --layout-grid-columns-xs:2;
+  --layout-grid-columns-sm:2;
+  --layout-grid-columns-md:3;
+  --layout-grid-columns-lg:4;
+  --layout-grid-columns-xl:5;
+  --layout-grid-columns-xl2:5;
+  --layout-grid-columns-xl3:5;
+  --layout-grid-columns-xl4:5;
+}
+
+.layout-grid.item-tile-group--list-view{
+  --layout-grid-columns-min:1;
+  --layout-grid-columns-xs:1;
+  --layout-grid-columns-sm:1;
+  --layout-grid-columns-md:1;
+  --layout-grid-columns-lg:1;
+  --layout-grid-columns-xl:2;
+  --layout-grid-columns-xl2:2;
+  --layout-grid-columns-xl3:2;
+  --layout-grid-columns-xl4:2;
+}
+
+.item-tile-group .item-tile__title{
+  -webkit-line-clamp:3;
+}
+
+@media (min-width:768px){
+  .item-tile-group .item-tile__title{
+    -webkit-line-clamp:2;
+  }
+}
 .layout-grid{
   --layout-grid-cell-height-min:0;
   --layout-grid-cell-gap:var(--spacing-100);
@@ -8422,7 +8568,7 @@ nav.pagination--fluid ol.pagination__items li{
   -webkit-overflow-scrolling:touch;
   flex-direction:column;
   overflow-y:auto;
-  overflow-y:hidden;
+  overflow:hidden;
   position:fixed;
   right:0;
   top:0;
@@ -12078,6 +12224,10 @@ button.tourtip__close svg.icon{
   width:100%;
 }
 
+.video-player button{
+  font-family:inherit;
+}
+
 .video-player__overlay{
   align-items:center;
   background-color:rgba(0, 0, 0, .6);
@@ -12126,11 +12276,42 @@ button.tourtip__close svg.icon{
   width:48px;
 }
 
+.video-player .shaka-bottom-controls{
+  box-sizing:border-box;
+  margin-bottom:3%;
+  padding-bottom:0;
+  position:relative;
+  width:94%;
+}
+
 .video-player .shaka-controls-button-panel{
   background-color:rgba(0, 0, 0, .7);
   border-radius:8px;
+  bottom:0;
+  height:40px;
+  position:absolute;
+  width:100%;
+}
+.video-player .shaka-controls-button-panel :first-child{
+  margin-left:8px;
+}
+.video-player .shaka-controls-button-panel :last-child{
+  margin-right:8px;
 }
 
 .video-player--poster .shaka-scrim-container{
   visibility:hidden;
 }
+
+.video-player .shaka-range-container{
+  box-sizing:border-box;
+  margin:0 188px 18px 76px;
+}
+
+.video-player #shaka-player-ui-time-container{
+  display:none;
+}
+
+.video-player .shaka-video-container{
+  font-family:Market Sans,Arial,sans-serif;
+}

package/dist/bundles/skin-headless.css

@@ -184,7 +184,7 @@ ul.accordion ::marker{
   font-size:0;
 }
 
-ul.accordion li:not(:last-child){
+ul.accordion>li:not(:last-child){
   border-bottom:1px solid var(--color-stroke-subtle);
 }
 
@@ -197,6 +197,10 @@ ul.accordion summary.details__summary{
   padding:12px 16px;
 }
 
+ul.accordion summary.details__summary span.details__icon svg{
+  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
+}
+
 ul.accordion details .details__content{
   margin:0 16px 6px;
   opacity:0;
@@ -209,12 +213,6 @@ 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;
 }
@@ -223,6 +221,11 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   display:none;
 }
 
+ul.accordion--large summary.details__summary{
+  font-size:var(--font-size-large-1);
+  min-height:52px;
+}
+
 @media (prefers-reduced-motion){
   ul.accordion details .details__content,ul.accordion details[open] .details__content{
     transition:none;
@@ -703,6 +706,10 @@ a.fake-btn--primary,button.btn--primary{
   border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
   color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
   font-weight:700;
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+}
+a.fake-btn--primary:active,button.btn--primary:active{
+  transform:scale(.97);
 }
 
 a.fake-btn--primary{
@@ -791,9 +798,14 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
 a.fake-btn--secondary,button.btn--secondary{
   background-color:var(--btn-secondary-background-color, transparent);
   border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
+  color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+}
+a.fake-btn--secondary:active,button.btn--secondary:active{
+  transform:scale(.97);
 }
 
-a.fake-btn--secondary,a.fake-btn--secondary:visited,button.btn--secondary{
+a.fake-btn--secondary:visited{
   color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
 }
 
@@ -846,6 +858,10 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
 
 a.fake-btn--tertiary,button.btn--tertiary{
   border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+}
+a.fake-btn--tertiary:active,button.btn--tertiary:active{
+  transform:scale(.97);
 }
 
 a.fake-btn--tertiary[href]:focus,a.fake-btn--tertiary[href]:hover,button.btn--tertiary:not([disabled],[aria-disabled=true]):focus,button.btn--tertiary:not([disabled],[aria-disabled=true]):hover{
@@ -2422,6 +2438,7 @@ details.details summary:focus:not(:focus-visible){
   -webkit-overflow-scrolling:touch;
   align-items:flex-end;
   overflow-y:auto;
+  overflow:hidden;
   position:fixed;
   right:0;
   top:0;
@@ -2645,6 +2662,7 @@ button.icon-btn.drawer-dialog__close{
 .eek{
   align-items:stretch;
   display:inline-flex;
+  flex-direction:row-reverse;
   font-family:Arial,sans-serif;
   font-weight:700;
   height:24px;
@@ -2658,12 +2676,14 @@ button.icon-btn.drawer-dialog__close{
 .eek__container{
   align-items:center;
   border:1px solid #000;
-  border-radius:2px 0 0 2px;
-  border-right:none;
+  border-left:none;
+  border-radius:0 2px 2px 0;
   display:inline-flex;
+  flex-direction:row-reverse;
 }
 
 .eek .icon--eek-arrow{
+  rotate:180deg;
   width:9px;
 }
 
@@ -2682,7 +2702,7 @@ button.icon-btn.drawer-dialog__close{
   content:"";
   display:block;
   height:19.7989898732px;
-  margin-top:2.3px;
+  margin-block-start:2.3px;
   position:relative;
   right:12px;
   transform:rotate(45deg);
@@ -2749,7 +2769,7 @@ button.icon-btn.drawer-dialog__close{
   color:#fff;
   display:inline-block;
   font-size:18px;
-  margin-left:8px;
+  margin-inline-end:8px;
   text-shadow:-.5px .5px 0 #000, .5px .5px 0 #000, .5px -.5px 0 #000, -.5px -.5px 0 #000;
 }
 
@@ -2800,12 +2820,8 @@ 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;
+[dir=rtl] .eek{
+  direction:ltr;
 }
 span.field{
   display:inline-block;
@@ -5100,6 +5116,10 @@ svg.icon--32,svg.icon--32-fit{
   height:32px;
   width:32px;
 }
+svg.icon--48,svg.icon--48-fit{
+  height:48px;
+  width:48px;
+}
 svg.icon--64,svg.icon--64-fit{
   height:32px;
   width:64px;
@@ -5513,6 +5533,131 @@ span.inline-notice{
 .inline-notice a,.inline-notice button.fake-link{
   color:var(--color-foreground-primary);
 }
+
+.item-tile{
+  display:grid;
+  gap:var(--spacing-200);
+  grid-area:body;
+  grid-template-areas:"header" "body";
+  grid-template-rows:auto 1fr;
+}
+
+.item-tile--list-view{
+  display:flex;
+  flex-direction:row;
+  gap:var(--spacing-100);
+}
+
+.item-tile__header{
+  grid-area:header;
+}
+
+.item-tile__header .file-preview-card__body a{
+  display:block;
+  width:100%;
+}
+
+.item-tile__header .file-preview-card__body a:focus-visible{
+  border-radius:var(--item-tile-media-border-radius, var(--border-radius-100));
+  outline-offset:3px;
+}
+
+.item-tile__body{
+  display:grid;
+  grid-area:body;
+  grid-template-areas:"section-primary" "section-secondary" "section-tertiary";
+  grid-template-rows:25px .75fr 1fr;
+}
+
+.item-tile--list-view .item-tile__header{
+  max-width:200px;
+}
+
+.item-tile--list-view .item-tile__body{
+  display:flex;
+  flex-direction:column;
+}
+
+.item-tile__section-primary{
+  display:inline-block;
+  grid-area:section-primary;
+  margin-block-end:var(--spacing-50);
+}
+
+.item-tile__section-primary .signal{
+  margin:0;
+}
+
+.item-tile__section-secondary{
+  grid-area:section-secondary;
+}
+
+.item-tile__section-tertiary{
+  grid-area:section-tertiary;
+}
+.item-tile__section-tertiary p{
+  margin-block-end:.2143em;
+  margin-block-start:0;
+}
+
+.item-tile__section-tertiary a,.item-tile__title{
+  color:var(--color-foreground-link-primary);
+  text-decoration:none;
+}
+
+.item-tile__title{
+  -webkit-box-orient:vertical;
+  display:-webkit-box;
+  -webkit-line-clamp:3;
+  overflow:hidden;
+}
+
+.item-tile__title:hover{
+  color:var(--color-foreground-link-primary);
+  text-decoration:underline;
+}
+
+.item-tile__title:visited{
+  color:var(--color-foreground-link-visited);
+}
+
+.item-tile__subtitle{
+  color:var(--color-foreground-secondary);
+}
+
+.layout-grid.item-tile-group{
+  --layout-grid-columns-min:2;
+  --layout-grid-columns-xs:2;
+  --layout-grid-columns-sm:2;
+  --layout-grid-columns-md:3;
+  --layout-grid-columns-lg:4;
+  --layout-grid-columns-xl:5;
+  --layout-grid-columns-xl2:5;
+  --layout-grid-columns-xl3:5;
+  --layout-grid-columns-xl4:5;
+}
+
+.layout-grid.item-tile-group--list-view{
+  --layout-grid-columns-min:1;
+  --layout-grid-columns-xs:1;
+  --layout-grid-columns-sm:1;
+  --layout-grid-columns-md:1;
+  --layout-grid-columns-lg:1;
+  --layout-grid-columns-xl:2;
+  --layout-grid-columns-xl2:2;
+  --layout-grid-columns-xl3:2;
+  --layout-grid-columns-xl4:2;
+}
+
+.item-tile-group .item-tile__title{
+  -webkit-line-clamp:3;
+}
+
+@media (min-width:768px){
+  .item-tile-group .item-tile__title{
+    -webkit-line-clamp:2;
+  }
+}
 .layout-grid{
   --layout-grid-cell-height-min:0;
   --layout-grid-cell-gap:var(--spacing-100);
@@ -7798,7 +7943,7 @@ nav.pagination--fluid ol.pagination__items li{
   -webkit-overflow-scrolling:touch;
   flex-direction:column;
   overflow-y:auto;
-  overflow-y:hidden;
+  overflow:hidden;
   position:fixed;
   right:0;
   top:0;
@@ -11454,6 +11599,10 @@ button.tourtip__close svg.icon{
   width:100%;
 }
 
+.video-player button{
+  font-family:inherit;
+}
+
 .video-player__overlay{
   align-items:center;
   background-color:rgba(0, 0, 0, .6);
@@ -11502,11 +11651,42 @@ button.tourtip__close svg.icon{
   width:48px;
 }
 
+.video-player .shaka-bottom-controls{
+  box-sizing:border-box;
+  margin-bottom:3%;
+  padding-bottom:0;
+  position:relative;
+  width:94%;
+}
+
 .video-player .shaka-controls-button-panel{
   background-color:rgba(0, 0, 0, .7);
   border-radius:8px;
+  bottom:0;
+  height:40px;
+  position:absolute;
+  width:100%;
+}
+.video-player .shaka-controls-button-panel :first-child{
+  margin-left:8px;
+}
+.video-player .shaka-controls-button-panel :last-child{
+  margin-right:8px;
 }
 
 .video-player--poster .shaka-scrim-container{
   visibility:hidden;
 }
+
+.video-player .shaka-range-container{
+  box-sizing:border-box;
+  margin:0 188px 18px 76px;
+}
+
+.video-player #shaka-player-ui-time-container{
+  display:none;
+}
+
+.video-player .shaka-video-container{
+  font-family:Market Sans,Arial,sans-serif;
+}