@ebay/skin 17.5.0 → 18.0.0

package/src/{less → sass}/lightbox-dialog/stories/lightbox-dialog.stories.js

@@ -3,11 +3,10 @@ export default { title: "Skin/Lightbox Dialog" };
 export const base = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -27,12 +26,11 @@ export const base = () => `
 export const expressiveBase = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--expressive" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -52,16 +50,15 @@ export const expressiveBase = () => `
 export const basePrev = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -81,11 +78,10 @@ export const basePrev = () => `
 export const scrollingLightbox = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -148,11 +144,10 @@ export const scrollingLightbox = () => `
 export const expandedLightbox = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window lightbox-dialog__window--expanded">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -215,12 +210,11 @@ export const expandedLightbox = () => `
 export const expressiveScrolling = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--expressive" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -283,11 +277,10 @@ export const expressiveScrolling = () => `
 export const baseWithFooter = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -313,11 +306,10 @@ export const baseRTL = () => `
 <div dir="rtl">
     <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
         <div class="lightbox-dialog__window">
-            <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
             <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">
+                    <svg class="icon icon--16" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -339,16 +331,15 @@ 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">
-            <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
             <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">
+                    <svg class="icon icon--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">
+                    <svg class="icon icon--16" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -369,11 +360,10 @@ export const prevRTL = () => `
 export const baseWithLongHeader = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox with a very long header that should wrap to the next line, but is actually cut off</h2>
             <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-16" aria-hidden="true">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -393,11 +383,10 @@ export const baseWithLongHeader = () => `
 export const wide = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--wide" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -417,7 +406,6 @@ export const wide = () => `
 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">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
@@ -438,15 +426,37 @@ export const narrow = () => `
 </div>
 `;
 
+export const large = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--large" 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--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">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -466,17 +476,16 @@ export const expressiveWide = () => `
 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">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -496,11 +505,10 @@ export const expressivePrev = () => `
 export const textSpacing = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog demo-a11y-text-spacing" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -520,7 +528,6 @@ export const textSpacing = () => `
 export const baseWithHeaderOverflow = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
-        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox with a title that is so long it wraps across multiple lines. No dialog header should ever be this long.</h2>
             <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">

package/src/sass/link/link.scss

@@ -0,0 +1,61 @@
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
+
+a.nav-link,
+a.standalone-link {
+    @include color-token(nav-link-foreground-color, color-foreground-primary);
+
+    text-decoration: none;
+
+    &:visited {
+        @include color-token(
+            link-foreground-color-default,
+            color-foreground-primary
+        );
+    }
+
+    &:hover {
+        @include color-token(
+            nav-link-foreground-hover-color,
+            color-foreground-secondary
+        );
+
+        text-decoration: underline;
+    }
+
+    &:not([href]),
+    &[aria-disabled="true"] {
+        @include color-token(
+            link-forground-color-disabled,
+            color-foreground-disabled
+        );
+
+        text-decoration: none;
+    }
+}
+
+button.fake-link {
+    background-color: transparent;
+    border: 0;
+    @include color-token(fake-link-foreground-color, color-foreground-primary);
+
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0;
+    text-decoration: underline;
+
+    &:hover {
+        @include color-token(
+            fake-link-foreground-color-hover,
+            color-foreground-secondary
+        );
+    }
+
+    &[disabled],
+    &[aria-disabled="true"] {
+        @include color-token(
+            fake-link-foreground-disabled-color,
+            color-foreground-disabled
+        );
+    }
+}

package/src/{less/listbox/listbox.less → sass/listbox/listbox.scss}

