@ebay/skin 19.1.3 → 19.3.0

package/README.md

@@ -4,7 +4,7 @@
 
 > Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
 
-Please visit the [Skin website](https://opensource.ebay.com/skin/) for all end-user documentation.
+Please visit the [Skin website](https://opensource.ebay.com/evo-web/skin/) for all end-user documentation.
 
 ## License
 
@@ -12,7 +12,7 @@ Skin is [MIT](LICENSE) licensed.
 
 ## Install
 
-Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/). Skin is also available on our [CDN](https://opensource.ebay.com/skin/#cdn).
+Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/). Skin is also available on our [CDN](https://opensource.ebay.com/evo-web/skin/#cdn).
 
 ## Versioning
 
@@ -26,13 +26,13 @@ More detailed insight into our versioning process can be found in our [contribut
 
 ## Releases
 
-Please refer to our [releases](https://github.com/eBay/skin/releases) page to view the change log for current and past releases.
+Please refer to our [releases](https://github.com/eBay/evo-web/releases) page to view the change log for current and past releases.
 
-Please refer to our [web archive](https://opensource.ebay.com/skin/archive/) for past examples and documentation.
+Please refer to our [web archive](https://opensource.ebay.com/evo-web/skin/archive/) for past examples and documentation.
 
 ## Roadmap
 
-Please refer to our [projects](https://github.com/eBay/skin/projects) page to see what's coming down the pipeline.
+Please refer to our [projects](https://github.com/eBay/evo-web/projects) page to see what's coming down the pipeline.
 
 ## Browser Support
 
@@ -46,7 +46,7 @@ We take accessibility very seriously. Very seriously indeed. Therefore all modul
 
 ## Issues
 
-Please use our [issues page](https://github.com/eBay/skin/issues) to ask questions, report issues or submit feature requests.
+Please use our [issues page](https://github.com/eBay/evo-web/issues) to ask questions, report issues or submit feature requests.
 
 To help track your issue, the Skin admins will assign it with a label from one or more issue categories.
 
@@ -74,4 +74,4 @@ The original creator of Skin is [Senthil Padmanabhan](https://github.com/senthil
 
 The current author and lead maintainer is [Ian McBurnie](https://github.com/ianmcburnie).
 
-[List of all contributors](https://github.com/eBay/skin/graphs/contributors).
+[List of all contributors](https://github.com/eBay/evo-web/graphs/contributors).

package/dist/accordion/accordion.css

@@ -7,7 +7,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);
 }
 
@@ -20,6 +20,13 @@ 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;
@@ -34,12 +41,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;
@@ -50,6 +51,11 @@ ul.accordion details[open] svg.details__expand {
     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 {

package/dist/bundles/skin-default.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);
@@ -609,7 +610,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);
 }
 
@@ -622,6 +623,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;
@@ -634,12 +639,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;
 }
@@ -648,6 +647,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;
@@ -1128,6 +1132,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{
@@ -1216,9 +1224,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));
 }
 
@@ -1271,6 +1284,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{
@@ -2847,6 +2864,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;
@@ -3070,6 +3088,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;
@@ -3083,12 +3102,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;
 }
 
@@ -3107,7 +3128,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);
@@ -3174,7 +3195,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;
 }
 
@@ -3225,12 +3246,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;
@@ -5525,6 +5542,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;
@@ -5938,6 +5959,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);
@@ -8223,7 +8369,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;
@@ -11879,6 +12025,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);
@@ -11927,11 +12077,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;
+}