@ebay/skin 16.5.0 → 16.6.0-0

package/src/less/carousel/stories/carousel.stories.js

@@ -4,8 +4,8 @@ export const continuous = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -21,8 +21,8 @@ export const continuous = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -33,25 +33,25 @@ export const imageTreatment = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
             <ul class="carousel__list carousel__list--image-treatment carousel__list--image-treatment-demo">
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/aztec-pyramid.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/falls.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/mountain.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/shoes.jpeg"/></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/tall-cat.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg"/></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/aztec-pyramid.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/falls.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/mountain.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/shoes.jpeg"/></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/tall-cat.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg"/></li>
                 <li>Card 7</li>
                 <li>Card 8</li>
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -62,25 +62,25 @@ export const imageTreatmentLarge = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
             <ul class="carousel__list carousel__list--image-treatment-large carousel__list--image-treatment-demo">
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/aztec-pyramid.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/falls.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/mountain.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/shoes.jpeg"/></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/tall-cat.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg"/></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/aztec-pyramid.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/falls.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/mountain.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/shoes.jpeg"/></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/tall-cat.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg"/></li>
                 <li>Card 7</li>
                 <li>Card 8</li>
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -94,8 +94,8 @@ export const slides = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false" >
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -111,8 +111,8 @@ export const slides = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -126,8 +126,8 @@ export const slideshow = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false" >
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -139,8 +139,8 @@ export const slideshow = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -160,8 +160,8 @@ export const RTL = () => `
                 <span>Top Products - Slide 1 of 4</span>
             </h4>
             <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                    <use href="#icon-chevron-left-24"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                    <use href="#icon-chevron-left-12"></use>
                 </svg>
             </button>
             <div class="carousel__viewport">
@@ -173,8 +173,8 @@ export const RTL = () => `
                 </ul>
             </div>
             <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false" >
-                    <use href="#icon-chevron-right-24"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false" >
+                    <use href="#icon-chevron-right-12"></use>
                 </svg>
             </button>
         </div>
