@ebay/skin 17.1.1 → 17.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (181) hide show
  1. package/.github/workflows/jekyll-gh-pages.yml +16 -1
  2. package/CHANGELOG.md +40 -0
  3. package/CONTRIBUTING.md +28 -0
  4. package/_cdn/skin/v17.2.0/skin-default.min.css +69 -0
  5. package/_cdn/skin/v17.2.0/skin-full.min.css +151 -0
  6. package/_cdn/skin/v17.2.0/skin-headless.min.css +6 -0
  7. package/dist/button/button.css +0 -1
  8. package/dist/combobox/combobox.css +6 -5
  9. package/dist/date-textbox/date-textbox.css +4 -3
  10. package/dist/filter-menu/filter-menu.css +2 -2
  11. package/dist/filter-menu-button/filter-menu-button.css +8 -4
  12. package/dist/icon/icon.css +24 -0
  13. package/dist/infotip/infotip.css +6 -5
  14. package/dist/listbox/listbox.css +4 -0
  15. package/dist/listbox-button/listbox-button.css +6 -5
  16. package/dist/menu/menu.css +4 -0
  17. package/dist/menu-button/menu-button.css +6 -5
  18. package/dist/signal/signal.css +4 -3
  19. package/dist/svg/icon/icon-bank-24.svg +4 -2
  20. package/dist/svg/icon/icon-bank-64.svg +4 -2
  21. package/dist/svg/icon/icon-calendar-16.svg +4 -5
  22. package/dist/svg/icon/icon-calendar-24.svg +4 -5
  23. package/dist/svg/icon/icon-calendar-64.svg +4 -5
  24. package/dist/svg/icon/icon-credit-card-16.svg +4 -2
  25. package/dist/svg/icon/icon-credit-card-24.svg +4 -2
  26. package/dist/svg/icon/icon-credit-card-64.svg +4 -2
  27. package/dist/svg/icon/icon-gift-16.svg +2 -2
  28. package/dist/svg/icon/icon-gift-24.svg +4 -2
  29. package/dist/svg/icon/icon-gift-64.svg +4 -2
  30. package/dist/svg/icon/icon-locked-16.svg +4 -2
  31. package/dist/svg/icon/icon-locked-20.svg +7 -0
  32. package/dist/svg/icon/icon-locked-24.svg +4 -2
  33. package/dist/svg/icon/icon-mail-20.svg +7 -0
  34. package/dist/svg/icon/icon-passkey-16.svg +7 -0
  35. package/dist/svg/icon/icon-passkey-24.svg +7 -0
  36. package/dist/svg/icon/icon-passkey-64.svg +7 -0
  37. package/dist/svg/icon/icon-swap-24.svg +7 -0
  38. package/dist/svg/icon/icon-unlocked-16.svg +4 -3
  39. package/dist/svg/icon/icon-unlocked-24.svg +4 -5
  40. package/dist/svg/icon/icon-venmo-12-colored.svg +1 -0
  41. package/dist/svg/icon/icon-venmo-18-colored.svg +1 -0
  42. package/dist/svg/icon/icon-venmo-24-colored.svg +1 -0
  43. package/dist/svg/icon/icon-venmo-32-colored.svg +1 -0
  44. package/dist/svg/icons.svg +103 -42
  45. package/dist/tokens/evo-dark.css +1 -0
  46. package/dist/tokens/evo-light.css +1 -0
  47. package/dist/tooltip/tooltip.css +5 -4
  48. package/dist/tourtip/tourtip.css +5 -8
  49. package/package.json +33 -34
  50. package/scripts/develop-module_proper/code-generators/doc-generator.js +19 -13
  51. package/src/less/breadcrumbs/stories/button-cascade.stories.js +9 -9
  52. package/src/less/breadcrumbs/stories/button-overflow.stories.js +11 -11
  53. package/src/less/breadcrumbs/stories/buttons.stories.js +5 -5
  54. package/src/less/breadcrumbs/stories/link-cascade.stories.js +9 -9
  55. package/src/less/breadcrumbs/stories/link-overflow.stories.js +11 -11
  56. package/src/less/breadcrumbs/stories/links.stories.js +5 -5
  57. package/src/less/button/button.less +0 -1
  58. package/src/less/button/stories/button/base.stories.js +2 -2
  59. package/src/less/button/stories/button/borderless.stories.js +4 -4
  60. package/src/less/button/stories/button/primary.stories.js +1 -1
  61. package/src/less/button/stories/button/secondary.stories.js +1 -1
  62. package/src/less/button/stories/button/tertiary.stories.js +1 -1
  63. package/src/less/button/stories/destructive-button/primary.stories.js +1 -1
  64. package/src/less/button/stories/destructive-button/secondary.stories.js +1 -1
  65. package/src/less/button/stories/destructive-button/tertiary.stories.js +1 -1
  66. package/src/less/carousel/stories/carousel.stories.js +25 -25
  67. package/src/less/checkbox/stories/checked.stories.js +16 -16
  68. package/src/less/checkbox/stories/mixed.stories.js +2 -2
  69. package/src/less/checkbox/stories/unchecked.stories.js +8 -8
  70. package/src/less/chip/stories/interactive-chip.stories.js +17 -17
  71. package/src/less/chips-combobox/stories/chips-combobox.stories.js +34 -34
  72. package/src/less/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  73. package/src/less/combobox/stories/combobox.stories.js +10 -10
  74. package/src/less/cta-button/stories/cascade.stories.js +3 -3
  75. package/src/less/cta-button/stories/cta-button.stories.js +1 -1
  76. package/src/less/cta-button/stories/dimensions.stories.js +2 -2
  77. package/src/less/date-textbox/date-textbox.less +2 -2
  78. package/src/less/details/stories/cascade.stories.js +3 -3
  79. package/src/less/details/stories/details.stories.js +4 -4
  80. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +6 -6
  81. package/src/less/field/stories/stacked.stories.js +12 -12
  82. package/src/less/field/stories/unstacked.stories.js +4 -4
  83. package/src/less/filter-menu/stories/filter-menu.stories.js +30 -30
  84. package/src/less/filter-menu-button/filter-menu-button.less +3 -3
  85. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +83 -83
  86. package/src/less/floating-label/stories/floating-label.stories.js +5 -5
  87. package/src/less/global/stories/global.stories.js +12 -12
  88. package/src/less/icon/generated/icon.less +24 -0
  89. package/src/less/icon-button/stories/alignment.stories.js +6 -6
  90. package/src/less/infotip/infotip.less +3 -3
  91. package/src/less/infotip/stories/infotip.stories.js +10 -10
  92. package/src/less/inline-notice/stories/inline.stories.js +10 -10
  93. package/src/less/listbox/stories/cascade.stories.js +9 -9
  94. package/src/less/listbox/stories/listbox.stories.js +15 -15
  95. package/src/less/listbox-button/stories/base.stories.js +43 -43
  96. package/src/less/listbox-button/stories/cascade.stories.js +15 -15
  97. package/src/less/listbox-button/stories/dimensions.stories.js +5 -5
  98. package/src/less/listbox-button/stories/error/error.base.stories.js +38 -38
  99. package/src/less/listbox-button/stories/error/error.cascade.stories.js +15 -15
  100. package/src/less/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  101. package/src/less/listbox-button/stories/error/error.form.stories.js +10 -10
  102. package/src/less/listbox-button/stories/form.stories.js +15 -15
  103. package/src/less/listbox-button/stories/subtitle.stories.js +38 -38
  104. package/src/less/menu/stories/fake-menu.stories.js +4 -4
  105. package/src/less/menu/stories/multiSelect.stories.js +9 -9
  106. package/src/less/menu-button/stories/base.stories.js +29 -29
  107. package/src/less/menu-button/stories/cascade.stories.js +6 -6
  108. package/src/less/menu-button/stories/dimensions.stories.js +1 -1
  109. package/src/less/menu-button/stories/fake-menu-button.stories.js +6 -6
  110. package/src/less/mixins/private/bubble-mixins.less +7 -3
  111. package/src/less/mixins/private/dropdown-mixins.less +3 -6
  112. package/src/less/mixins/private/filter-menu-mixins.less +1 -1
  113. package/src/less/page-notice/stories/page-notice.stories.js +12 -12
  114. package/src/less/page-notice/stories/test.stories.js +7 -7
  115. package/src/less/pagination/stories/button-cascade.stories.js +6 -6
  116. package/src/less/pagination/stories/buttons.stories.js +4 -4
  117. package/src/less/pagination/stories/link-cascade.stories.js +6 -6
  118. package/src/less/pagination/stories/links.stories.js +4 -4
  119. package/src/less/pagination/stories/overflow.stories.js +22 -22
  120. package/src/less/progress-spinner/stories/progress-spinner.stories.js +4 -4
  121. package/src/less/progress-stepper/stories/progress-stepper.stories.js +49 -49
  122. package/src/less/radio/stories/checked.stories.js +16 -16
  123. package/src/less/radio/stories/unchecked.stories.js +8 -8
  124. package/src/less/section-notice/stories/icon-16.stories.js +12 -12
  125. package/src/less/section-notice/stories/icon-24.stories.js +20 -20
  126. package/src/less/section-notice/stories/iconless.stories.js +4 -4
  127. package/src/less/section-notice/stories/test.stories.js +4 -4
  128. package/src/less/section-title/stories/rtl.stories.js +3 -3
  129. package/src/less/section-title/stories/section-title.stories.js +3 -3
  130. package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  131. package/src/less/select/stories/cascade.stories.js +3 -3
  132. package/src/less/select/stories/default.stories.js +8 -8
  133. package/src/less/select/stories/floating-label.stories.js +4 -4
  134. package/src/less/signal/signal.less +4 -3
  135. package/src/less/split-button/stories/base.stories.js +12 -12
  136. package/src/less/split-button/stories/rtl.stories.js +6 -6
  137. package/src/less/split-button/stories/size.stories.js +2 -2
  138. package/src/less/star-rating/stories/star-rating.stories.js +15 -15
  139. package/src/less/star-rating-select/stories/star-rating-select.stories.js +10 -10
  140. package/src/less/textbox/stories/icon.stories.js +10 -10
  141. package/src/less/textbox/stories/rtl/icon.stories.js +7 -7
  142. package/src/less/toast-dialog/stories/toast-dialog.stories.js +3 -3
  143. package/src/less/toggle-button/stories/gallery-layout.stories.js +3 -3
  144. package/src/less/toggle-button/stories/list-layout.stories.js +3 -3
  145. package/src/less/tooltip/stories/pointer.stories.js +12 -12
  146. package/src/less/tooltip/stories/tooltip.stories.js +2 -2
  147. package/src/less/tooltip/tooltip.less +2 -2
  148. package/src/less/tourtip/stories/tourtip.stories.js +4 -4
  149. package/src/less/tourtip/tourtip.less +2 -7
  150. package/src/svg/icon/icon-bank-24.svg +4 -2
  151. package/src/svg/icon/icon-bank-64.svg +4 -2
  152. package/src/svg/icon/icon-calendar-16.svg +4 -5
  153. package/src/svg/icon/icon-calendar-24.svg +4 -5
  154. package/src/svg/icon/icon-calendar-64.svg +4 -5
  155. package/src/svg/icon/icon-credit-card-16.svg +4 -2
  156. package/src/svg/icon/icon-credit-card-24.svg +4 -2
  157. package/src/svg/icon/icon-credit-card-64.svg +4 -2
  158. package/src/svg/icon/icon-gift-16.svg +2 -2
  159. package/src/svg/icon/icon-gift-24.svg +4 -2
  160. package/src/svg/icon/icon-gift-64.svg +4 -2
  161. package/src/svg/icon/icon-locked-16.svg +4 -2
  162. package/src/svg/icon/icon-locked-20.svg +7 -0
  163. package/src/svg/icon/icon-locked-24.svg +4 -2
  164. package/src/svg/icon/icon-mail-20.svg +7 -0
  165. package/src/svg/icon/icon-passkey-16.svg +7 -0
  166. package/src/svg/icon/icon-passkey-24.svg +7 -0
  167. package/src/svg/icon/icon-passkey-64.svg +7 -0
  168. package/src/svg/icon/icon-swap-24.svg +7 -0
  169. package/src/svg/icon/icon-unlocked-16.svg +4 -3
  170. package/src/svg/icon/icon-unlocked-24.svg +4 -5
  171. package/src/svg/icon/icon-venmo-12-colored.svg +1 -0
  172. package/src/svg/icon/icon-venmo-18-colored.svg +1 -0
  173. package/src/svg/icon/icon-venmo-24-colored.svg +1 -0
  174. package/src/svg/icon/icon-venmo-32-colored.svg +1 -0
  175. package/src/svg/icons.svg +103 -42
  176. package/src/tokens/evo-dark.css +1 -0
  177. package/src/tokens/evo-light.css +1 -0
  178. package/svg.svg +103 -42
  179. package/_cdn/skin/v17.1.1/skin-default.min.css +0 -69
  180. package/_cdn/skin/v17.1.1/skin-full.min.css +0 -151
  181. package/_cdn/skin/v17.1.1/skin-headless.min.css +0 -6