@@ -1,11 +1,11 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dropdown-mixins.less";
-@import "../mixins/private/listbox-mixins.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/public/utility-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dropdown-mixins";
+@import "../mixins/private/listbox-mixins";
+@import "../mixins/private/token-mixins";
+@import "../mixins/public/utility-mixins";
 
 div.listbox {
-    margin: var(--spacing-200) 0; // margin collapse sensible default
+    margin: var(--spacing-200) 0; /* margin collapse sensible default */
 }
 
 span.listbox {
@@ -14,8 +14,12 @@ span.listbox {
 }
 
 div.listbox__options[role="listbox"] {
-    .background-color-token(listbox-background-color, color-background-primary);
-    cursor: default; // needed to override text cursor
+    @include background-color-token(
+        listbox-background-color,
+        color-background-primary
+    );
+
+    cursor: default; /* needed to override text cursor */
 }
 
 span.listbox__options[role="listbox"] {
@@ -31,7 +35,10 @@ div.listbox__options--reverse[role="listbox"] {
 }
 
 .listbox__description {
-    .color-token(listbox-button-subtitle-color, color-foreground-secondary);
+    @include color-token(
+        listbox-button-subtitle-color,
+        color-foreground-secondary
+    );
 
     font-size: var(--font-size-small);
     font-weight: normal;
@@ -40,22 +47,21 @@ div.listbox__options--reverse[role="listbox"] {
 }
 
 div.listbox__option[role="option"] {
-    .listbox-option-base();
+    @include listbox-option-base();
 
     &:disabled .listbox__description,
     &[aria-disabled="true"] .listbox__description {
-        .listbox-disabled();
+        @include listbox-disabled();
     }
 }
 
 span.listbox__value {
     flex: 1;
-
     white-space: nowrap;
 }
 
 div.listbox__option svg.icon {
-    .listbox-option-status();
+    @include listbox-option-status();
 
     margin-inline-start: var(--spacing-100);
 }
@@ -69,7 +75,7 @@ div.listbox__option[aria-selected="true"] svg.icon {
     opacity: 1;
 }
 
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 .listbox__options:focus:not(:focus-visible) {
     outline: none;
 }

package/src/{less → sass}/listbox/stories/cascade.stories.js

@@ -5,19 +5,19 @@ export const RTL = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -30,19 +30,19 @@ export const color = () => `
     <div class="listbox__options" role="listbox" style="color: red" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -55,19 +55,19 @@ export const fontSize = () => `
     <div class="listbox__options" role="listbox" style="font-size: 200%" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>

package/src/{less → sass}/listbox/stories/listbox.stories.js

@@ -5,19 +5,19 @@ export const unselected = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -30,19 +30,19 @@ export const selected = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -55,19 +55,19 @@ export const multiSelected = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -84,7 +84,7 @@ export const subtitleUnselected = () => `
                 <span class="clipped">.</span>
                 More info about option 1
             </span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -94,7 +94,7 @@ export const subtitleUnselected = () => `
                 <span class="clipped">.</span>
                 More info about option 2
             </span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -104,7 +104,7 @@ export const subtitleUnselected = () => `
                 <span class="clipped">.</span>
                 More info about option 3
             </span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -121,7 +121,7 @@ export const subtitleSelected = () => `
                 <span class="clipped">.</span>
                 More info about option 1
             </span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -131,7 +131,7 @@ export const subtitleSelected = () => `
                 <span class="clipped">.</span>
                 More info about option 2
             </span>
-             <svg class="icon icon--tick-16" height="8" width="8">
+             <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -141,7 +141,7 @@ export const subtitleSelected = () => `
                 <span class="clipped">.</span>
                 More info about option 3
             </span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -158,7 +158,7 @@ export const textSpacing = () => `
                 <span class="clipped">.</span>
                 More info about option 1
             </span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -168,7 +168,7 @@ export const textSpacing = () => `
                 <span class="clipped">.</span>
                 More info about option 2
             </span>
-             <svg class="icon icon--tick-16" height="8" width="8">
+             <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -178,7 +178,7 @@ export const textSpacing = () => `
                 <span class="clipped">.</span>
                 More info about option 3
             </span>
-            <svg class="icon icon--tick-16" height="8" width="8">
+            <svg class="icon icon--16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>