@@ -191,8 +191,8 @@ export const hiddenScrollbar = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -208,8 +208,135 @@ export const hiddenScrollbar = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+/* paddle opacity set to 1 for purpose of visual regression testing only */
+export const continuousWithPaddlesVisible = () => `
+<div class="carousel">
+    <div class="carousel__container">
+        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
+            </svg>
+        </button>
+        <div class="carousel__viewport carousel__viewport--mask">
+            <ul class="carousel__list carousel__list--default-demo">
+                <li>Card 1</li>
+                <li>Card 2</li>
+                <li>Card 3</li>
+                <li>Card 4</li>
+                <li>Card 5</li>
+                <li>Card 6</li>
+                <li>Card 7</li>
+                <li>Card 8</li>
+            </ul>
+        </div>
+        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+/* paddle opacity set to 1 for purpose of visual regression testing only */
+export const slidesWithPaddlesVisible = () => `
+<div class="carousel carousel--slides">
+    <div class="carousel__container">
+        <h4 class="clipped" aria-live="polite">
+            <span>Top Products - Slide 1 of 2</span>
+        </h4>
+        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+                <use href="#icon-chevron-left-12"></use>
+            </svg>
+        </button>
+        <div class="carousel__viewport">
+            <ul class="carousel__list carousel__list--discrete-demo">
+                <li>Card 1</li>
+                <li>Card 2</li>
+                <li>Card 3</li>
+                <li>Card 4</li>
+                <li>Card 5</li>
+                <li>Card 6</li>
+                <li>Card 7</li>
+                <li>Card 8</li>
+            </ul>
+        </div>
+        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+/* paddle opacity set to 1 for purpose of visual regression testing only */
+export const slideshowWithPaddlesVisible = () => `
+<div class="carousel carousel--slides">
+    <div class="carousel__container">
+        <h4 class="clipped" aria-live="polite">
+            <span>Top Products - Slide 1 of 4</span>
+        </h4>
+        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+                <use href="#icon-chevron-left-12"></use>
+            </svg>
+        </button>
+        <div class="carousel__viewport">
+            <ul class="carousel__list carousel__list--slideshow-demo">
+                <li>Card 1</li>
+                <li>Card 2</li>
+                <li>Card 3</li>
+                <li>Card 4</li>
+            </ul>
+        </div>
+        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </button>
+    </div>
+    <button class="carousel__playback" aria-label="Play - Top Products">
+        <svg class="icon icon--play-24" focusable="false" aria-hidden="true">
+            <use href="#icon-play-24"></use>
+        </svg>
+    </button>
+</div>
+`;
+
+/* paddle opacity set to 1 for purpose of visual regression testing only */
+export const hiddenScrollbarWithPaddlesVisible = () => `
+<div class="carousel carousel--hidden-scrollbar">
+    <div class="carousel__container">
+        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
+            </svg>
+        </button>
+        <div class="carousel__viewport carousel__viewport--mask">
+            <ul class="carousel__list carousel__list--default-demo">
+                <li>Card 1</li>
+                <li>Card 2</li>
+                <li>Card 3</li>
+                <li>Card 4</li>
+                <li>Card 5</li>
+                <li>Card 6</li>
+                <li>Card 7</li>
+                <li>Card 8</li>
+            </ul>
+        </div>
+        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>

package/src/less/field/field.less

@@ -36,7 +36,7 @@ div.field--table {
 
 .field__description--group {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
 }
 
 .field__description--group > :last-child {
@@ -161,7 +161,7 @@ div.field__description {
 }
 
 .field__group--align-top > .field__label {
-    align-self: start;
+    align-self: flex-start;
     margin-top: 16px;
 }
 

package/src/less/global/global.less

@@ -6,6 +6,7 @@ body {
     .color-token(color-foreground-primary);
     font-family: @font-family-default;
     font-size: @font-size-regular;
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     -webkit-text-size-adjust: 100%;
 }
 

package/src/less/icon/generated/icon.less

@@ -111,6 +111,10 @@ svg.icon--arrows-3d-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--arrows-3d-filled-64-colored {
+    height: 64px;
+    width: 64px;
+}
 svg.icon--article-16 {
     height: 16px;
     width: 16px;
@@ -743,6 +747,14 @@ svg.icon--discord-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--discount-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--discount-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--discover-12-colored {
     height: 12px;
     width: 20px;
@@ -1715,6 +1727,10 @@ svg.icon--overflow-vertical-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--package-16 {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--package-24 {
     height: 24px;
     width: 24px;
@@ -1823,6 +1839,10 @@ svg.icon--peso-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--phone-16 {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--phone-24 {
     height: 24px;
     width: 24px;
@@ -1919,6 +1939,14 @@ svg.icon--progress-upcoming-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--promotion-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--promotion-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--qr-code-16 {
     height: 16px;
     width: 16px;
@@ -2119,6 +2147,10 @@ svg.icon--search-similar-20 {
     height: 20px;
     width: 20px;
 }
+svg.icon--search-similar-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--security-key-24 {
     height: 24px;
     width: 24px;

package/src/less/lightbox-dialog/lightbox-dialog.less

@@ -2,6 +2,11 @@
 @import "../mixins/private/dialog-mixins.less";
 @import "../mixins/private/token-mixins.less";
 
+:root {
+    --dialog-lightbox-wide-max-width: 896px;
+    --dialog-lightbox-narrow-max-width: 480px;
+}
+
 .lightbox-dialog[role="dialog"] {
     .lightbox-dialog-base();
 }
@@ -54,6 +59,7 @@
 
 // inherits from .icon-btn
 // Might need to see if icon-btn can support a small version
+button.icon-btn.lightbox-dialog__prev,
 button.icon-btn.lightbox-dialog__close {
     align-self: center;
     border: 0;
@@ -64,11 +70,20 @@ button.icon-btn.lightbox-dialog__close {
     z-index: 1;
 }
 
+button.icon-btn.lightbox-dialog__prev {
+    margin-right: 16px;
+}
+
+.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev,
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close {
     align-self: self-start;
     margin: 0;
 }
 
+.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {
+    margin-left: -32px;
+}
+
 .lightbox-dialog__title {
     &:not(:first-child) {
         margin-left: @spacing-200;
@@ -126,12 +141,25 @@ button.icon-btn.lightbox-dialog__close {
     }
 }
 
+[dir="rtl"] {
+    button.icon-btn.lightbox-dialog__prev {
+        margin-left: 16px;
+        margin-right: 0;
+    }
+    button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
+        transform: rotate(180deg);
+    }
+}
 // In order to prevent the margins to meet the ege of the page at medium screen sizes
 @media (min-width: @_screen-size-SM) {
     .lightbox-dialog__window {
         max-width: calc(88% - @spacing-400);
     }
 
+    .lightbox-dialog--narrow .lightbox-dialog__window {
+        max-width: var(--dialog-lightbox-narrow-max-width);
+    }
+
     .lightbox-dialog__window .lightbox-dialog__footer {
         .dialog-footer-content-large();
     }

package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js

@@ -28,6 +28,34 @@ export const expressiveBase = () => `
     <div class="lightbox-dialog__window">
         <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
         <div class="lightbox-dialog__header">