package/src/less/filter-menu-button/filter-menu-button.less CHANGED
@@ -1,5 +1,5 @@
1
1
  @import "../variables/variables.less";
2
- @import "../mixins/private/dropdown-mixins.less";
2
+ @import "../mixins/private/bubble-mixins.less";
3
3
  @import "../mixins/private/filter-button-mixins.less";
4
4
  @import "../mixins/private/filter-menu-mixins.less";
5
5
  @import "../mixins/private/token-mixins.less";
@@ -85,10 +85,10 @@ button.filter-menu-button__button[aria-pressed="true"][aria-disabled="true"]:hov
85
85
  }
86
86
 
87
87
  .filter-menu-button__menu {
88
- .background-color-token(filter-menu-item-background-color, color-background-primary);
88
+ .background-color-token(filter-menu-item-background-color, color-background-elevated);
89
89
  border: none;
90
90
  border-radius: 16px;
91
- box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
91
+ box-shadow: var(--bubble-shadow);
92
92
  display: none;
93
93
  max-width: 288px; // TODO remove max-width restriction to filter-menu styles
94
94
  min-width: 144px;
package/src/less/filter-menu-button/stories/filter-menu-button.stories.js CHANGED
@@ -5,7 +5,7 @@ export const collapsed = () => `
5
5
  <button type="button" class="filter-menu-button__button">
6
6
  <span class="filter-menu-button__button-cell">
7
7
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
8
- <svg class="icon icon--chevron-down-12" focusable="false" height="12" width="12">
8
+ <svg class="icon icon--chevron-down-12" height="12" width="12">
9
9
  <use href="#icon-chevron-down-12"></use>
10
10
  </svg>
11
11
  </span>
@@ -14,10 +14,10 @@ export const collapsed = () => `
14
14
  <div class="filter-menu-button__items" role="menu">
15
15
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
16
16
  <span class="filter-menu-button__checkbox">
17
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
17
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
18
18
  <use href="#icon-checkbox-unchecked-18"></use>
19
19
  </svg>
20
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
20
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
21
21
  <use href="#icon-checkbox-checked-18"></use>
22
22
  </svg>
23
23
  </span>
@@ -25,10 +25,10 @@ export const collapsed = () => `
25
25
  </div>
26
26
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
27
27
  <span class="filter-menu-button__checkbox">
28
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
28
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
29
29
  <use href="#icon-checkbox-unchecked-18"></use>
30
30
  </svg>
31
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
31
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
32
32
  <use href="#icon-checkbox-checked-18"></use>
33
33
  </svg>
34
34
  </span>
@@ -36,10 +36,10 @@ export const collapsed = () => `
36
36
  </div>
37
37
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
38
38
  <span class="filter-menu-button__checkbox">
39
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
39
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
40
40
  <use href="#icon-checkbox-unchecked-18"></use>
41
41
  </svg>
42
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
42
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
43
43
  <use href="#icon-checkbox-checked-18"></use>
44
44
  </svg>
45
45
  </span>
@@ -56,7 +56,7 @@ export const expanded = () => `
56
56
  <button type="button" class="filter-menu-button__button" aria-expanded="true">
57
57
  <span class="filter-menu-button__button-cell">
58
58
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
59
- <svg class="icon icon--chevron-down-12" focusable="false" height="12" width="12">
59
+ <svg class="icon icon--chevron-down-12" height="12" width="12">
60
60
  <use href="#icon-chevron-down-12"></use>
61
61
  </svg>
62
62
  </span>
@@ -65,10 +65,10 @@ export const expanded = () => `
65
65
  <div class="filter-menu-button__items" role="menu">
66
66
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
67
67
  <span class="filter-menu-button__checkbox">
68
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
68
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
69
69
  <use href="#icon-checkbox-unchecked-18"></use>
70
70
  </svg>
71
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
71
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
72
72
  <use href="#icon-checkbox-checked-18"></use>
73
73
  </svg>
74
74
  </span>
@@ -76,10 +76,10 @@ export const expanded = () => `
76
76
  </div>
77
77
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
78
78
  <span class="filter-menu-button__checkbox">
79
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
79
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
80
80
  <use href="#icon-checkbox-unchecked-18"></use>
81
81
  </svg>
82
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
82
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
83
83
  <use href="#icon-checkbox-checked-18"></use>
84
84
  </svg>
85
85
  </span>
@@ -87,10 +87,10 @@ export const expanded = () => `
87
87
  </div>
88
88
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
89
89
  <span class="filter-menu-button__checkbox">
90
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
90
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
91
91
  <use href="#icon-checkbox-unchecked-18"></use>
92
92
  </svg>
93
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
93
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
94
94
  <use href="#icon-checkbox-checked-18"></use>
95
95
  </svg>
96
96
  </span>
@@ -107,7 +107,7 @@ export const pressed = () => `
107
107
  <button type="button" class="filter-menu-button__button" aria-expanded="true" aria-pressed="true">
108
108
  <span class="filter-menu-button__button-cell">
109
109
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
110
- <svg class="icon icon--chevron-down-12" focusable="false" height="12" width="12">
110
+ <svg class="icon icon--chevron-down-12" height="12" width="12">
111
111
  <use href="#icon-chevron-down-12"></use>
112
112
  </svg>
113
113
  </span>
@@ -116,10 +116,10 @@ export const pressed = () => `
116
116
  <div class="filter-menu-button__items" role="menu">
117
117
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
118
118
  <span class="filter-menu-button__checkbox">
119
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
119
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
120
120
  <use href="#icon-checkbox-unchecked-18"></use>
121
121
  </svg>
122
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
122
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
123
123
  <use href="#icon-checkbox-checked-18"></use>
124
124
  </svg>
125
125
  </span>
@@ -127,10 +127,10 @@ export const pressed = () => `
127
127
  </div>
128
128
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
129
129
  <span class="filter-menu-button__checkbox">
130
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
130
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
131
131
  <use href="#icon-checkbox-unchecked-18"></use>
132
132
  </svg>
133
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
133
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
134
134
  <use href="#icon-checkbox-checked-18"></use>
135
135
  </svg>
136
136
  </span>
@@ -138,10 +138,10 @@ export const pressed = () => `
138
138
  </div>
139
139
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
140
140
  <span class="filter-menu-button__checkbox">
141
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
141
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
142
142
  <use href="#icon-checkbox-unchecked-18"></use>
143
143
  </svg>
144
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
144
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
145
145
  <use href="#icon-checkbox-checked-18"></use>
146
146
  </svg>
147
147
  </span>
@@ -158,7 +158,7 @@ export const disabled = () => `
158
158
  <button aria-expaned="true" type="button" class="filter-menu-button__button" disabled>
159
159
  <span class="filter-menu-button__button-cell">
160
160
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
161
- <svg class="icon icon--chevron-down-12" focusable="false" height="12" width="12">
161
+ <svg class="icon icon--chevron-down-12" height="12" width="12">
162
162
  <use href="#icon-chevron-down-12"></use>
163
163
  </svg>
164
164
  </span>
@@ -167,10 +167,10 @@ export const disabled = () => `
167
167
  <div class="filter-menu-button__items" role="menu">
168
168
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
169
169
  <span class="filter-menu-button__checkbox">
170
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
170
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
171
171
  <use href="#icon-checkbox-unchecked-18"></use>
172
172
  </svg>
173
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
173
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
174
174
  <use href="#icon-checkbox-checked-18"></use>
175
175
  </svg>
176
176
  </span>
@@ -178,10 +178,10 @@ export const disabled = () => `
178
178
  </div>
179
179
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
180
180
  <span class="filter-menu-button__checkbox">
181
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
181
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
182
182
  <use href="#icon-checkbox-unchecked-18"></use>
183
183
  </svg>
184
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
184
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
185
185
  <use href="#icon-checkbox-checked-18"></use>
186
186
  </svg>
187
187
  </span>
@@ -189,10 +189,10 @@ export const disabled = () => `
189
189
  </div>
190
190
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
191
191
  <span class="filter-menu-button__checkbox">
192
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
192
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
193
193
  <use href="#icon-checkbox-unchecked-18"></use>
194
194
  </svg>
195
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
195
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
196
196
  <use href="#icon-checkbox-checked-18"></use>
197
197
  </svg>
198
198
  </span>
@@ -208,7 +208,7 @@ export const overflow = () => `
208
208
  <button type="button" class="filter-menu-button__button" aria-expanded="true">
209
209
  <span class="filter-menu-button__button-cell">
210
210
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
211
- <svg class="icon icon--chevron-down-12" focusable="false" height="12" width="12">
211
+ <svg class="icon icon--chevron-down-12" height="12" width="12">
212
212
  <use href="#icon-chevron-down-12"></use>
213
213
  </svg>
214
214
  </span>
@@ -217,10 +217,10 @@ export const overflow = () => `
217
217
  <div class="filter-menu-button__items" role="menu">
218
218
  <div class="filter-menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
219
219
  <span class="filter-menu-button__checkbox">
220
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
220
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
221
221
  <use href="#icon-checkbox-unchecked-18"></use>
222
222
  </svg>
223
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
223
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
224
224
  <use href="#icon-checkbox-checked-18"></use>
225
225
  </svg>
226
226
  </span>
@@ -228,10 +228,10 @@ export const overflow = () => `
228
228
  </div>
229
229
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
230
230
  <span class="filter-menu-button__checkbox">
231
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
231
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
232
232
  <use href="#icon-checkbox-unchecked-18"></use>
233
233
  </svg>
234
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
234
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
235
235
  <use href="#icon-checkbox-checked-18"></use>
236
236
  </svg>
237
237
  </span>
@@ -239,10 +239,10 @@ export const overflow = () => `
239
239
  </div>
240
240
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
241
241
  <span class="filter-menu-button__checkbox">
242
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
242
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
243
243
  <use href="#icon-checkbox-unchecked-18"></use>
244
244
  </svg>
245
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
245
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
246
246
  <use href="#icon-checkbox-checked-18"></use>
247
247
  </svg>
248
248
  </span>
@@ -250,10 +250,10 @@ export const overflow = () => `
250
250
  </div>
251
251
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
252
252
  <span class="filter-menu-button__checkbox">
253
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
253
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
254
254
  <use href="#icon-checkbox-unchecked-18"></use>
255
255
  </svg>
256
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
256
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
257
257
  <use href="#icon-checkbox-checked-18"></use>
258
258
  </svg>
259
259
  </span>
@@ -261,10 +261,10 @@ export const overflow = () => `
261
261
  </div>
262
262
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
263
263
  <span class="filter-menu-button__checkbox">
264
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
264
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
265
265
  <use href="#icon-checkbox-unchecked-18"></use>
266
266
  </svg>
267
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
267
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
268
268
  <use href="#icon-checkbox-checked-18"></use>
269
269
  </svg>
270
270
  </span>
@@ -272,10 +272,10 @@ export const overflow = () => `
272
272
  </div>
273
273
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
274
274
  <span class="filter-menu-button__checkbox">
275
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
275
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
276
276
  <use href="#icon-checkbox-unchecked-18"></use>
277
277
  </svg>
278
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
278
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
279
279
  <use href="#icon-checkbox-checked-18"></use>
280
280
  </svg>
281
281
  </span>
@@ -283,10 +283,10 @@ export const overflow = () => `
283
283
  </div>
284
284
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
285
285
  <span class="filter-menu-button__checkbox">
286
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
286
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
287
287
  <use href="#icon-checkbox-unchecked-18"></use>
288
288
  </svg>
289
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
289
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
290
290
  <use href="#icon-checkbox-checked-18"></use>
291
291
  </svg>
292
292
  </span>
@@ -294,10 +294,10 @@ export const overflow = () => `
294
294
  </div>
295
295
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
296
296
  <span class="filter-menu-button__checkbox">
297
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
297
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
298
298
  <use href="#icon-checkbox-unchecked-18"></use>
299
299
  </svg>
300
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
300
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
301
301
  <use href="#icon-checkbox-checked-18"></use>
302
302
  </svg>
303
303
  </span>
@@ -305,10 +305,10 @@ export const overflow = () => `
305
305
  </div>
306
306
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
307
307
  <span class="filter-menu-button__checkbox">
308
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
308
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
309
309
  <use href="#icon-checkbox-unchecked-18"></use>
310
310
  </svg>
311
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
311
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
312
312
  <use href="#icon-checkbox-checked-18"></use>
313
313
  </svg>
314
314
  </span>
@@ -316,10 +316,10 @@ export const overflow = () => `
316
316
  </div>
317
317
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
318
318
  <span class="filter-menu-button__checkbox">
319
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
319
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
320
320
  <use href="#icon-checkbox-unchecked-18"></use>
321
321
  </svg>
322
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
322
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
323
323
  <use href="#icon-checkbox-checked-18"></use>
324
324
  </svg>
325
325
  </span>
@@ -327,10 +327,10 @@ export const overflow = () => `
327
327
  </div>
328
328
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
329
329
  <span class="filter-menu-button__checkbox">
330
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
330
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
331
331
  <use href="#icon-checkbox-unchecked-18"></use>
332
332
  </svg>
333
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
333
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
334
334
  <use href="#icon-checkbox-checked-18"></use>
335
335
  </svg>
336
336
  </span>
@@ -338,10 +338,10 @@ export const overflow = () => `
338
338
  </div>
339
339
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
340
340
  <span class="filter-menu-button__checkbox">
341
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
341
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
342
342
  <use href="#icon-checkbox-unchecked-18"></use>
343
343
  </svg>
344
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
344
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
345
345
  <use href="#icon-checkbox-checked-18"></use>
346
346
  </svg>
347
347
  </span>
@@ -349,10 +349,10 @@ export const overflow = () => `
349
349
  </div>
350
350
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
351
351
  <span class="filter-menu-button__checkbox">
352
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
352
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
353
353
  <use href="#icon-checkbox-unchecked-18"></use>
354
354
  </svg>
355
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
355
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
356
356
  <use href="#icon-checkbox-checked-18"></use>
357
357
  </svg>
358
358
  </span>
@@ -360,10 +360,10 @@ export const overflow = () => `
360
360
  </div>
361
361
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
362
362
  <span class="filter-menu-button__checkbox">
363
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
363
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
364
364
  <use href="#icon-checkbox-unchecked-18"></use>
365
365
  </svg>
366
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
366
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
367
367
  <use href="#icon-checkbox-checked-18"></use>
368
368
  </svg>
369
369
  </span>
@@ -371,10 +371,10 @@ export const overflow = () => `
371
371
  </div>
372
372
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
373
373
  <span class="filter-menu-button__checkbox">
374
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
374
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
375
375
  <use href="#icon-checkbox-unchecked-18"></use>
376
376
  </svg>
377
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
377
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
378
378
  <use href="#icon-checkbox-checked-18"></use>
379
379
  </svg>
380
380
  </span>
@@ -382,10 +382,10 @@ export const overflow = () => `
382
382
  </div>
383
383
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
384
384
  <span class="filter-menu-button__checkbox">
385
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
385
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
386
386
  <use href="#icon-checkbox-unchecked-18"></use>
387
387
  </svg>
388
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
388
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
389
389
  <use href="#icon-checkbox-checked-18"></use>
390
390
  </svg>
391
391
  </span>
@@ -393,10 +393,10 @@ export const overflow = () => `
393
393
  </div>
394
394
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
395
395
  <span class="filter-menu-button__checkbox">
396
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
396
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
397
397
  <use href="#icon-checkbox-unchecked-18"></use>
398
398
  </svg>
399
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
399
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
400
400
  <use href="#icon-checkbox-checked-18"></use>
401
401
  </svg>
402
402
  </span>
@@ -404,10 +404,10 @@ export const overflow = () => `
404
404
  </div>
405
405
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
406
406
  <span class="filter-menu-button__checkbox">
407
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
407
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
408
408
  <use href="#icon-checkbox-unchecked-18"></use>
409
409
  </svg>
410
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
410
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
411
411
  <use href="#icon-checkbox-checked-18"></use>
412
412
  </svg>
413
413
  </span>
@@ -415,10 +415,10 @@ export const overflow = () => `
415
415
  </div>
416
416
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
417
417
  <span class="filter-menu-button__checkbox">
418
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
418
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
419
419
  <use href="#icon-checkbox-unchecked-18"></use>
420
420
  </svg>
421
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
421
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
422
422
  <use href="#icon-checkbox-checked-18"></use>
423
423
  </svg>
424
424
  </span>
@@ -426,10 +426,10 @@ export const overflow = () => `
426
426
  </div>
427
427
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
428
428
  <span class="filter-menu-button__checkbox">
429
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
429
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
430
430
  <use href="#icon-checkbox-unchecked-18"></use>
431
431
  </svg>
432
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
432
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
433
433
  <use href="#icon-checkbox-checked-18"></use>
434
434
  </svg>
435
435
  </span>
@@ -446,7 +446,7 @@ export const truncated = () => `
446
446
  <button aria-expanded="true" type="button" class="filter-menu-button__button">
447
447
  <span class="filter-menu-button__button-cell">
448
448
  <span class="filter-menu-button__button-text">Filter Menu Button with a lot of text that will truncate</span>
449
- <svg class="icon icon--chevron-down-12" focusable="false" height="12" width="12">
449
+ <svg class="icon icon--chevron-down-12" height="12" width="12">
450
450
  <use href="#icon-chevron-down-12"></use>
451
451
  </svg>
452
452
  </span>
@@ -455,10 +455,10 @@ export const truncated = () => `
455
455
  <div class="filter-menu-button__items" role="menu">
456
456
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
457
457
  <span class="filter-menu-button__checkbox">
458
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
458
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
459
459
  <use href="#icon-checkbox-unchecked-18"></use>
460
460
  </svg>
461
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
461
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
462
462
  <use href="#icon-checkbox-checked-18"></use>
463
463
  </svg>
464
464
  </span>
@@ -466,10 +466,10 @@ export const truncated = () => `
466
466
  </div>
467
467
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
468
468
  <span class="filter-menu-button__checkbox">
469
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
469
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
470
470
  <use href="#icon-checkbox-unchecked-18"></use>
471
471
  </svg>
472
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
472
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
473
473
  <use href="#icon-checkbox-checked-18"></use>
474
474
  </svg>
475
475
  </span>
@@ -477,10 +477,10 @@ export const truncated = () => `
477
477
  </div>
478
478
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
479
479
  <span class="filter-menu-button__checkbox">
480
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
480
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
481
481
  <use href="#icon-checkbox-unchecked-18"></use>
482
482
  </svg>
483
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
483
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
484
484
  <use href="#icon-checkbox-checked-18"></use>
485
485
  </svg>
486
486
  </span>
@@ -498,7 +498,7 @@ export const RTL = () => `
498
498
  <button type="button" class="filter-menu-button__button" aria-expanded="true">
499
499
  <span class="filter-menu-button__button-cell">
500
500
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
501
- <svg class="icon icon--chevron-down-12" focusable="false" height="12" width="12">
501
+ <svg class="icon icon--chevron-down-12" height="12" width="12">
502
502
  <use href="#icon-chevron-down-12"></use>
503
503
  </svg>
504
504
  </span>
@@ -507,10 +507,10 @@ export const RTL = () => `
507
507
  <div class="filter-menu-button__items" role="menu">
508
508
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
509
509
  <span class="filter-menu-button__checkbox">
510
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
510
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
511
511
  <use href="#icon-checkbox-unchecked-18"></use>
512
512
  </svg>
513
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
513
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
514
514
  <use href="#icon-checkbox-checked-18"></use>
515
515
  </svg>
516
516
  </span>
@@ -518,10 +518,10 @@ export const RTL = () => `
518
518
  </div>
519
519
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
520
520
  <span class="filter-menu-button__checkbox">
521
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
521
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
522
522
  <use href="#icon-checkbox-unchecked-18"></use>
523
523
  </svg>
524
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
524
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
525
525
  <use href="#icon-checkbox-checked-18"></use>
526
526
  </svg>
527
527
  </span>
@@ -529,10 +529,10 @@ export const RTL = () => `
529
529
  </div>
530
530
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
531
531
  <span class="filter-menu-button__checkbox">
532
- <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
532
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
533
533
  <use href="#icon-checkbox-unchecked-18"></use>
534
534
  </svg>
535
- <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
535
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
536
536
  <use href="#icon-checkbox-checked-18"></use>
537
537
  </svg>
538
538
  </span>
package/src/less/floating-label/stories/floating-label.stories.js CHANGED
@@ -102,7 +102,7 @@ export const select = () => `
102
102
  <option value="item2">Pick Option 2</option>
103
103
  <option value="item3">Pick Option 3</option>
104
104
  </select>
105
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
105
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
106
106
  <use href="#icon-chevron-down-12"></use>
107
107
  </svg>
108
108
  </span>
@@ -119,7 +119,7 @@ export const selectInline = () => `
119
119
  <option value="item2">Pick Option 2</option>
120
120
  <option value="item3">Pick Option 3</option>
121
121
  </select>
122
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
122
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
123
123
  <use href="#icon-chevron-down-12"></use>
124
124
  </svg>
125
125
  </span>
@@ -136,7 +136,7 @@ export const selectInlineDoubled = () => `
136
136
  <option value="item2">Pick Option 2</option>
137
137
  <option value="item3">Pick Option 3</option>
138
138
  </select>
139
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
139
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
140
140
  <use href="#icon-chevron-down-12"></use>
141
141
  </svg>
142
142
  </span>
@@ -150,7 +150,7 @@ export const selectInlineDoubled = () => `
150
150
  <option value="item2">Pick Option 2</option>
151
151
  <option value="item3">Pick Option 3</option>
152
152
  </select>
153
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
153
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
154
154
  <use href="#icon-chevron-down-12"></use>
155
155
  </svg>
156
156
  </span>
@@ -169,7 +169,7 @@ export const RTLSelectInline = () => `
169
169
  <option value="item2">Pick Option 2</option>
170
170
  <option value="item3">Pick Option 3</option>
171
171
  </select>
172
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
172
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
173
173
  <use href="#icon-chevron-down-12"></use>
174
174
  </svg>
175
175
  </span>