+           <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;
+
+export const basePrev = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__header">
+            <button class="icon-btn lightbox-dialog__prev" type="button" aria-label="Go back">
+                <svg class="icon icon--chevron-left-16" aria-hidden="true">
+                    <use href="#icon-chevron-left-16"></use>
+                </svg>
+            </button>
             <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
             <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
                 <svg class="icon icon--close-16" aria-hidden="true">
@@ -233,6 +261,36 @@ export const baseRTL = () => `
 </div>
 `;
 
+export const prevRTL = () => `
+<div dir="rtl">
+    <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
+        <div class="lightbox-dialog__window">
+            <div class="lightbox-dialog__header">
+                <button class="icon-btn lightbox-dialog__prev" type="button" aria-label="Go back">
+                    <svg class="icon icon--chevron-left-16" aria-hidden="true">
+                        <use href="#icon-chevron-left-16"></use>
+                    </svg>
+                </button>
+                <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+                <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                    <svg class="icon icon--close-16" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+            </div>
+            <div class="lightbox-dialog__main">
+                <h3>Heading</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+                <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+                <h3>Heading</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+                <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            </div>
+        </div>
+    </div>
+</div>
+`;
+
 export const baseWithLongHeader = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
@@ -279,6 +337,29 @@ export const wide = () => `
 </div>
 `;
 
+export const narrow = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--narrow" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;
+
 export const expressiveWide = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--wide lightbox-dialog--expressive" role="dialog">
     <div class="lightbox-dialog__window">
@@ -302,3 +383,32 @@ export const expressiveWide = () => `
     </div>
 </div>
 `;
+
+export const expressivePrev = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--expressive" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
+        <div class="lightbox-dialog__header">
+            <button class="icon-btn lightbox-dialog__prev" type="button" aria-label="Go back">
+                <svg class="icon icon--chevron-left-16" aria-hidden="true">
+                    <use href="#icon-chevron-left-16"></use>
+                </svg>
+            </button>
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;

package/src/less/listbox-button/listbox-button.less

@@ -14,6 +14,15 @@ span.listbox-button {
     display: inline-block;
 }
 
+.listbox-button .btn {
+    // these values are used elsewhere in listbox
+    // in a non-standard manner and don't have variables
+    // this shares the same value with the horizontal
+    // padding in .selection-list-item-base() to align left
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
 span.listbox-button--fluid,
 span.listbox-button--fluid .expand-btn,
 span.listbox-button--fluid .btn {

package/src/less/mixins/private/dialog-mixins.less

@@ -4,7 +4,6 @@
     --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
     --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
-    --dialog-lightbox-wide-max-width: 896px;
 }
 
 .dialog-base() {